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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"button.aria.loading\":[\"Indlæser...\"]}");

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/packages/button/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}.text-center{text-align:center}.animate-inprogress{background-size:30px 30px;animation:3s linear infinite animate-inprogress;background-image:linear-gradient(135deg,#0000000d 25%,#0000 0 50%,#0000000d 0 75%,#0000 0,#0000)!important}@keyframes animate-inprogress{0%{background-position:0 0}to{background-position:60px 0}}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.bg-transparent{background-color:#0000}.bg-\\[--w-color-button-primary-background\\]{background-color:var(--w-color-button-primary-background)}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.hover\\:bg-\\[--w-color-button-primary-background-hover\\]:hover{background-color:var(--w-color-button-primary-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.active\\:bg-\\[--w-color-button-primary-background-active\\]:active{background-color:var(--w-color-button-primary-background-active)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.inline-block{display:inline-block}.inline{display:inline}.inline-flex{display:inline-flex}.hover\\:underline:hover,.focus\\:underline:focus,.active\\:underline:active{text-decoration-line:underline}.hover\\:no-underline:hover,.focus\\:no-underline:focus,.active\\:no-underline:active{text-decoration: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}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-negative{background-color:var(--w-s-color-background-negative)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-negative-hover:hover{background-color:var(--w-s-color-background-negative-hover)}.hover\\:s-bg-negative-subtle-hover:hover{background-color:var(--w-s-color-background-negative-subtle-hover)}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-negative-active:active{background-color:var(--w-s-color-background-negative-active)}.active\\:s-bg-negative-subtle-active:active{background-color:var(--w-s-color-background-negative-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-icon{color:var(--w-s-color-icon)}.hover\\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\\:s-icon-active:active{color:var(--w-s-color-icon-active)}.s-border{border-color:var(--w-s-color-border)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.max-w-full{max-width:100%}.max-w-max{max-width:max-content}.min-h-32{min-height:3.2rem}.min-w-32{min-width:3.2rem}.w-full{width:100%}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-0{padding:0}.p-4{padding:.4rem}.px-14{padding-left:1.4rem;padding-right:1.4rem}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-10{padding-top:1rem;padding-bottom:1rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.px-\\[15px\\]{padding-left:15px;padding-right:15px}.py-\\[11px\\]{padding-top:11px;padding-bottom:11px}.py-\\[7px\\]{padding-top:7px;padding-bottom:7px}.cursor-default{cursor:default}.font-bold{font-weight:700}.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}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-\\[24\\]{line-height:2.4rem}`;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Card } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpCard>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "flat" | "keypressed" | "buttonText" | "selected" | "clickable" | "_containerClasses" | "_outlineClasses" | "_interactiveElement"> & {} & Partial<Omit<import(".").WarpCard, keyof HTMLElement>> & React.RefAttributes<import(".").WarpCard>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpCard, {}>;
+};
+export default _default;
+export type Story = StoryObj<typeof Card>;
+export declare const Default: Story;
+export declare const Selected: Story;
+export declare const Flat: Story;
+export declare const FlatSelected: Story;
+export declare const Clickable: Story;
+export declare const PropertyExample: Story;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Card } from './react';
+export default {
+    title: 'Navigation/Card',
+    render(args) {
+        return (React.createElement(Card, { ...args },
+            React.createElement("div", { style: { padding: '16px' } },
+                React.createElement("h3", null, "Card Title"),
+                React.createElement("p", null, "This is card content with some example text."))));
+    },
+    component: Card,
+};
+export const Default = {
+    args: {
+        selected: false,
+        flat: false,
+        clickable: false,
+    },
+};
+export const Selected = {
+    args: {
+        selected: true,
+        flat: false,
+        clickable: false,
+    },
+};
+export const Flat = {
+    args: {
+        selected: false,
+        flat: true,
+        clickable: false,
+    },
+};
+export const FlatSelected = {
+    args: {
+        selected: true,
+        flat: true,
+        clickable: false,
+    },
+};
+export const Clickable = {
+    args: {
+        selected: false,
+        flat: false,
+        clickable: true,
+    },
+};
+export const PropertyExample = {
+    args: {
+        selected: false,
+        flat: false,
+        clickable: true,
+    },
+    render(args) {
+        return (React.createElement(Card, { ...args, style: { maxWidth: '300px' } },
+            React.createElement("img", { style: { width: '100%', height: '200px', objectFit: 'cover' }, src: "https://unsplash.it/300/200?random", alt: "Example image" }),
+            React.createElement("div", { style: { padding: '16px' } },
+                React.createElement("p", { style: { fontSize: '12px', color: '#666', margin: '0 0 8px 0' } }, "DNB Eiendom"),
+                React.createElement("p", { style: { margin: '0 0 8px 0' } }, "Stilfull og gjennomg\u00E5ende 3-roms m/balkong. Oppusset i 2019."),
+                React.createElement("p", { style: { fontSize: '14px', color: '#666', margin: '0 0 8px 0' } }, "B\u00F8gata 25C, 0655 Oslo"),
+                React.createElement("p", { style: { fontWeight: 'bold', margin: '0' } }, "52 m\u00B2 Totalpris: 4 869 039 kr"))));
+    },
+};

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { WarpCard } from './index.js';
+import './index.js';
+declare const args: Partial<WarpCard> & {
+    [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 Selected: Story;
+export declare const Flat: Story;
+export declare const FlatSelected: Story;
+export declare const Clickable: Story;
+export declare const PropertyExample: Story;

package/dist/packages/card/card.stories.js

@@ -0,0 +1,82 @@
+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-card');
+const meta = {
+    title: 'Navigation/Card',
+    render(args) {
+        return html `
+      <w-card ${spread(prespread(args))}>
+        <div style="padding: 16px;">
+          <h3>Card Title</h3>
+          <p>This is card content with some example text.</p>
+        </div>
+      </w-card>
+    `;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        selected: false,
+        flat: false,
+        clickable: false,
+    },
+};
+export const Selected = {
+    args: {
+        selected: true,
+        flat: false,
+        clickable: false,
+    },
+};
+export const Flat = {
+    args: {
+        selected: false,
+        flat: true,
+        clickable: false,
+    },
+};
+export const FlatSelected = {
+    args: {
+        selected: true,
+        flat: true,
+        clickable: false,
+    },
+};
+export const Clickable = {
+    args: {
+        selected: false,
+        flat: false,
+        clickable: true,
+    },
+};
+export const PropertyExample = {
+    args: {
+        selected: false,
+        flat: false,
+        clickable: true,
+    },
+    render(args) {
+        return html `
+      <w-card ${spread(prespread(args))} style="max-width: 300px;">
+        <img style="width: 100%; height: 200px; object-fit: cover;" src="https://unsplash.it/300/200?random" alt="Example image" />
+        <div style="padding: 16px;">
+          <p style="font-size: 12px; color: #666; margin: 0 0 8px 0;">DNB Eiendom</p>
+          <p style="margin: 0 0 8px 0;">Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019.</p>
+          <p style="font-size: 14px; color: #666; margin: 0 0 8px 0;">Bøgata 25C, 0655 Oslo</p>
+          <p style="font-weight: bold; margin: 0;">52 m² Totalpris: 4 869 039 kr</p>
+        </div>
+      </w-card>
+    `;
+    },
+};

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

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

package/dist/packages/card/card.test.js

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './index.js';
+test('renders the slotted text', async () => {
+    const component = html `<w-card>This is a card</w-card>`;
+    const page = render(component);
+    await expect.element(page.getByText('This is a card')).toBeVisible();
+});

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

@@ -1,25 +1,36 @@
-export class WarpCard extends WarpElement {
-    static properties: {
-        selected: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        flat: {
-            type: BooleanConstructor;
-        };
-        clickable: {
-            type: BooleanConstructor;
-        };
-    };
-    static styles: (import("lit").CSSResult | (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[])[];
+import { LitElement } from 'lit';
+export declare const ccCard: {
+    base: string;
+    shadow: string;
+    selected: string;
+    outline: string;
+    outlineUnselected: string;
+    outlineSelected: string;
+    flat: string;
+    flatUnselected: string;
+    flatSelected: string;
+    a11y: string;
+};
+/**
+ * Card is a layout component used for separating content areas on a page.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
+ */
+declare class WarpCard extends LitElement {
+    static styles: import("lit").CSSResult[];
     selected: boolean;
     flat: boolean;
     clickable: boolean;
+    /** @internal */
     buttonText: string;
+    constructor();
+    /** @internal */
     get _containerClasses(): string;
+    /** @internal */
     get _outlineClasses(): string;
+    /** @internal */
     get _interactiveElement(): import("lit").TemplateResult<1> | "";
-    keypressed(e: any): void;
+    keypressed(e: KeyboardEvent): void;
     render(): import("lit").TemplateResult<1>;
 }
-import WarpElement from '@warp-ds/elements-core';
+export { WarpCard };