@uh-design-system/component-library 1.6.0-rc.0 → 1.6.0-rc.1

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

@@ -1,66 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { html } from "lit";
-import { when } from "lit/directives/when.js";
-import { icons } from "../../../../00-foundations/icons/iconList";
-const meta = {
-    title: 'Base Components/Breadcrumbs/BreadcrumbsCollapsible/Features',
-    component: 'ds-breadcrumbs-collapsible',
-    argTypes: {
-        dsIsExpandButtonHidden: {
-            control: 'boolean',
-            description: 'If true, hides the expand button.',
-        },
-        dsSeparatorIcon: {
-            control: 'select',
-            options: icons.map(icon => icon.name).sort(),
-        },
-    },
-    args: {
-        dsIsExpandButtonHidden: false,
-    },
-};
-export default meta;
-export const SeparatorIcon = {
-    decorators: [story => html `<div role="list">${story()}</div>`],
-    args: {
-        dsSeparatorIcon: 'arrow_forward',
-    },
-};
-export const Hidden = {
-    decorators: [story => html `<div role="list">${story()}</div>`],
-    args: {
-        dsIsExpandButtonHidden: true,
-    },
-};
-export const Slots = {
-    decorators: [story => html `<div role="list">${story()}</div>`],
-    render: () => {
-        const [{ dsIsExpandButtonHidden }, updateArgs] = useArgs();
-        return html `
-      <ds-breadcrumbs-collapsible
-        ds-is-expand-button-hidden="${dsIsExpandButtonHidden}"
-        @dsExpandButtonClick=${() => updateArgs({ dsIsExpandButtonHidden: true })}
-        ds-is-expand-button-hidden="false"
-        >${when(dsIsExpandButtonHidden, () => html `<span role="listitem">Default slot</span>`)}</ds-breadcrumbs-collapsible
-      >
-    `;
-    },
-};
-export const CustomTagName = {
-    decorators: [story => html `<div role="list">${story()}</div>`],
-    render: () => {
-        const [{ dsIsExpandButtonHidden }, updateArgs] = useArgs();
-        return html `
-      <custom-ds-breadcrumbs-collapsible
-        @dsExpandButtonClick=${() => updateArgs({ dsIsExpandButtonHidden: !dsIsExpandButtonHidden })}
-        ds-is-expand-button-hidden=${dsIsExpandButtonHidden}
-      >
-        <custom-ds-breadcrumb ds-is-hidden=${!dsIsExpandButtonHidden} ds-text="Level 2" ds-href="#level-2"></custom-ds-breadcrumb>
-        <custom-ds-breadcrumb ds-is-hidden=${!dsIsExpandButtonHidden} ds-text="Level 3" ds-href="#level-3"></custom-ds-breadcrumb>
-        <custom-ds-breadcrumb ds-is-hidden=${!dsIsExpandButtonHidden} ds-text="Level 4" ds-href="#level-4"></custom-ds-breadcrumb>
-        <custom-ds-breadcrumb ds-is-hidden=${!dsIsExpandButtonHidden} ds-text="Level 5" ds-href="#level-5"></custom-ds-breadcrumb>
-        <custom-ds-breadcrumb ds-is-hidden=${!dsIsExpandButtonHidden} ds-text="Level 6" ds-href="#level-6"></custom-ds-breadcrumb>
-      </custom-ds-breadcrumbs-collapsible>
-    `;
-    },
-};

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

