@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/status-picker/index.ts

@@ -0,0 +1,323 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [STATUS_PICKER_MENU]?: Attributes;
+    [STATUS_PICKER_TRIGGER]?: Attributes;
+    initials: string;
+    name: string;
+    state?: { active: boolean, highlight: number, status: Status };
+    status?: Status;
+    statuses?: Option[];
+};
+
+type Option = {
+    hint?: string;
+    id: Status;
+    label: string;
+};
+
+type Status = 'away' | 'dnd' | 'invisible' | 'online';
+
+
+const FADE: KeyframeAnimationOptions = {
+    duration: 200,
+    easing: 'cubic-bezier(0.23, 1, 0.32, 1)'
+};
+
+const STATUSES: Option[] = [
+    { id: 'online', label: 'Online' },
+    { id: 'away', label: 'Away' },
+    { hint: 'Mutes notifications', id: 'dnd', label: 'Do not disturb' },
+    { hint: 'Appear offline', id: 'invisible', label: 'Invisible' }
+];
+
+const STATUS_PICKER_MENU = Symbol.for('@esportsplus/ui/status-picker.menu');
+
+const STATUS_PICKER_TRIGGER = Symbol.for('@esportsplus/ui/status-picker.trigger');
+
+const TURN: KeyframeAnimationOptions = {
+    duration: 450,
+    easing: 'linear(0, 0.063, 0.204, 0.374, 0.54, 0.685, 0.801, 0.889, 0.95, 0.99, 1.013, 1.025, 1.028, 1.027, 1.023, 1.019, 1.014, 1.01, 1.006, 1.003, 1.002, 1, 1, 0.999, 1)'
+};
+
+
+let uid = 0;
+
+
+// Each status has its own shape, not just its own colour, so it reads at a glance and for colour-blind eyes too.
+function badge(status: Status) {
+    switch (status) {
+        case 'away':
+            return html`
+                <svg aria-hidden='true' class='status-picker-icon status-picker-icon--away' viewBox='0 0 12 12'>
+                    <path d='M6.6 1.05A5 5 0 1 0 10.95 5.4 4 4 0 0 1 6.6 1.05Z' />
+                </svg>
+            `;
+        case 'dnd':
+            return html`
+                <svg aria-hidden='true' class='status-picker-icon status-picker-icon--dnd' viewBox='0 0 12 12'>
+                    <circle cx='6' cy='6' r='5' />
+                    <rect height='1.8' rx='0.9' width='6' x='3' y='5.1' />
+                </svg>
+            `;
+        case 'invisible':
+            return html`
+                <svg aria-hidden='true' class='status-picker-icon status-picker-icon--invisible' viewBox='0 0 12 12'>
+                    <circle cx='6' cy='6' r='3.9' />
+                </svg>
+            `;
+        default:
+            return html`
+                <svg aria-hidden='true' class='status-picker-icon status-picker-icon--online' viewBox='0 0 12 12'>
+                    <circle cx='6' cy='6' r='5' />
+                </svg>
+            `;
+    }
+}
+
+function template(
+    this: { attributes?: Pick<A, typeof STATUS_PICKER_MENU | typeof STATUS_PICKER_TRIGGER> } | void,
+    {
+        initials,
+        name,
+        status = 'online',
+        statuses = STATUSES,
+        state = reactive({ active: false, highlight: 0, status }),
+        ...attributes
+    }: A
+) {
+    let badges = new Map<Status, HTMLElement>(),
+        id = `status-picker-${++uid}`,
+        items: HTMLElement[] = [],
+        keys = false,
+        labels = new Map<Status, HTMLElement>(),
+        previous = state.status,
+        trigger: HTMLElement | undefined;
+
+    function choose(next: Status) {
+        state.status = next;
+        hide();
+    }
+
+    function current() {
+        return statuses.find((option) => option.id === state.status) ?? statuses[0];
+    }
+
+    function hide() {
+        state.active = false;
+
+        if (keys) {
+            trigger?.focus();
+        }
+    }
+
+    // Arrows walk the items whether focus already reached the menu or is still on the trigger.
+    function move(e: KeyboardEvent) {
+        if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
+            return false;
+        }
+
+        let n = statuses.length;
+
+        e.preventDefault();
+        state.highlight = (state.highlight + (e.key === 'ArrowDown' ? 1 : -1) + n) % n;
+        items[state.highlight]?.focus();
+
+        return true;
+    }
+
+    function show() {
+        let index = Math.max(0, statuses.findIndex((option) => option.id === state.status));
+
+        state.highlight = index;
+        state.active = true;
+
+        // The menu turns visible on the next frame, once its class is applied.
+        if (keys) {
+            requestAnimationFrame(() => items[index]?.focus());
+        }
+    }
+
+    // The new badge spins in and the new label rises in; their outgoing counterparts leave through CSS.
+    let dispose = effect(() => {
+        let next = state.status;
+
+        if (next === previous) {
+            return;
+        }
+
+        previous = next;
+
+        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return;
+        }
+
+        badges.get(next)?.animate([
+            { opacity: 0, rotate: '120deg', scale: '0.3' },
+            { opacity: 1, rotate: '0deg', scale: '1' }
+        ], TURN);
+        labels.get(next)?.animate([
+            { filter: 'blur(3px)', opacity: 0, translate: '0 4px' },
+            { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
+        ], FADE);
+    });
+
+    onCleanup(dispose);
+
+    return html`
+        <div
+            class='status-picker'
+            ${this?.attributes}
+            ${attributes}
+            ${{
+                class: () => state.active && '--active',
+                ondocumentpointerdown: function(this: HTMLElement, e: PointerEvent) {
+                    if (state.active && !this.contains(e.target as Node | null)) {
+                        state.active = false;
+                    }
+                }
+            }}
+        >
+            <button
+                aria-controls='${id}-menu'
+                aria-haspopup='menu'
+                class='status-picker-trigger'
+                type='button'
+                ${this?.attributes?.[STATUS_PICKER_TRIGGER]}
+                ${attributes[STATUS_PICKER_TRIGGER]}
+                ${{
+                    'aria-expanded': () => state.active ? 'true' : 'false',
+                    'aria-label': () => `${name}, ${current().label}. Change status`,
+                    onclick: (e: MouseEvent) => {
+                        keys = e.detail === 0;
+
+                        if (state.active) {
+                            hide();
+                        }
+                        else {
+                            show();
+                        }
+                    },
+                    onkeydown: (e: KeyboardEvent) => {
+                        keys = true;
+
+                        if (state.active) {
+                            if (!move(e) && e.key === 'Escape') {
+                                e.preventDefault();
+                                hide();
+                            }
+                        }
+                        else if (e.key === 'ArrowDown') {
+                            e.preventDefault();
+                            show();
+                        }
+                    },
+                    onrender: (element: HTMLElement) => {
+                        trigger = element;
+                    }
+                }}
+            >
+                <span class='status-picker-avatar'>
+                    <span class='status-picker-initials'>${initials}</span>
+                    <span class='status-picker-slot'>
+                        ${statuses.map((option) => html`
+                            <span
+                                class='status-picker-badge'
+                                ${{
+                                    class: () => state.status === option.id && '--active',
+                                    onrender: (element: HTMLElement) => {
+                                        badges.set(option.id, element);
+                                    }
+                                }}
+                            >
+                                ${badge(option.id)}
+                            </span>
+                        `)}
+                    </span>
+                </span>
+                <span class='status-picker-text'>
+                    <span class='status-picker-name'>${name}</span>
+                    <span class='status-picker-status'>
+                        ${statuses.map((option) => html`
+                            <span
+                                class='status-picker-status-label'
+                                ${{
+                                    class: () => state.status === option.id && '--active',
+                                    onrender: (element: HTMLElement) => {
+                                        labels.set(option.id, element);
+                                    }
+                                }}
+                            >
+                                ${option.label}
+                            </span>
+                        `)}
+                    </span>
+                </span>
+            </button>
+            <div
+                aria-label='Set status'
+                class='status-picker-menu'
+                id='${id}-menu'
+                role='menu'
+                ${this?.attributes?.[STATUS_PICKER_MENU]}
+                ${attributes[STATUS_PICKER_MENU]}
+                ${{
+                    inert: () => !state.active,
+                    onkeydown: (e: KeyboardEvent) => {
+                        keys = true;
+
+                        if (move(e)) {
+                            return;
+                        }
+
+                        if (e.key === 'Escape' || e.key === 'Tab') {
+                            e.preventDefault();
+                            hide();
+                        }
+                    }
+                }}
+            >
+                ${statuses.map((option, index) => html`
+                    <button
+                        class='status-picker-item'
+                        role='menuitemradio'
+                        type='button'
+                        ${{
+                            'aria-checked': () => state.status === option.id ? 'true' : 'false',
+                            class: () => state.highlight === index && '--highlighted',
+                            onclick: (e: MouseEvent) => {
+                                keys = e.detail === 0;
+                                choose(option.id);
+                            },
+                            onpointermove: () => {
+                                if (state.highlight !== index) {
+                                    state.highlight = index;
+                                }
+                            },
+                            onrender: (element: HTMLElement) => {
+                                items[index] = element;
+                            },
+                            tabIndex: () => state.highlight === index ? 0 : -1
+                        }}
+                    >
+                        <span class='status-picker-item-badge'>${badge(option.id)}</span>
+                        <span class='status-picker-item-text'>
+                            <span class='status-picker-item-label'>${option.label}</span>
+                            ${option.hint ? html`<span class='status-picker-item-hint'>${option.hint}</span>` : ''}
+                        </span>
+                        <svg aria-hidden='true' class='status-picker-check' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'>
+                            <path d='M3.5 8.25l3 3 6-6.5' />
+                        </svg>
+                    </button>
+                `)}
+            </div>
+        </div>
+    `;
+}
+
+
+export default Object.assign(template, { menu: STATUS_PICKER_MENU, trigger: STATUS_PICKER_TRIGGER } as const);
+export type { Option, Status };

