@warp-ds/elements 2.2.0-next.9 → 2.3.0-next.1

package/dist/packages/slider/slider.react.stories.js

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { Slider, SliderThumb } from './react';
+const locale = 'nb';
+const getNumberFormatter = (locale, opts = {}) => {
+    return (value) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0, ...opts }).format(value);
+};
+export default {
+    title: 'Forms/Slider and Range Slider',
+    component: Slider,
+};
+export const Single = {
+    render() {
+        return (React.createElement(Slider, { label: "Single", min: "0", max: "100" },
+            React.createElement(SliderThumb, { name: "value" })));
+    },
+};
+export const Range = {
+    render() {
+        return (React.createElement(Slider, { label: "Range", min: "0", max: "100" },
+            React.createElement(SliderThumb, { name: "from", slot: "from", "aria-label": "From value" }),
+            React.createElement(SliderThumb, { name: "to", slot: "to", "aria-label": "To value" })));
+    },
+};
+// Take a suffix attribute on `<Slider>` I think, have `<SliderThumb>` get from that.
+export const SuffixSquareMeters = {
+    args: {
+        suffix: 'm²',
+    },
+    render({ suffix }) {
+        return (React.createElement(Slider, { label: "Apartment size", min: "0", max: "250", suffix: suffix, formatter: getNumberFormatter(locale) },
+            React.createElement(SliderThumb, { slot: "from", "aria-label": "From size", name: "from" }),
+            React.createElement(SliderThumb, { slot: "to", "aria-label": "To size", name: "to" })));
+    },
+};
+export const SuffixCurrency = {
+    args: {
+        suffix: 'kr',
+    },
+    render({ suffix }) {
+        return (React.createElement(Slider, { label: "Price", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
+            React.createElement(SliderThumb, { slot: "from", "aria-label": "From price", name: "from" }),
+            React.createElement(SliderThumb, { slot: "to", "aria-label": "To price", name: "to" })));
+    },
+};
+export const SuffixKilometers = {
+    args: {
+        suffix: 'km',
+    },
+    render({ suffix }) {
+        return (React.createElement(Slider, { label: "Distance", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
+            React.createElement(SliderThumb, { slot: "from", "aria-label": "From distance", name: "from" }),
+            React.createElement(SliderThumb, { slot: "to", "aria-label": "To distance", name: "to" })));
+    },
+};
+export const Marks = {
+    args: {
+        suffix: 'km',
+    },
+    render({ suffix }) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Slider, { label: "Single", min: "0", max: "100", markers: 5, step: 5 },
+                React.createElement(SliderThumb, { name: "value" }))));
+    },
+};
+export const Step = {
+    args: {
+        step: 5,
+    },
+    render({ step }) {
+        return (React.createElement(Slider, { label: "Single", step: step, min: "0", max: "100" },
+            React.createElement(SliderThumb, { name: "value" })));
+    },
+};
+export const OverUnder = {
+    render() {
+        const [overUnderFrom, setOverUnderFrom] = useState('');
+        const [overUnderTo, setOverUnderTo] = useState('');
+        return (React.createElement(React.Fragment, null,
+            React.createElement("form", { id: "overunder", style: { marginBottom: 16 }, lang: "nb", onInput: (val) => {
+                    const formData = new FormData(val.currentTarget);
+                    setOverUnderFrom(formData.get('from'));
+                    setOverUnderTo(formData.get('to'));
+                } },
+                React.createElement(Slider, { label: "Produksjons\u00E5r", min: "1950", max: "2025", "data-testid": "overunder", formatter: (value) => {
+                        if (value === '1950') {
+                            return 'Før 1950';
+                        }
+                        if (value === '2025') {
+                            return 'Etter 2025';
+                        }
+                        return value;
+                    } },
+                    React.createElement(SliderThumb, { slot: "from", "aria-label": "Fra \u00E5r", "aria-description": "1950 inkluderer kj\u00F8ret\u00F8y produsert fram til 1950", name: "from" }),
+                    React.createElement(SliderThumb, { slot: "to", "aria-label": "Til \u00E5r", "aria-description": "2025 inkluderer kj\u00F8ret\u00F8y produsert etter 2025", name: "to" }))),
+            React.createElement("p", null, "Drag the slider to show the value below. See the Code tab for how to format the labels."),
+            React.createElement("output", null,
+                React.createElement("dl", null,
+                    React.createElement("dt", null, "From:"),
+                    React.createElement("dd", { id: "overunder-from" }, overUnderFrom),
+                    React.createElement("dt", null, "To:"),
+                    React.createElement("dd", { id: "overunder-to" }, overUnderTo)))));
+    },
+};
+export const SingleError = {
+    render() {
+        return (React.createElement(Slider, { label: "Single", min: "0", max: "100" },
+            React.createElement("p", { slot: "description" }, "Try typing a value over 100"),
+            React.createElement(SliderThumb, null)));
+    },
+};
+export const RangeError = {
+    render() {
+        return (React.createElement(Slider, { label: "Production year", min: "1950", max: "2025" },
+            React.createElement("p", { slot: "description" }, "Try typing a from value higher than a to value"),
+            React.createElement(SliderThumb, { slot: "from", name: "from" }),
+            React.createElement(SliderThumb, { slot: "to", name: "to" })));
+    },
+};

