@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/notification-bell/index.ts

@@ -0,0 +1,102 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import icon from '~/components/icon';
+import bell from './svg/bell.svg';
+import './scss/index.scss';
+
+
+const notificationBell = ({ 'aria-label': label = 'Notifications', count = 0, dot = false, max = 99, ring = false, state: api = reactive({ count }), ...attributes }: Attributes & {
+    'aria-label'?: string;
+    count?: number;
+    dot?: boolean;
+    max?: number;
+    ring?: boolean;
+    state?: { count: number };
+}) => {
+    let previous = api.count,
+        render = reactive([] as { digit: boolean; value: string }[]),
+        // Alternates between 1 and 2 so back-to-back increments swap keyframe
+        // names, which restarts the swing without forcing a reflow.
+        state = reactive({ ring: ring ? 1 : 0 }),
+        stop = effect(() => {
+            let count = api.count;
+
+            untrack(() => {
+                if (count > previous) {
+                    state.ring = state.ring === 1 ? 2 : 1;
+                }
+
+                previous = count;
+
+                // Keep the last digits while the badge scales out
+                if (count <= 0 || dot) {
+                    return;
+                }
+
+                let values = (count > max ? `${max}+` : `${count}`).split('');
+
+                for (let i = 0, n = values.length; i < n; i++) {
+                    let value = values[i],
+                        digit = value !== '+';
+
+                    // Preserve the track so CSS can roll between digit positions.
+                    if (render[i]?.digit === digit) {
+                        render[i].value = value;
+                    }
+                    else {
+                        let character = reactive({ digit, value });
+
+                        render[i] = character;
+                    }
+                }
+
+                if (render.length > values.length) {
+                    render.splice(values.length);
+                }
+            });
+        });
+
+    onCleanup(stop);
+
+    return html`
+        <button
+            class='notification-bell'
+            type='button'
+            ${{
+                'aria-label': () => api.count > 0 ? `${label}, ${api.count} unread` : label,
+                'data-ring': () => state.ring || '',
+                onanimationend: (e: AnimationEvent) => {
+                    if (e.animationName.startsWith('notification-bell-ring')) {
+                        state.ring = 0;
+                    }
+                }
+            }}
+            ${attributes}
+        >
+            ${icon({ 'aria-hidden': true, class: 'notification-bell-icon' }, bell)}
+
+            <span
+                aria-hidden='true'
+                class='notification-bell-badge ${dot && 'notification-bell-badge--dot'}'
+                ${{ class: () => api.count > 0 && '--active' }}
+            >
+                ${!dot && html.reactive(render, function (character) {
+                    if (!character.digit) {
+                        return html`<span class='notification-bell-character'>${() => character.value}</span>`;
+                    }
+
+                    return html`
+                        <span class='notification-bell-character'>
+                            <span class='notification-bell-character-track' style='${() => `--value: ${character.value}`}'>
+                                ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html`<span>${value}</span>`)}
+                            </span>
+                        </span>
+                    `;
+                })}
+            </span>
+        </button>
+    `;
+};
+
+
+export default notificationBell;

package/src/components/notification-bell/scss/index.scss

