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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Vælg\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Select\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Valitse\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Velg\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Välj\"]}");

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

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

package/dist/packages/card/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 Card = createComponent({
+    tagName: 'w-card',
+    elementClass: Component,
+    react: React,
+});

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

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

package/dist/packages/card/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}.border-2{border-width:2px}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.block{display:block}.overflow-hidden{overflow:hidden}.outline{outline-style:solid}.inset-0{top:0;bottom:0;left:0;right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.\\!s-bg-selected{background-color:var(--w-s-color-background-selected)!important}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.\\!hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)!important}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.\\!active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)!important}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)}.s-border{border-color:var(--w-s-color-border)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.group:hover .group-hover\\:s-border-selected-hover{border-color:var(--w-s-color-border-selected-hover)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.hover\\:s-border-selected-hover:hover{border-color:var(--w-s-color-border-selected-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-selected-active:active{border-color:var(--w-s-color-border-selected-active)}.group:active .group-active\\:s-border-active{border-color:var(--w-s-color-border-active)}.group:active .group-active\\:s-border-selected-active{border-color:var(--w-s-color-border-selected-active)}.s-surface-elevated-200{background-color:var(--w-s-color-surface-elevated-200);box-shadow:var(--w-s-shadow-surface-elevated-200)}.hover\\:s-surface-elevated-200-hover:hover{background-color:var(--w-s-color-surface-elevated-200-hover);box-shadow:var(--w-s-shadow-surface-elevated-200-hover)}.active\\:s-surface-elevated-200-active:active{background-color:var(--w-s-color-surface-elevated-200-active);box-shadow:var(--w-s-shadow-surface-elevated-200-active)}.cursor-pointer{cursor:pointer}.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}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}`;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Expandable } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpExpandable>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "buttonClass" | "updated" | "firstUpdated" | "bleed" | "expanded" | "box" | "contentClass" | "noChevron" | "animated" | "headingLevel" | "_hasTitle" | "_showChevronUp" | "_expandableSlot"> & {} & Partial<Omit<import(".").WarpExpandable, keyof HTMLElement>> & React.RefAttributes<import(".").WarpExpandable>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpExpandable, {}>;
+};
+export default _default;
+export type Story = StoryObj<typeof Expandable>;
+export declare const Default: Story;
+export declare const Expanded: Story;
+export declare const Box: Story;
+export declare const Animated: Story;
+export declare const WithHeading: Story;
+export declare const NoChevron: Story;
+export declare const CustomTitle: Story;
+export declare const NoTitle: Story;

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

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { Button } from '../button/react';
+import { Expandable } from './react';
+export default {
+    title: 'Layout/Expandable',
+    render(args) {
+        return (React.createElement(Expandable, { ...args },
+            React.createElement("p", null, "This is the expandable content that can be shown or hidden."),
+            React.createElement("p", null, "It can contain multiple paragraphs and other elements.")));
+    },
+    component: Expandable,
+};
+export const Default = {
+    args: {
+        title: "I'm expandable",
+        expanded: false,
+        box: false,
+        bleed: false,
+        animated: false,
+        noChevron: false,
+    },
+};
+export const Expanded = {
+    args: {
+        title: "I'm expanded by default",
+        expanded: true,
+        box: false,
+        bleed: false,
+        animated: false,
+        noChevron: false,
+    },
+};
+export const Box = {
+    args: {
+        title: "I'm a box expandable",
+        expanded: false,
+        box: true,
+        bleed: false,
+        animated: false,
+        noChevron: false,
+    },
+};
+export const Animated = {
+    args: {
+        title: "I'm animated",
+        expanded: false,
+        box: true,
+        bleed: false,
+        animated: true,
+        noChevron: false,
+    },
+};
+export const WithHeading = {
+    args: {
+        title: "I'm wrapped in h2",
+        expanded: false,
+        box: true,
+        bleed: false,
+        animated: false,
+        noChevron: false,
+        headingLevel: 2,
+    },
+};
+export const NoChevron = {
+    args: {
+        title: 'I have no chevron',
+        expanded: false,
+        box: false,
+        bleed: false,
+        animated: false,
+        noChevron: true,
+    },
+};
+export const CustomTitle = {
+    args: {
+        expanded: false,
+        box: true,
+        bleed: false,
+        animated: false,
+        noChevron: false,
+    },
+    render(args) {
+        return (React.createElement(Expandable, { ...args },
+            React.createElement("div", { slot: "title", style: { display: 'flex', alignItems: 'center' } },
+                React.createElement("span", { style: { marginRight: '8px' } }, "\uD83C\uDFAF"),
+                React.createElement("span", null, "Custom title with icon")),
+            React.createElement("p", null, "This expandable has a custom title slot with an icon.")));
+    },
+};
+export const NoTitle = {
+    args: {
+        expanded: true,
+        box: true,
+        animated: true,
+    },
+    render(args) {
+        const [expanded, setExpanded] = useState(false);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Button, { onClick: () => setExpanded(!expanded), "aria-label": "Toggle expandable content without title", "aria-controls": "expandableWithoutTitle" }, "Toggle"),
+            React.createElement(Expandable, { ...args, id: "expandableWithoutTitle", expanded: expanded },
+                React.createElement("p", null, "with expanded content"))));
+    },
+};

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '../utils/expand-transition.js';
+import '../utils/unstyled-heading.js';
+import type { WarpExpandable } from './index.js';
+import './index.js';
+declare const args: Partial<WarpExpandable> & {
+    [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 Expanded: Story;
+export declare const Box: Story;
+export declare const Animated: Story;
+export declare const WithHeading: Story;
+export declare const NoChevron: Story;
+export declare const CustomTitle: Story;
+export declare const NoTitle: Story;

package/dist/packages/expandable/expandable.stories.js

@@ -0,0 +1,132 @@
+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 '../utils/expand-transition.js';
+import '../utils/unstyled-heading.js';
+import './index.js';
+const { events, args, argTypes } = getStorybookHelpers('w-expandable');
+const meta = {
+    title: 'Layout/Expandable',
+    render(args) {
+        return html `
+      <w-expandable ${spread(prespread(args))}>
+        <p>This is the expandable content that can be shown or hidden.</p>
+        <p>It can contain multiple paragraphs and other elements.</p>
+      </w-expandable>
+    `;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: "I'm expandable",
+        expanded: false,
+        box: false,
+        bleed: false,
+        animated: false,
+        'no-chevron': false,
+    },
+};
+export const Expanded = {
+    args: {
+        title: "I'm expanded by default",
+        expanded: true,
+        box: false,
+        bleed: false,
+        animated: false,
+        'no-chevron': false,
+    },
+};
+export const Box = {
+    args: {
+        title: "I'm a box expandable",
+        expanded: false,
+        box: true,
+        bleed: false,
+        animated: false,
+        'no-chevron': false,
+    },
+};
+export const Animated = {
+    args: {
+        title: "I'm animated",
+        expanded: false,
+        box: true,
+        bleed: false,
+        animated: true,
+        'no-chevron': false,
+    },
+};
+export const WithHeading = {
+    args: {
+        title: "I'm wrapped in h2",
+        expanded: false,
+        box: true,
+        bleed: false,
+        animated: false,
+        'no-chevron': false,
+        'heading-level': 2,
+    },
+};
+export const NoChevron = {
+    args: {
+        title: 'I have no chevron',
+        expanded: false,
+        box: false,
+        bleed: false,
+        animated: false,
+        'no-chevron': true,
+    },
+};
+export const CustomTitle = {
+    args: {
+        expanded: false,
+        box: true,
+        bleed: false,
+        animated: false,
+        'no-chevron': false,
+    },
+    render(args) {
+        return html `
+      <w-expandable ${spread(prespread(args))}>
+        <div slot="title" style="display: flex; align-items: center;">
+          <span>Custom title with icon</span>
+        </div>
+        <p>This expandable has a custom title slot with an icon.</p>
+      </w-expandable>
+    `;
+    },
+};
+export const NoTitle = {
+    args: {
+        expanded: true,
+        box: true,
+        animated: true,
+    },
+    render(args) {
+        return html `
+      <w-button aria-label="Toggle expandable content without title" aria-controls="expandableWithoutTitle">Toggle</w-button>
+      <w-expandable ${spread(prespread(args))} id="expandableWithoutTitle">
+        <p>with expanded content</p>
+      </w-expandable>
+      <script>
+        document.querySelector('[aria-controls="expandableWithoutTitle"]').addEventListener('click', () => {
+          const expand = document.getElementById('expandableWithoutTitle');
+          if (expand.expanded) {
+            expand.removeAttribute('expanded');
+          } else {
+            expand.setAttribute('expanded', 'true');
+          }
+        });
+      </script>
+    `;
+    },
+};

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

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

package/dist/packages/expandable/expandable.test.js

@@ -0,0 +1,24 @@
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './index.js';
+test('renders the given title prop and hides the slotted content', async () => {
+    const component = html `
+    <w-expandable title="I'm expandable">
+      <p>with expanded content</p>
+    </w-expandable>
+  `;
+    const page = render(component);
+    await expect.element(page.getByText("I'm expandable")).toBeVisible();
+    await expect.element(page.getByText('with expanded content')).not.toBeVisible();
+});
+test('clicking the expandable shows the slotted content', async () => {
+    const component = html `
+    <w-expandable title="I'm expandable">
+      <p>with expanded content</p>
+    </w-expandable>
+  `;
+    const page = render(component);
+    await page.getByRole('button').click();
+    await expect.element(page.getByText('with expanded content')).toBeVisible();
+});

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

@@ -1,61 +1,63 @@
-declare const WarpExpandable_base: {
-    new (): {
-        [x: string]: any;
-    };
-    [x: string]: any;
-    createProperty(name: any, options: any): void;
+import { LitElement, PropertyValues } from 'lit';
+import '@warp-ds/icons/elements/chevron-down-16';
+import '@warp-ds/icons/elements/chevron-up-16';
+import '../utils/expand-transition';
+import '../utils/unstyled-heading';
+export declare const ccBox: {
+    base: string;
+    bleed: string;
+    info: string;
+    neutral: string;
+    bordered: string;
 };
-export class WarpExpandable extends WarpExpandable_base {
-    static properties: {
-        expanded: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        title: {
-            type: StringConstructor;
-        };
-        box: {
-            type: BooleanConstructor;
-        };
-        bleed: {
-            type: BooleanConstructor;
-        };
-        buttonClass: {
-            type: StringConstructor;
-        };
-        contentClass: {
-            type: StringConstructor;
-        };
-        noChevron: {
-            type: BooleanConstructor;
-        };
-        animated: {
-            type: BooleanConstructor;
-        };
-        headingLevel: {
-            type: NumberConstructor;
-        };
-        _hasTitle: {
-            type: BooleanConstructor;
-            state: boolean;
-        };
-        _showChevronUp: {
-            type: BooleanConstructor;
-            state: boolean;
-        };
-    };
-    static styles: (import("lit").CSSResult | (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[])[];
+export declare const ccExpandable: {
+    wrapper: string;
+    box: string;
+    bleed: string;
+    chevron: string;
+    chevronNonBox: string;
+    chevronTransform: string;
+    chevronExpand: string;
+    chevronCollapse: string;
+    elementsChevronDownTransform: string;
+    elementsChevronUpTransform: string;
+    elementsChevronExpand: string;
+    elementsChevronCollapse: string;
+    expansion: string;
+    expansionNotExpanded: string;
+    button: string;
+    buttonBox: string;
+    contentWithTitle: string;
+    title: string;
+    titleType: string;
+};
+/**
+ * Expandable is a layout component used for creating expandable content areas on a page.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)
+ *
+ * @slot title - Alternative to the `title` attribute should you need to provide some additional markup.
+ */
+declare class WarpExpandable extends LitElement {
+    #private;
     expanded: boolean;
-    animated: boolean;
+    title: string;
     box: boolean;
     bleed: boolean;
+    buttonClass: string;
+    contentClass: string;
     noChevron: boolean;
+    animated: boolean;
+    headingLevel: number;
+    /** @internal */
     _hasTitle: boolean;
+    /** @internal */
     _showChevronUp: boolean;
-    updated(changedProperties: any): void;
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: PropertyValues<this>): void;
     firstUpdated(): void;
+    /** @internal */
     get _expandableSlot(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
-    #private;
 }
-export {};
+export { WarpExpandable };