package/dist/packages/slider/slider.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '../affix/index.js';
+import '../attention/index.js';
+import '../textfield/index.js';
+import './index.js';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Single: Story;
+export declare const Range: Story;
+export declare const SuffixSquareMeters: Story;
+export declare const SuffixCurrency: Story;
+export declare const SuffixKilometers: Story;
+export declare const Marks: Story;
+export declare const Step: Story;
+export declare const OverUnder: Story;
+export declare const SingleError: Story;
+export declare const RangeError: Story;

package/dist/packages/slider/slider.stories.js

@@ -0,0 +1,197 @@
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit';
+import '../affix/index.js';
+import '../attention/index.js';
+import '../textfield/index.js';
+import './index.js';
+const { events: sliderEvents, args: sliderArgs, argTypes: sliderArgTypes, } = getStorybookHelpers('w-slider');
+const meta = {
+    title: 'Forms/Slider and Range Slider',
+    args: sliderArgs,
+    argTypes: sliderArgTypes,
+    parameters: {
+        actions: {
+            handles: sliderEvents,
+        },
+    },
+};
+export default meta;
+export const Single = {
+    render() {
+        return html `
+      <w-slider label="Single" min="0" max="100">
+        <w-slider-thumb name="value"></w-slider-thumb>
+      </w-slider>
+    `;
+    },
+};
+export const Range = {
+    render() {
+        return html `
+      <w-slider label="Range" min="0" max="100">
+        <w-slider-thumb slot="from" aria-label="From value" name="from"></w-slider-thumb>
+        <w-slider-thumb slot="to" aria-label="To value" name="to"></w-slider-thumb>
+      </w-slider>
+    `;
+    },
+};
+// Take a suffix attribute on `<w-slider>` I think, have `<w-slider-thumb>` get from that.
+export const SuffixSquareMeters = {
+    args: {
+        locale: 'nb',
+        suffix: 'm²',
+    },
+    render({ locale, suffix }) {
+        return html `
+      <w-slider label="Apartment size" min="0" max="250" suffix="${suffix}" data-testid="sqm">
+        <w-slider-thumb slot="from" aria-label="From size" name="from"></w-slider-thumb>
+        <w-slider-thumb slot="to" aria-label="To size" name="to"></w-slider-thumb>
+      </w-slider>
+      <script type="module">
+        const sqmSlider = document.querySelector('w-slider[data-testid="sqm"]');
+        sqmSlider.formatter = window.getNumberFormatter('${locale}').format;
+      </script>
+    `;
+    },
+};
+export const SuffixCurrency = {
+    args: {
+        locale: 'nb',
+        suffix: 'kr',
+    },
+    render({ locale, suffix }) {
+        return html `
+      <w-slider label="Price" min="0" max="250000" suffix="${suffix}" data-testid="currency">
+        <w-slider-thumb slot="from" aria-label="From price" name="from"></w-slider-thumb>
+        <w-slider-thumb slot="to" aria-label="To price" name="to"></w-slider-thumb>
+      </w-slider>
+      <script type="module">
+        const currencySlider = document.querySelector('w-slider[data-testid="currency"]');
+        currencySlider.formatter = window.getNumberFormatter('${locale}').format;
+      </script>
+    `;
+    },
+};
+export const SuffixKilometers = {
+    args: {
+        locale: 'nb',
+        suffix: 'km',
+    },
+    render({ locale, suffix }) {
+        return html `
+      <w-slider label="Distance" min="0" max="250000" suffix="${suffix}" data-testid="km">
+        <w-slider-thumb slot="from" aria-label="From distance" name="from"></w-slider-thumb>
+        <w-slider-thumb slot="to" aria-label="To distance" name="to"></w-slider-thumb>
+      </w-slider>
+      <script type="module">
+        const kmSlider = document.querySelector('w-slider[data-testid="km"]');
+        kmSlider.formatter = window.getNumberFormatter('${locale}').format;
+      </script>
+    `;
+    },
+};
+export const Marks = {
+    args: {
+        locale: 'nb',
+        step: '5',
+        markers: '5',
+    },
+    render({ markers, step }) {
+        return html `
+      <w-slider label="Single" min="0" max="100" step="${step}" markers="${markers}">
+        <w-slider-thumb name="value"></w-slider-thumb>
+      </w-slider>
+    `;
+    },
+};
+export const Step = {
+    args: {
+        step: 5,
+    },
+    render({ step }) {
+        return html `
+      <w-slider label="Single" step="${step}" min="0" max="100">
+        <w-slider-thumb name="value"></w-slider-thumb>
+      </w-slider>
+    `;
+    },
+};
+export const OverUnder = {
+    args: {},
+    render() {
+        return html `
+      <form id="overunder" style="margin-bottom: 16px" lang="nb">
+        <w-slider label="Produksjonsår" min="1950" max="2025" data-testid="overunder">
+          <w-slider-thumb
+            slot="from"
+            aria-label="Fra år"
+            aria-description="1950 inkluderer kjøretøy produsert fram til 1950"
+            name="from"></w-slider-thumb>
+          <w-slider-thumb
+            slot="to"
+            aria-label="Til år"
+            aria-description="2025 inkluderer kjøretøy produsert etter 2025"
+            name="to"></w-slider-thumb>
+        </w-slider>
+      </form>
+      <p>Drag the slider to show the value below. See the Code tab for how to format the labels.</p>
+      <output>
+        <dl>
+          <dt>From:</dt>
+          <dd id="overunder-from"></dd>
+          <dt>To:</dt>
+          <dd id="overunder-to"></dd>
+        </dl>
+      </output>
+      <script>
+        /** Here is how you can show labels to indicate min and max values are "up to and including" and "this value and above". */
+        const overunderSlider = document.querySelector('w-slider[data-testid="overunder"]');
+        overunderSlider.formatter = function (value) {
+          if (value === '1950') {
+            return 'Før 1950';
+          }
+          if (value === '2025') {
+            return 'Etter 2025';
+          }
+          return value;
+        };
+
+        /** Code to show the form values in output */
+        document.forms['overunder'].addEventListener('input', function () {
+          const formData = new FormData(this);
+          const from = formData.get('from');
+          const to = formData.get('to');
+          document.getElementById('overunder-from').innerText = from;
+          document.getElementById('overunder-to').innerText = to;
+        });
+      </script>
+    `;
+    },
+};
+export const SingleError = {
+    args: {
+        locale: 'nb',
+    },
+    render() {
+        return html `
+      <w-slider label="Single" min="0" max="100">
+        <p slot="description">Try typing a value over 100</p>
+        <w-slider-thumb></w-slider-thumb>
+      </w-slider>
+    `;
+    },
+};
+export const RangeError = {
+    args: {
+        locale: 'nb',
+    },
+    render() {
+        return html `
+      <w-slider label="Production year" min="1950" max="2025" over under>
+        <p slot="description">Try typing a from value higher than a to value</p>
+        <w-slider-thumb slot="from" name="from"></w-slider-thumb>
+        <w-slider-thumb slot="to" name="to"></w-slider-thumb>
+      </w-slider>
+    `;
+    },
+};