@@ -0,0 +1,132 @@
+@use 'variables';
+
+.notification-bell {
+    align-items: center;
+    background: var(--background);
+    border: 0;
+    border-radius: var(--border-radius);
+    color: var(--color);
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 var(--size);
+    height: var(--size);
+    justify-content: center;
+    padding: 0;
+    position: relative;
+    transition: background var(--transition-duration) var(--transition-timing-function);
+    width: var(--size);
+
+    &:focus-visible {
+        outline: var(--focus-width) solid var(--focus-color);
+        outline-offset: var(--focus-offset);
+    }
+
+    @each $i in 1, 2 {
+        &[data-ring='#{$i}'] .notification-bell-icon {
+            animation: notification-bell-ring-#{$i} var(--ring-duration) ease-in-out;
+        }
+    }
+
+    &-badge {
+        align-items: center;
+        background: var(--badge-background);
+        border-radius: calc(var(--badge-size) / 2);
+        box-shadow: 0 0 0 var(--badge-outline-width) var(--badge-outline-color);
+        color: var(--badge-color);
+        display: flex;
+        font-size: var(--badge-font-size);
+        font-variant-numeric: tabular-nums;
+        font-weight: var(--badge-font-weight);
+        height: var(--badge-size);
+        justify-content: center;
+        left: calc(100% - var(--badge-inset));
+        line-height: var(--badge-size);
+        min-width: var(--badge-size);
+        padding: 0 calc(var(--badge-size) * 0.25);
+        pointer-events: none;
+        position: absolute;
+        top: var(--badge-inset);
+        transform: translate(-50%, -50%) scale(0);
+        transition: transform var(--badge-transition-duration) var(--badge-timing-function);
+
+        &.--active {
+            transform: translate(-50%, -50%) scale(1);
+        }
+
+        &--dot {
+            height: var(--dot-size);
+            min-width: 0;
+            padding: 0;
+            width: var(--dot-size);
+        }
+    }
+
+    &-character {
+        display: grid;
+        height: 1lh;
+        overflow: hidden;
+
+        &-track {
+            display: grid;
+            transition: translate var(--roll-duration) var(--roll-timing-function);
+            translate: 0 calc(var(--value) * -1lh);
+
+            span {
+                height: 1lh;
+                text-align: center;
+            }
+        }
+    }
+
+    // Outranks `.icon` so its --size default can't win on source order
+    .notification-bell-icon {
+        --size: var(--icon-size);
+        transform-origin: 50% 8%;
+
+        svg {
+            fill: none;
+            stroke: currentColor;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: var(--icon-stroke-width);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &,
+        &-badge,
+        &-character-track {
+            transition: none;
+        }
+
+        @each $i in 1, 2 {
+            &[data-ring='#{$i}'] .notification-bell-icon {
+                animation: none;
+            }
+        }
+    }
+}
+
+@each $i in 1, 2 {
+    @keyframes notification-bell-ring-#{$i} {
+        0%,
+        100% {
+            rotate: 0deg;
+        }
+        15% {
+            rotate: var(--ring-angle);
+        }
+        30% {
+            rotate: calc(var(--ring-angle) * -0.85);
+        }
+        45% {
+            rotate: calc(var(--ring-angle) * 0.6);
+        }
+        60% {
+            rotate: calc(var(--ring-angle) * -0.4);
+        }
+        75% {
+            rotate: calc(var(--ring-angle) * 0.2);
+        }
+    }
+}

package/src/components/notification-bell/scss/variables.scss

