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

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

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

package/dist/packages/affix/react.js

@@ -0,0 +1,15 @@
+import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
+import React from 'react';
+// We do this in order to prevent users from bundling in the CE implementation when
+// they should be getting it from Eik.
+class Component extends LitElement {
+}
+export const Affix = createComponent({
+    tagName: 'w-affix',
+    // This tricks TS into thinking the stub we created above is still the actual implementation
+    // This ensures devs can import the react wrapper and use it with the full intellisense experience
+    // yet not bundling in the CE implementation into their app bundles.
+    elementClass: Component,
+    react: React,
+});

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

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

package/dist/packages/affix/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}.rounded-4{border-radius:4px}.block{display:block}.flex{display:flex}.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}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.justify-center{justify-content:center}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-text{color:var(--w-s-color-text)}.w-40{width:4rem}.w-max{width:max-content}.pb-0{padding-bottom:0}.pl-12{padding-left:1.2rem}.pr-12{padding-right:1.2rem}.cursor-default{cursor:default}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}`;

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

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+import { Alert } from './react';
+declare const _default: {
+    title: string;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpAlert, {}>;
+};
+export default _default;
+export type Story = StoryObj<typeof Alert>;
+export declare const Info: Story;
+export declare const Warning: Story;
+export declare const Negative: Story;
+export declare const Positive: Story;
+export declare const WithDescription: Story;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Alert } from './react';
+export default {
+    title: 'Feedback/Alert',
+    component: Alert,
+};
+export const Info = {
+    args: {
+        variant: 'info',
+        show: true,
+        role: 'alert',
+    },
+};
+export const Warning = {
+    args: {
+        variant: 'warning',
+        show: true,
+        role: 'alert',
+    },
+};
+export const Negative = {
+    args: {
+        variant: 'negative',
+        show: true,
+        role: 'alert',
+    },
+};
+export const Positive = {
+    args: {
+        variant: 'positive',
+        show: true,
+        role: 'alert',
+    },
+};
+export const WithDescription = {
+    args: {
+        variant: 'info',
+        show: true,
+        role: 'alert',
+        children: (React.createElement(React.Fragment, null,
+            React.createElement("h3", null, "Alert Title"),
+            React.createElement("p", null, "This is a more detailed alert message with additional description."))),
+    },
+};

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '../utils/expand-transition.js';
+import type { WarpAlert } from './index.js';
+import './index.js';
+declare const args: Partial<WarpAlert> & {
+    [key: string]: any;
+};
+declare const meta: Meta<typeof args>;
+export default meta;
+type Story = StoryObj<typeof args>;
+export declare const Info: Story;
+export declare const Warning: Story;
+export declare const Negative: Story;
+export declare const Positive: Story;
+export declare const WithDescription: Story;

package/dist/packages/alert/alert.stories.js

@@ -0,0 +1,68 @@
+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 './index.js';
+const { events, args, argTypes } = getStorybookHelpers('w-alert');
+const meta = {
+    title: 'Feedback/Alert',
+    render(args) {
+        return html `
+      <w-alert ${spread(prespread(args))}>
+        <p>This is an alert message</p>
+      </w-alert>
+    `;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Info = {
+    args: {
+        variant: 'info',
+        show: true,
+        role: 'alert',
+    },
+};
+export const Warning = {
+    args: {
+        variant: 'warning',
+        show: true,
+        role: 'alert',
+    },
+};
+export const Negative = {
+    args: {
+        variant: 'negative',
+        show: true,
+        role: 'alert',
+    },
+};
+export const Positive = {
+    args: {
+        variant: 'positive',
+        show: true,
+        role: 'alert',
+    },
+};
+export const WithDescription = {
+    args: {
+        variant: 'info',
+        show: true,
+        role: 'alert',
+    },
+    render(args) {
+        return html `
+      <w-alert ${spread(prespread(args))}>
+        <h3>Alert Title</h3>
+        <p>This is a more detailed alert message with additional description.</p>
+      </w-alert>
+    `;
+    },
+};

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

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

package/dist/packages/alert/alert.test.js

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './index.js';
+test('renders an info', async () => {
+    const page = render(html `<w-alert variant="info" show data-testid="infoMessage">This is information</w-alert>`);
+    // Verify the icon correct icon is rendered
+    await expect
+        .poll(() => page.getByTestId('infoMessage').element().shadowRoot.querySelector('w-icon-info-16'))
+        .toBeVisible();
+    await expect.element(page.getByTestId('infoMessage')).toBeVisible();
+    await expect.element(page.getByText('This is information')).toBeVisible();
+});
+test('does not render when "show" is not set / or not true', async () => {
+    const component = html `<w-alert variant="warning" data-testid="warningMessage">This is a warning</w-alert>`;
+    const page = render(component);
+    await expect.element(page.container.querySelector('w-alert')).not.toHaveAttribute('show');
+});

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

@@ -1,23 +1,29 @@
-export class WarpAlert extends WarpElement {
-    static properties: {
-        variant: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        show: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        role: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    static styles: (import("lit").CSSResult | (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[])[];
+import { LitElement } from 'lit';
+import '@warp-ds/icons/elements/info-16';
+import '@warp-ds/icons/elements/warning-16';
+import '@warp-ds/icons/elements/error-16';
+import '@warp-ds/icons/elements/success-16';
+type AlertVariants = 'negative' | 'positive' | 'warning' | 'info';
+/**
+ * Alert is an inline component used for displaying different types of messages.
+ *
+ * For accessibility reasons, alert should appear close to the element that triggered it.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
+ */
+declare class WarpAlert extends LitElement {
+    variant: AlertVariants;
     show: boolean;
+    role: string;
+    constructor();
+    connectedCallback(): void;
+    /** @internal */
     get _wrapperClasses(): string;
+    /** @internal */
     get _iconClasses(): string;
+    static styles: import("lit").CSSResult[];
+    /** @internal */
     get _icon(): import("lit").TemplateResult<1> | "";
     render(): import("lit").TemplateResult<1>;
 }
-import WarpElement from '@warp-ds/elements-core';
+export { WarpAlert };