@uh-design-system/component-library 1.5.1 → 1.5.2-rc.0

package/dist/collection/components/01-base-components/ds-tabs/stories/ds-tabs.features.stories.js

@@ -1,173 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { html } from "lit";
-const meta = {
-    title: 'Base Components/Tabs/Features',
-    component: 'ds-tabs',
-    args: {
-        dsCurrentTab: 'tab-1',
-        dsCurrentTabPanel: 'panel-1',
-        dsVariant: 'container',
-    },
-};
-export default meta;
-const numberMap = {
-    1: 'First',
-    2: 'Second',
-    3: 'Third',
-    4: 'Fourth',
-    5: 'Fifth',
-    6: 'Sixth',
-    7: 'Seventh',
-    8: 'Eighth',
-    9: 'Ninth',
-    10: 'Tenth',
-};
-export const Container = {
-    args: {
-        dsVariant: 'container',
-    },
-    render: args => {
-        const [, updateArgs] = useArgs();
-        return html `
-      <ds-tabs
-        ds-current-tab=${args.dsCurrentTab}
-        ds-current-tab-panel=${args.dsCurrentTabPanel}
-        ds-variant=${args.dsVariant}
-        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
-      >
-        <ds-tablist ds-aria-label="Tab list">
-          ${Array.from({ length: 3 }, (_, i) => html ` <ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab"></ds-tab> `)}
-        </ds-tablist>
-        ${Array.from({ length: 3 }, (_, i) => html `
-            <ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
-              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab</div>
-            </ds-tabpanel>
-          `)}
-      </ds-tabs>
-    `;
-    },
-};
-export const Line = {
-    args: {
-        dsVariant: 'line',
-    },
-    render: args => {
-        const [, updateArgs] = useArgs();
-        return html `
-      <ds-tabs
-        ds-current-tab=${args.dsCurrentTab}
-        ds-current-tab-panel=${args.dsCurrentTabPanel}
-        ds-variant=${args.dsVariant}
-        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
-      >
-        <ds-tablist ds-aria-label="Tab list">
-          ${Array.from({ length: 3 }, (_, i) => html ` <ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab"></ds-tab> `)}
-        </ds-tablist>
-        ${Array.from({ length: 3 }, (_, i) => html `
-            <ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
-              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab</div>
-            </ds-tabpanel>
-          `)}
-      </ds-tabs>
-    `;
-    },
-};
-export const Scrollable = {
-    args: {
-        dsVariant: 'container',
-    },
-    render: args => {
-        const [, updateArgs] = useArgs();
-        return html `
-      <ds-tabs
-        ds-current-tab=${args.dsCurrentTab}
-        ds-current-tab-panel=${args.dsCurrentTabPanel}
-        ds-variant=${args.dsVariant}
-        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
-      >
-        <ds-tablist ds-aria-label="Tab list">
-          ${Array.from({ length: 5 }, (_, i) => html ` <ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab long name"></ds-tab> `)}
-        </ds-tablist>
-        ${Array.from({ length: 5 }, (_, i) => html `
-            <ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
-              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab. Resize the viewport so the tabs do not fit within the available width.</div>
-            </ds-tabpanel>
-          `)}
-      </ds-tabs>
-    `;
-    },
-};
-export const Nested = {
-    args: {
-        dsCurrentNestedTab: 'nested-tab-1',
-        dsCurrentNestedTabPanel: 'nested-panel-1',
-    },
-    render: args => {
-        const [, updateArgs] = useArgs();
-        return html `
-      <ds-tabs
-        ds-current-tab=${args.dsCurrentTab}
-        ds-current-tab-panel=${args.dsCurrentTabPanel}
-        ds-variant="line"
-        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
-      >
-        <ds-tablist ds-aria-label="Tab list">
-          <ds-tab ds-id="tab-1" ds-tab-panel-id="panel-1" ds-text="Tab 1"></ds-tab>
-          <ds-tab ds-id="tab-2" ds-tab-panel-id="panel-2" ds-text="Tab 2"></ds-tab>
-          <ds-tab ds-id="tab-3" ds-tab-panel-id="panel-3" ds-text="Tab 3"></ds-tab>
-        </ds-tablist>
-        <ds-tabpanel ds-id="panel-1" ds-tab-id="tab-1">
-          <div class="ds-mb-sm ds-bodytext-md">Content for Tab 1</div>
-          <ds-tabs
-            ds-current-tab=${args.dsCurrentNestedTab}
-            ds-current-tab-panel=${args.dsCurrentNestedTabPanel}
-            ds-variant="container"
-            @dsTabChange=${(event) => updateArgs({ dsCurrentNestedTab: event.detail.tabId, dsCurrentNestedTabPanel: event.detail.tabPanelId })}
-          >
-            <ds-tablist ds-aria-label="Nested Tab list">
-              <ds-tab ds-id="nested-tab-1" ds-tab-panel-id="nested-panel-1" ds-text="Nested Tab 1"></ds-tab>
-              <ds-tab ds-id="nested-tab-2" ds-tab-panel-id="nested-panel-2" ds-text="Nested Tab 2"></ds-tab>
-            </ds-tablist>
-            <ds-tabpanel ds-id="nested-panel-1" ds-tab-id="nested-tab-1">
-              <div class="ds-bodytext-md">Content for Nested Tab 1</div>
-            </ds-tabpanel>
-            <ds-tabpanel ds-id="nested-panel-2" ds-tab-id="nested-tab-2">
-              <div class="ds-bodytext-md">Content for Nested Tab 2</div>
-            </ds-tabpanel>
-          </ds-tabs>
-        </ds-tabpanel>
-        <ds-tabpanel ds-id="panel-2" ds-tab-id="tab-2">
-          <div class="ds-bodytext-md">Content for Tab 2</div>
-        </ds-tabpanel>
-        <ds-tabpanel ds-id="panel-3" ds-tab-id="tab-3">
-          <div class="ds-bodytext-md">Content for Tab 3</div>
-        </ds-tabpanel>
-      </ds-tabs>
-    `;
-    },
-};
-export const Slots = {
-    render: args => html ` <ds-tabs ds-current-tab=${args.dsCurrentTab} ds-current-tab-panel=${args.dsCurrentTabPanel}> Default slot </ds-tabs> `,
-};
-export const CustomTagName = {
-    render: args => {
-        const [, updateArgs] = useArgs();
-        return html `
-      <custom-ds-tabs
-        ds-current-tab=${args.dsCurrentTab}
-        ds-current-tab-panel=${args.dsCurrentTabPanel}
-        ds-variant=${args.dsVariant}
-        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
-      >
-        <custom-ds-tablist ds-aria-label="Tab list">
-          ${Array.from({ length: 5 }, (_, i) => html ` <custom-ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab"></custom-ds-tab> `)}
-        </custom-ds-tablist>
-        ${Array.from({ length: 5 }, (_, i) => html `
-            <custom-ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
-              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab</div>
-            </custom-ds-tabpanel>
-          `)}
-      </custom-ds-tabs>
-    `;
-    },
-};

package/dist/collection/components/01-base-components/ds-tabs/stories/ds-tabs.stories.js

@@ -1,132 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { html } from "lit";
-const numberMap = {
-    1: 'First',
-    2: 'Second',
-    3: 'Third',
-    4: 'Fourth',
-    5: 'Fifth',
-    6: 'Sixth',
-    7: 'Seventh',
-    8: 'Eighth',
-    9: 'Ninth',
-    10: 'Tenth',
-};
-const meta = {
-    title: 'Base Components/Tabs',
-    component: 'ds-tabs',
-    args: {
-        dsCurrentTab: 'tab-1',
-        dsCurrentTabPanel: 'panel-1',
-        dsVariant: 'container',
-    },
-    parameters: {
-        docs: {
-            description: {
-                component: `
-Tabs component for organising related content into different categories,
-allowing users to navigate between them without leaving the page.
-
-## Current tab
-
-The currently active tab is determined by the \`dsCurrentTab\` property,
-which should match the \`dsId\` of one of the child \`ds-tab\` elements.
-The associated tab panel is determined by the \`dsCurrentTabPanel\` property,
-which should match the \`dsId\` of one of the child \`ds-tabpanel\` elements.
-
-## Variant
-
-The variant of the tabs component is determined by the \`dsVariant\` property. The available variants are:
-
-- \`container\` (default): Displays tabs within a container with a background and border.
-- \`line\`: Displays tabs with only a bottom border, without a container background.
-
-## Icons
-
-To add icons to the tabs, use the \`dsIconStart\` and \`dsIconEnd\` properties of the \`ds-tab\` component.
-These properties accept the name of an icon from the design system's icon library.
-
-The \`dsIconEndColour\` property can be used to set the colour of the end icon,
-using the icon colour names from the design system.
-
-## Accessibility
-
-- The \`ds-tablist\` element should have an ARIA label (using \`dsAriaLabel\`)
-or be labelled by another element (using \`dsAriaLabelledby\`) for accessibility.
-- Each \`ds-tab\` should have a corresponding \`ds-tabpanel\` with matching IDs for accessibility.
-
-## Keyboard navigation
-
-The current tab can be focused using the Tab key.
-Once a tab has focus, users can navigate between tabs using the following keyboard shortcuts:
-
-- Left/Right Arrow keys: Move focus between tabs.
-- Home/End keys: Move focus to the first/last tab.
-- Enter/Space keys: Activate the focused tab.
-        `,
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    render: args => {
-        const [, updateArgs] = useArgs();
-        return html `
-      <ds-tabs
-        ds-current-tab=${args.dsCurrentTab}
-        ds-current-tab-panel=${args.dsCurrentTabPanel}
-        ds-variant=${args.dsVariant}
-        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
-      >
-        <ds-tablist ds-aria-label="Tab list">
-          ${Array.from({ length: 3 }, (_, i) => html ` <ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab"></ds-tab> `)}
-        </ds-tablist>
-        ${Array.from({ length: 3 }, (_, i) => html `
-            <ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
-              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab</div>
-            </ds-tabpanel>
-          `)}
-      </ds-tabs>
-    `;
-    },
-};
-export const Playground = {
-    args: {
-        tabCount: 5,
-    },
-    argTypes: {
-        tabCount: {
-            control: { type: 'number', min: 1, max: 10, step: 1 },
-        },
-    },
-    render: args => {
-        const [, updateArgs] = useArgs();
-        return html `
-      <ds-tabs
-        ds-current-tab=${args.dsCurrentTab}
-        ds-current-tab-panel=${args.dsCurrentTabPanel}
-        ds-variant=${args.dsVariant}
-        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
-      >
-        <ds-tablist ds-aria-label="Tab list">
-          ${Array.from({ length: args.tabCount }, (_, i) => html ` <ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab"></ds-tab> `)}
-        </ds-tablist>
-        ${Array.from({ length: args.tabCount }, (_, i) => html `
-            <ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
-              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab</div>
-            </ds-tabpanel>
-          `)}
-      </ds-tabs>
-      ${args.tabCount > 5
-            ? html `
-            <div class="ds-mt-md">
-              <ds-feedback>
-                <ds-notification ds-variant="attention" ds-heading="Too many tabs" ds-description="You should use at most 5 tabs."></ds-notification>
-              </ds-feedback>
-            </div>
-          `
-            : ''}
-    `;
-    },
-};

package/dist/collection/components/01-base-components/ds-tag/stories/ds-tag.examples.stories.js

@@ -1,18 +0,0 @@
-const meta = {
-    title: 'Base Components/Tag/Examples',
-    component: 'ds-tag',
-};
-export default meta;
-export const ExternalLink = {
-    args: {
-        dsText: 'Link text',
-        dsHref: '#',
-        dsTarget: '_blank',
-    },
-};
-export const LongLabel = {
-    args: {
-        dsText: 'Lukuvuosi ja ilmoittautuminen tohtoriopinnoissa',
-        dsHref: '#',
-    },
-};

package/dist/collection/components/01-base-components/ds-tag/stories/ds-tag.features.stories.js

@@ -1,68 +0,0 @@
-import { html } from "lit";
-import { tagColours } from "../utils";
-const meta = {
-    title: 'Base Components/Tag/Features',
-    component: 'ds-tag',
-};
-export default meta;
-export const Link = {
-    args: {
-        dsText: 'Link text',
-        dsHref: '#',
-    },
-};
-export const IconStart = {
-    args: {
-        dsText: 'Label',
-        dsIcon: 'info',
-        dsIconPosition: 'start',
-    },
-};
-export const IconEnd = {
-    args: {
-        dsText: 'Label',
-        dsIcon: 'info',
-        dsIconPosition: 'end',
-    },
-};
-const colourStyle = html `
-  <style>
-    .ds-sb-tag-container {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--ds-spacing-layout-medium);
-    }
-
-    .ds-sb-tag-container ds-tag {
-      padding: var(--ds-spacing-small);
-    }
-
-    .ds-sb-tag-container ds-tag[ds-colour='white'] {
-      background-color: var(--ds-palette-black-05);
-    }
-  </style>
-`;
-export const Colour = {
-    render: () => html `
-    ${colourStyle}
-    <div class="ds-sb-tag-container">${tagColours.map(colour => html ` <ds-tag ds-text="Label" ds-colour="${colour}" title="${colour}"></ds-tag> `)}</div>
-  `,
-};
-export const ColourLink = {
-    render: () => html `
-    ${colourStyle}
-    <div class="ds-sb-tag-container">${tagColours.map(colour => html ` <ds-tag ds-text="Link" ds-colour="${colour}" ds-href="#" title="${colour}"></ds-tag> `)}</div>
-  `,
-};
-export const Slots = {
-    render: () => html `
-    <ds-tag>
-      <span slot="prefix">Prefix slot</span>
-      Default slot
-      <span slot="suffix">Suffix slot</span>
-    </ds-tag>
-  `,
-};
-export const CustomTagName = {
-    render: () => html `<custom-ds-tag ds-text="Link" ds-href="#"></custom-ds-tag>`,
-};

package/dist/collection/components/01-base-components/ds-tag/stories/ds-tag.stories.js

@@ -1,18 +0,0 @@
-import { icons } from "../../../00-foundations/icons/iconList";
-const meta = {
-    title: 'Base Components/Tag',
-    component: 'ds-tag',
-    argTypes: {
-        dsIcon: {
-            control: 'select',
-            options: icons.map(icon => icon.name).sort(),
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        dsText: 'Label',
-    },
-};
-export const Playground = {};

package/dist/collection/components/01-base-components/ds-tag-group/stories/ds-tag-group.features.stories.js

@@ -1,44 +0,0 @@
-import { html } from "lit-html";
-export default {
-    title: 'Base Components/Tag Group/Features',
-    component: 'ds-tag-group',
-};
-export const ManyTags = () => html `
-  <ds-tag-group ds-label="Many tags" ds-assistive-text="This group contains a large number of tags for testing overflow and wrapping.">
-    ${Array.from({ length: 20 }).map((_, i) => html `<ds-tag role="listitem" ds-text="Tag ${i + 1}"></ds-tag>`)}
-  </ds-tag-group>
-`;
-export const LongAndShortTags = () => html `
-  <ds-tag-group ds-label="Long and short tags" ds-assistive-text="This group demonstrates tags with both long and short texts.">
-    <ds-tag role="listitem" ds-text="Short"></ds-tag>
-    <ds-tag role="listitem" ds-text="A very long tag text that should wrap or truncate depending on styling"></ds-tag>
-    <ds-tag role="listitem" ds-text="Another"></ds-tag>
-    <ds-tag role="listitem" ds-text="Extremely long tag text to test how the tag handles overflow and wrapping in the group layout"></ds-tag>
-    <ds-tag role="listitem" ds-text="Mid length tag"></ds-tag>
-    <ds-tag role="listitem" ds-text="Tiny"></ds-tag>
-    <ds-tag role="listitem" ds-text="Short again"></ds-tag>
-  </ds-tag-group>
-`;
-export const Links = () => html `
-  <ds-tag-group ds-label="Links" ds-assistive-text="This group contains tags that are links.">
-    <ds-tag role="listitem" ds-text="Link 1" ds-href="#"></ds-tag>
-    <ds-tag role="listitem" ds-text="Link 2" ds-href="#"></ds-tag>
-    <ds-tag role="listitem" ds-text="Link 3" ds-href="#"></ds-tag>
-  </ds-tag-group>
-`;
-export const Slots = () => html `
-  <ds-tag-group>
-    <div slot="label">Label slot</div>
-    <div slot="assistiveText">Assistive text slot</div>
-    <ds-tag role="listitem" ds-text="Default slot 1"></ds-tag>
-    <ds-tag role="listitem" ds-text="Default slot 2"></ds-tag>
-    <ds-tag role="listitem" ds-text="Default slot 3"></ds-tag>
-  </ds-tag-group>
-`;
-export const CustomTagName = () => html `
-  <custom-ds-tag-group ds-label="custom-ds-tag-group">
-    <custom-ds-tag role="listitem" ds-text="custom-ds-tag-1"></custom-ds-tag>
-    <custom-ds-tag role="listitem" ds-text="custom-ds-tag-2"></custom-ds-tag>
-    <custom-ds-tag role="listitem" ds-text="custom-ds-tag-3"></custom-ds-tag>
-  </custom-ds-tag-group>
-`;

package/dist/collection/components/01-base-components/ds-tag-group/stories/ds-tag-group.stories.js

@@ -1,30 +0,0 @@
-import { html } from "lit-html";
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
-export default {
-    title: 'Base Components/Tag Group',
-    component: 'ds-tag-group',
-    parameters: {
-        docs: {
-            description: {
-                component: 'Groups ds-tag components together for visual grouping.',
-            },
-        },
-    },
-    argTypes: {
-        dsLabel: { control: 'text', name: 'dsLabel', description: 'Tag group label' },
-        dsAssistiveText: { control: 'text', name: 'dsAssistiveText', description: 'Assistive text for the tag group' },
-        ...getAriaAttributeArgTypes(['aria-label']),
-    },
-};
-const Template = ({ dsLabel, dsAssistiveText }) => html `
-  <ds-tag-group ds-label="${dsLabel}" ds-assistive-text="${dsAssistiveText}">
-    <ds-tag role="listitem" ds-text="Tag 1"></ds-tag>
-    <ds-tag role="listitem" ds-text="Tag 2"></ds-tag>
-    <ds-tag role="listitem" ds-text="Tag 3"></ds-tag>
-  </ds-tag-group>
-`;
-export const Default = Template.bind({});
-Default.args = {
-    dsLabel: 'Tag group',
-    dsAssistiveText: 'Assistive text for the tag group',
-};

package/dist/collection/components/01-base-components/ds-text-area/stories/ds-text-area.examples.stories.js

@@ -1,75 +0,0 @@
-import { html } from "lit";
-import { getDsElem } from "../../../../utils/tests/testUtils";
-import { litTemplateResultToString } from "../../../../utils/storybook/storybookUtils";
-const meta = {
-    title: 'Base Components/TextArea/Examples',
-    component: 'ds-text-area',
-};
-export default meta;
-const textAreaWithClearButtonDOM = html `
-  <div class="ds-sb-textarea-with-clear">
-    <ds-text-area
-      id="textarea-with-clear"
-      ds-id="textarea-clear-example"
-      ds-label="Label"
-      ds-placeholder="Enter your comment here..."
-      ds-value="Lorem ipsum dolor sit amet."
-    ></ds-text-area>
-    <div class="clear-button-container">
-      <ds-button id="clear-button" ds-value="Clear field" ds-variant="supplementary" ds-size="medium" ds-icon="cancel"></ds-button>
-    </div>
-  </div>
-`;
-export const TextAreaWithClearButton = {
-    parameters: {
-        docs: {
-            source: {
-                code: litTemplateResultToString(textAreaWithClearButtonDOM),
-            },
-            story: {
-                autoplay: true,
-            },
-        },
-    },
-    render: () => html `
-    <style>
-      .ds-sb-textarea-with-clear {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        max-width: 400px;
-      }
-      .clear-button-container {
-        display: flex;
-        justify-content: flex-start;
-      }
-    </style>
-    ${textAreaWithClearButtonDOM}
-  `,
-    play: async ({ canvasElement }) => {
-        const textAreaElem = (await getDsElem(canvasElement, 'ds-text-area#textarea-with-clear'));
-        const clearButton = canvasElement.querySelector('#clear-button');
-        if (clearButton && textAreaElem) {
-            clearButton.addEventListener('click', () => {
-                textAreaElem.clearTextarea();
-            });
-        }
-    },
-};
-export const AriaLabelledby = {
-    render: () => html `
-    <ds-control-label>
-      <label slot="label" for="aria-labelledby-input" id="label">Label</label>
-    </ds-control-label>
-    <ds-text-area ds-id="aria-labelledby-input" aria-labelledby="label"></ds-text-area>
-  `,
-};
-export const AriaDescribedby = {
-    render: () => html `
-    <ds-control-label>
-      <label slot="label" for="aria-describedby-input" id="label">Label</label>
-      <div slot="assistiveText" id="desc">Description</div>
-    </ds-control-label>
-    <ds-text-area ds-id="aria-describedby-input" aria-labelledby="label" aria-describedby="desc"></ds-text-area>
-  `,
-};

package/dist/collection/components/01-base-components/ds-text-area/stories/ds-text-area.features.stories.js

@@ -1,91 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Base Components/TextArea/Features',
-    component: 'ds-text-area',
-};
-export default meta;
-export const WithPlaceholder = {};
-WithPlaceholder.args = {
-    dsLabel: 'Label',
-    dsPlaceholder: 'Placeholder',
-};
-export const WithAssistiveText = {};
-WithAssistiveText.args = {
-    dsLabel: 'Label',
-    dsAssistiveText: 'Assistive text',
-};
-export const Disabled = {};
-Disabled.args = {
-    dsLabel: 'Label',
-    dsDisabled: true,
-};
-export const ReadOnly = {};
-ReadOnly.args = {
-    dsLabel: 'Label',
-    dsValue: 'Text area text',
-    dsReadonly: true,
-};
-export const Optional = {};
-Optional.args = {
-    dsLabel: 'Label',
-    dsOptional: true,
-};
-export const OptionalWithCustomText = {
-    render: () => html `<ds-text-area ds-label="Optional" ds-optional ds-optional-text="vapaavalintainen"></ds-text-area>`,
-};
-export const Valid = {};
-Valid.args = {
-    dsLabel: 'Label',
-    dsSuccessText: 'Success text',
-};
-export const Invalid = {};
-Invalid.args = {
-    dsLabel: 'Label',
-    dsErrorText: 'Error text',
-};
-export const CharacterLimit = {
-    args: {
-        dsId: 'character-limit',
-        dsLabel: 'Label',
-        dsCharacterLimit: 40,
-        dsAssistiveText: 'Max length of 40 characters',
-        dsValue: 'This text area has a character limit.',
-        dsPlaceholder: 'Type here...',
-    },
-    render: args => html `
-    <ds-text-area
-      ds-id=${args.dsId}
-      ds-label=${args.dsLabel}
-      ds-character-limit=${args.dsCharacterLimit}
-      ds-assistive-text=${args.dsAssistiveText}
-      ds-value=${args.dsValue}
-      ds-placeholder=${args.dsPlaceholder}
-      @dsValidity=${(e) => {
-        const textarea = document.getElementById('character-limit')?.closest('ds-text-area');
-        if (textarea) {
-            textarea.dsErrorText = e.detail.message;
-        }
-    }}
-    ></ds-text-area>
-  `,
-};
-export const FullWidth = {
-    args: {
-        dsLabel: 'Label',
-        dsFullWidth: true,
-        dsPlaceholder: 'This text area takes the full width of its container.',
-    },
-    render: args => html ` <ds-text-area ds-label=${args.dsLabel} ?ds-full-width=${args.dsFullWidth} ds-placeholder=${args.dsPlaceholder}></ds-text-area> `,
-};
-export const Slots = {
-    render: () => html `
-    <ds-text-area>
-      <div slot="label">Label slot</div>
-      <div slot="assistiveText">Assistive text slot</div>
-      <div slot="validity">Validity slot</div>
-    </ds-text-area>
-  `,
-};
-export const CustomTagName = {
-    render: () => html `<custom-ds-text-area ds-label="Label"></custom-ds-text-area>`,
-};