PDJ Brandbox

switch 

<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.