@@ -1,109 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { html } from "lit";
-import { icons } from "../../../../00-foundations/icons/iconList";
-const meta = {
-    title: 'Base Components/Breadcrumbs/BreadcrumbsCollapsible',
-    component: 'ds-breadcrumbs-collapsible',
-    argTypes: {
-        dsIsExpandButtonHidden: {
-            control: 'boolean',
-            description: 'If true, hides the expand button',
-        },
-        dsSeparatorIcon: {
-            control: 'select',
-            options: icons.map(icon => icon.name).sort(),
-        },
-    },
-    args: {
-        dsIsExpandButtonHidden: false,
-        dsSeparatorIcon: 'chevron_forward',
-    },
-    render: () => {
-        const [{ dsIsExpandButtonHidden, dsSeparatorIcon }, updateArgs] = useArgs();
-        return html `
-      <div role="list">
-        <ds-breadcrumbs-collapsible
-          @dsExpandButtonClick=${() => updateArgs({ dsIsExpandButtonHidden: !dsIsExpandButtonHidden })}
-          ds-is-expand-button-hidden=${dsIsExpandButtonHidden}
-          ds-separator-icon=${dsSeparatorIcon}
-        >
-          <ds-breadcrumb ds-separator-icon=${dsSeparatorIcon} ds-is-hidden=${!dsIsExpandButtonHidden} ds-text="Level 2" ds-href="#level-2"></ds-breadcrumb>
-          <ds-breadcrumb ds-separator-icon=${dsSeparatorIcon} ds-is-hidden=${!dsIsExpandButtonHidden} ds-text="Level 3" ds-href="#level-3"></ds-breadcrumb>
-          <ds-breadcrumb ds-separator-icon=${dsSeparatorIcon} ds-is-hidden=${!dsIsExpandButtonHidden} ds-text="Level 4" ds-href="#level-4"></ds-breadcrumb>
-          <ds-breadcrumb ds-separator-icon=${dsSeparatorIcon} ds-is-hidden=${!dsIsExpandButtonHidden} ds-text="Level 5" ds-href="#level-5"></ds-breadcrumb>
-          <ds-breadcrumb ds-separator-icon=${dsSeparatorIcon} ds-is-hidden=${!dsIsExpandButtonHidden} ds-text="Level 6" ds-href="#level-6"></ds-breadcrumb>
-        </ds-breadcrumbs-collapsible>
-      </div>
-    `;
-    },
-};
-export default meta;
-export const Default = {};
-export const Events = {
-    parameters: {
-        docs: {
-            source: {
-                code: `
-          <ul id="collapsible-output">
-            <li id="collapsible-output__expanded">
-              Collapsible is expanded: <span id="collapsible-output__expanded-text">No</span>
-            </li>
-          </ul>
-          <script>
-            document.addEventListener('dsExpandButtonClick', (event: CustomEvent<void>) => {
-              const collapsible = event.target as HTMLDsBreadcrumbsCollapsibleElement;
-              collapsible.dsIsExpandButtonHidden = true;
-              Array.from(collapsible.querySelectorAll('ds-breadcrumb')).forEach(breadcrumb => {
-                breadcrumb.dsIsHidden = false;
-              });
-              const output = document.getElementById('collapsible-output__expanded-text');
-              if (output) {
-                output.textContent = 'Yes';
-              }
-            });
-          </script>
-        `,
-            },
-        },
-    },
-    render: () => html `
-    <ds-grid>
-      <ds-grid>
-        <ds-card
-          ds-link-type="none"
-          ds-heading="Events"
-          ds-description="Click on the collapsible to observe the events it triggers. For implementation details, view 'Show code' in the Docs."
-        >
-          <ul slot="content" id="collapsible-output" class="ds-bodytext-sm ds-m-sm">
-            <li id="collapsible-output__expanded">Collapsible is expanded: <span id="collapsible-output__expanded-text">No</span></li>
-          </ul>
-        </ds-card>
-      </ds-grid>
-      <ds-grid>
-        <div role="list">
-          <ds-breadcrumbs-collapsible
-            @dsExpandButtonClick=${(event) => {
-        const collapsible = event.target;
-        collapsible.dsIsExpandButtonHidden = true;
-        Array.from(collapsible.querySelectorAll('ds-breadcrumb')).forEach(breadcrumb => {
-            breadcrumb.dsIsHidden = false;
-        });
-        const output = document.getElementById('collapsible-output__expanded-text');
-        if (output) {
-            output.textContent = 'Yes';
-        }
-    }}
-            ds-is-expand-button-hidden="false"
-          >
-            <ds-breadcrumb ds-is-hidden="true" ds-text="Level 2" ds-href="#level-2"></ds-breadcrumb>
-            <ds-breadcrumb ds-is-hidden="true" ds-text="Level 3" ds-href="#level-3"></ds-breadcrumb>
-            <ds-breadcrumb ds-is-hidden="true" ds-text="Level 4" ds-href="#level-4"></ds-breadcrumb>
-            <ds-breadcrumb ds-is-hidden="true" ds-text="Level 5" ds-href="#level-5"></ds-breadcrumb>
-            <ds-breadcrumb ds-is-hidden="true" ds-text="Level 6" ds-href="#level-6"></ds-breadcrumb>
-          </ds-breadcrumbs-collapsible>
-        </div>
-      </ds-grid>
-    </ds-grid>
-  `,
-};
-export const Playground = {};

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

