@warp-ds/elements 2.2.0-next.1 → 2.2.0-next.11

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

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

package/dist/packages/affix/react.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { WarpAffix } from './index.js';
+export const Affix = createComponent({
+    tagName: 'w-affix',
+    elementClass: WarpAffix,
+    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.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 { html } from 'lit';
+import { spread } from '@open-wc/lit-helpers';
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+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,16 @@
+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,24 +1,34 @@
-export class WarpAlert {
-    static properties: {
-        variant: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        show: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        role: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    static styles: any[];
+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;
-    get _icon(): import("lit").TemplateResult<1> | "";
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    get _icon(): "" | import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
+export { WarpAlert };
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-alert': WarpAlert;
+    }
+}