<div class="js-country-selector-wrapper">
    <div class="country-selector js-country-selector">

        <span class="country-selector__chosen-region js-country-selector-chosen-region">North America</span>
        <div class="country-selector__map js-country-selector-map" style="background-image:url('/assets/images/world-map-north-america.png');"></div>

        <div class="accordion-tabs accordion-tabs--country-selector js-accordion-tabs">
            <div class="accordion-tabs__tabs" role="tablist">
                <button class="accordion-tabs__tab js-accordion-tabs-tab js-country-selector-tab-button" id="tab-north-america" aria-expanded="true" aria-controls="panel-north-america" role="tab" data-tab="north-america" data-map="/assets/images/world-map-north-america.png"
                    data-value="North America">
            North America
        </button>
                <button class="accordion-tabs__tab js-accordion-tabs-tab js-country-selector-tab-button" id="tab-europe" aria-expanded="false" aria-controls="panel-europe" role="tab" data-tab="europe" data-map="/assets/images/world-map-europe.png" data-value="Europe">
            Europe
        </button>
                <button class="accordion-tabs__tab js-accordion-tabs-tab js-country-selector-tab-button" id="tab-africa" aria-expanded="false" aria-controls="panel-africa" role="tab" data-tab="africa" data-map="/assets/images/world-map-africa.png" data-value="Africa">
            Africa
        </button>
                <button class="accordion-tabs__tab js-accordion-tabs-tab js-country-selector-tab-button" id="tab-middle-east" aria-expanded="false" aria-controls="panel-middle-east" role="tab" data-tab="middle-east" data-map="/assets/images/world-map-middle-east.png"
                    data-value="Middle East">
            Middle East
        </button>
                <button class="accordion-tabs__tab js-accordion-tabs-tab js-country-selector-tab-button" id="tab-asia-pacific" aria-expanded="false" aria-controls="panel-asia-pacific" role="tab" data-tab="asia-pacific" data-map="/assets/images/world-map-asia-pacific.png"
                    data-value="Asia Pacific">
            Asia Pacific
        </button>
            </div>

            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper country-selector__tab">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-north-america" aria-expanded="true" aria-controls="panel-north-america" role="tab" data-tab="north-america" data-map="/assets/images/world-map-north-america.png">
          North America
          <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

        </button>
                <div class="accordion-tabs__content js-accordion-tabs-content country-selector__region country-selector__region--north-america js-country-selector-region js-country-selector-region--default" id="panel-north-america" aria-labelledby="tab-north-america"
                    aria-hidden="false" role="tabpanel" data-tab="north-america">
                    <ul class="country-selector__region-list country-selector__region-list--north-america">
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">American Samoa</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Canada</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Guam</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Mexico</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Puerto Rico</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">United States</a>
                        </li>
                        <li class="country-selector__country  js-country-selector-last-country">
                            <a class="country-selector__country-link" href="#" tabindex="0">Virgin Islands US</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper country-selector__tab country-selector__tab--three-col">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-europe" aria-expanded="false" aria-controls="panel-europe" role="tab" data-tab="europe" data-map="/assets/images/world-map-europe.png">
          Europe
          <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

        </button>
                <div class="accordion-tabs__content js-accordion-tabs-content country-selector__region country-selector__region--europe js-country-selector-region" id="panel-europe" aria-labelledby="tab-europe" aria-hidden="true" role="tabpanel" data-tab="europe">
                    <ul class="country-selector__region-list country-selector__region-list--europe">
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Austria</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Belgium</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Croatia</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Cyprus</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Czech Republic</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Denmark</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Estonia</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Finland</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">France</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Germany</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Greece</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Hungary</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Ireland</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Italy</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Luxembourg</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Malta</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Netherlands</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Norway</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Poland</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Portugal</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Romania</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Slovakia</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Slovenia</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Spain</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Sweden</a>
                        </li>
                        <li class="country-selector__country  js-country-selector-last-country">
                            <a class="country-selector__country-link" href="#" tabindex="0">United Kingdom</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper country-selector__tab">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-africa" aria-expanded="false" aria-controls="panel-africa" role="tab" data-tab="africa" data-map="/assets/images/world-map-africa.png">
          Africa
          <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

        </button>
                <div class="accordion-tabs__content js-accordion-tabs-content country-selector__region country-selector__region--africa js-country-selector-region" id="panel-africa" aria-labelledby="tab-africa" aria-hidden="true" role="tabpanel" data-tab="africa">
                    <ul class="country-selector__region-list country-selector__region-list--africa">
                        <li class="country-selector__country  js-country-selector-last-country">
                            <a class="country-selector__country-link" href="#" tabindex="0">South Africa</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper country-selector__tab">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-middle-east" aria-expanded="false" aria-controls="panel-middle-east" role="tab" data-tab="middle-east" data-map="/assets/images/world-map-middle-east.png">
          Middle East
          <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

        </button>
                <div class="accordion-tabs__content js-accordion-tabs-content country-selector__region country-selector__region--middle-east js-country-selector-region" id="panel-middle-east" aria-labelledby="tab-middle-east" aria-hidden="true" role="tabpanel" data-tab="middle-east">
                    <ul class="country-selector__region-list country-selector__region-list--middle-east">
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Saudi Arabia</a>
                        </li>
                        <li class="country-selector__country  js-country-selector-last-country">
                            <a class="country-selector__country-link" href="#" tabindex="0">United Arab Emirates</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper country-selector__tab country-selector__tab--two-col">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-asia-pacific" aria-expanded="false" aria-controls="panel-asia-pacific" role="tab" data-tab="asia-pacific" data-map="/assets/images/world-map-asia-pacific.png">
          Asia Pacific
          <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

        </button>
                <div class="accordion-tabs__content js-accordion-tabs-content country-selector__region country-selector__region--asia-pacific js-country-selector-region" id="panel-asia-pacific" aria-labelledby="tab-asia-pacific" aria-hidden="true" role="tabpanel" data-tab="asia-pacific">
                    <ul class="country-selector__region-list country-selector__region-list--asia-pacific">
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Australia</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Hong Kong</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Singapore</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Malaysia</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Thailand</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">South Korea</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Japan</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Indonesia</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Philippines</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Taiwan</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">Vietnam</a>
                        </li>
                        <li class="country-selector__country ">
                            <a class="country-selector__country-link" href="#" tabindex="0">India</a>
                        </li>
                        <li class="country-selector__country  js-country-selector-last-country">
                            <a class="country-selector__country-link" href="#" tabindex="0">New Zealand</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="js-country-selector-wrapper">
  <div class="country-selector js-country-selector">

    {{#each items}}
      {{#if default}}
        <span class="country-selector__chosen-region js-country-selector-chosen-region">{{label}}</span>
        <div class="country-selector__map js-country-selector-map" style="background-image:url('{{map}}');"></div>
      {{/if}}
    {{/each}}

    <div class="accordion-tabs accordion-tabs--country-selector js-accordion-tabs">
      <div class="accordion-tabs__tabs" role="tablist">
        {{#each items}}
        <button class="accordion-tabs__tab js-accordion-tabs-tab js-country-selector-tab-button"
          id="tab-{{id}}" aria-expanded="{{#if default}}true{{else}}false{{/if}}"
          aria-controls="panel-{{id}}" role="tab" data-tab="{{id}}"
          data-map="/assets/images/world-map-{{id}}.png" data-value="{{label}}">
            {{label}}
        </button>
        {{/each}}
      </div>

      {{#each items}}
      <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper country-selector__tab{{#if tabModifiers}} country-selector__tab--{{tabModifiers}}{{/if}}">
        <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-{{id}}"
          aria-expanded="{{#if active}}true{{else}}false{{/if}}" aria-controls="panel-{{id}}" role="tab"
          data-tab="{{id}}"
          data-map="/assets/images/world-map-{{id}}.png">
          {{label}}
          {{render '@icons--arrow-down'}}
          {{render '@icons--arrow-up'}}
        </button>
        <div class="accordion-tabs__content js-accordion-tabs-content country-selector__region country-selector__region--{{id}} js-country-selector-region{{#if default}} js-country-selector-region--default{{/if}}"
          id="panel-{{id}}" aria-labelledby="tab-{{id}}"
          aria-hidden="{{#if active}}false{{else}}true{{/if}}" role="tabpanel"
          data-tab="{{id}}">
          <ul class="country-selector__region-list country-selector__region-list--{{id}}">
            {{#each content}}
            <li class="country-selector__country {{#if @last}} js-country-selector-last-country{{/if}}">
              <a class="country-selector__country-link" href="#" tabindex="0">{{this}}</a>
            </li>
            {{/each}}
          </ul>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</div>
{
  "items": [
    {
      "id": "north-america",
      "label": "North America",
      "active": true,
      "default": true,
      "map": "/assets/images/world-map-north-america.png",
      "content": [
        "American Samoa",
        "Canada",
        "Guam",
        "Mexico",
        "Puerto Rico",
        "United States",
        "Virgin Islands US"
      ]
    },
    {
      "id": "europe",
      "label": "Europe",
      "map": "/assets/images/world-map-europe.png",
      "tabModifiers": "three-col",
      "content": [
        "Austria",
        "Belgium",
        "Croatia",
        "Cyprus",
        "Czech Republic",
        "Denmark",
        "Estonia",
        "Finland",
        "France",
        "Germany",
        "Greece",
        "Hungary",
        "Ireland",
        "Italy",
        "Luxembourg",
        "Malta",
        "Netherlands",
        "Norway",
        "Poland",
        "Portugal",
        "Romania",
        "Slovakia",
        "Slovenia",
        "Spain",
        "Sweden",
        "United Kingdom"
      ]
    },
    {
      "id": "africa",
      "label": "Africa",
      "map": "/assets/images/world-map-africa.png",
      "content": [
        "South Africa"
      ]
    },
    {
      "id": "middle-east",
      "label": "Middle East",
      "map": "/assets/images/world-map-middle-east.png",
      "content": [
        "Saudi Arabia",
        "United Arab Emirates"
      ]
    },
    {
      "id": "asia-pacific",
      "label": "Asia Pacific",
      "map": "/assets/images/world-map-asia-pacific.png",
      "tabModifiers": "two-col",
      "content": [
        "Australia",
        "Hong Kong",
        "Singapore",
        "Malaysia",
        "Thailand",
        "South Korea",
        "Japan",
        "Indonesia",
        "Philippines",
        "Taiwan",
        "Vietnam",
        "India",
        "New Zealand"
      ]
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const countrySelector = document.querySelector('.js-country-selector');
      // If there is no country selector on the page, do nothing.
      if (!countrySelector) return;
    
      const map = countrySelector.querySelector('.js-country-selector-map');
    
      if (countrySelector && map) {
        const tabs = countrySelector.querySelectorAll('.js-country-selector-tab-button, .js-accordion-tabs-accordion-control');
        tabs.forEach(function (tab) {
          tab.addEventListener('click', changeMap);
        });
      }
    
      function changeMap(e) {
        map.style.backgroundImage = "url('" + this.getAttribute('data-map') + "')";
      }
    })(this);
    
  • URL: /components/raw/country-selector/country-selector.js
  • Filesystem Path: src/components/02-components/country-selector/country-selector.js
  • Size: 652 Bytes
  • Content:
    $column-width-narrow: 140px;
    $column-width-wide: 180px;
    
    .country-selector {
      color: $color-darkest;
    }
    
    .country-selector__chosen-region {
      display: none;
    }
    
    .country-selector__map {
      display: block;
      max-width: 346px;
      height: 202px;
      margin: 0 auto;
      background-repeat: no-repeat;
      background-size: contain;
    
      @include breakpoint($breakpoint-sm-only) {
        padding-top: 10px;
        // Overrides JS that changes the image per active/selected region.
        background-image: url('../images/world-map-empty.png');
        background-position: 0 10px;
      }
    }
    
    .country-selector__region {
      @include breakpoint($breakpoint-md) {
        width: $column-width-narrow;
    
        // Ensure multi-column containers have higher z-index than neighboring list
        // items. Without this, the next regions are rendered over the container.
        .country-selector__tab--two-col &,
        .country-selector__tab--three-col & {
          position: relative;
          z-index: 1;
        }
    
        // Calculate total width using the total number of columns and gutters.
        // This keeps the container wide enough to accommodate the columns, yet
        // tight enough to avoid extra space at either side.
        .country-selector__tab--two-col &  {
          width: ($column-width-narrow * 2) + $gutter-width;
        }
    
        .country-selector__tab--three-col &  {
          width: ($column-width-narrow * 3) + ($gutter-width * 2);
        }
    
        &--europe {
          margin-left: if($brand == 'zeal', 33.333%, 20%);
        }
    
        &--africa {
          margin-left: 40%;
        }
    
        &--middle-east,
        &--asia-pacific {
          margin-left: if($brand == 'zeal', 66.666%, 60%);
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        width: $column-width-wide;
    
        .country-selector__tab--two-col & {
          width: ($column-width-wide * 2) + $gutter-width;
        }
    
        .country-selector__tab--three-col & {
          width: ($column-width-wide * 3) + ($gutter-width * 2);
        }
      }
    }
    
    .country-selector__region-list {
      @include reset-list;
      margin: 12px 0;
      font-size: 1.4rem;
    
      @include breakpoint($breakpoint-md) {
        width: 100%;
      }
    
      .country-selector__tab--two-col &,
      .country-selector__tab--three-col & {
        @include breakpoint($breakpoint-md) {
          display: inline-block;
          column-gap: $gutter-width;
          column-width: $column-width-narrow;
    
          .country-selector__country {
            break-inside: avoid-column;
          }
        }
    
        @include breakpoint($breakpoint-lg) {
          column-width: $column-width-wide;
        }
    
        @include breakpoint($breakpoint-xl) {
          column-rule: 1px solid $color-light;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .country-selector__tab--two-col & {
          column-count: 2;
        }
    
        .country-selector__tab--three-col & {
          column-count: 3;
        }
      }
    }
    
    .country-selector__country-link {
      display: block;
      padding: 5px 0;
      transition: $transition-standard;
      color: $color-darkest;
      text-align: left;
      text-decoration: none;
      text-transform: none;
    
      &:hover,
      &:focus {
        color: $color-primary;
      }
    
      @include breakpoint($breakpoint-md) {
        line-height: 2.0rem;
      }
    }
    
  • URL: /components/raw/country-selector/country-selector.scss
  • Filesystem Path: src/components/02-components/country-selector/country-selector.scss
  • Size: 3.1 KB

There are no notes for this item.