package/src/components/status-picker/scss/index.scss

@@ -0,0 +1,290 @@
+@use 'variables';
+
+$ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+
+.status-picker {
+    color: var(--color);
+    display: inline-block;
+    font-size: var(--font-size);
+    position: relative;
+
+    &-avatar {
+        flex: 0 0 auto;
+        position: relative;
+    }
+
+    &-badge {
+        display: grid;
+        grid-area: 1 / 1;
+        opacity: 0;
+        place-items: center;
+        rotate: -120deg;
+        scale: 0.3;
+        transition:
+            opacity 150ms $ease-out,
+            rotate 150ms $ease-out,
+            scale 150ms $ease-out;
+
+        // Entering is driven by the script so it can spin in from the other side.
+        &.--active {
+            opacity: 1;
+            rotate: 0deg;
+            scale: 1;
+            transition: none;
+        }
+    }
+
+    &-check {
+        color: var(--color);
+        display: none;
+        flex: 0 0 auto;
+        height: 16px;
+        stroke-width: 1.5;
+        width: 16px;
+
+        [aria-checked='true'] > & {
+            display: block;
+        }
+    }
+
+    &-icon {
+        display: block;
+        height: var(--badge-size);
+        width: var(--badge-size);
+
+        &--away {
+            fill: var(--away-color);
+        }
+
+        &--dnd {
+            circle {
+                fill: var(--dnd-color);
+            }
+
+            rect {
+                fill: var(--color-white-300);
+            }
+        }
+
+        &--invisible {
+            fill: none;
+            stroke: var(--invisible-color);
+            stroke-width: 2.2;
+        }
+
+        &--online {
+            fill: var(--online-color);
+        }
+    }
+
+    &-initials {
+        background: var(--avatar-background);
+        border-radius: 50%;
+        color: var(--avatar-color);
+        display: grid;
+        font-size: var(--font-size-300);
+        font-weight: var(--font-weight-500);
+        height: var(--avatar-size);
+        place-items: center;
+        width: var(--avatar-size);
+    }
+
+    &-item {
+        align-items: center;
+        background: transparent;
+        border: 0;
+        border-radius: var(--item-border-radius);
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        font: inherit;
+        gap: var(--size-300);
+        margin: 0;
+        outline: none;
+        padding: var(--size-100) var(--size-300);
+        text-align: left;
+        transition: background 100ms;
+        width: 100%;
+
+        &.--highlighted {
+            background: var(--background-hover);
+        }
+
+        &-badge {
+            display: grid;
+            flex: 0 0 auto;
+            height: 16px;
+            place-items: center;
+            width: 16px;
+        }
+
+        &-hint {
+            color: var(--color-muted);
+            display: block;
+            font-size: var(--font-size-300);
+        }
+
+        &-label {
+            color: var(--color);
+            display: block;
+        }
+
+        &-text {
+            flex: 1;
+            min-width: 0;
+        }
+    }
+
+    &-menu {
+        background: var(--background);
+        border-radius: var(--menu-border-radius);
+        box-shadow: var(--box-shadow);
+        left: 0;
+        margin-top: var(--size-100);
+        opacity: 0;
+        padding: var(--menu-padding);
+        position: absolute;
+        scale: 0.98;
+        top: 100%;
+        // Grows out of the avatar it belongs to.
+        transform-origin: 24px 0;
+        transition:
+            opacity 120ms $ease-out,
+            scale 120ms $ease-out,
+            translate 120ms $ease-out,
+            visibility 0s linear 120ms;
+        translate: 0 -2px;
+        visibility: hidden;
+        width: var(--menu-width);
+        z-index: 10;
+
+        .status-picker.--active > & {
+            animation: status-picker-menu 200ms $ease-out;
+            opacity: 1;
+            scale: 1;
+            transition: none;
+            translate: 0 0;
+            visibility: visible;
+        }
+    }
+
+    &-name {
+        color: var(--color);
+        display: block;
+        font-weight: var(--font-weight-400);
+    }
+
+    // The badge sits in a cut-out ring of the page background.
+    &-slot {
+        background: var(--background);
+        border-radius: 50%;
+        bottom: -2px;
+        display: grid;
+        height: var(--slot-size);
+        overflow: hidden;
+        place-items: center;
+        position: absolute;
+        right: -2px;
+        width: var(--slot-size);
+    }
+
+    &-status {
+        color: var(--color-muted);
+        display: block;
+        font-size: calc(var(--font-size-400) * 0.8125);
+        height: 18px;
+        position: relative;
+
+        &-label {
+            filter: blur(3px);
+            left: 0;
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            transition:
+                filter 120ms $ease-out,
+                opacity 120ms $ease-out,
+                translate 120ms $ease-out;
+            translate: 0 -4px;
+            white-space: nowrap;
+
+            &.--active {
+                display: block;
+                filter: none;
+                opacity: 1;
+                position: relative;
+                transition: none;
+                translate: 0 0;
+            }
+        }
+    }
+
+    &-text {
+        min-width: 0;
+    }
+
+    &-trigger {
+        align-items: center;
+        background: transparent;
+        border: 0;
+        border-radius: var(--trigger-border-radius);
+        color: inherit;
+        cursor: pointer;
+        display: flex;
+        font: inherit;
+        gap: var(--size-300);
+        margin: 0;
+        outline: none;
+        padding: var(--size-100) var(--size-400) var(--size-100) var(--size-100);
+        text-align: left;
+        transition:
+            background var(--transition-duration) var(--transition-timing-function),
+            scale var(--transition-duration) var(--transition-timing-function);
+
+        &:hover,
+        .status-picker.--active > & {
+            background: var(--background-hover);
+        }
+
+        &:active {
+            scale: var(--press-scale);
+        }
+
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--color);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-badge,
+        &-status-label {
+            transition: none;
+        }
+
+        &-menu {
+            transition: visibility 0s;
+
+            .status-picker.--active > & {
+                animation: none;
+            }
+        }
+
+        &-trigger {
+            transition: background var(--transition-duration) var(--transition-timing-function);
+
+            &:active {
+                scale: 1;
+            }
+        }
+    }
+}
+
+
+@keyframes status-picker-menu {
+    from {
+        filter: blur(4px);
+        opacity: 0;
+        scale: 0.96;
+        translate: 0 -4px;
+    }
+}

