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

package/dist/packages/select/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"(valgfrit)\"]}");

package/dist/packages/select/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"(optional)\"]}");

package/dist/packages/select/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"(vapaaehtoinen)\"]}");

package/dist/packages/select/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"(valgfritt)\"]}");

package/dist/packages/select/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"(valfritt)\"]}");

package/dist/packages/select/react.d.ts

@@ -0,0 +1,6 @@
+import { WarpSelect } from '.';
+export declare const Select: import("@lit/react").ReactWebComponent<WarpSelect, {
+    onChange: string;
+    onchange: string;
+}>;
+export declare const Option: import("@lit/react").ReactWebComponent<HTMLOptionElement, {}>;

package/dist/packages/select/react.js

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import { createComponent } from '@lit/react';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const Select = createComponent({
+    tagName: 'w-select',
+    elementClass: Component,
+    react: React,
+    events: {
+        onChange: 'change',
+        onchange: 'change',
+    },
+});
+export const Option = createComponent({
+    tagName: 'w-option',
+    elementClass: Component,
+    react: React,
+});

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Select } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpSelect>, "label" | "onchange" | "autoFocus" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "disabled" | "name" | "value" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "resetFormControl" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "always" | "hint" | "optional" | "readOnly" | "_options" | "_setValue" | "handleKeyDown"> & {
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+    } & Partial<Omit<import(".").WarpSelect, keyof HTMLElement>> & React.RefAttributes<import(".").WarpSelect>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpSelect, {
+        onChange: string;
+        onchange: string;
+    }>;
+};
+export default _default;
+export type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const ChangeEvent: (args: any) => React.JSX.Element;

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

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Select, Option } from './react';
+export default {
+    title: 'Forms/Select',
+    render(args) {
+        return (React.createElement(Select, { ...args },
+            React.createElement(Option, { value: "strawberries" }, "Strawberries"),
+            React.createElement(Option, { value: "raspberries", selected: true }, "Raspberries"),
+            React.createElement(Option, { value: "cloudberries" }, "Cloudberries")));
+    },
+    component: Select,
+};
+export const Default = {
+    args: {
+        label: 'Berries',
+    },
+};
+export const ChangeEvent = (args) => {
+    const [selectedValue, setSelectedValue] = useState('');
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null,
+            "Selected Value: ",
+            selectedValue),
+        React.createElement(Select, { ...args, onChange: (e) => setSelectedValue(e.detail) },
+            React.createElement(Option, { value: "strawberries" }, "Strawberries"),
+            React.createElement(Option, { value: "raspberries", selected: true }, "Raspberries"),
+            React.createElement(Option, { value: "cloudberries" }, "Cloudberries"))));
+};

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { WarpSelect } from './index.js';
+import './index.js';
+declare const args: Partial<WarpSelect> & {
+    [key: string]: any;
+};
+declare const meta: Meta<typeof args>;
+export default meta;
+type Story = StoryObj<typeof args>;
+export declare const Default: Story;
+export declare const Hint: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const NoLabel: Story;
+export declare const Optional: Story;
+export declare const Placeholder: Story;

package/dist/packages/select/select.stories.js

@@ -0,0 +1,100 @@
+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-select');
+const meta = {
+    title: 'Forms/Select',
+    render(args) {
+        return html `
+      <w-select ${spread(prespread(args))}>
+        <option value="raspberries">Raspberries</option>
+        <option value="strawberries" selected>Strawberries</option>
+        <option value="cloudberries">Cloudberries</option>
+      </w-select>
+    `;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Berries',
+    },
+};
+export const Hint = {
+    args: {
+        label: 'Berries',
+        always: true,
+        hint: 'We assume this is your jam preference'
+    },
+};
+export const Invalid = {
+    args: {
+        label: 'Berries',
+        invalid: true,
+        hint: 'Wrong choice'
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Berries',
+        disabled: true,
+    },
+};
+export const ReadOnly = {
+    args: {
+        label: 'Berries',
+        'read-only': true,
+    },
+};
+export const NoLabel = {
+    render(args) {
+        return html `
+      <div style="display: flex; flex-direction: column; gap: 32px;">
+        <w-select ${spread(prespread(args))} aria-label="Your selection is berry nice!">
+          <option value="raspberries">Raspberries</option>
+          <option value="strawberries" selected>Strawberries</option>
+          <option value="cloudberries">Cloudberries</option>
+        </w-select>
+
+        <label id="select-label" htmlFor="warp-aria-labelledby-example">
+          You're berry good at selecting!
+        </label>
+        <w-select ${spread(prespread(args))} id="warp-aria-labelledby-example">
+          <option value="raspberries">Raspberries</option>
+          <option value="strawberries" selected>Strawberries</option>
+          <option value="cloudberries">Cloudberries</option>
+        </w-select>
+      </div>
+    `;
+    },
+};
+export const Optional = {
+    args: {
+        label: 'Berries',
+        optional: true,
+    },
+};
+export const Placeholder = {
+    args: {
+        label: 'Berries',
+    },
+    render(args) {
+        return html `
+      <w-select ${spread(prespread(args))}>
+        <option value="">Select an option</option>
+        <option value="raspberries">Raspberries</option>
+        <option value="strawberries">Strawberries</option>
+        <option value="cloudberries">Cloudberries</option>
+      </w-select>
+    `;
+    },
+};

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

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

package/dist/packages/select/select.test.js

@@ -0,0 +1,31 @@
+import { userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './index.js';
+test('works in a form', async () => {
+    const component = html `
+    <form data-testid="flavour">
+      <w-select label="Berries" name="berry">
+        <option value="strawberries">Strawberries</option>
+        <option value="raspberries">Raspberries</option>
+        <option value="cloudberries">Cloudberries</option>
+      </w-select>
+
+      <button>Submit</button>
+    </form>
+  `;
+    const page = render(component);
+    // Confirm we have a form associated field berry
+    const form = page.getByTestId('flavour');
+    expect(form).toHaveFormValues({
+        berry: undefined,
+    });
+    // Select Raspberries
+    await expect.element(page.getByLabelText('Berries')).toBeVisible();
+    await userEvent.selectOptions(page.getByLabelText('Berries').element(), 'Raspberries');
+    // Confirm the form has a field berry with value raspberries
+    expect(form).toHaveFormValues({
+        berry: 'raspberries',
+    });
+});

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

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

package/dist/packages/select/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}.appearance-none{-webkit-appearance:none;appearance:none}.border-0{border-width:0}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.opacity-25{opacity:.25}.block,.before\\:block:before{display:block}.before\\:hidden:before{display:none}.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}.bottom-0{bottom:0}.right-0{right:0}.before\\:bottom-0:before{bottom:0}.before\\:right-0:before{right:0}.top-\\[30\\%\\]{top:30%}.absolute{position:absolute}.relative{position:relative}.static{position:static}.before\\:absolute:before{position:absolute}.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)}.s-icon{color:var(--w-s-color-icon)}.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-disabled:hover{border-color:var(--w-s-color-border-disabled)}.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-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-disabled:active{border-color:var(--w-s-color-border-disabled)}.h-full{height:100%}.w-32{width:3.2rem}.w-full{width:100%}.before\\:h-full:before{height:100%}.before\\:w-32:before{width:3.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.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-32{padding-right:3.2rem}.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,.before\\:pointer-events-none:before{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)}`;