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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"breadcrumbs.ariaLabel\":[\"Du er her\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"breadcrumbs.ariaLabel\":[\"You are here\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"breadcrumbs.ariaLabel\":[\"Olet tässä\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"breadcrumbs.ariaLabel\":[\"Her er du\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"breadcrumbs.ariaLabel\":[\"Du är här\"]}");

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

@@ -0,0 +1,2 @@
+import { WarpBreadcrumbs } from '.';
+export declare const Breadcrumbs: import("@lit/react").ReactWebComponent<WarpBreadcrumbs, {}>;

package/dist/packages/breadcrumbs/react.js

@@ -0,0 +1,11 @@
+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 Breadcrumbs = createComponent({
+    tagName: 'w-breadcrumbs',
+    elementClass: Component,
+    react: React,
+});

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

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

package/dist/packages/breadcrumbs/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}.flex{display:flex}.static{position:static}.s-text{color:var(--w-s-color-text)}.s-text-link{color:var(--w-s-color-text-link)}.s-icon{color:var(--w-s-color-icon)}.space-x-8>:not([hidden])~:not([hidden]){--w-space-x-reverse:0;margin-left:calc(.8rem*calc(1 - var(--w-space-x-reverse)));margin-right:calc(.8rem*var(--w-space-x-reverse))}.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}.select-none{-webkit-user-select:none;user-select:none}`;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Button } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpButton>, "rel" | "_classes" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "variant" | "form" | "small" | "quiet" | "href" | "target" | "fullWidth" | "buttonClass" | "name" | "type" | "loading" | "value" | "ariaValueTextLoading" | "updated" | "firstUpdated" | "_primaryClasses" | "_secondaryClasses" | "_utilityClasses" | "_negativeClasses" | "_pillClasses" | "_linkClasses" | "_handleButtonClick" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "resetFormControl" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate"> & {} & Partial<Omit<import(".").WarpButton, keyof HTMLElement>> & React.RefAttributes<import(".").WarpButton>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpButton, {}>;
+};
+export default _default;
+export type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Negative: Story;
+export declare const Utility: Story;
+export declare const Link: Story;
+export declare const Pill: Story;
+export declare const Small: Story;
+export declare const Quiet: Story;
+export declare const Loading: Story;
+export declare const FullWidth: Story;
+export declare const AsLink: Story;
+export declare const FormControl: Story;

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Button } from './react';
+export default {
+    title: 'Buttons/Button',
+    render(args) {
+        return React.createElement(Button, { ...args }, "Button Text");
+    },
+    component: Button,
+};
+export const Primary = {
+    args: {
+        variant: 'primary',
+        type: 'button',
+    },
+};
+export const Secondary = {
+    args: {
+        variant: 'secondary',
+        type: 'button',
+    },
+};
+export const Negative = {
+    args: {
+        variant: 'negative',
+        type: 'button',
+    },
+};
+export const Utility = {
+    args: {
+        variant: 'utility',
+        type: 'button',
+    },
+};
+export const Link = {
+    args: {
+        variant: 'link',
+        type: 'button',
+        href: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_components',
+        target: '_new',
+    },
+};
+export const Pill = {
+    args: {
+        variant: 'pill',
+        type: 'button',
+    },
+    render(args) {
+        return React.createElement(Button, { ...args }, "\uD83D\uDC99");
+    },
+};
+export const Small = {
+    args: {
+        variant: 'primary',
+        small: true,
+        type: 'button',
+    },
+};
+export const Quiet = {
+    args: {
+        variant: 'secondary',
+        quiet: true,
+        type: 'button',
+    },
+};
+export const Loading = {
+    args: {
+        variant: 'primary',
+        loading: true,
+        type: 'button',
+    },
+};
+export const FullWidth = {
+    args: {
+        variant: 'primary',
+        fullWidth: true,
+        type: 'button',
+    },
+    render(args) {
+        return (React.createElement("div", { className: "w-full flex flex-col gap-8" },
+            React.createElement(Button, { ...args }, "Full width")));
+    },
+};
+export const AsLink = {
+    args: {
+        variant: 'primary',
+        href: 'https://example.com',
+        target: '_blank',
+        type: 'button',
+    },
+    render(args) {
+        return React.createElement(Button, { ...args }, "Visit Example");
+    },
+};
+export const FormControl = {
+    args: {},
+    render() {
+        return (React.createElement("form", { name: "form-control" },
+            React.createElement("input", { type: "text", defaultValue: "I am an input field", name: "demoValue", style: { border: '1px solid lime' } }),
+            React.createElement(Button, { type: "reset", name: "resetButton", value: "fooyoo" }, "Reset"),
+            React.createElement(Button, { type: "submit", name: "submuitButtton", value: "fooyoo" }, "Send thing")));
+    },
+};

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { WarpButton } from './index.js';
+import './index.js';
+declare const args: Partial<WarpButton> & {
+    [key: string]: any;
+};
+import "@warp-ds/icons/elements/close-16";
+import "@warp-ds/icons/elements/heart-16";
+import "@warp-ds/icons/elements/chevron-right-16";
+import "@warp-ds/icons/elements/chevron-left-16";
+declare const meta: Meta<typeof args>;
+export default meta;
+type Story = StoryObj<typeof args>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Negative: Story;
+export declare const Utility: Story;
+export declare const Link: Story;
+export declare const Pill: Story;
+export declare const Small: Story;
+export declare const Quiet: Story;
+export declare const Loading: Story;
+export declare const FullWidth: Story;
+export declare const AsLink: Story;
+export declare const FormControl: Story;

package/dist/packages/button/button.stories.js

@@ -0,0 +1,151 @@
+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-button');
+import "@warp-ds/icons/elements/close-16";
+import "@warp-ds/icons/elements/heart-16";
+import "@warp-ds/icons/elements/chevron-right-16";
+import "@warp-ds/icons/elements/chevron-left-16";
+const meta = {
+    title: 'Buttons/Button',
+    render(args) {
+        return html `<w-button ${spread(prespread(args))}>Button Text</w-button>`;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Primary = {
+    args: {
+        variant: 'primary',
+        type: 'button',
+    },
+};
+export const Secondary = {
+    args: {
+        variant: 'secondary',
+        type: 'button',
+    },
+};
+export const Negative = {
+    args: {
+        variant: 'negative',
+        type: 'button',
+    },
+};
+export const Utility = {
+    args: {
+        variant: 'utility',
+        type: 'button',
+    },
+};
+export const Link = {
+    args: {
+        variant: 'link',
+        type: 'button',
+        href: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_components',
+        target: '_new',
+    },
+};
+export const Pill = {
+    args: {
+        variant: 'pill',
+        type: 'button',
+    },
+    render(args) {
+        return html `<w-button ${spread(prespread(args))}>
+        <w-icon-chevron-left-16 style="height: 16px;"></w-icon-chevron-left-16>
+      </w-button>
+      <w-button ${spread(prespread(args))}>
+        <w-icon-close-16 style="height: 16px;"></w-icon-close-16>
+      </w-button>
+      <w-button ${spread(prespread(args))}>
+        <w-icon-heart-16 style="height: 16px;"></w-icon-heart-16>
+      </w-button>
+      <w-button ${spread(prespread(args))}>
+        <w-icon-chevron-right-16
+          style="height: 16px;"
+        ></w-icon-chevron-right-16>
+      </w-button>
+      <br />
+      <w-button ${spread(prespread(args))} small="">
+        <w-icon-chevron-left-16 style="height: 16px;"></w-icon-chevron-left-16>
+      </w-button>
+      <w-button ${spread(prespread(args))} small="">
+        <w-icon-close-16 style="height: 16px;"></w-icon-close-16>
+      </w-button>
+      <w-button ${spread(prespread(args))} small="">
+        <w-icon-heart-16 style="height: 16px;"></w-icon-heart-16>
+      </w-button>
+      <w-button ${spread(prespread(args))} small="">
+        <w-icon-chevron-right-16
+          style="height: 16px;"
+        ></w-icon-chevron-right-16>
+      </w-button>`;
+    },
+};
+export const Small = {
+    args: {
+        variant: 'primary',
+        small: true,
+        type: 'button',
+    },
+};
+export const Quiet = {
+    args: {
+        variant: 'secondary',
+        quiet: true,
+        type: 'button',
+    },
+};
+export const Loading = {
+    args: {
+        variant: 'primary',
+        loading: true,
+        type: 'button',
+    },
+};
+export const FullWidth = {
+    args: {
+        variant: 'primary',
+        'full-width': true,
+        type: 'button',
+    },
+    render(args) {
+        return html `
+      <div class="w-full flex flex-col gap-8">
+        <w-button ${spread(prespread(args))}>Full width</w-button>
+      </div>
+    `;
+    },
+};
+export const AsLink = {
+    args: {
+        variant: 'primary',
+        href: 'https://example.com',
+        target: '_blank',
+        type: 'button',
+    },
+    render(args) {
+        return html `<w-button ${spread(prespread(args))}>Visit Example</w-button>`;
+    },
+};
+export const FormControl = {
+    args: {},
+    render() {
+        return html `
+      <form name="form-control">
+        <input type="text" value="I am an input field" name="demoValue" style="border: 1px solid lime" />
+        <w-button type="reset" name="resetButton" value="fooyoo">Reset</w-button>
+        <w-button type="submit" name="submuitButtton" value="fooyoo">Send thing</w-button>
+      </form>
+    `;
+    },
+};

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

@@ -1 +1 @@
-import "./index.js";
+import './index.js';

package/dist/packages/button/button.test.js

@@ -0,0 +1,25 @@
+import { html } from 'lit';
+import { expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './index.js';
+test('renders the slotted label', async () => {
+    const component = html `<w-button>This is a button</w-button>`;
+    const page = render(component);
+    await expect.element(page.getByText('This is a button')).toBeVisible();
+    await expect.element(page.getByRole('button')).toBeVisible();
+});
+test('by default button type is button', async () => {
+    const component = html `<w-button>This is a button</w-button>`;
+    const page = render(component);
+    await expect.element(page.getByRole('button')).toHaveAttribute('type', 'button');
+});
+test.todo('works in a form as type submit');
+test.todo('works in a form as type reset');
+test('calling focus on w-button focuses the button inside the shadow root', async () => {
+    const component = html `<w-button>This is a button</w-button>`;
+    const page = render(component);
+    await expect.element(page.getByRole('button')).toBeVisible();
+    // @ts-expect-error if we import and type using WarpButton, the test fails which is nonsense so I've opted to simply ignore this error.
+    page.container.querySelector('w-button').focus();
+    await vi.waitFor(() => page.container.querySelector(':focus').tagName === 'BUTTON');
+});

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

@@ -1,13 +1,74 @@
-import { PropertyValues } from "lit";
-type ButtonVariant = "primary" | "secondary" | "negative" | "utility" | "pill" | "link";
-type ButtonType = "button" | "submit" | "reset";
-declare const WarpButton_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & {
-    new (): {
-        [x: string]: any;
-    };
-    [x: string]: any;
-    createProperty(name: any, options: any): void;
+import { LitElement, PropertyValues } from 'lit';
+import '../link';
+type ButtonVariant = 'primary' | 'secondary' | 'negative' | 'utility' | 'pill' | 'link';
+type ButtonType = 'button' | 'submit' | 'reset';
+export declare const ccButton: {
+    secondary: string;
+    secondaryHref: string;
+    secondaryDisabled: string;
+    secondarySmall: string;
+    secondarySmallDisabled: string;
+    secondaryQuiet: string;
+    secondaryQuietDisabled: string;
+    secondarySmallQuiet: string;
+    secondarySmallQuietDisabled: string;
+    secondaryLoading: string;
+    secondarySmallLoading: string;
+    secondarySmallQuietLoading: string;
+    secondaryQuietLoading: string;
+    primary: string;
+    primaryDisabled: string;
+    primarySmall: string;
+    primarySmallDisabled: string;
+    primaryQuiet: string;
+    primaryQuietDisabled: string;
+    primarySmallQuiet: string;
+    primarySmallQuietDisabled: string;
+    primaryLoading: string;
+    primarySmallLoading: string;
+    primarySmallQuietLoading: string;
+    primaryQuietLoading: string;
+    utility: string;
+    utilityDisabled: string;
+    utilityQuiet: string;
+    utilityQuietDisabled: string;
+    utilitySmall: string;
+    utilitySmallDisabled: string;
+    utilitySmallQuiet: string;
+    utilitySmallQuietDisabled: string;
+    utilityLoading: string;
+    utilitySmallLoading: string;
+    utilityQuietLoading: string;
+    utilitySmallQuietLoading: string;
+    negative: string;
+    negativeDisabled: string;
+    negativeQuiet: string;
+    negativeQuietDisabled: string;
+    negativeSmall: string;
+    negativeSmallDisabled: string;
+    negativeSmallQuiet: string;
+    negativeSmallQuietDisabled: string;
+    negativeLoading: string;
+    negativeSmallLoading: string;
+    negativeQuietLoading: string;
+    negativeSmallQuietLoading: string;
+    pill: string;
+    pillSmall: string;
+    pillLoading: string;
+    pillSmallLoading: string;
+    link: string;
+    linkSmall: string;
+    linkAsButton: string;
+    a11y: string;
+    fullWidth: string;
+    contentWidth: string;
 };
+declare const WarpButton_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * Buttons are used to perform actions, widh different visuals for different needs.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
+ */
 declare class WarpButton extends WarpButton_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
@@ -18,6 +79,9 @@ declare class WarpButton extends WarpButton_base {
     type: ButtonType;
     autofocus: boolean;
     variant: ButtonVariant;
+    /**
+     * @type {boolean}
+     */
     quiet: boolean;
     small: boolean;
     loading: boolean;
@@ -28,18 +92,28 @@ declare class WarpButton extends WarpButton_base {
     buttonClass: string;
     name: string;
     value: string;
+    /** @internal */
+    ariaValueTextLoading: string;
     static styles: import("lit").CSSResult[];
     updated(changedProperties: PropertyValues<this>): void;
     constructor();
     connectedCallback(): void;
     firstUpdated(): void;
+    /** @internal */
     get _primaryClasses(): string[];
+    /** @internal */
     get _secondaryClasses(): string[];
+    /** @internal */
     get _utilityClasses(): string[];
+    /** @internal */
     get _negativeClasses(): string[];
+    /** @internal */
     get _pillClasses(): string[];
+    /** @internal */
     get _linkClasses(): string[];
+    /** @internal */
     get _classes(): string;
+    /** @internal */
     _handleButtonClick(): void;
     render(): import("lit").TemplateResult<1>;
 }