@@ -0,0 +1,41 @@
+@use '/tokens';
+
+.notification-bell {
+    --background: var(--background-default);
+    --background-default: transparent;
+    --background-hover: color-mix(in srgb, currentColor 8%, transparent);
+    --background-pressed: color-mix(in srgb, currentColor 14%, transparent);
+    --badge-background: var(--color-red-400);
+    --badge-color: var(--color-white-400);
+    --badge-font-size: calc(var(--size) * 0.26);
+    --badge-font-weight: var(--font-weight-500);
+    --badge-inset: calc(var(--size) * 0.12);
+    --badge-outline-color: var(--color-white-400);
+    --badge-outline-width: 2px;
+    --badge-size: calc(var(--size) * 0.42);
+    --badge-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --badge-transition-duration: 280ms;
+    --border-radius: 50%;
+    --color: var(--color-text-400);
+    --dot-size: calc(var(--size) * 0.24);
+    --focus-color: currentColor;
+    --focus-offset: 2px;
+    --focus-width: 2px;
+    --icon-size: 50%;
+    --icon-stroke-width: 2;
+    --ring-angle: 14deg;
+    --ring-duration: 800ms;
+    --roll-duration: 400ms;
+    --roll-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+    --size: var(--size-800);
+    --transition-duration: 160ms;
+    --transition-timing-function: ease;
+
+    @include tokens.state(hover) {
+        --background: var(--background-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --background: var(--background-pressed);
+    }
+}

package/src/components/notification-bell/svg/bell.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>

package/src/components/onboarding-checklist/index.ts

@@ -0,0 +1,252 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { reactive, untrack } from '@esportsplus/reactivity';
+import accordion from '~/components/accordion';
+import checkbox, { factory } from '~/components/checkbox';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [ONBOARDING_CHECKLIST_TASK]?: Attributes;
+    done?: string[];
+    ondismiss?: VoidFunction;
+    open?: string[];
+    state?: State;
+    tasks: Task[];
+};
+
+type State = { celebrating: boolean, count: number };
+
+type Task = {
+    action: string;
+    description: string;
+    id: string;
+    title: string;
+};
+
+
+// Lets the last check and the ring reaching 100 land before the card changes, so the finish is seen rather than skipped.
+const CELEBRATE_AFTER = 700;
+
+const ONBOARDING_CHECKLIST_TASK = Symbol.for('@esportsplus/ui/onboarding-checklist.task');
+
+// Critically damped spring (motion's visualDuration 0.5, bounce 0): slow enough to watch the number count up, never past 100.
+const STIFFNESS = (2 * Math.PI / 0.6) ** 2;
+
+const DAMPING = 2 * Math.sqrt(STIFFNESS);
+
+
+function check() {
+    return html`<svg aria-hidden='true' class='onboarding-checklist-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' /></svg>`;
+}
+
+function template(
+    this: { attributes?: Partial<A> } | void,
+    { done = [], ondismiss, open = [], state, tasks, ...attributes }: A
+) {
+    let celebration = reactive({ active: false }),
+        // Seeded from the plain inputs: reading the reactive rows here would subscribe whichever effect renders this component.
+        count = tasks.filter((task) => done.includes(task.id)).length,
+        defaults = this?.attributes,
+        frame = 0,
+        list = reactive({ active: true }),
+        prefix = `onboarding-checklist-${Math.random().toString(36).slice(2, 8)}`,
+        rows = tasks.map((task) => reactive({ active: open.includes(task.id), done: done.includes(task.id) })),
+        s = state || reactive({ celebrating: false, count }),
+        timer: ReturnType<typeof setTimeout> | undefined,
+        ui = reactive({ announcement: '', shown: count / tasks.length }),
+        velocity = 0;
+
+    s.count = count;
+
+    function celebrate() {
+        clearTimeout(timer);
+
+        if (s.count !== tasks.length) {
+            return;
+        }
+
+        timer = setTimeout(() => {
+            celebration.active = true;
+            list.active = false;
+            s.celebrating = true;
+            ui.announcement = 'All tasks complete. You\'re all set.';
+        }, CELEBRATE_AFTER);
+    }
+
+    function ring() {
+        cancelAnimationFrame(frame);
+
+        let previous = performance.now(),
+            target = s.count / tasks.length;
+
+        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            ui.shown = target;
+            velocity = 0;
+            return;
+        }
+
+        function step(now: number) {
+            let dt = Math.min((now - previous) / 1000, 1 / 30);
+
+            previous = now;
+            velocity += (STIFFNESS * (target - ui.shown) - DAMPING * velocity) * dt;
+            ui.shown += velocity * dt;
+
+            if (Math.abs(target - ui.shown) < 0.0005 && Math.abs(velocity) < 0.001) {
+                ui.shown = target;
+                velocity = 0;
+                return;
+            }
+
+            frame = requestAnimationFrame(step);
+        }
+
+        frame = requestAnimationFrame(step);
+    }
+
+    function row(task: Task, index: number) {
+        let id = `${prefix}-${index}`,
+            state = rows[index];
+
+        return html`
+            <li
+                class='onboarding-checklist-task'
+                ${defaults?.[ONBOARDING_CHECKLIST_TASK]}
+                ${attributes[ONBOARDING_CHECKLIST_TASK]}
+                ${{ class: () => `${state.done ? '--done' : ''} ${state.active ? '--open' : ''}` }}
+            >
+                <div class='onboarding-checklist-row'>
+                    <label class='onboarding-checklist-toggle'>
+                        ${checkbox({
+                            class: 'onboarding-checklist-checkbox',
+                            [factory.input]: {
+                                'aria-label': task.title,
+                                checked: () => state.done,
+                                onchange: (e: Event) => toggle(index, (e.target as HTMLInputElement).checked)
+                            }
+                        })}
+                    </label>
+
+                    <button
+                        aria-controls='${id}'
+                        class='onboarding-checklist-summary'
+                        type='button'
+                        ${{
+                            'aria-expanded': () => String(state.active),
+                            onclick: () => {
+                                state.active = !state.active;
+                            }
+                        }}
+                    >
+                        <span class='onboarding-checklist-title'>
+                            ${task.title}
+                            <span class='onboarding-checklist-strike' aria-hidden='true'></span>
+                        </span>
+                        <svg aria-hidden='true' class='onboarding-checklist-chevron' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m4 6 4 4 4-4' /></svg>
+                    </button>
+                </div>
+
+                ${accordion({ class: 'onboarding-checklist-details', id, state }, html`
+                    <div class='onboarding-checklist-body'>
+                        <p class='onboarding-checklist-description'>${task.description}</p>
+                        <button
+                            class='button onboarding-checklist-action'
+                            type='button'
+                            ${{
+                                'aria-disabled': () => String(state.done),
+                                onclick: () => {
+                                    if (!state.done) {
+                                        toggle(index, true);
+                                    }
+                                }
+                            }}
+                        >
+                            <span class='onboarding-checklist-action-label' ${{ 'aria-hidden': () => String(state.done) }}>${task.action}</span>
+                            <span class='onboarding-checklist-action-label onboarding-checklist-action-label--done' ${{ 'aria-hidden': () => String(!state.done) }}>
+                                ${check()}
+                                <span>Done</span>
+                            </span>
+                        </button>
+                    </div>
+                `)}
+            </li>
+        `;
+    }
+
+    function toggle(index: number, value: boolean) {
+        rows[index].done = value;
+        s.count = rows.filter((row) => row.done).length;
+        ui.announcement = `${tasks[index].title} ${value ? 'done' : 'not done'}. ${s.count} of ${tasks.length} complete.`;
+        ring();
+        celebrate();
+    }
+
+    return html`
+        <section
+            aria-label='Get started'
+            class='onboarding-checklist'
+            ${defaults}
+            ${attributes}
+            ${{
+                class: () => s.celebrating && '--celebrating',
+                onconnect: () => untrack(celebrate),
+                ondisconnect: () => {
+                    cancelAnimationFrame(frame);
+                    clearTimeout(timer);
+                }
+            }}
+        >
+            <header class='onboarding-checklist-header'>
+                <div class='onboarding-checklist-heading'>
+                    <h2 class='onboarding-checklist-heading-title'>Get started</h2>
+                    <p class='onboarding-checklist-heading-count'>${() => `${s.count} of ${tasks.length} complete`}</p>
+                </div>
+                <div
+                    aria-label='Setup progress'
+                    aria-valuemax='100'
+                    aria-valuemin='0'
+                    class='onboarding-checklist-ring'
+                    role='progressbar'
+                    ${{
+                        'aria-valuenow': () => Math.round(s.count / tasks.length * 100),
+                        style: () => `--progress: ${ui.shown};`
+                    }}
+                >
+                    <svg aria-hidden='true' viewBox='0 0 48 48'>
+                        <circle class='onboarding-checklist-ring-track' cx='24' cy='24' fill='none' r='20' stroke-width='4' />
+                        <circle class='onboarding-checklist-ring-fill' cx='24' cy='24' fill='none' pathLength='1' r='20' stroke-linecap='round' stroke-width='4' />
+                    </svg>
+                    <span class='onboarding-checklist-ring-value'>
+                        ${() => Math.round(ui.shown * 100)}<span>%</span>
+                    </span>
+                </div>
+            </header>
+
+            ${accordion({ class: 'onboarding-checklist-collapse', state: list }, html`
+                <ul class='onboarding-checklist-list'>
+                    ${tasks.map(row)}
+                </ul>
+            `)}
+
+            ${accordion({ class: 'onboarding-checklist-collapse', state: celebration }, html`
+                <div class='onboarding-checklist-celebration'>
+                    <h3 class='onboarding-checklist-celebration-title'>You're all set</h3>
+                    <p class='onboarding-checklist-celebration-note'>
+                        Your workspace is ready. You can find these steps again any time in Settings.
+                    </p>
+                    <div class='onboarding-checklist-celebration-actions'>
+                        <button class='button onboarding-checklist-action' type='button' onclick='${() => ondismiss?.()}'>
+                            Dismiss
+                        </button>
+                    </div>
+                </div>
+            `)}
+
+            <p class='onboarding-checklist-live' aria-live='polite'>${() => ui.announcement}</p>
+        </section>
+    `;
+}
+
+
+export default Object.assign(template, { task: ONBOARDING_CHECKLIST_TASK } as const);
+export type { State, Task };