@mozaic-ds/web-components 1.1.0 → 1.2.0

package/dist/components/tags/TagsContextualised.stories.js

@@ -1,57 +0,0 @@
-import { expect, waitFor } from 'storybook/test';
-export default {
-    title: 'Indicators/Tag/Contextualised',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
-            },
-        },
-    },
-    argTypes: {
-        label: {
-            control: 'text',
-            description: 'Text label displayed inside the tag',
-        },
-        contextualisedNumber: {
-            control: 'number',
-            description: 'Number badge displayed on the tag',
-        },
-        size: {
-            control: 'select',
-            options: ['s', 'm', 'l'],
-            description: 'Size of the tag',
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Disable the tag',
-        },
-    },
-};
-const createContextualisedTag = (args) => {
-    const tag = document.createElement('mc-tag-contextualised');
-    if (args.label)
-        tag.setAttribute('label', args.label);
-    if (args.contextualisedNumber)
-        tag.setAttribute('contextualisednumber', args.contextualisedNumber.toString());
-    if (args.size)
-        tag.setAttribute('size', args.size);
-    if (args.disabled)
-        tag.setAttribute('disabled', 'true');
-    return tag;
-};
-export const Contextualised = (args) => createContextualisedTag(args);
-Contextualised.args = {
-    label: 'Notifications',
-    contextualisedNumber: 8,
-    size: 'm',
-};
-Contextualised.play = async ({ canvasElement }) => {
-    const tagEl = await waitFor(() => canvasElement.querySelector('mc-tag-contextualised'));
-    expect(tagEl?.getAttribute('contextualisednumber')).toBe('8');
-    const shadow = tagEl?.shadowRoot;
-    const badge = shadow?.querySelector('.mc-number-badge');
-    const label = shadow?.querySelector('.mc-tag__label');
-    expect(badge?.textContent?.trim()).toBe('8');
-    expect(label?.textContent?.trim()).toBe('Notifications');
-};

package/dist/components/tags/TagsInteractive.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
-export declare const Interactive: StoryFn;
-//# sourceMappingURL=TagsInteractive.stories.d.ts.map

package/dist/components/tags/TagsInteractive.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TagsInteractive.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsInteractive.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAqCrD,IAAI;AAjCT,wBAiCU;AAeV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}

package/dist/components/tags/TagsInteractive.stories.js

@@ -1,61 +0,0 @@
-import { userEvent, expect } from 'storybook/test';
-import { action } from 'storybook/actions';
-export default {
-    title: 'Indicators/Tag/Interactive',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
-            },
-        },
-    },
-    argTypes: {
-        label: {
-            control: 'text',
-            description: 'Text label displayed inside the tag',
-        },
-        id: {
-            control: 'text',
-            description: 'ID of the tag (optional)',
-        },
-        size: {
-            control: 'select',
-            options: ['s', 'm', 'l'],
-            description: 'Size of the tag',
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Disable the tag',
-        },
-        onClick: {
-            action: 'clicked',
-            table: { category: 'Events' },
-        },
-    },
-};
-const createInteractiveTag = (args) => {
-    const tag = document.createElement('mc-tag-interactive');
-    if (args.label)
-        tag.setAttribute('label', args.label);
-    if (args.id)
-        tag.setAttribute('id', args.id);
-    if (args.size)
-        tag.setAttribute('size', args.size);
-    if (args.disabled)
-        tag.setAttribute('disabled', 'true');
-    tag.addEventListener('click', action('clicked'));
-    return tag;
-};
-export const Interactive = (args) => createInteractiveTag(args);
-Interactive.args = {
-    id: 'tag-interactive',
-    label: 'Click me',
-    size: 'm',
-};
-Interactive.play = async ({ canvasElement }) => {
-    const button = canvasElement
-        .querySelector('mc-tag-interactive')
-        ?.shadowRoot?.querySelector('button');
-    expect(button).not.toBeNull();
-    await userEvent.click(button);
-};

package/dist/components/tags/TagsRemovable.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
-export declare const Removable: StoryFn;
-//# sourceMappingURL=TagsRemovable.stories.d.ts.map

package/dist/components/tags/TagsRemovable.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TagsRemovable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsRemovable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAqCrD,IAAI;AAjCT,wBAiCU;AAeV,eAAO,MAAM,SAAS,EAAE,OAA4C,CAAC"}

