@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.17

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

@@ -1,6 +1,6 @@
-import { StoryObj } from '@storybook/react';
-import React from 'react';
-import { TextField } from './react';
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import { TextField } from "./react";
 declare const _default: {
     title: string;
     render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "value" | "form" | "label" | "mask" | "pattern" | "type" | "name" | "size" | "autocomplete" | "disabled" | "invalid" | "helpText" | "max" | "min" | "minLength" | "minlength" | "maxLength" | "maxlength" | "placeholder" | "readOnly" | "readonly" | "required" | "step" | "formatter" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {

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

@@ -1,12 +1,12 @@
-import React from 'react';
-import { Affix } from '../affix/react';
-import { TextField } from './react';
-const locale = 'nb';
+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',
+    title: "Forms/Textfield",
     render(args) {
         return React.createElement(TextField, { ...args });
     },
@@ -14,61 +14,61 @@ export default {
 };
 export const Default = {
     args: {
-        label: 'Email',
-        type: 'email',
+        label: "Email",
+        type: "email",
     },
 };
 export const WithPlaceholder = {
     args: {
-        label: 'Email',
-        placeholder: 'user@example.com',
-        type: 'email',
+        label: "Email",
+        placeholder: "user@example.com",
+        type: "email",
     },
 };
 export const WithHelpText = {
     args: {
-        label: 'Password',
-        helpText: 'Must be at least 8 characters',
-        type: 'password',
+        label: "Password",
+        helpText: "Must be at least 8 characters",
+        type: "password",
     },
 };
 export const Invalid = {
     args: {
-        label: 'Email',
+        label: "Email",
         invalid: true,
-        helpText: 'Please enter a valid email address',
-        value: 'invalid-email',
-        type: 'email',
+        helpText: "Please enter a valid email address",
+        value: "invalid-email",
+        type: "email",
     },
 };
 export const Disabled = {
     args: {
-        label: 'Email',
+        label: "Email",
         disabled: true,
-        value: 'user@example.com',
-        type: 'email',
+        value: "user@example.com",
+        type: "email",
     },
 };
 export const ReadOnly = {
     args: {
-        label: 'Email',
+        label: "Email",
         readOnly: true,
-        value: 'user@example.com',
-        type: 'email',
+        value: "user@example.com",
+        type: "email",
     },
 };
 export const Required = {
     args: {
-        label: 'Email',
+        label: "Email",
         required: true,
-        type: 'email',
+        type: "email",
     },
 };
 export const WithAffix = {
     args: {
-        label: 'Price',
-        placeholder: '1 000 000',
-        type: 'text',
+        label: "Price",
+        placeholder: "1 000 000",
+        type: "text",
     },
     render(args) {
         return (React.createElement(TextField, { ...args },
@@ -77,9 +77,9 @@ export const WithAffix = {
 };
 export const Masking = {
     args: {
-        label: 'Price',
-        placeholder: '1 000 000',
-        type: 'text',
+        label: "Price",
+        placeholder: "1 000 000",
+        type: "text",
     },
     render({ ...args }) {
         return (React.createElement(TextField, { ...args, formatter: getNumberFormatter(locale) },

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

@@ -1,8 +1,8 @@
-import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
-import { TextField } from './react.js';
-describeReactSsrAttributeMapping('TextField', TextField, [
-    { propName: 'helpText', attrName: 'help-text', value: 'Help text' },
-    { propName: 'minLength', attrName: 'min-length', value: 2 },
-    { propName: 'maxLength', attrName: 'max-length', value: 10 },
-    { propName: 'readOnly', attrName: 'read-only' },
+import { describeReactSsrAttributeMapping } from "../../tests/react-ssr-attributes";
+import { TextField } from "./react.js";
+describeReactSsrAttributeMapping("TextField", TextField, [
+    { propName: "helpText", attrName: "help-text", value: "Help text" },
+    { propName: "minLength", attrName: "min-length", value: 2 },
+    { propName: "maxLength", attrName: "max-length", value: 10 },
+    { propName: "readOnly", attrName: "read-only" },
 ]);

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

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WarpTextField } from './textfield.js';
-import './textfield.js';
-import '../affix/affix.js';
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import type { WarpTextField } from "./textfield.js";
+import "./textfield.js";
+import "../affix/affix.js";
 declare const args: Partial<WarpTextField> & {
     [key: string]: any;
 };

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

@@ -1,12 +1,12 @@
-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 './textfield.js';
-import '../affix/affix.js';
-const { events, args, argTypes } = getStorybookHelpers('w-textfield');
+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 "./textfield.js";
+import "../affix/affix.js";
+const { events, args, argTypes } = getStorybookHelpers("w-textfield");
 const meta = {
-    title: 'Forms/Textfield',
+    title: "Forms/Textfield",
     render(args) {
         return html `<w-textfield ${spread(prespread(args))}></w-textfield>`;
     },
@@ -21,162 +21,180 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        label: 'Email',
-        type: 'email',
+        label: "Email",
+        type: "email",
     },
 };
 export const WithPlaceholder = {
     args: {
-        label: 'Email',
-        placeholder: 'user@example.com',
-        type: 'email',
+        label: "Email",
+        placeholder: "user@example.com",
+        type: "email",
     },
 };
 export const WithHelpText = {
     args: {
-        label: 'Password',
-        'help-text': 'Must be at least 8 characters',
-        type: 'password',
+        label: "Password",
+        "help-text": "Must be at least 8 characters",
+        type: "password",
     },
 };
 export const Invalid = {
     args: {
-        label: 'Email',
+        label: "Email",
         invalid: true,
-        'help-text': 'Please enter a valid email address',
-        value: 'invalid-email',
-        type: 'email',
+        "help-text": "Please enter a valid email address",
+        value: "invalid-email",
+        type: "email",
     },
 };
 export const Disabled = {
     args: {
-        label: 'Email',
+        label: "Email",
         disabled: true,
-        value: 'user@example.com',
-        type: 'email',
+        value: "user@example.com",
+        type: "email",
     },
 };
 export const ReadOnly = {
     args: {
-        label: 'Email',
-        'read-only': true,
-        value: 'user@example.com',
-        type: 'email',
+        label: "Email",
+        "read-only": true,
+        value: "user@example.com",
+        type: "email",
     },
 };
 export const Required = {
     args: {
-        label: 'Email',
+        label: "Email",
         required: true,
-        type: 'email',
+        type: "email",
     },
 };
 export const WithSuffix = {
     args: {
-        label: 'Price',
-        placeholder: '1 000 000',
-        type: 'text',
+        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>
-    `;
+			<w-textfield ${spread(prespread(args))}>
+				<w-affix slot="suffix" label="kr"></w-affix>
+			</w-textfield>
+		`;
     },
 };
 export const WithPrefix = {
     args: {
-        label: 'Price',
-        placeholder: '1 000 000',
-        type: 'text',
+        label: "Price",
+        placeholder: "1 000 000",
+        type: "text",
     },
     render(args) {
         return html `
-      <w-textfield ${spread(prespread(args))}>
-        <w-affix slot="prefix" label="kr"></w-affix>
-      </w-textfield>
-    `;
+			<w-textfield ${spread(prespread(args))}>
+				<w-affix slot="prefix" label="kr"></w-affix>
+			</w-textfield>
+		`;
     },
 };
 export const WithClearAffixResetTextfield = {
     args: {
-        placeholder: '1 000 000',
-        type: 'text',
+        placeholder: "1 000 000",
+        type: "text",
     },
     render(args) {
         return html `
-      <w-textfield ${spread(prespread(args))}>
-        <w-affix slot="suffix" clear></w-affix>
-      </w-textfield>
-    `;
+			<w-textfield ${spread(prespread(args))}>
+				<w-affix slot="suffix" clear></w-affix>
+			</w-textfield>
+		`;
     },
 };
 export const WithSearchAndClearAffixForm = {
     args: {
-        label: 'Price',
-        placeholder: '1 000 000',
-        type: 'text',
+        label: "Price",
+        placeholder: "1 000 000",
+        type: "text",
     },
     render(args) {
         return html `
-      <form action="javascript:alert('Form submitted!');" method="GET">
-        <w-textfield ${spread(prespread(args))}>
-          <w-affix slot="prefix" search aria-label="Search"></w-affix>
-          <w-affix slot="suffix" clear aria-label="Clear"></w-affix>
-        </w-textfield>
-      </form>
-    `;
+			<form action="javascript:alert('Form submitted!');" method="GET">
+				<w-textfield ${spread(prespread(args))}>
+					<w-affix slot="prefix" search aria-label="Search"></w-affix>
+					<w-affix slot="suffix" clear aria-label="Clear"></w-affix>
+				</w-textfield>
+			</form>
+		`;
     },
 };
 export const WithIconAffix = {
     args: {
-        label: 'Price',
-        placeholder: '1 000 000',
-        type: 'text',
+        label: "Price",
+        placeholder: "1 000 000",
+        type: "text",
     },
     render(args) {
         return html `
-      <w-textfield ${spread(prespread(args))}>
-        <w-affix slot="prefix" icon="AwardMedal" aria-label="Search"></w-affix>
-        <w-affix slot="suffix" icon="Search" aria-label="Clear"></w-affix>
-      </w-textfield>
-    `;
+			<w-textfield ${spread(prespread(args))}>
+				<w-affix slot="prefix" icon="AwardMedal" aria-label="Search"></w-affix>
+				<w-affix slot="suffix" icon="Search" aria-label="Clear"></w-affix>
+			</w-textfield>
+		`;
     },
 };
 export const Masking = {
     args: {
-        label: 'Price',
-        placeholder: '1 000 000',
-        type: 'text',
-        locale: 'nb',
+        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>
-    `;
+			<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>
+		`;
     },
 };
 export const FormParticipation = {
     args: {
-        type: 'text',
+        type: "text",
     },
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
     render({ locale, ...args }) {
         return html `
-      <p>Resetting the form should return values to the initial values</p>
-      <p>Submitting the form should result in the values being in the resulting pages query parameters</p>
-      <form>
-        <w-textfield ${spread(prespread(args))} name="warp-textfield-1" placeholder="type here" label="field 1"></w-textfield>
-        <w-textfield ${spread(prespread(args))} name="warp-textfield-2" value="prefilled" label="field 2"></w-textfield>
-        <button type="reset">Reset</button>
-        <button type="submit">Submit</button>
-      </form>
-    `;
+			<p>Resetting the form should return values to the initial values</p>
+			<p>
+				Submitting the form should result in the values being in the resulting
+				pages query parameters
+			</p>
+			<form>
+				<w-textfield
+					${spread(prespread(args))}
+					name="warp-textfield-1"
+					placeholder="type here"
+					label="field 1"
+				></w-textfield>
+				<w-textfield
+					${spread(prespread(args))}
+					name="warp-textfield-2"
+					value="prefilled"
+					label="field 2"
+				></w-textfield>
+				<button type="reset">Reset</button>
+				<button type="submit">Submit</button>
+			</form>
+		`;
     },
 };

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

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