feat(cc-zone-picker): init component

src/components/cc-zone-picker/cc-zone-picker.js

@@ -0,0 +1,174 @@
+import { css, html } from 'lit';
+import { CcFormControlElement } from '../../lib/form/cc-form-control-element.abstract.js';
+import { accessibilityStyles } from '../../styles/accessibility.js';
+import { i18n } from '../../translations/translation.js';
+import '../cc-badge/cc-badge.js';
+import '../cc-icon/cc-icon.js';
+import '../cc-img/cc-img.js';
+import '../cc-notice/cc-notice.js';
+import '../cc-zone-card/cc-zone-card.js';
+
+import { iconRemixEarthLine as zoneIcon } from '../../assets/cc-remix.icons.js';
+import { isStringEmpty } from '../../lib/utils.js';
+
+/**
+ * @typedef {import('./cc-zone-picker.types.js').ZoneItem} ZoneItem
+ * @typedef {import('./cc-zone-picker.types.js').ZoneSection} ZoneSection
+ * @typedef {import('../../lib/events.types.js').EventWithTarget<HTMLInputElement>} HTMLInputElementEvent
+ */
+
+/**
+ * A component that allows you to select a zone from a list of zones sections.
+ *
+ * @cssdisplay block
+ */
+export class CcZonePicker extends CcFormControlElement {
+  static get properties() {
+    return {
+      ...super.properties,
+      value: { type: String },
+      zonesSection: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+
+    /** @type {Array<ZoneSection>} array of zones section */
+    this.zonesSection = [];
+
+    /** @type {string} current selected zone code */
+    this.value = null;
+  }
+
+  /**
+   * @param {HTMLInputElementEvent} e
+   */
+  _onZoneSelect(e) {
+    this.value = e.target.value;
+  }
+
+  render() {
+    return html`
+      <form>
+        <fieldset @change="${this._onZoneSelect}">
+          <legend>
+            <cc-icon class="zone-legend-icon" .icon="${zoneIcon}" size="lg"></cc-icon>
+            <span class="zone-legend-text"> ${i18n('cc-zone-picker.legend')} </span>
+          </legend>
+          <div class="zone-section">
+            ${this.zonesSection.map(
+              (zoneSection) => html`
+                ${!isStringEmpty(zoneSection.title)
+                  ? html` <div class="zone-section-title">${zoneSection.title}</div> `
+                  : ''}
+                <div class="form-controls">
+                  ${zoneSection.zones.map((zone) => this._renderZoneCard(zone, this.value))}
+                </div>
+              `,
+            )}
+          </div>
+        </fieldset>
+      </form>
+    `;
+  }
+
+  /**
+   * @param {ZoneItem} zone
+   * @param {string} selectedZoneCode
+   */
+  _renderZoneCard(zone, selectedZoneCode) {
+    const isSelected = zone.code === selectedZoneCode;
+    return html`
+      <div>
+        <input
+          class="visually-hidden"
+          type="radio"
+          name="zone"
+          .value="${zone.code}"
+          ?disabled=${zone.disabled}
+          ?checked="${isSelected}"
+          id="${zone.code}"
+        />
+        <label for="${zone.code}">
+          <cc-zone-card
+            ?selected="${isSelected}"
+            ?disabled="${zone.disabled}"
+            name="${zone.name}"
+            country="${zone.country}"
+            code="${zone.code}"
+            flagUrl="${zone.flagUrl}"
+            .images="${zone.images}"
+          ></cc-zone-card>
+        </label>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return [
+      accessibilityStyles,
+      // language=CSS
+      css`
+        :host {
+          display: block;
+        }
+
+        legend {
+          display: flex;
+          gap: 0.25em;
+        }
+
+        .form-controls {
+          display: grid;
+          gap: 1em;
+          grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr));
+          margin: 1em 0 0 2em;
+        }
+
+        .zone-legend-icon {
+          --cc-icon-color: var(--cc-color-text-primary);
+
+          align-self: center;
+        }
+
+        .zone-legend-text {
+          color: var(--cc-color-text-primary-strongest);
+          font-family: var(--cc-ff-form-legend), inherit;
+          font-size: 1.625em;
+          font-weight: 500;
+        }
+
+        .zone-section-title {
+          color: var(--cc-color-text-primary-strongest);
+          font-family: var(--cc-ff-form-legend), inherit;
+          margin: 1em 1.85em;
+          font-size: 1.15em;
+        }
+
+        .private-zones,
+        .public-zones {
+          margin: 1em 0;
+        }
+
+        fieldset {
+          border: none;
+          margin: 0;
+          padding: 0;
+        }
+
+        cc-zone-card {
+          height: 100%;
+        }
+
+        input[type='radio']:focus-visible + label cc-zone-card {
+          border-radius: 2px;
+          outline: var(--cc-focus-outline, #000 solid 2px);
+          outline-offset: var(--cc-focus-outline-offset, 2px);
+        }
+      `,
+    ];
+  }
+}
+
+window.customElements.define('cc-zone-picker', CcZonePicker);