<div class="switch">
    <div class="switch__item">
        <input class="switch__input" type="radio" name="switch" id="offline" checked>

        <label class="switch__label" for="offline">
            Stores
        </label>
    </div>
    <div class="switch__item">
        <input class="switch__input" type="radio" name="switch" id="online">

        <label class="switch__label" for="online">
            Online stores
        </label>
    </div>
</div>
<div class="switch">
  {{#each options}}
    <div class="switch__item">
      <input class="switch__input" type="radio" name="switch" id="{{this.id}}"{{#if checked}} checked{{/if}}>

      <label class="switch__label" for="{{this.id}}">
        {{this.label}}
      </label>
    </div>
  {{/each}}
</div>
options:
  - label: Stores
    id: offline
    checked: true
  - label: Online stores
    id: online
  • Content:
    const SWITCH = ((w, d, undefined) => {
    
      'use strict';
    
      const selectors = {
        theTrigger: '.switch__input',
      };
    
      const classes = {
        isActiveSuffix: '--is-active',
      };
    
      const els = {};
    
      const state = {
        active: null,
        triggers: {},
      };
    
      const init = () => {
        els.theTriggers = d.querySelectorAll(selectors.theTrigger);
    
        [...els.theTriggers].forEach((theTrigger) => {
          state.triggers[theTrigger.id] = theTrigger;
    
          if (theTrigger.checked) {
            setActive(theTrigger.id);
          }
    
          theTrigger.addEventListener('change', () => {
            if (theTrigger.checked) {
              setActive(theTrigger.id);
            }
          });
        });
      };
    
      const setActive = (id) => {
        if (!id) {
          return;
        };
    
        d.body.classList.remove(`${state.active}${classes.isActiveSuffix}`);
        d.body.classList.add(`${id}${classes.isActiveSuffix}`);
    
        state.active = id;
      };
    
      d.addEventListener('DOMContentLoaded', init);
    
    })(window, window.document);
    
  • URL: /components/raw/switch/switch.js
  • Filesystem Path: ../src/02_atoms/switch/switch.js
  • Size: 988 Bytes
  • Content:
    .switch {
      display: flex;
      height: var(--atom-height);
      border: 1px solid var(--color--neutrals-10);
    }
    
    .switch__item {
      position: relative;
      flex: 0 0 50%;
      display: flex;
    
      @media (min-width: 750px) {
        flex: 0 0 auto;
      }
    }
    
    .switch__input {
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
      appearance: none;
      opacity: 0;
    }
    
    .switch__label {
      transition: background-color 150ms, color 150ms;
      display: flex;
      align-items: center;
      white-space: nowrap;
      justify-content: center;
      width: 100%;
      min-width: 100px;
      height: var(--atom-height);
      padding: 0 calc(var(--gap) * 6);
      cursor: pointer;
      user-select: none;
    
      @media (min-width: 750px) {
        width: auto;
        min-width: 100px;
      }
    
      .switch__input:checked + & {
        color: var(--color--neutrals-0);
        background-color: var(--color--neutrals-10);
        cursor: initial;
      }
    }
    
  • URL: /components/raw/switch/switch.scss
  • Filesystem Path: ../src/02_atoms/switch/switch.scss
  • Size: 891 Bytes

No notes defined.