@@ -1,20 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Base Components/Breadcrumbs/Examples',
-    component: 'ds-breadcrumbs',
-};
-export default meta;
-export const LongBreadcrumb = {
-    render: () => {
-        return html `
-      <ds-breadcrumbs
-        ><ds-breadcrumb ds-text="A very very long first level name which exceeds the current viewport width" ds-has-separator="false" ds-href="#level-1"></ds-breadcrumb
-        >${Array.from({ length: 4 }, (_, index) => html `<ds-breadcrumb ds-text="Level ${index + 2}" ds-href="#level-${index + 2}"></ds-breadcrumb>`)}<ds-breadcrumb
-          ds-text="A very long current page name which exceeds the viewport width"
-          ds-href="#level-6"
-          ds-is-current-page="true"
-        ></ds-breadcrumb>
-      </ds-breadcrumbs>
-    `;
-    },
-};

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

@@ -1,38 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { html } from "lit";
-const meta = {
-    title: 'Base Components/Breadcrumbs/Features',
-    component: 'ds-breadcrumbs',
-};
-export default meta;
-export const MaxItems = {
-    args: {
-        maxItems: 5,
-        isExpandButtonClicked: false,
-    },
-    argTypes: {
-        maxItems: {
-            control: { type: 'number', min: 3, max: 6, step: 1 },
-            description: 'Maximum number of breadcrumbs to display when collapsed.',
-        },
-        isExpandButtonClicked: {
-            control: 'boolean',
-            description: 'If true, hides the expand button and shows all breadcrumbs.',
-        },
-    },
-    render: () => {
-        const [{ isExpandButtonClicked, maxItems }, updateArgs] = useArgs();
-        return html `
-      <ds-breadcrumbs
-        ><ds-breadcrumb ds-text="Level 1" ds-has-separator="false" ds-href="#level-1"></ds-breadcrumb
-        ><ds-breadcrumbs-collapsible
-          @dsExpandButtonClick=${() => updateArgs({ isExpandButtonClicked: !isExpandButtonClicked })}
-          ds-is-expand-button-hidden="${isExpandButtonClicked || maxItems === 6}"
-          ><ds-breadcrumb ds-is-hidden="${!isExpandButtonClicked && maxItems < 6}" ds-text="Level 2" ds-href="#level-2"></ds-breadcrumb
-          ><ds-breadcrumb ds-is-hidden="${!isExpandButtonClicked && maxItems < 5}" ds-text="Level 3" ds-href="#level-3"></ds-breadcrumb
-          ><ds-breadcrumb ds-is-hidden="${!isExpandButtonClicked && maxItems < 4}" ds-text="Level 4" ds-href="#level-4"></ds-breadcrumb></ds-breadcrumbs-collapsible
-        ><ds-breadcrumb ds-text="Level 5" ds-href="#level-5"></ds-breadcrumb><ds-breadcrumb ds-text="Level 6" ds-is-current-page="true"></ds-breadcrumb>
-      </ds-breadcrumbs>
-    `;
-    },
-};

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

