@warp-ds/elements 2.2.0-next.8 → 2.2.0

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

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

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

@@ -0,0 +1,55 @@
+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;
+  }
+
+  /* Hide the native browser controls */
+  input[type="number"] {
+    -moz-appearance:textfield;
+  }
+
+  input[type="number"]::-webkit-inner-spin-button {
+    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

@@ -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}.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-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-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.react.stories.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { TextField } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpTextField>, "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "mask" | "pattern" | "disabled" | "name" | "type" | "value" | "updated" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "resetFormControl" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "readOnly" | "helpText" | "size" | "max" | "min" | "minLength" | "maxLength" | "placeholder" | "required" | "formatter" | "_hasPrefix" | "_hasSuffix" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange"> & {
+        onBlur?: (e: Event) => void;
+        onblur?: (e: Event) => void;
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+        onInput?: (e: Event) => void;
+        oninput?: (e: Event) => void;
+        onFocus?: (e: Event) => void;
+        onfocus?: (e: Event) => void;
+    } & Partial<Omit<import(".").WarpTextField, keyof HTMLElement>> & React.RefAttributes<import(".").WarpTextField>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpTextField, {
+        onBlur: string;
+        onblur: string;
+        onChange: string;
+        onchange: string;
+        onInput: string;
+        oninput: string;
+        onFocus: string;
+        onfocus: string;
+    }>;
+};
+export default _default;
+export type Story = StoryObj<typeof TextField>;
+export declare const Default: Story;
+export declare const WithPlaceholder: Story;
+export declare const WithHelpText: Story;
+export declare const Invalid: Story;
+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.react.stories.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Affix } from '../affix/react';
+import { TextField } from './react';
+const locale = 'nb';
+const getNumberFormatter = (locale, opts = {}) => {
+    return (value) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0, ...opts }).format(value);
+};
+export default {
+    title: 'Forms/Textfield',
+    render(args) {
+        return React.createElement(TextField, { ...args });
+    },
+    component: TextField,
+};
+export const Default = {
+    args: {
+        label: 'Email',
+        type: 'email',
+    },
+};
+export const WithPlaceholder = {
+    args: {
+        label: 'Email',
+        placeholder: 'user@example.com',
+        type: 'email',
+    },
+};
+export const WithHelpText = {
+    args: {
+        label: 'Password',
+        helpText: 'Must be at least 8 characters',
+        type: 'password',
+    },
+};
+export const Invalid = {
+    args: {
+        label: 'Email',
+        invalid: true,
+        helpText: 'Please enter a valid email address',
+        value: 'invalid-email',
+        type: 'email',
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Email',
+        disabled: true,
+        value: 'user@example.com',
+        type: 'email',
+    },
+};
+export const ReadOnly = {
+    args: {
+        label: 'Email',
+        readOnly: true,
+        value: 'user@example.com',
+        type: 'email',
+    },
+};
+export const Required = {
+    args: {
+        label: 'Email',
+        required: true,
+        type: 'email',
+    },
+};
+export const WithAffix = {
+    args: {
+        label: 'Price',
+        placeholder: '1 000 000',
+        type: 'text',
+    },
+    render(args) {
+        return (React.createElement(TextField, { ...args },
+            React.createElement(Affix, { slot: "suffix", label: "kr" })));
+    },
+};
+export const Masking = {
+    args: {
+        label: 'Price',
+        placeholder: '1 000 000',
+        type: 'text',
+    },
+    render({ ...args }) {
+        return (React.createElement(TextField, { ...args, formatter: getNumberFormatter(locale) },
+            React.createElement(Affix, { slot: "suffix", label: "kr" })));
+    },
+};

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

