@warp-ds/elements 2.3.2 → 2.4.0-next.10

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

@@ -0,0 +1,405 @@
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit';
+import '../affix/affix.js';
+import '../attention/attention.js';
+import '../textfield/textfield.js';
+import './slider.js';
+import '../slider-thumb/slider-thumb.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" step="25">
+        <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"
+          allow-values-outside-range
+        >
+          <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, type) {
+          if (value === "" && type === "from") {
+            return "Før 1950";
+          }
+          if (value === "" && type === "to") {
+            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: {},
+    render() {
+        return html `
+      <form id="rangeerror" style="margin-bottom: 16px">
+        <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>
+      <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="rangeerror-from"></dd>
+          <dt>To:</dt>
+          <dd id="rangeerror-to"></dd>
+        </dl>
+      </output>
+      <script>
+        /** Code to show the form values in output */
+        document.forms["rangeerror"].addEventListener("input", function () {
+          const formData = new FormData(this);
+          const from = formData.get("from");
+          const to = formData.get("to");
+          document.getElementById("rangeerror-from").innerText = from;
+          document.getElementById("rangeerror-to").innerText = to;
+        });
+      </script>
+    `;
+    },
+};
+export const TestCase = {
+    args: {},
+    render() {
+        return html `
+      <form id="overunder" style="margin-bottom: 16px" lang="nb">
+        <w-slider
+          label="Bredde"
+          suffix="cm"
+          min="200"
+          max="350"
+          data-testid="overunder"
+          allow-values-outside-range
+          step="50"
+        >
+          <w-slider-thumb
+            slot="from"
+            aria-label="Fra år"
+            aria-description="1950 inkluderer kjøretøy produsert fram til 1950"
+            name="from"
+            value=""
+          ></w-slider-thumb>
+          <w-slider-thumb
+            slot="to"
+            aria-label="Til år"
+            aria-description="2025 inkluderer kjøretøy produsert etter 2025"
+            name="to"
+            value=""
+          ></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, type) {
+          if (value === "" && type === "from") {
+            return "Under 200";
+          }
+          if (value === "" && type === "to") {
+            return "Over 350";
+          }
+          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 CustomError = {
+    args: {
+        locale: 'nb',
+    },
+    render() {
+        return html `
+      <w-slider
+        label="Production year"
+        min="1950"
+        max="2025"
+        over
+        under
+        error="I'm an external error telling you something is wrong"
+        invalid
+      >
+        <w-slider-thumb slot="from" name="from"></w-slider-thumb>
+        <w-slider-thumb slot="to" name="to"></w-slider-thumb>
+      </w-slider>
+    `;
+    },
+};
+export const Description = {
+    args: {
+        locale: 'nb',
+    },
+    render() {
+        return html `
+      <w-slider
+        label="Production year"
+        min="1950"
+        max="2025"
+        over
+        under
+        help-text="Production year of the car"
+      >
+        <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,5 @@
+import '../attention/attention.js';
+import '../affix/affix.js';
+import '../textfield/textfield.js';
+import './slider.js';
+import '../slider-thumb/slider-thumb.js';

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

@@ -0,0 +1,112 @@
+import { userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import '../attention/attention.js';
+import '../affix/affix.js';
+import '../textfield/textfield.js';
+import './slider.js';
+import '../slider-thumb/slider-thumb.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();
+});
+test('can reset slider by resetting surrounding form', async () => {
+    render(html `
+    <form>
+      <w-slider label="Slider from 0 - 10" min="0" max="10">
+        <p slot="description">If you want to slide between 0 and 10, this slider has you covered.</p>
+        <w-slider-thumb name="zero-ten" value="3"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const wSlider = document.querySelector('w-slider');
+    const wSliderThumb = wSlider.querySelector('w-slider-thumb');
+    // sanity
+    expect(form).not.toBeNull();
+    expect(wSlider).not.toBeNull();
+    expect(wSliderThumb).not.toBeNull();
+    expect(wSliderThumb.value).toBe('3');
+    expect(Object.fromEntries(new FormData(form).entries())['zero-ten']).toBe('3');
+    wSliderThumb.value = '5';
+    await wSliderThumb.updateComplete;
+    expect(wSliderThumb.value).toBe('5');
+    expect(Object.fromEntries(new FormData(form).entries())['zero-ten']).toBe('5');
+    // Reset the form
+    form.reset();
+    await wSliderThumb.updateComplete;
+    expect(wSliderThumb.value).toBe('3');
+    expect(Object.fromEntries(new FormData(form).entries())['zero-ten']).toBe('3');
+});

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

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

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

@@ -0,0 +1,148 @@
+import { css } from 'lit';
+export const wSliderStyles = css `
+  .w-slider {
+    position: relative;
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    width: 100%;
+    grid-template-areas:
+      "label"
+      "description"
+      "slider"
+      "error";
+    grid-template-columns: 1fr;
+
+    --w-slider-track-background: var(--w-s-color-background-disabled-subtle);
+    --w-slider-track-active-background: var(--w-s-color-background-primary);
+    --w-slider-track-height: 4px;
+    --w-slider-track-active-height: 6px;
+    --w-slider-thumb-background: var(--w-s-color-background-primary);
+    --w-slider-thumb-background-hover: var(
+      --w-s-color-background-primary-hover
+    );
+    --w-slider-thumb-size: 28px;
+    --w-slider-thumb-offset: calc(var(--w-slider-thumb-size) / 2);
+    --w-slider-marker-color: var(--w-s-color-border);
+
+
+    /* Vertical position of range and markers */
+    --_range-top: calc(
+      var(--w-slider-thumb-size) / 2 +
+        calc(
+          var(--w-slider-track-active-height) - calc(
+              var(--w-slider-track-height) / 2
+            ) + 1px
+        )
+    );
+  }
+
+  .w-slider__label {
+    grid-area: label;
+    font-size: var(--w-font-size-s);
+    line-height: var(--w-line-height-s);
+    font-weight: bold;
+    padding-bottom: 8px;
+    color: var(--w-s-color-text);
+  }
+
+  .w-slider__description {
+    grid-area: description;
+  }
+
+  .w-slider__range {
+    align-self: center;
+    background: var(--w-slider-track-background);
+    border-radius: 4px;
+    height: var(--w-slider-track-active-height);
+    position: absolute;
+    /* For range sliders to avoid overlapping the slider thumbs we transform them to
+    be visually to the left and right of their respective input[type="range"]. This
+    padding is here so the active-range element is the same width as the input fields. */
+    padding-inline-start: var(--active-range-inline-start-padding, 0);
+    padding-inline-end: var(--active-range-inline-end-padding, 0);
+    top: var(--_range-top);
+    left: 0;
+    right: 0;
+    grid-area: slider;
+  }
+
+  .w-slider__active-range {
+    box-sizing: content-box;
+    background: var(--w-slider-track-active-background);
+    height: var(--w-slider-track-active-height);
+
+    border-start-start-radius: var(--active-range-border-radius, 0);
+    border-end-start-radius: var(--active-range-border-radius, 0);
+
+    /* takes over-under into the calculation if set, as this makes the ranges longer in reality */
+    --max-with-offset: calc(var(--max) + var(--over-under-offset, 0));
+
+    /* calculate the offset for the "from" thumb in percentage to move the range visualisation from the left edge, using max() to avoid going off screen */
+    --offset-percentage: calc(calc(var(--from) - var(--min)) / calc(var(--max-with-offset) - var(--min)) * 100);
+    margin-left: calc(max(var(--offset-percentage) * 1%, 0px) - 1px);
+
+    /* calculate the width of the selected range in percentage, clamped between min/max */
+    --value-range: calc(var(--max-with-offset) - var(--min));
+    --range-span-percentage: calc(calc(min(var(--to), var(--max-with-offset)) - max(var(--min), var(--from))) / var(--value-range) * 100 );
+    width: calc(var(--range-span-percentage) * 1% + 1px);
+
+
+    z-index: 1;
+  }
+
+  .w-slider__markers {
+    --_marker-height: 7px;
+    --_marker-width: 1px;
+
+    align-self: center;
+
+    /* Creates a linear gradient with --_marker-width wide markers
+       followed by enough transparent that we can repeat the gradient
+       along the X axis and have markers visible where we want them. */
+    background: linear-gradient(
+        to right,
+        var(--w-slider-marker-color) var(--_marker-width),
+        rgba(0, 0, 0, 0) 1px calc(100% - 1px),
+        var(--w-slider-marker-color) 100%
+      )
+      repeat-x;
+    --_step-width-as-percent: calc(var(--markers) / var(--_value-range) * 100);
+    background-size: calc(var(--_step-width-as-percent) * 1%)
+      var(--_marker-height);
+
+    background-position: bottom 0 left 8px right 8px;
+    position: absolute;
+    top: calc(var(--_range-top) + 2px);
+    left: 1px;
+    right: 1px;
+    grid-area: slider;
+    height: var(--_marker-height);
+    margin-inline: var(--w-slider-thumb-offset);
+  }
+
+  .w-slider__error {
+    grid-area: error;
+    padding-top: 8px;
+    font-size: var(--w-font-size-xs);
+    line-height: var(--w-line-height-xs);
+    color: var(--w-s-color-text-negative);
+  }
+
+  .w-slider__help-text {
+    grid-area: error;
+    padding-top: 8px;
+    font-size: var(--w-font-size-xs);
+    line-height: var(--w-line-height-xs);
+  }
+
+  slot::slotted(w-slider-thumb) {
+    position: static;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    grid-area: slider;
+  }
+`;

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

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

package/dist/packages/slider/styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hidden{display:none}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`;

package/dist/packages/slider-thumb/SliderThumb.d.ts

@@ -0,0 +1,2 @@
+import { WarpSliderThumb } from './slider-thumb.js';
+export declare const SliderThumb: import("@lit/react").ReactWebComponent<WarpSliderThumb, {}>;

package/dist/packages/slider-thumb/SliderThumb.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { WarpSliderThumb } from './slider-thumb.js';
+export const SliderThumb = createComponent({
+    tagName: 'w-slider-thumb',
+    elementClass: WarpSliderThumb,
+    react: React,
+});