@warp-ds/elements 2.2.0-next.12 → 2.2.0-next.14

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

@@ -0,0 +1,46 @@
+import { css } from 'lit';
+/* For some reason the pseudoselectors for webkit and moz must be separate blocks :shrug: */
+export const wTextfieldStyles = css `
+  .w-textfield {
+    --_input-padding-top: 12px;
+    --_input-padding-left: 8px;
+    --_input-padding-right: 8px;
+    position: relative;
+  }
+
+  .w-textfield--has-prefix {
+    --_input-padding-left: 40px;
+  }
+
+  .w-textfield--has-suffix {
+    --_input-padding-right: var(--w-prefix-width, 40px);
+  }
+
+  .w-textfield__input-wrapper {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .w-textfield__input-wrapper:focus-within .w-textfield__mask {
+    display: none;
+  }
+
+  /* Could also consider giving the input mask a background color instead of this */
+  .w-textfield__input-wrapper:has(.w-textfield__mask):not(:focus-within) input {
+    color: transparent;
+  }
+
+  .w-textfield__mask {
+    display: block;
+    border: 1px solid transparent;
+    top: var(--_input-padding-top);
+    left: var(--_input-padding-left);
+    right: var(--_input-padding-right);
+    position: absolute;
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    z-index: 1;
+  }
+`;

package/dist/packages/textfield/styles.js