@@ -1,121 +0,0 @@
-import { html, render } from "lit";
-import { when } from "lit/directives/when.js";
-const meta = {
-    title: 'Base Components/Breadcrumbs',
-    component: 'ds-breadcrumbs',
-    args: {
-        childCount: 8,
-    },
-    argTypes: {
-        childCount: {
-            control: { type: 'number', min: 0, max: 10, step: 1 },
-            description: 'Number of `<ds-breadcrumb>` elements in the story',
-        },
-    },
-    render: args => {
-        let breadcrumbSize = 'medium';
-        let isExpandButtonClicked = false;
-        const wrapper = document.createElement('div');
-        const renderContent = () => {
-            const showAll = breadcrumbSize === 'medium' || isExpandButtonClicked;
-            render(html `<ds-breadcrumbs
-          @dsSizeChange=${(event) => {
-                breadcrumbSize = event.detail;
-                renderContent();
-            }}
-          >${when(args.childCount > 0, () => html `<ds-breadcrumb ds-text="Level 1" ds-has-separator="false" ds-is-current-page="${args.childCount === 1}" ds-href="#level-1"></ds-breadcrumb>`)}${when(args.childCount > 3, () => html `<ds-breadcrumbs-collapsible
-                @dsExpandButtonClick=${() => {
-                isExpandButtonClicked = true;
-                renderContent();
-            }}
-                ds-is-expand-button-hidden="${showAll}"
-                >${Array.from({ length: args.childCount - 3 }, (_, i) => i + 2).map(i => html `<ds-breadcrumb ds-is-hidden="${!showAll}" ds-text="Level ${i}" ds-is-current-page="${i === args.childCount}" ds-href="#level-${i}"></ds-breadcrumb>`)}</ds-breadcrumbs-collapsible
-              >`)}${when(args.childCount > 2, () => html `<ds-breadcrumb ds-text="Level ${args.childCount - 1}" ds-href="#level-${args.childCount - 1}"></ds-breadcrumb>`)}${when(args.childCount > 1, () => html `<ds-breadcrumb ds-text="Level ${args.childCount}" ds-is-current-page="true"></ds-breadcrumb>`)}</ds-breadcrumbs
-        >`, wrapper);
-        };
-        renderContent();
-        return wrapper;
-    },
-};
-export default meta;
-export const Default = {
-    parameters: {
-        docs: {
-            source: {
-                code: `
-          <!-- Listen for the dsSizeChange event. Typically all breadcrumbs should be shown on medium size. -->
-          <ds-breadcrumbs>
-            <!-- If there are any breadcrumbs. If the breadcrumb is the only one, mark it as the current page. -->
-            <ds-breadcrumb ds-text="Level 1" ds-has-separator="false" ds-href="#level-1" ds-is-current-page="true/false"></ds-breadcrumb>
-            <!-- If there are more than 3 breadcrumbs (default, see Max Items story). Listen for the dsExpandButtonClick event to expand the collapsible breadcrumbs.
-            Normal display logic for the expand button and the collapsible breadcrumbs: size is 'medium' or expand button has been clicked.
-            The collapsible breadcrumbs' display logic is inverse to the expand button logic. -->
-            <ds-breadcrumbs-collapsible ds-is-expand-button-hidden="true/false">
-              <!-- repeat for each breadcrumb inside collapsible -->
-              <ds-breadcrumb ds-text="Level 2" ds-href="#level-2" ds-is-hidden="true/false" ds-is-current-page="true/false"></ds-breadcrumb>
-              <!-- ... -->
-              <ds-breadcrumb ds-text="Level N-2" ds-href="#level-N-2" ds-is-hidden="true/false" ds-is-current-page="true/false"></ds-breadcrumb>
-            </ds-breadcrumbs-collapsible>
-            <!-- If there are more than 2 breadcrumbs (default, see Max Items story). -->
-            <ds-breadcrumb ds-text="Level N-1" ds-href="#level-N-1" ds-is-current-page="true/false"></ds-breadcrumb>
-            <!-- If there are more than 1 breadcrumb. -->
-            <ds-breadcrumb ds-text="Level N" ds-is-current-page="true"></ds-breadcrumb>
-          </ds-breadcrumbs>
-        `,
-            },
-        },
-    },
-};
-export const Events = {
-    parameters: {
-        docs: {
-            source: {
-                code: `
-          <ul id="breadcrumbs-output">
-            <li id="breadcrumbs-output__size">
-              Size is: <span id="breadcrumbs-output__size-text">medium</span>
-            </li>
-          </ul>
-          <script>
-            document.addEventListener('dsSizeChange', (event: CustomEvent<'medium' | 'small'>) => {
-              const output = document.getElementById('breadcrumbs-output__size-text');
-              if (output) {
-                output.textContent = event.detail;
-              }
-            });
-          </script>
-        `,
-            },
-        },
-    },
-    render: () => html `
-    <ds-grid>
-      <ds-grid>
-        <ds-card
-          ds-link-type="none"
-          ds-heading="Events"
-          ds-description="Resize the window to observe the events it triggers. For implementation details, view 'Show code' in the Docs."
-        >
-          <ul slot="content" id="breadcrumbs-output" class="ds-bodytext-sm ds-m-sm">
-            <li id="breadcrumbs-output__size">Size is: <span id="breadcrumbs-output__size-text">medium</span></li>
-          </ul>
-        </ds-card>
-      </ds-grid>
-      <ds-grid>
-        <ds-breadcrumbs
-          @dsSizeChange=${(event) => {
-        const output = document.getElementById('breadcrumbs-output__size-text');
-        if (output) {
-            output.textContent = event.detail;
-        }
-    }}
-        >
-          <ds-breadcrumb ds-text="Level 1" ds-has-separator="false" ds-href="#level-1"></ds-breadcrumb>
-          <ds-breadcrumb ds-text="Level 2" ds-href="#level-2"></ds-breadcrumb>
-          <ds-breadcrumb ds-text="Level 3" ds-is-current-page="true"></ds-breadcrumb>
-        </ds-breadcrumbs>
-      </ds-grid>
-    </ds-grid>
-  `,
-};
-export const Playground = {};

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

