Copy environment

Time Slot 

<div class="time-slot js-time-slot">
    <fieldset>
        <legend class="h-visually-hidden">Kohaletoimetamise aeg</legend>
        <div class="time-slot__items">
            <input type="radio" id="pickup-time--1" class="radio__input">
            <label class="time-slot__label js-time-slot-label" for="pickup-time--1">
                <span class="time-slot__icon">
                    <svg class="icon  " focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
                    </svg>
                </span>
                <span></span> - <span></span>
            </label>
            <input type="radio" id="pickup-time--2" class="radio__input">
            <label class="time-slot__label js-time-slot-label" for="pickup-time--2">
                <span class="time-slot__icon">
                    <svg class="icon  " focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
                    </svg>
                </span>
                <span></span> - <span></span>
            </label>
        </div>
    </fieldset>
</div>
 
<div class="time-slot js-time-slot">
    <fieldset>
        <legend class="h-visually-hidden">Kohaletoimetamise aeg</legend>
        <div class="time-slot__items">
            {% for item in data %}
                <input
                    type="radio"
                    id="pickup-time--{{ loop.index }}"
                    class="radio__input"
                >
                <label {{ class('time-slot__label js-time-slot-label', [
                    item.disabled ? 'time-slot__label--disabled' : '',
                    item.active ? 'time-slot__label--active' : ''
                ]) }}
                    for="pickup-time--{{ loop.index }}"
                >
                    <span class="time-slot__icon">
                        {% include '@icon' with { name: 'circle-check' } %}
                    </span>
                    <span>{{ item.start }}</span> - <span>{{ item.end }}</span>
                </label>
            {% endfor %}
        </div>
    </fieldset>
</div>

{
  "language": "en-US",
  "data": {
    "start": "8:00",
    "end": "10:00"
  }
}
  • Content: 
    .time-slot {
    position: relative;
}

.time-slot__label {
    background: $L-background;
    padding: 4px;
    letter-spacing: $letter-spacing-50;
    line-height: calc(24 / 14);
    font-size: 14px;
    color: $L-text-weak-active;
    box-shadow: $elevation-02;
    border-radius: $border-radius-small;
    /* stylelint-disable-next-line */
    width: max-content;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
}

.time-slot__label--disabled {
    text-decoration: line-through;
    background: $L-background-disabled;
    box-shadow: none;
    pointer-events: none;
}

.time-slot__label--active {
    background: $L-success-background;
    color: $L-text-success;
}

.time-slot__items {
    display: flex;
    gap: 6px 8px;
    flex-wrap: wrap;
}

.time-slot__icon {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    color: $L-icon-success;
    font-size: 16px;
    display: none;
    align-items: center;

    .time-slot__label--active & {
        display: flex;
    }
}
  • URL: /components/raw/time-slot/time-slot.scss
  • Filesystem Path: src/patterns/components/time-slot/time-slot.scss
  • Size: 1 KB
  • Content: 
    import './time-slot.scss';

import Component from '../component/component';

export default class TimeSlot extends Component {
    static initSelector: string = '.js-time-slot';

    labels: NodeListOf<HTMLLabelElement>;
    el: HTMLElement;

    constructor(target: HTMLElement) {
        super(target);

        this.labels = target.querySelectorAll('.js-time-slot-label');
        this.el = target;

        if (!this.labels) {
            return;
        }

        this.labels.forEach((label: HTMLLabelElement) => {
            label.addEventListener('click', () => {
                this.handleActiveLabelChange(label);
            });
        });
    }

    initLabels(): void {
        this.el.querySelectorAll('label').forEach((label: HTMLLabelElement) => {
            label.classList.remove('time-slot__label--active');
        });
    }

    handleActiveLabelChange(label: HTMLLabelElement): void {
        this.initLabels();
        label.classList.add('time-slot__label--active');
    }
}
  • URL: /components/raw/time-slot/time-slot.ts
  • Filesystem Path: src/patterns/components/time-slot/time-slot.ts
  • Size: 1 KB
  • Handle: @time-slot--default
  • Filesystem Path: src/patterns/components/time-slot/time-slot.twig
  • References (1): @icon
  • Referenced by (1): @pickup-method

Disabled 

