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

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

@@ -0,0 +1,9 @@
+import { StoryObj } from '@storybook/react';
+import { Affix } from './react';
+declare const _default: {
+    title: string;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpAffix, {}>;
+};
+export default _default;
+export type Story = StoryObj<typeof Affix>;
+export declare const Default: Story;

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

@@ -0,0 +1,10 @@
+import { Affix } from './react';
+export default {
+    title: 'Forms/Affix',
+    component: Affix,
+};
+export const Default = {
+    args: {
+        label: 'kr',
+    },
+};

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { WarpAffix } from './index.js';
+import './index.js';
+declare const args: Partial<WarpAffix> & {
+    [key: string]: any;
+};
+declare const meta: Meta<typeof args>;
+export default meta;
+type Story = StoryObj<typeof args>;
+export declare const Default: Story;

package/dist/packages/affix/affix.stories.js

@@ -0,0 +1,25 @@
+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-affix');
+const meta = {
+    title: 'Forms/Affix',
+    render(args) {
+        return html `<w-affix ${spread(prespread(args))}></w-affix>`;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'kr',
+    },
+};

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

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

package/dist/packages/affix/affix.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 affix', async () => {
+    const component = html `<w-affix label="kr"></w-affix>`;
+    const page = render(component);
+    await expect.element(page.getByText('kr')).toBeVisible();
+});

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

@@ -1,33 +1,56 @@
-declare const WarpAffix_base: {
-    new (): {
-        [x: string]: any;
-    };
-    [x: string]: any;
-    createProperty(name: any, options: any): void;
+import { LitElement } from 'lit';
+import '@warp-ds/icons/elements/search-16';
+import '@warp-ds/icons/elements/close-16';
+export declare const ccSuffix: {
+    wrapper: string;
+    wrapperWithLabel: string;
+    wrapperWithIcon: string;
+    label: string;
+};
+export declare const ccPrefix: {
+    wrapper: string;
+    wrapperWithLabel: string;
+    wrapperWithIcon: string;
+    label: string;
 };
-export class WarpAffix extends WarpAffix_base {
-    static properties: {
-        ariaLabel: {
-            type: StringConstructor;
-        };
-        clear: {
-            type: BooleanConstructor;
-        };
-        search: {
-            type: BooleanConstructor;
-        };
-        label: {
-            type: StringConstructor;
-        };
+/**
+ * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
+ */
+declare class WarpAffix extends LitElement {
+    ariaLabel: string;
+    /**
+     * Add this property to render a clickable Warp close icon.
+     *
+     * Set an `aria-label` that explains the action when using this.
+     */
+    clear: boolean;
+    /**
+     * Add this property to render a clickable Warp search icon.
+     *
+     * Set an `aria-label` that explains the action when using this.
+     */
+    search: boolean;
+    label: string;
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    get _classBase(): {
+        wrapper: string;
+        wrapperWithLabel: string;
+        wrapperWithIcon: string;
+        label: string;
     };
-    static styles: (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[][];
-    get _classBase(): typeof ccSuffix;
+    /** @internal */
     get _classes(): string;
+    /** @internal */
     get _searchButton(): import("lit").TemplateResult<1>;
+    /** @internal */
     get _clearButton(): import("lit").TemplateResult<1>;
+    /** @internal */
     get _text(): import("lit").TemplateResult<1>;
+    /** @internal */
     get _markup(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
-import { suffix as ccSuffix } from '@warp-ds/css/component-classes';
-export {};
+export { WarpAffix };