@@ -0,0 +1,105 @@
+import { spread } from '@open-wc/lit-helpers';
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit';
+import { prespread } from '../../.storybook/utilities.js';
+import './index.js';
+const { events, args, argTypes } = getStorybookHelpers('w-textfield');
+const meta = {
+    title: 'Forms/Textfield',
+    render(args) {
+        return html `<w-textfield ${spread(prespread(args))}></w-textfield>`;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Email',
+        type: 'email',
+    },
+};
+export const WithPlaceholder = {
+    args: {
+        label: 'Email',
+        placeholder: 'user@example.com',
+        type: 'email',
+    },
+};
+export const WithHelpText = {
+    args: {
+        label: 'Password',
+        'help-text': 'Must be at least 8 characters',
+        type: 'password',
+    },
+};
+export const Invalid = {
+    args: {
+        label: 'Email',
+        invalid: true,
+        'help-text': 'Please enter a valid email address',
+        value: 'invalid-email',
+        type: 'email',
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Email',
+        disabled: true,
+        value: 'user@example.com',
+        type: 'email',
+    },
+};
+export const ReadOnly = {
+    args: {
+        label: 'Email',
+        'read-only': true,
+        value: 'user@example.com',
+        type: 'email',
+    },
+};
+export const Required = {
+    args: {
+        label: 'Email',
+        required: true,
+        type: 'email',
+    },
+};
+export const WithAffix = {
+    args: {
+        label: 'Price',
+        placeholder: '1 000 000',
+        type: 'text',
+    },
+    render(args) {
+        return html `
+      <w-textfield ${spread(prespread(args))}>
+        <w-affix slot="suffix" label="kr"></w-affix>
+      </w-textfield>
+    `;
+    },
+};
+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

@@ -0,0 +1,68 @@
+import { userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
+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="Test label"></w-textfield>`;
+    const page = render(component);
+    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/packages/toast/api.d.ts

@@ -1,54 +1,13 @@
-/**
- * Toast helper function options
- * @typedef    {Object}                         ToastOptions
- * @property   {(number|string)}                [id]        Custom identifier
- * @property   {('success'|'error'|'warning')}  [type]      Type of toast
- * @property   {String}                         [text]      The toast message. Only needed when updating text on existing toast
- * @property   {(number|string)}                [duration]  Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.
- * @property   {Boolean}                        [canclose]  Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissable, set this to true.
- */
+import type { ToastInternal, ToastOptions } from './types';
 /**
  * Creates a new toast
- * @param {String}        message  Message
- * @param {ToastOptions?} options  Toast options
- * @returns {ToastOptions} Toast details
  */
-export function toast(message: string, options: ToastOptions | null): ToastOptions;
+export declare function toast(message: string, options?: ToastOptions): ToastOptions;
 /**
  * Remove an existing toast
- * @param {String|Number} id Toast identifier
- * @return {Promise<Boolean>} Resolves to true if deleted, false if not found
  */
-export function removeToast(id: string | number): Promise<boolean>;
+export declare function removeToast(id: string | number): Promise<boolean> | undefined;
 /**
  * Update an existing toast
- * @param {String|Number}           id      Toast identifier
- * @param {ToastOptions?}           options Toast options
- * @returns {WarpToastContainer}          Toast details
- */
-export function updateToast(id: string | number, options: ToastOptions | null): WarpToastContainer;
-/**
- * Toast helper function options
  */
-export type ToastOptions = {
-    /**
-     * Custom identifier
-     */
-    id?: (number | string);
-    /**
-     * Type of toast
-     */
-    type?: ("success" | "error" | "warning");
-    /**
-     * The toast message. Only needed when updating text on existing toast
-     */
-    text?: string;
-    /**
-     * Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.
-     */
-    duration?: (number | string);
-    /**
-     * Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissable, set this to true.
-     */
-    canclose?: boolean;
-};
+export declare function updateToast(id: string | number, options?: ToastOptions): ToastInternal | undefined;

package/dist/packages/toast/api.js

@@ -0,0 +1,41 @@
+import { windowExists } from '../utils/window-exists';
+function getToastContainer() {
+    const container = customElements.get('w-toast-container');
+    return container;
+}
+/**
+ * Creates a new toast
+ */
+export function toast(message, options) {
+    if (!windowExists)
+        return;
+    const toast = getToastContainer().init();
+    const data = {
+        id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),
+        text: message,
+        duration: 5000,
+        type: 'success',
+        ...options,
+    };
+    toast.set(data);
+    return data;
+}
+/**
+ * Remove an existing toast
+ */
+export function removeToast(id) {
+    if (!windowExists)
+        return;
+    const toast = getToastContainer().init();
+    return toast.del(id);
+}
+/**
+ * Update an existing toast
+ */
+export function updateToast(id, options) {
+    if (!windowExists)
+        return;
+    const toast = getToastContainer().init();
+    toast.set({ ...toast.get(id), ...options });
+    return toast.get(id);
+}

package/dist/packages/toast/index.d.ts

@@ -1,3 +1,3 @@
-export { WarpToast } from "./toast";
-export { WarpToastContainer } from "./toast-container";
-export { toast, updateToast, removeToast } from "./api";
+export { removeToast, toast, updateToast } from './api';
+export { WarpToast } from './toast';
+export { WarpToastContainer } from './toast-container';