<div class="time-slot js-time-slot">
    <fieldset>
        <legend class="h-visually-hidden">Kohaletoimetamise aeg</legend>
        <div class="time-slot__items">
            <input type="radio" id="pickup-time--1" class="radio__input">
            <label class="time-slot__label js-time-slot-label" for="pickup-time--1">
                <span class="time-slot__icon">
                    <svg class="icon  " focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
                    </svg>
                </span>
                <span></span> - <span></span>
            </label>
            <input type="radio" id="pickup-time--2" class="radio__input">
            <label class="time-slot__label js-time-slot-label" for="pickup-time--2">
                <span class="time-slot__icon">
                    <svg class="icon  " focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
                    </svg>
                </span>
                <span></span> - <span></span>
            </label>
            <input type="radio" id="pickup-time--3" class="radio__input">
            <label class="time-slot__label js-time-slot-label" for="pickup-time--3">
                <span class="time-slot__icon">
                    <svg class="icon  " focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
                    </svg>
                </span>
                <span></span> - <span></span>
            </label>
        </div>
    </fieldset>
</div>
 
<div class="time-slot js-time-slot">
    <fieldset>
        <legend class="h-visually-hidden">Kohaletoimetamise aeg</legend>
        <div class="time-slot__items">
            {% for item in data %}
                <input
                    type="radio"
                    id="pickup-time--{{ loop.index }}"
                    class="radio__input"
                >
                <label {{ class('time-slot__label js-time-slot-label', [
                    item.disabled ? 'time-slot__label--disabled' : '',
                    item.active ? 'time-slot__label--active' : ''
                ]) }}
                    for="pickup-time--{{ loop.index }}"
                >
                    <span class="time-slot__icon">
                        {% include '@icon' with { name: 'circle-check' } %}
                    </span>
                    <span>{{ item.start }}</span> - <span>{{ item.end }}</span>
                </label>
            {% endfor %}
        </div>
    </fieldset>
</div>

{
  "language": "en-US",
  "data": {
    "start": "8:00",
    "end": "10:00",
    "disabled": true
  }
}
  • Content: 
    .time-slot {
    position: relative;
}

.time-slot__label {
    background: $L-background;
    padding: 4px;
    letter-spacing: $letter-spacing-50;
    line-height: calc(24 / 14);
    font-size: 14px;
    color: $L-text-weak-active;
    box-shadow: $elevation-02;
    border-radius: $border-radius-small;
    /* stylelint-disable-next-line */
    width: max-content;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
}

.time-slot__label--disabled {
    text-decoration: line-through;
    background: $L-background-disabled;
    box-shadow: none;
    pointer-events: none;
}

.time-slot__label--active {
    background: $L-success-background;
    color: $L-text-success;
}

.time-slot__items {
    display: flex;
    gap: 6px 8px;
    flex-wrap: wrap;
}

.time-slot__icon {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    color: $L-icon-success;
    font-size: 16px;
    display: none;
    align-items: center;

    .time-slot__label--active & {
        display: flex;
    }
}
  • URL: /components/raw/time-slot/time-slot.scss
  • Filesystem Path: src/patterns/components/time-slot/time-slot.scss
  • Size: 1 KB
  • Content: 
    import './time-slot.scss';

import Component from '../component/component';

export default class TimeSlot extends Component {
    static initSelector: string = '.js-time-slot';

    labels: NodeListOf<HTMLLabelElement>;
    el: HTMLElement;

    constructor(target: HTMLElement) {
        super(target);

        this.labels = target.querySelectorAll('.js-time-slot-label');
        this.el = target;

        if (!this.labels) {
            return;
        }

        this.labels.forEach((label: HTMLLabelElement) => {
            label.addEventListener('click', () => {
                this.handleActiveLabelChange(label);
            });
        });
    }

    initLabels(): void {
        this.el.querySelectorAll('label').forEach((label: HTMLLabelElement) => {
            label.classList.remove('time-slot__label--active');
        });
    }

    handleActiveLabelChange(label: HTMLLabelElement): void {
        this.initLabels();
        label.classList.add('time-slot__label--active');
    }
}
  • URL: /components/raw/time-slot/time-slot.ts
  • Filesystem Path: src/patterns/components/time-slot/time-slot.ts
  • Size: 1 KB
  • Handle: @time-slot--disabled
  • Filesystem Path: src/patterns/components/time-slot/time-slot.twig
  • References (1): @icon

Active 