@@ -1,2 +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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border{border-color:var(--w-s-color-border)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;
+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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border{border-color:var(--w-s-color-border)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.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}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;

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

@@ -15,3 +15,4 @@ export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Required: Story;
 export declare const WithAffix: Story;
+export declare const Masking: Story;

package/dist/packages/textfield/textfield.stories.js

@@ -84,3 +84,22 @@ export const WithAffix = {
     `;
     },
 };
+export const Masking = {
+    args: {
+        label: 'Price',
+        placeholder: '1 000 000',
+        type: 'text',
+        locale: 'nb',
+    },
+    render({ locale, ...args }) {
+        return html `
+      <w-textfield ${spread(prespread(args))} data-testid="masking">
+        <w-affix slot="suffix" label="kr"></w-affix>
+      </w-textfield>
+      <script type="module">
+        const maskingTextfield = document.querySelector('w-textfield[data-testid="masking"]');
+        maskingTextfield.formatter = window.getNumberFormatter('${locale}').format;
+      </script>
+    `;
+    },
+};

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

@@ -1 +1,2 @@
+import '../affix/index.js';
 import './index.js';

package/dist/packages/textfield/textfield.test.js

@@ -1,9 +1,68 @@
 import { html } from 'lit';
-import { expect, test } from 'vitest';
+import { userEvent } from '@vitest/browser/context';
+import { expect, test, vi } from 'vitest';
 import { render } from 'vitest-browser-lit';
+import '../affix/index.js';
 import './index.js';
 test('renders the textfield', async () => {
-    const component = html `<w-textfield label="Email" help-text="Ugyldig e-post"></w-textfield>`;
+    const component = html `<w-textfield label="Test label"></w-textfield>`;
     const page = render(component);
-    await expect.element(page.getByText('Email')).toBeVisible();
+    await expect.element(page.getByText('Test label')).toBeVisible();
+});
+test('works as expected in forms', async () => {
+    const label = 'Test label';
+    const component = html `
+    <form data-testid="form">
+      <w-textfield label="${label}" name="message" value="Hola el Mundo"></w-textfield>
+    </form>
+  `;
+    const page = render(component);
+    await expect.element(page.getByLabelText(label)).toHaveValue('Hola el Mundo');
+    let formData = new FormData(page.getByTestId('form').element());
+    expect(formData.get('message')).toBe('Hola el Mundo');
+    const inputHandler = vi.fn();
+    const changeHandler = vi.fn();
+    page.getByLabelText(label).element().addEventListener('input', inputHandler);
+    page.getByLabelText(label).element().addEventListener('change', changeHandler);
+    await page.getByLabelText(label).fill('Hello, World');
+    expect(inputHandler).toHaveBeenCalled();
+    expect(changeHandler).not.toHaveBeenCalled();
+    await userEvent.tab(); // trigger a blur to fire the change event
+    expect(changeHandler).toHaveBeenCalled();
+    await expect.element(page.getByLabelText(label)).toHaveValue('Hello, World');
+    formData = new FormData(page.getByTestId('form').element());
+    expect(formData.get('message')).toBe('Hello, World');
+});
+test('renders help text if provided', async () => {
+    const component = html `<w-textfield label="Test label" help-text="Helpful help text"></w-textfield>`;
+    const page = render(component);
+    await expect.element(page.getByText('Helpful help text')).toBeVisible();
+});
+test('marks input field as aria-invalid if the invalid prop is true', async () => {
+    const component = html `<w-textfield label="Test label" invalid help-text="No, bad input!"></w-textfield>`;
+    const page = render(component);
+    await expect.element(page.getByLabelText('Test label')).toHaveAccessibleErrorMessage('No, bad input!');
+});
+test('marks input field as readonly if the read-only prop is true', async () => {
+    const component = html `<w-textfield label="Test label" read-only></w-textfield>`;
+    const page = render(component);
+    await expect.element(page.getByLabelText('Test label')).toHaveAttribute('readonly', '');
+});
+test('renders affix component in the prefix slot', async () => {
+    const component = html `
+    <w-textfield label="Test label">
+      <w-affix slot="prefix" label="kr"></w-affix>
+    </w-textfield>
+  `;
+    const page = render(component);
+    await expect.element(page.getByText('kr')).toBeVisible();
+});
+test('renders affix component in the suffix slot', async () => {
+    const component = html `
+    <w-textfield label="Test label">
+      <w-affix slot="suffix" label="kr"></w-affix>
+    </w-textfield>
+  `;
+    const page = render(component);
+    await expect.element(page.getByText('kr')).toBeVisible();
 });

package/dist/vscode.html-custom-data.json

@@ -187,6 +187,85 @@
       ],
       "references": []
     },
+    {
+      "name": "w-combobox",
+      "description": "A combobox element for text input with selectable options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)\n\n---\n\n",
+      "attributes": [
+        {
+          "name": "options",
+          "description": "The available options to select from",
+          "values": [{ "name": "ComboboxOption[]" }]
+        },
+        { "name": "label", "description": "Label above input", "values": [] },
+        {
+          "name": "placeholder",
+          "description": "Input placeholder",
+          "values": []
+        },
+        { "name": "value", "description": "The input value", "values": [] },
+        {
+          "name": "open-on-focus",
+          "description": "Whether the popover opens when focus is on the text field",
+          "values": []
+        },
+        {
+          "name": "select-on-blur",
+          "description": "Select active option on blur",
+          "values": []
+        },
+        {
+          "name": "match-text-segments",
+          "description": "Whether the matching text segments in the options should be highlighted",
+          "values": []
+        },
+        {
+          "name": "disable-static-filtering",
+          "description": "Disable client-side static filtering",
+          "values": []
+        },
+        {
+          "name": "invalid",
+          "description": "Renders the input field in an invalid state",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The content to display as the help text",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Whether the element is required",
+          "values": []
+        },
+        {
+          "name": "optional",
+          "description": "Whether to show optional text",
+          "values": []
+        },
+        {
+          "name": "class-name",
+          "description": "Additional container styling",
+          "values": []
+        },
+        {
+          "name": "list-class-name",
+          "description": "Additional list styling",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "Name attribute for form submission",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "w-datepicker",
       "description": "An input for dates.\n\nUses the `lang` attribute on either the element or on `<html>` to determine the locale options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)\n\n---\n\n",
@@ -366,6 +445,75 @@
       ],
       "references": []
     },
+    {
+      "name": "w-textfield",
+      "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)\n\n---\n\n",
+      "attributes": [
+        { "name": "disabled", "values": [] },
+        { "name": "invalid", "values": [] },
+        { "name": "id", "values": [] },
+        { "name": "label", "values": [] },
+        { "name": "help-text", "values": [] },
+        { "name": "size", "values": [] },
+        { "name": "max", "values": [] },
+        { "name": "min", "values": [] },
+        { "name": "min-length", "values": [] },
+        { "name": "max-length", "values": [] },
+        { "name": "pattern", "values": [] },
+        { "name": "placeholder", "values": [] },
+        { "name": "read-only", "values": [] },
+        { "name": "required", "values": [] },
+        { "name": "type", "values": [] },
+        { "name": "value", "values": [] },
+        { "name": "name", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-slider-thumb",
+      "description": "Component to place inside a `<w-slider>`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)\n\n---\n\n\n\n### **Events:**\n - **slidervalidity**",
+      "attributes": [
+        { "name": "aria-label", "values": [] },
+        { "name": "aria-description", "values": [] },
+        { "name": "label", "values": [] },
+        { "name": "name", "values": [] },
+        { "name": "value", "values": [] },
+        { "name": "disabled", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-slider",
+      "description": "Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)\n\n---\n\n\n\n### **Slots:**\n - _default_ - For single sliders place a `<w-slider-thumb>` in the default slot.\n- **label** - Label for the slider or range slider as a whole.\n- **description** - Optional description between the label and slider.\n- **from** - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.\n- **to** - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        { "name": "disabled", "values": [] },
+        { "name": "invalid", "values": [] },
+        {
+          "name": "required",
+          "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
+          "values": []
+        },
+        { "name": "min", "values": [] },
+        { "name": "max", "values": [] },
+        {
+          "name": "markers",
+          "description": "Pass a value similar to step to create visual markers at that interval",
+          "values": []
+        },
+        { "name": "step", "values": [] },
+        {
+          "name": "suffix",
+          "description": "Suffix used in text input fields and for the min and max values of the slider.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "w-steps",
       "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)\n\n---\n\n",
@@ -392,30 +540,6 @@
         { "name": "disabled", "values": [] }
       ],
       "references": []
-    },
-    {
-      "name": "w-textfield",
-      "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)\n\n---\n\n",
-      "attributes": [
-        { "name": "disabled", "values": [] },
-        { "name": "invalid", "values": [] },
-        { "name": "id", "values": [] },
-        { "name": "label", "values": [] },
-        { "name": "help-text", "values": [] },
-        { "name": "size", "values": [] },
-        { "name": "max", "values": [] },
-        { "name": "min", "values": [] },
-        { "name": "min-length", "values": [] },
-        { "name": "max-length", "values": [] },
-        { "name": "pattern", "values": [] },
-        { "name": "placeholder", "values": [] },
-        { "name": "read-only", "values": [] },
-        { "name": "required", "values": [] },
-        { "name": "type", "values": [] },
-        { "name": "value", "values": [] },
-        { "name": "name", "values": [] }
-      ],
-      "references": []
     }
   ]
 }