@warp-ds/elements 2.3.0-next.3 → 2.3.0-next.30

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

@@ -16,3 +16,4 @@ export declare const Step: Story;
 export declare const OverUnder: Story;
 export declare const SingleError: Story;
 export declare const RangeError: Story;
+export declare const TestCase: Story;

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

@@ -116,3 +116,25 @@ export const RangeError = {
             React.createElement(SliderThumb, { slot: "to", name: "to" })));
     },
 };
+export const TestCase = {
+    render() {
+        const [fromValue, setFromValue] = useState('0');
+        const [toValue, setToValue] = useState('150000');
+        return (React.createElement(React.Fragment, null,
+            React.createElement("form", { id: "overunder", style: { marginBottom: 16 }, lang: "nb", onInput: (val) => {
+                    const formData = new FormData(val.currentTarget);
+                    setFromValue(formData.get('from'));
+                    setToValue(formData.get('to'));
+                } },
+                React.createElement(Slider, { label: "Pris", min: "0", max: "700000" },
+                    React.createElement(SliderThumb, { slot: "from", "aria-label": "Fra pris", name: "from", value: fromValue }),
+                    React.createElement(SliderThumb, { slot: "to", "aria-label": "Til pris", "aria-description": "700000 inkluderer prisen derfra og opp", name: "to", value: toValue }))),
+            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", null, fromValue),
+                    React.createElement("dt", null, "To:"),
+                    React.createElement("dd", null, toValue)))));
+    },
+};

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

@@ -16,3 +16,6 @@ export declare const Step: Story;
 export declare const OverUnder: Story;
 export declare const SingleError: Story;
 export declare const RangeError: Story;
+export declare const TestCase: Story;
+export declare const CustomError: Story;
+export declare const Description: Story;

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

@@ -29,8 +29,16 @@ 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-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>
     `;
     },
@@ -43,13 +51,27 @@ export const SuffixSquareMeters = {
     },
     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
+        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;
+        sqmSlider.formatter = window.getNumberFormatter("${locale}").format;
       </script>
     `;
     },
@@ -61,13 +83,31 @@ export const SuffixCurrency = {
     },
     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
+        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;
+        const currencySlider = document.querySelector(
+          'w-slider[data-testid="currency"]'
+        );
+        currencySlider.formatter = window.getNumberFormatter(
+          "${locale}"
+        ).format;
       </script>
     `;
     },
@@ -79,13 +119,27 @@ export const SuffixKilometers = {
     },
     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
+        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;
+        kmSlider.formatter = window.getNumberFormatter("${locale}").format;
       </script>
     `;
     },
@@ -98,7 +152,13 @@ export const Marks = {
     },
     render({ markers, step }) {
         return html `
-      <w-slider label="Single" min="0" max="100" step="${step}" markers="${markers}">
+      <w-slider
+        label="Single"
+        min="0"
+        max="100"
+        step="${step}"
+        markers="${markers}"
+      >
         <w-slider-thumb name="value"></w-slider-thumb>
       </w-slider>
     `;
@@ -121,20 +181,31 @@ export const OverUnder = {
     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
+          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>
+            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>
+            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>
+      <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>
@@ -145,24 +216,26 @@ export const OverUnder = {
       </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';
+        const overunderSlider = document.querySelector(
+          'w-slider[data-testid="overunder"]'
+        );
+        overunderSlider.formatter = function (value, type) {
+          if (value === "" && type === "from") {
+            return "Før 1950";
           }
-          if (value === '2025') {
-            return 'Etter 2025';
+          if (value === "" && type === "to") {
+            return "Etter 2025";
           }
           return value;
         };
 
         /** Code to show the form values in output */
-        document.forms['overunder'].addEventListener('input', function () {
+        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;
+          const from = formData.get("from");
+          const to = formData.get("to");
+          document.getElementById("overunder-from").innerText = from;
+          document.getElementById("overunder-to").innerText = to;
         });
       </script>
     `;
@@ -182,13 +255,147 @@ export const SingleError = {
     },
 };
 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="Hestekrefter"
+          suffix="hk"
+          min="50"
+          max="500"
+          data-testid="overunder"
+          allow-values-outside-range
+          step="10"
+        >
+          <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 50";
+          }
+          if (value === "" && type === "to") {
+            return "Over 500";
+          }
+          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>
-        <p slot="description">Try typing a from value higher than a to value</p>
+      <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.js

@@ -81,3 +81,31 @@ test('deleting from number input works as expected', async () => {
     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-thumb.styles.js

@@ -6,9 +6,9 @@ export const wSliderThumbStyles = css `
     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';
+      "slider slider slider"
+      "frommarker . tomarker"
+      "fromtextfield . totextfield";
     grid-template-columns: 1fr 24px 1fr;
   }
 
@@ -39,7 +39,11 @@ export const wSliderThumbStyles = css `
     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)));
+    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;
@@ -54,7 +58,11 @@ export const wSliderThumbStyles = css `
     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)));