@@ -1,255 +0,0 @@
-import { html, render } from "lit";
-import { litTemplateResultToString } from "../../../../utils/storybook/storybookUtils";
-const meta = {
-    title: 'Base Components/Button/Examples',
-    component: 'ds-button',
-};
-export default meta;
-function handleButtonLoading(buttonElement, originalValue, loadValue, loadingDuration = 3000) {
-    if (buttonElement.getAttribute('ds-loading') === 'true')
-        return;
-    const originalIsLoading = buttonElement.getAttribute('ds-loading') || 'false';
-    const originalAriaDisabled = buttonElement.getAttribute('ds-aria-disabled') || 'false';
-    buttonElement.setAttribute('ds-text', loadValue);
-    buttonElement.setAttribute('ds-loading', 'true');
-    buttonElement.setAttribute('aria-disabled', 'true');
-    buttonElement.setAttribute('aria-label', 'Sending');
-    setTimeout(() => {
-        buttonElement.setAttribute('ds-text', originalValue);
-        buttonElement.setAttribute('ds-loading', originalIsLoading);
-        buttonElement.setAttribute('aria-disabled', originalAriaDisabled);
-        buttonElement.setAttribute('aria-label', 'Sent');
-    }, loadingDuration);
-}
-const dsSbButtonGroupStyle = html `
-  <style>
-    .ds-sb-button-group {
-      display: flex;
-      gap: 0.5rem;
-    }
-  </style>
-`;
-const buttonGroupDOM = html `
-  <div class="ds-sb-button-group">
-    <ds-button ds-variant="primary" ds-text="Primary"></ds-button>
-    <ds-button ds-variant="secondary" ds-text="Secondary"></ds-button>
-    <ds-button ds-variant="supplementary" ds-text="Supplementary"></ds-button>
-  </div>
-`;
-export const ButtonGroup = {
-    render: () => html ` ${dsSbButtonGroupStyle} ${buttonGroupDOM} `,
-};
-const buttonGroupSmallDOM = html `
-  <div class="ds-sb-button-group">
-    <ds-button ds-variant="primary" ds-text="Primary" ds-size="small"></ds-button>
-    <ds-button ds-variant="secondary" ds-text="Secondary" ds-size="small"></ds-button>
-    <ds-button ds-variant="supplementary" ds-text="Supplementary" ds-size="small"></ds-button>
-  </div>
-`;
-export const ButtonGroupSmall = {
-    render: () => html ` ${dsSbButtonGroupStyle} ${buttonGroupSmallDOM} `,
-};
-const buttonGroupIconDOM = html `
-  <div class="ds-sb-button-group">
-    <ds-button ds-text="Button with text and icon" ds-icon="ds_flame"></ds-button>
-    <ds-button ds-text="Button with text and icon" ds-icon="ds_flame" ds-icon-position="end"></ds-button>
-    <ds-button ds-icon="ds_flame" aria-label="Button with icon"></ds-button>
-  </div>
-`;
-export const ButtonGroupIcon = {
-    render: () => html ` ${dsSbButtonGroupStyle} ${buttonGroupIconDOM} `,
-};
-const resetAndSubmitButtonDOM = html `
-  <form class="ds-sb-reset-and-submit-button">
-    <ds-text-input ds-name="firstname" ds-label="firstname"></ds-text-input>
-    <ds-text-input ds-name="lastname" ds-label="lastname"></ds-text-input>
-    <div class="ds-sb-button-group ds-sb-reset-and-submit-button__buttons">
-      <ds-button ds-text="reset" ds-type="reset" ds-variant="secondary"></ds-button>
-      <ds-button ds-text="submit" ds-type="submit"></ds-button>
-    </div>
-  </form>
-`;
-export const ResetAndSubmitButton = {
-    parameters: {
-        docs: {
-            source: {
-                code: litTemplateResultToString(resetAndSubmitButtonDOM),
-            },
-        },
-    },
-    render: () => html `
-    <style>
-      .ds-sb-reset-and-submit-button {
-        display: inline-flex;
-        flex-direction: column;
-        gap: 1rem;
-      }
-      .ds-sb-reset-and-submit-button .ds-sb-reset-and-submit-button__buttons {
-        align-self: flex-end;
-      }
-    </style>
-    ${resetAndSubmitButtonDOM}
-  `,
-};
-export const FullWidthWithIconsUsingSlots = {
-    render: () => html `
-    <ds-button ds-full-width>
-      <ds-icon slot="prefix" ds-name="ds_flame"></ds-icon>
-      Full width with icons using slots
-      <ds-visually-hidden ds-tag="span">Hidden text</ds-visually-hidden>
-      <ds-icon slot="suffix" ds-name="ds_flame"></ds-icon>
-    </ds-button>
-  `,
-};
-export const ButtonWithLoadingAnimation = {
-    render: () => html `
-    <style>
-      .ds-sb-example-load {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        margin: 1rem 0;
-        max-width: 250px;
-      }
-    </style>
-    <div class="ds-sb-example-load">
-      <ds-button
-        ds-id="loading-button"
-        ds-variant="primary"
-        ds-text="Send"
-        ds-loading="false"
-        ds-use-spinner="true"
-        ds-spinner-hidden-text="Sending..."
-        aria-label="Send"
-        aria-disabled="false"
-        @click=${(e) => {
-        const button = e.currentTarget;
-        handleButtonLoading(button, 'Send', 'Sending...');
-    }}
-      ></ds-button>
-      <ds-button
-        ds-id="loading-button"
-        ds-variant="secondary"
-        ds-text="Download"
-        ds-icon="download"
-        ds-loading="false"
-        ds-use-spinner="true"
-        ds-spinner-hidden-text="Downloading..."
-        @click=${(e) => {
-        const button = e.currentTarget;
-        handleButtonLoading(button, 'Download', 'Downloading...');
-    }}
-      ></ds-button>
-      <ds-button
-        ds-id="loading-button"
-        ds-variant="supplementary"
-        ds-text="Download"
-        ds-loading="false"
-        ds-use-spinner="true"
-        ds-spinner-hidden-text="Downloading..."
-        @click=${(e) => {
-        const button = e.currentTarget;
-        handleButtonLoading(button, 'Download', 'Downloading...');
-    }}
-      ></ds-button>
-      <ds-button
-        ds-id="loading-button"
-        ds-variant="supplementary"
-        ds-text="Download"
-        ds-loading="false"
-        ds-use-spinner="true"
-        ds-spinner-hidden-text="Downloading..."
-        @click=${(e) => {
-        const button = e.currentTarget;
-        handleButtonLoading(button, 'Download', '');
-    }}
-      ></ds-button>
-    </div>
-
-    <ds-button
-      ds-id="loading-button"
-      ds-variant="primary"
-      ds-text="Send"
-      ds-loading="false"
-      ds-use-spinner="true"
-      ds-spinner-hidden-text="Sending..."
-      @click=${(e) => {
-        const button = e.currentTarget;
-        handleButtonLoading(button, 'Send', 'Sending...');
-    }}
-    ></ds-button>
-  `,
-};
-export const AriaExpanded = {
-    argTypes: {
-        ariaExpanded: { control: 'boolean', name: 'aria-expanded' },
-    },
-    args: {
-        ariaExpanded: false,
-    },
-    render: args => {
-        let isExpanded = args.ariaExpanded;
-        const wrapper = document.createElement('div');
-        const renderContent = () => {
-            render(html `
-          <ds-button
-            ds-id="toggle-link-list-button"
-            ds-text=${isExpanded ? 'Hide list' : 'Show list'}
-            ds-icon="more_vert"
-            ds-variant="secondary"
-            aria-expanded="${isExpanded}"
-            aria-controls="link-list"
-            ds-active="${isExpanded}"
-            @click=${() => {
-                isExpanded = !isExpanded;
-                renderContent();
-            }}
-          ></ds-button>
-          ${isExpanded
-                ? html ` <ul id="link-list" aria-labelledby="toggle-link-list-button">
-                <li>
-                  <ds-link ds-href="#" ds-text="Menu item 1"></ds-link>
-                </li>
-                <li>
-                  <ds-link ds-href="#" ds-text="Menu item 2"></ds-link>
-                </li>
-                <li>
-                  <ds-link ds-href="#" ds-text="Menu item 3"></ds-link>
-                </li>
-              </ul>`
-                : ''}
-        `, wrapper);
-        };
-        renderContent();
-        return wrapper;
-    },
-};
-export const AriaPressed = {
-    argTypes: {
-        ariaPressed: { control: 'radio', name: 'aria-pressed', options: ['true', 'false', 'mixed'] },
-    },
-    args: {
-        ariaPressed: 'false',
-    },
-    render: args => {
-        let isPressed = args.ariaPressed === 'true';
-        const wrapper = document.createElement('div');
-        const renderContent = () => {
-            render(html `
-          <ds-button
-            ds-id="mute-button"
-            ds-text=${isPressed ? 'Unfavorite' : 'Favorite'}
-            ds-icon=${isPressed ? 'favorite_fill' : 'favorite'}
-            ds-variant="secondary"
-            aria-pressed="${isPressed}"
-            @click=${() => {
-                isPressed = !isPressed;
-                renderContent();
-            }}
-          ></ds-button>
-        `, wrapper);
-        };
-        renderContent();
-        return wrapper;
-    },
-};