package/dist/components/tags/TagsRemovable.stories.js

@@ -1,60 +0,0 @@
-import { userEvent, expect } from 'storybook/test';
-import { action } from 'storybook/actions';
-export default {
-    title: 'Indicators/Tag/Removable',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
-            },
-        },
-    },
-    argTypes: {
-        label: {
-            control: 'text',
-            description: 'Text label displayed inside the tag',
-        },
-        id: {
-            control: 'text',
-            description: 'ID of the tag (required)',
-        },
-        removableLabel: {
-            control: 'text',
-            description: 'Accessible label for the remove button',
-        },
-        size: {
-            control: 'select',
-            options: ['s', 'm', 'l'],
-            description: 'Size of the tag',
-        },
-        'remove-tag': {
-            action: 'remove-tag',
-            table: { category: 'Events' },
-        },
-    },
-};
-const createRemovableTag = (args) => {
-    const tag = document.createElement('mc-tag-removable');
-    if (args.label)
-        tag.setAttribute('label', args.label);
-    if (args.id)
-        tag.setAttribute('id', args.id);
-    if (args.size)
-        tag.setAttribute('size', args.size);
-    if (args.removableLabel)
-        tag.setAttribute('removablelabel', args.removableLabel);
-    tag.addEventListener('remove-tag', action('remove-tag'));
-    return tag;
-};
-export const Removable = (args) => createRemovableTag(args);
-Removable.args = {
-    id: 'tag-vue',
-    label: 'Tag label',
-    removableLabel: 'Remove Vue tag',
-    size: 'm',
-};
-Removable.play = async ({ canvasElement }) => {
-    const btn = canvasElement.querySelector('mc-tag-removable')?.shadowRoot?.querySelector('button');
-    expect(btn).not.toBeNull();
-    await userEvent.click(btn);
-};

package/dist/components/tags/TagsSelectable.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryFn;
-//# sourceMappingURL=TagsSelectable.stories.d.ts.map

package/dist/components/tags/TagsSelectable.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TagsSelectable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsSelectable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA6CrD,IAAI;AAzCT,wBAyCU;AAiBV,eAAO,MAAM,OAAO,EAAE,OAA6C,CAAC"}

package/dist/components/tags/TagsSelectable.stories.js

@@ -1,76 +0,0 @@
-import { userEvent, expect } from 'storybook/test';
-import { action } from 'storybook/actions';
-export default {
-    title: 'Indicators/Tag/Selectable',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
-            },
-        },
-    },
-    argTypes: {
-        label: {
-            control: 'text',
-            description: 'Text label displayed inside the tag',
-        },
-        id: {
-            control: 'text',
-            description: 'ID of the tag (required)',
-        },
-        name: {
-            control: 'text',
-            description: 'Form name (used for selectable)',
-        },
-        checked: {
-            control: 'boolean',
-            description: 'Checked state of the tag',
-        },
-        size: {
-            control: 'select',
-            options: ['s', 'm', 'l'],
-            description: 'Size of the tag',
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Disable the tag',
-        },
-        'update:checked': {
-            action: 'update:checked',
-            table: { category: 'Events' },
-        },
-    },
-};
-const createSelectableTag = (args) => {
-    const tag = document.createElement('mc-tag-selectable');
-    if (args.label)
-        tag.setAttribute('label', args.label);
-    if (args.id)
-        tag.setAttribute('id', args.id);
-    if (args.name)
-        tag.setAttribute('name', args.name);
-    if (args.size)
-        tag.setAttribute('size', args.size);
-    if (args.disabled)
-        tag.setAttribute('disabled', 'true');
-    if (args.checked)
-        tag.setAttribute('checked', 'true');
-    tag.addEventListener('update:checked', action('update:checked'));
-    return tag;
-};
-export const Default = (args) => createSelectableTag(args);
-Default.args = {
-    id: 'tag1',
-    name: 'filters',
-    label: 'Tag label',
-    checked: true,
-    size: 'm',
-};
-Default.play = async ({ canvasElement }) => {
-    const input = canvasElement
-        .querySelector('mc-tag-selectable')
-        ?.shadowRoot?.querySelector('input');
-    expect(input?.checked).toBe(true);
-    await userEvent.click(input);
-    expect(input?.checked).toBe(false);
-};