+    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;
@@ -124,44 +132,44 @@ export const wSliderThumbStyles = css `
   }
 
   .w-slider-thumb__textfield {
-    margin-top: 10px;
+    margin-top: 12px;
     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 {
+  :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 {
+  :host([name="from"]) .w-slider-thumb__range {
     margin-left: var(--w-slider-thumb-size);
   }
 
-  :host([name='to']) .w-slider-thumb__range {
+  :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 {
+  :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 {
+  :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 {
+  :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 {
+  :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 {
+  :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.js

@@ -8,9 +8,10 @@ export const wSliderStyles = css `
     display: grid;
     width: 100%;
     grid-template-areas:
-      'label'
-      'description'
-      'slider';
+      "label"
+      "description"
+      "slider"
+      "error";
     grid-template-columns: 1fr;
 
     --w-slider-track-background: var(--w-s-color-background-disabled-subtle);
@@ -18,7 +19,9 @@ export const wSliderStyles = css `
     --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-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);
@@ -29,26 +32,45 @@ export const wSliderStyles = css `
     --_value-range: calc(var(--max) - var(--min));
 
     /** Round up to the nearest --step, which defaults to 1 (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step) */
-    --_from-in-range: round(up, max(calc(var(--from) - var(--min)), 0), var(--step, 1));
+    --_from-in-range: round(
+      up,
+      max(calc(var(--from) - var(--min)), 0),
+      var(--step, 1)
+    );
 
     /* limit to maximum value in range so typing a value larger than max doesn't explode layouts */
-    --_to-in-range: round(up, min(calc(var(--to) - var(--min)), var(--_value-range)), var(--step, 1));
+    --_to-in-range: round(
+      up,
+      min(calc(var(--to) - var(--min)), var(--_value-range)),
+      var(--step, 1)
+    );
 
     /* Position the starting point of the fill in the case of a non-zero --from value in a range slider.
      * In other words, given a width of 100% how many percent should be left unfilled/blank
      * at the beginning of the range slider (dashes in this ASCII-range-slider: |---O******O|) */
-    --_from-as-percent-of-max: calc(var(--_from-in-range) / var(--_value-range) * 100);
+    --_from-as-percent-of-max: calc(
+      var(--_from-in-range) / var(--_value-range) * 100
+    );
     --_blank-values-before: var(--_from-as-percent-of-max);
 
     /* Set the width of the fill as a percentage.
      * In other words, given a width of 100% how many percent should be left unfilled/blank
      * at the end of the slider (dashes in this ASCII-slider: |******O---|) */
-    --_to-as-percent-of-max: calc(var(--_to-in-range) / var(--_value-range) * 100);
-    --_filled-values: calc(var(--_to-as-percent-of-max) - var(--_blank-values-before));
+    --_to-as-percent-of-max: calc(
+      var(--_to-in-range) / var(--_value-range) * 100
+    );
+    --_filled-values: calc(
+      var(--_to-as-percent-of-max) - var(--_blank-values-before)
+    );
 
     /* 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)
+      var(--w-slider-thumb-size) / 2 +
+        calc(
+          var(--w-slider-track-active-height) - calc(
+              var(--w-slider-track-height) / 2
+            ) + 1px
+        )
     );
   }
 
@@ -90,8 +112,16 @@ export const wSliderStyles = css `
     border-start-start-radius: var(--active-range-border-radius, 0);
     border-end-start-radius: var(--active-range-border-radius, 0);
 
-    margin-left: calc(calc(var(--_blank-values-before) * 1%) - var(--active-range-inline-start-padding, 0px));
-    width: calc(calc(var(--_filled-values) * 1%) + var(--active-range-inline-end-padding, 0px));
+    margin-left: calc(
+      calc(var(--_blank-values-before) * 1%) - var(
+          --active-range-inline-start-padding,
+          0px
+        )
+    );
+    width: calc(
+      calc(var(--_filled-values) * 1%) +
+        var(--active-range-inline-end-padding, 0px)
+    );
     z-index: 1;
   }
 
@@ -105,13 +135,15 @@ export const wSliderStyles = css `
        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;
+        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-size: calc(var(--_step-width-as-percent) * 1%)
+      var(--_marker-height);
 
     background-position: bottom 0 left 8px right 8px;
     position: absolute;
@@ -123,6 +155,21 @@ export const wSliderStyles = css `
     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;