<div class="time-slot js-time-slot">
    <fieldset>
        <legend class="h-visually-hidden">Kohaletoimetamise aeg</legend>
        <div class="time-slot__items">
            <input type="radio" id="pickup-time--1" class="radio__input">
            <label class="time-slot__label js-time-slot-label" for="pickup-time--1">
                <span class="time-slot__icon">
                    <svg class="icon  " focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
                    </svg>
                </span>
                <span></span> - <span></span>
            </label>
            <input type="radio" id="pickup-time--2" class="radio__input">
            <label class="time-slot__label js-time-slot-label" for="pickup-time--2">
                <span class="time-slot__icon">
                    <svg class="icon  " focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
                    </svg>
                </span>
                <span></span> - <span></span>
            </label>
            <input type="radio" id="pickup-time--3" class="radio__input">
            <label class="time-slot__label js-time-slot-label" for="pickup-time--3">
                <span class="time-slot__icon">
                    <svg class="icon  " focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
                    </svg>
                </span>
                <span></span> - <span></span>
            </label>
        </div>
    </fieldset>
</div>
 
<div class="time-slot js-time-slot">
    <fieldset>
        <legend class="h-visually-hidden">Kohaletoimetamise aeg</legend>
        <div class="time-slot__items">
            {% for item in data %}
                <input
                    type="radio"
                    id="pickup-time--{{ loop.index }}"
                    class="radio__input"
                >
                <label {{ class('time-slot__label js-time-slot-label', [
                    item.disabled ? 'time-slot__label--disabled' : '',
                    item.active ? 'time-slot__label--active' : ''
                ]) }}
                    for="pickup-time--{{ loop.index }}"
                >
                    <span class="time-slot__icon">
                        {% include '@icon' with { name: 'circle-check' } %}
                    </span>
                    <span>{{ item.start }}</span> - <span>{{ item.end }}</span>
                </label>
            {% endfor %}
        </div>
    </fieldset>
</div>

{
  "language": "en-US",
  "data": {
    "start": "8:00",
    "end": "10:00",
    "active": true
  }
}
  • Content: 
    .time-slot {
    position: relative;
}

.time-slot__label {
    background: $L-background;
    padding: 4px;
    letter-spacing: $letter-spacing-50;
    line-height: calc(24 / 14);
    font-size: 14px;
    color: $L-text-weak-active;
    box-shadow: $elevation-02;
    border-radius: $border-radius-small;
    /* stylelint-disable-next-line */
    width: max-content;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
}

.time-slot__label--disabled {
    text-decoration: line-through;
    background: $L-background-disabled;
    box-shadow: none;
    pointer-events: none;
}

.time-slot__label--active {
    background: $L-success-background;
    color: $L-text-success;
}

.time-slot__items {
    display: flex;
    gap: 6px 8px;
    flex-wrap: wrap;
}

.time-slot__icon {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    color: $L-icon-success;
    font-size: 16px;
    display: none;
    align-items: center;

    .time-slot__label--active & {
        display: flex;
    }
}
  • URL: /components/raw/time-slot/time-slot.scss
  • Filesystem Path: src/patterns/components/time-slot/time-slot.scss
  • Size: 1 KB
  • Content: 
    import './time-slot.scss';

import Component from '../component/component';

export default class TimeSlot extends Component {
    static initSelector: string = '.js-time-slot';

    labels: NodeListOf<HTMLLabelElement>;
    el: HTMLElement;

    constructor(target: HTMLElement) {
        super(target);

        this.labels = target.querySelectorAll('.js-time-slot-label');
        this.el = target;

        if (!this.labels) {
            return;
        }

        this.labels.forEach((label: HTMLLabelElement) => {
            label.addEventListener('click', () => {
                this.handleActiveLabelChange(label);
            });
        });
    }

    initLabels(): void {
        this.el.querySelectorAll('label').forEach((label: HTMLLabelElement) => {
            label.classList.remove('time-slot__label--active');
        });
    }

    handleActiveLabelChange(label: HTMLLabelElement): void {
        this.initLabels();
        label.classList.add('time-slot__label--active');
    }
}
  • URL: /components/raw/time-slot/time-slot.ts
  • Filesystem Path: src/patterns/components/time-slot/time-slot.ts
  • Size: 1 KB
  • Handle: @time-slot--active
  • Filesystem Path: src/patterns/components/time-slot/time-slot.twig
  • References (1): @icon