package/dist/packages/slider/slider.test.d.ts

@@ -0,0 +1,4 @@
+import '../attention/index.js';
+import '../affix/index.js';
+import '../textfield/index.js';
+import './index.js';

package/dist/packages/slider/slider.test.js

@@ -0,0 +1,83 @@
+import { userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import '../attention/index.js';
+import '../affix/index.js';
+import '../textfield/index.js';
+import './index.js';
+test('single slider starts with a default value equal to max', async () => {
+    const component = html `
+    <form data-testid="form">
+      <w-slider label="Single" min="0" max="100">
+        <w-slider-thumb name="value"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `;
+    const page = render(component);
+    await expect.element(page.getByLabelText('Single').first()).toHaveValue('100');
+});
+test('range slider starts with a default from value equal to min, and to value equal to max', async () => {
+    const component = html `
+    <form data-testid="form">
+      <w-slider label="Range" min="0" max="100">
+        <w-slider-thumb aria-label="From" name="rangefrom" slot="from"></w-slider-thumb>
+        <w-slider-thumb aria-label="To" name="rangeto" slot="to"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `;
+    const page = render(component);
+    await expect.element(page.getByLabelText('From').first()).toHaveValue('0');
+    await expect.element(page.getByLabelText('To').first()).toHaveValue('100');
+});
+test('can set slider value via the range input', async () => {
+    const component = html `
+    <form data-testid="form">
+      <w-slider label="Single" min="0" max="100">
+        <w-slider-thumb name="value"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `;
+    const page = render(component);
+    await userEvent.type(page.getByLabelText('Single').first(), '{ArrowLeft}{ArrowLeft}{ArrowLeft}');
+    await expect.element(page.getByLabelText('Single').first()).toHaveValue('97');
+    await expect.element(page.getByRole('spinbutton')).toHaveValue(97); // keeps value in sync between inputs
+    const formData = new FormData(page.getByTestId('form').element());
+    expect(formData.get('value')).toBe('97');
+});
+test('can set slider value via the number input', async () => {
+    const component = html `
+    <form data-testid="form">
+      <w-slider label="Single" min="0" max="100">
+        <w-slider-thumb name="value"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `;
+    const page = render(component);
+    await page.getByRole('spinbutton').fill('50');
+    await expect.element(page.getByRole('spinbutton')).toHaveValue(50);
+    await expect.element(page.getByLabelText('Single').first()).toHaveValue('50'); // keeps value in sync between inputs
+    const formData = new FormData(page.getByTestId('form').element());
+    expect(formData.get('value')).toBe('50');
+});
+test('deleting from number input works as expected', async () => {
+    const component = html `
+    <form data-testid="form">
+      <w-slider label="Production year" min="1950" max="2025" over under>
+        <p slot="description">Try typing a from value higher than a to value</p>
+        <w-slider-thumb slot="from" name="from"></w-slider-thumb>
+        <w-slider-thumb slot="to" name="to"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `;
+    const page = render(component);
+    await expect.element(page.getByRole('spinbutton').last()).toHaveValue(2025);
+    await userEvent.type(page.getByRole('spinbutton').last(), '{Backspace}');
+    await expect.element(page.getByRole('spinbutton').last()).toHaveValue(202);
+    await userEvent.type(page.getByRole('spinbutton').last(), '{Backspace}');
+    await expect.element(page.getByRole('spinbutton').last()).toHaveValue(20);
+    await userEvent.type(page.getByRole('spinbutton').last(), '{Backspace}');
+    await expect.element(page.getByRole('spinbutton').last()).toHaveValue(2);
+    await userEvent.type(page.getByRole('spinbutton').last(), '{Backspace}');
+    await expect.element(page.getByRole('spinbutton').last()).not.toHaveValue();
+});

package/dist/packages/slider/styles/w-slider-thumb.styles.d.ts

@@ -0,0 +1 @@
+export declare const wSliderThumbStyles: import("lit").CSSResult;

package/dist/packages/slider/styles/w-slider-thumb.styles.js

@@ -0,0 +1,167 @@
+import { css } from 'lit';
+/* For some reason the pseudoselectors for webkit and moz must be separate blocks :shrug: */
+export const wSliderThumbStyles = css `
+  .w-slider-thumb {
+    position: relative;
+    display: grid;
+    pointer-events: none; /* For range inputs we position two of these on top of each other. Let clicks go through the top one. */
+    grid-template-areas:
+      'slider slider slider'
+      'frommarker . tomarker'
+      'fromtextfield . totextfield';
+    grid-template-columns: 1fr 24px 1fr;
+  }
+
+  .w-slider-thumb__range {
+    appearance: none;
+    background-color: transparent;
+    grid-area: slider;
+    height: 44px; /* touch target */
+    margin-left: 0;
+    pointer-events: none; /* let clicks pass through for range slider where we place two inputs over each other */
+  }
+
+  .w-slider-thumb__range::-webkit-slider-runnable-track {
+    box-shadow: none;
+    color: var(--w-s-color-text);
+    height: var(--w-slider-track-height);
+  }
+
+  /*
+    Use anchor positioning to place the tooltip target in relation to the slider thumb.
+    We use a polyfill to bring support to older Safari, Firefox at time of writing.
+   */
+  .w-slider-thumb__range::-webkit-slider-thumb {
+    anchor-name: --thumb;
+
+    appearance: none;
+    cursor: pointer;
+    background: var(--w-s-color-background-primary);
+    border-radius: 50%;
+    height: var(--w-slider-thumb-size);
+    margin-top: calc(-1 * calc(var(--w-slider-thumb-offset) - calc(var(--w-slider-track-height) / 2)));
+    pointer-events: initial;
+    width: var(--w-slider-thumb-size);
+    z-index: 1;
+  }
+
+  .w-slider-thumb__range::-moz-range-thumb {
+    anchor-name: --thumb;
+
+    appearance: none;
+    cursor: pointer;
+    background: var(--w-s-color-background-primary);
+    border-radius: 50%;
+    border-color: transparent;
+    height: var(--w-slider-thumb-size);
+    margin-top: calc(-1 * calc(var(--w-slider-thumb-offset) - calc(var(--w-slider-track-height) / 2)));
+    pointer-events: initial;
+    width: var(--w-slider-thumb-size);
+    z-index: 1;
+
+    box-shadow: none;
+  }
+
+  .w-slider-thumb__range:active::-webkit-slider-thumb,
+  .w-slider-thumb__range:hover::-webkit-slider-thumb {
+    background: var(--w-s-color-background-primary-hover);
+    box-shadow: var(--w-shadow-slider-handle-hover);
+  }
+
+  .w-slider-thumb__range:focus,
+  .w-slider-thumb__range:focus-visible {
+    outline: none;
+  }
+
+  .w-slider-thumb__range:focus-visible::-webkit-slider-thumb {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+    box-shadow: none;
+  }
+
+  .w-slider-thumb__range:active::-moz-range-thumb,
+  .w-slider-thumb__range:hover::-moz-range-thumb {
+    background: var(--w-s-color-background-primary-hover);
+    box-shadow: var(--w-shadow-slider-handle-hover);
+  }
+
+  .w-slider-thumb__range:focus-visible::-moz-range-thumb {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+    box-shadow: none;
+  }
+
+  .w-slider-thumb__tooltip-target {
+    display: block;
+    pointer-events: none;
+    position: absolute;
+    border: 2px solid transparent;
+    border-radius: 20px;
+    width: 8px;
+    height: 8px;
+    position-anchor: --thumb;
+    position-area: center; /* Position the tooltip target right on the range thumb */
+  }
+
+  /* Uncomment this to debug the invisible anchor target */
+  /* .w-slider-thumb__tooltip-target { border-color: lime; } */
+
+  .w-slider-thumb__from-marker,
+  .w-slider-thumb__to-marker {
+    margin-inline: 2px; /* visual alignment with input border, slider thumb */
+    color: var(--w-s-color-text-subtle);
+    font-size: var(--w-font-size-s);
+    line-height: var(--w-line-height-s);
+  }
+
+  .w-slider-thumb__from-marker {
+    grid-area: frommarker;
+  }
+
+  .w-slider-thumb__to-marker {
+    grid-area: tomarker;
+    text-align: right;
+  }
+
+  .w-slider-thumb__textfield {
+    margin-top: 10px;
+    pointer-events: auto;
+    grid-row: 3 / 4;
+    grid-column: 1 / 3; /* Single sliders should have the text field use the fromtextfield _and_ gap portion of the CSS grid. */
+  }
+
+  :host([name='from']) .w-slider-thumb__textfield {
+    grid-column: 1 / 2; /* Range sliders should leave the gap empty. */
+  }
+
+  :host([name='from']) .w-slider-thumb__range {
+    margin-left: var(--w-slider-thumb-size);
+  }
+
+  :host([name='to']) .w-slider-thumb__range {
+    margin-right: var(--w-slider-thumb-size);
+  }
+
+  :host([name='from']) .w-slider-thumb__range::-webkit-slider-thumb,
+  :host([name='from']) .w-slider-thumb__tooltip-target {
+    transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
+  }
+
+  :host([name='from']) .w-slider-thumb__range::-moz-range-thumb {
+    transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
+  }
+
+  :host([name='to']) .w-slider-thumb__textfield {
+    grid-row: 3 / 4;
+    grid-column: 3 / 4;
+  }
+
+  :host([name='to']) .w-slider-thumb__tooltip-target,
+  :host([name='to']) .w-slider-thumb__range::-webkit-slider-thumb {
+    transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
+  }
+
+  :host([name='to']) .w-slider-thumb__range::-moz-range-thumb {
+    transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
+  }
+`;

package/dist/packages/slider/styles/w-slider.styles.d.ts

@@ -0,0 +1 @@
+export declare const wSliderStyles: import("lit").CSSResult;