package/src/components/status-picker/scss/variables.scss

@@ -0,0 +1,29 @@
+.status-picker {
+    --avatar-background: var(--color-text-500);
+    --avatar-color: var(--color-white-300);
+    --avatar-size: 40px;
+    --away-color: var(--color-yellow-500);
+    --background: var(--color-white-300);
+    --background-hover: var(--color-grey-400);
+    --badge-size: 12px;
+    --box-shadow:
+        0 0 0 1px oklch(from var(--color-black-500) l c h / 0.06),
+        0 1px 2px oklch(from var(--color-black-500) l c h / 0.06),
+        0 6px 16px -6px oklch(from var(--color-black-500) l c h / 0.12);
+    --color: var(--color-text-500);
+    --color-muted: var(--color-text-300);
+    --dnd-color: var(--color-red-400);
+    --focus-width: var(--border-width-500);
+    --font-size: calc(var(--font-size-400) * 0.875);
+    --invisible-color: var(--color-text-300);
+    --item-border-radius: var(--border-radius-600);
+    --menu-border-radius: var(--border-radius-700);
+    --menu-padding: 6px;
+    --menu-width: 240px;
+    --online-color: var(--color-green-500);
+    --press-scale: 0.98;
+    --slot-size: 18px;
+    --transition-duration: 150ms;
+    --transition-timing-function: ease-out;
+    --trigger-border-radius: var(--border-radius-700);
+}