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

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

@@ -1,99 +0,0 @@
-import { html } from "lit";
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
-import { getEventsStoryStyles } from "../../../../utils/storybook/storybookUtils";
-const meta = {
-    title: 'Base Components/TextArea',
-    component: 'ds-text-area',
-    argTypes: {
-        ...getAriaAttributeArgTypes(['aria-label', 'aria-labelledby', 'aria-describedby']),
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        dsLabel: 'Label',
-    },
-};
-export const Playground = {
-    args: {
-        dsLabel: 'Label',
-        dsPlaceholder: '',
-        dsName: '',
-        dsDisabled: false,
-        dsRequired: false,
-        dsOptional: false,
-        dsOptionalText: '',
-        dsReadonly: false,
-        dsValue: '',
-        dsAssistiveText: '',
-        dsErrorText: '',
-        dsSuccessText: '',
-        dsAriaLabel: '',
-        dsAriaLabelledby: '',
-        dsAriaDescribedby: '',
-        dsCharacterLimit: undefined,
-    },
-};
-export const Events = {
-    args: {
-        dsId: 'events-text-area',
-        dsLabel: 'Label',
-        dsPlaceholder: 'Type something',
-    },
-    render: args => html `
-    <style>
-      ${getEventsStoryStyles()}
-    </style>
-    <ds-grid>
-      <ds-grid>
-        <ds-card
-          ds-link-type="none"
-          ds-heading="Events"
-          ds-description="Type in the textarea to observe the events it triggers. Change events are emitted only on user interaction."
-        >
-          <ul slot="content" id="text-area-output" class="ds-bodytext-sm ds-m-sm">
-            <li id="text-area-output__value">Value: <span id="text-area-output__value-text">&lt;empty&gt;</span></li>
-            <li id="text-area-output__programmatic">Programmatic value: <span id="text-area-output__programmatic-text">&lt;empty&gt;</span></li>
-          </ul>
-        </ds-card>
-      </ds-grid>
-      <ds-grid>
-        <div class="ds-sb-events">
-          <ds-text-area
-            ds-id=${args.dsId}
-            ds-label=${args.dsLabel}
-            ds-placeholder=${args.dsPlaceholder}
-            @dsChange=${(event) => {
-        const output = document.getElementById('text-area-output__value-text');
-        if (output) {
-            output.textContent = event.detail.value || '<empty>';
-        }
-    }}
-          ></ds-text-area>
-          <div class="ds-sb-events-buttons">
-            <button
-              type="button"
-              class="ds-sb-events-button"
-              @click=${() => {
-        const textarea = document.querySelector(`ds-text-area[ds-id="${args.dsId}"]`);
-        if (!textarea)
-            return;
-        textarea.dsValue = 'Programmatic value';
-        const valueOutput = document.getElementById('text-area-output__value-text');
-        const output = document.getElementById('text-area-output__programmatic-text');
-        if (valueOutput) {
-            valueOutput.textContent = textarea.dsValue || '<empty>';
-        }
-        if (output) {
-            output.textContent = textarea.dsValue || '<empty>';
-        }
-    }}
-            >
-              Programmatic set
-            </button>
-          </div>
-        </div>
-      </ds-grid>
-    </ds-grid>
-  `,
-};

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

@@ -1,178 +0,0 @@
-import { html } from "lit";
-import { getDsElem, waitForElem } from "../../../../utils/tests/testUtils";
-import { litTemplateResultToString } from "../../../../utils/storybook/storybookUtils";
-import { expect } from "@storybook/test";
-const meta = {
-    title: 'Base Components/TextInput/Examples',
-    component: 'ds-text-input',
-};
-export default meta;
-export const CustomWidth = {
-    render: () => html `
-    <style>
-      .ds-sb-custom-width {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-      }
-    </style>
-    <div class="ds-sb-custom-width">
-      <ds-text-input ds-label="Smaller input" style="width: 150px"></ds-text-input>
-      <ds-text-input ds-label="Full width input" style="width: 100%"></ds-text-input>
-      <!-- You can set any custom styles to the input element -->
-    </div>
-  `,
-};
-export const UsingSlots = {
-    parameters: {
-        a11y: {
-            disable: true,
-        },
-    },
-    render: () => html `
-    <ds-text-input ds-id="input" aria-label="Slotted label">
-      <label for="input" id="label" slot="label"><b>Slotted label</b></label>
-      <p slot="assistiveText">Lorem ipsum</p>
-      <ds-icon ds-name="archive" slot="prefix"></ds-icon>
-      <small slot="suffix">Suffix</small>
-      <div slot="validity">Validity slot</div>
-    </ds-text-input>
-  `,
-};
-const formValidationDOM = html `
-  <form class="ds-sb-form-validation">
-    <ds-text-input ds-type="number" ds-label="Minimum value" ds-id="min" ds-name="min" ds-min="5" ds-required></ds-text-input>
-    <ds-text-input ds-type="number" ds-label="Maximum value" ds-id="max" ds-name="max" ds-min="100" ds-required></ds-text-input>
-    <ds-text-input ds-type="email" ds-label="Email" ds-id="email" ds-name="email" ds-required></ds-text-input>
-    <ds-text-input ds-type="tel" ds-label="Telephone" ds-id="tel" ds-name="tel" ds-required></ds-text-input>
-    <ds-text-input ds-type="password" ds-label="Password" ds-id="password" ds-name="password" ds-required ds-action-button-aria-label="password toggle"></ds-text-input>
-    <ds-text-input ds-type="url" ds-label="Url" ds-id="url" ds-name="url" ds-required></ds-text-input>
-    <div class="button-group ds-sb-form-validation__buttons">
-      <ds-button ds-type="submit" ds-value="Submit"></ds-button>
-    </div>
-  </form>
-`;
-export const FormValidation = {
-    parameters: {
-        docs: {
-            source: {
-                code: litTemplateResultToString(formValidationDOM),
-            },
-        },
-    },
-    render: () => html `
-    <style>
-      .ds-sb-form-validation {
-        display: inline-flex;
-        flex-direction: column;
-        gap: 1rem;
-      }
-      .ds-sb-form-validation .ds-sb-form-validation__buttons {
-        align-self: flex-end;
-      }
-    </style>
-    ${formValidationDOM}
-  `,
-};
-const clientSideValidationDOM = html `
-  <div class="ds-sb-client-side-validation">
-    <div id="example-error-container">
-      <ds-text-input
-        id="example-error"
-        ds-id="example-error-textinput"
-        ds-label="Error message"
-        ds-assistive-text='Type "error" and move to next input to display a validation message.'
-      ></ds-text-input>
-    </div>
-    <div id="example-success-container">
-      <ds-text-input
-        id="example-success"
-        ds-id="example-success-textinput"
-        ds-label="Success message"
-        ds-assistive-text='Type "success" and move to next input to display a validation message.'
-      ></ds-text-input>
-    </div>
-  </div>
-`;
-export const ClientSideValidation = {
-    parameters: {
-        docs: {
-            source: {
-                code: litTemplateResultToString(clientSideValidationDOM),
-            },
-            story: {
-                autoplay: true,
-            },
-        },
-    },
-    render: () => html `
-    <style>
-      .ds-sb-client-side-validation {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-      }
-    </style>
-    ${clientSideValidationDOM}
-  `,
-    play: async ({ canvasElement }) => {
-        const errorContainerElem = canvasElement.querySelector('#example-error-container');
-        const successContainerElem = canvasElement.querySelector('#example-success-container');
-        const errorElem = (await getDsElem(canvasElement, 'ds-text-input#example-error'));
-        const successElem = (await getDsElem(canvasElement, 'ds-text-input#example-success'));
-        errorContainerElem.addEventListener('input', e => {
-            const target = e.target;
-            switch (target.value) {
-                case 'error':
-                    return (errorElem.dsErrorText = 'Error message');
-                default:
-                    errorElem.dsErrorText = '';
-                    return;
-            }
-        });
-        successContainerElem.addEventListener('input', e => {
-            const target = e.target;
-            switch (target.value) {
-                case 'success':
-                    return (successElem.dsSuccessText = 'Success message');
-                default:
-                    successElem.dsSuccessText = '';
-                    return;
-            }
-        });
-    },
-};
-export const SearchClearButtonReactivity = {
-    args: {
-        dsLabel: 'Label',
-        dsType: 'search',
-        dsValue: '',
-        dsActionButtonAriaLabel: 'Action button',
-    },
-    play: async ({ canvasElement, step }) => {
-        const dsElem = (await getDsElem(canvasElement, 'ds-text-input'));
-        dsElem.dsValue = 'test';
-        await waitForElem(dsElem, 'ds-button');
-        await step('Clear button should be visible', async () => {
-            const clearBtn = dsElem.querySelector('ds-button');
-            await expect(clearBtn).toBeInTheDocument();
-        });
-    },
-};
-export const AriaLabelledby = {
-    render: () => html `
-    <ds-control-label>
-      <label slot="label" for="aria-labelledby-input" id="label">Label</label>
-    </ds-control-label>
-    <ds-text-input ds-id="aria-labelledby-input" aria-labelledby="label"></ds-text-input>
-  `,
-};
-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-input ds-id="aria-describedby-input" aria-labelledby="label" aria-describedby="desc"></ds-text-input>
-  `,
-};

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

@@ -1,162 +0,0 @@
-import { classNameWithVersion, getDsElem } from "../../../../utils/tests/testUtils";
-import { expect, userEvent, waitFor } from "@storybook/test";
-import { html } from "lit";
-const meta = {
-    title: 'Base Components/TextInput/Features',
-    component: 'ds-text-input',
-};
-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: 'Input text',
-    dsReadonly: true,
-};
-export const Required = {};
-Required.args = {
-    dsLabel: 'Label',
-    dsRequired: true,
-};
-export const Optional = {};
-Optional.args = {
-    dsLabel: 'Label',
-    dsOptional: true,
-};
-export const OptionalWithCustomText = {
-    render: () => html `<ds-text-input ds-label="Optional" ds-optional ds-optional-text="vapaavalintainen"></ds-text-input>`,
-};
-export const MaxLength = {};
-MaxLength.args = {
-    dsLabel: 'Label',
-    dsMaxlength: 5,
-    dsAssistiveText: 'Max length of 5',
-};
-export const Valid = {};
-Valid.args = {
-    dsLabel: 'Label',
-    dsSuccessText: 'Success text',
-};
-export const Invalid = {};
-Invalid.args = {
-    dsLabel: 'Label',
-    dsErrorText: 'Error text',
-};
-export const WithIcon = {
-    args: {
-        dsLabel: 'User',
-        dsIcon: 'account_circle_fill',
-        dsType: 'email',
-    },
-};
-export const PasswordInput = {
-    args: {
-        dsLabel: 'Label',
-        dsType: 'password',
-    },
-    play: async ({ canvasElement, step }) => {
-        const dsElem = await getDsElem(canvasElement, 'ds-text-input');
-        const inputElem = dsElem.querySelector('input');
-        const suffixButton = dsElem.querySelector(classNameWithVersion('ds-text-input', '__button'));
-        await step('Input type should be password', () => {
-            expect(inputElem.type).toBe('password');
-        });
-        await step('Has suffix button', async () => {
-            expect(suffixButton).toBeInTheDocument();
-        });
-        await step('Clicking suffix button should set input type to text', async () => {
-            userEvent.click(suffixButton);
-            await waitFor(() => {
-                expect(inputElem.type).toBe('text');
-            });
-        });
-        await step('Clicking suffix button again should set input type to password', async () => {
-            userEvent.click(suffixButton);
-            await waitFor(() => {
-                expect(inputElem.type).toBe('password');
-            });
-        });
-    },
-};
-export const SearchInput = {
-    args: {
-        dsLabel: 'Label',
-        dsType: 'search',
-    },
-    play: async ({ canvasElement, step }) => {
-        const dsElem = (await getDsElem(canvasElement, 'ds-text-input'));
-        await step('Has prefix icon', async () => {
-            const prefixIcon = dsElem.querySelector(classNameWithVersion('ds-text-input', '__icon'));
-            expect(prefixIcon).toBeInTheDocument();
-        });
-        await step('Enter search', async () => {
-            await userEvent.type(dsElem.querySelector('input'), 'search');
-        });
-        const clearBtn = dsElem.querySelector('ds-button');
-        await step('Clear button is visible', async () => {
-            expect(clearBtn).toBeDefined();
-        });
-        await step('Clicking clear button should clear the input', async () => {
-            userEvent.click(clearBtn);
-            await waitFor(() => {
-                expect(document.querySelector('ds-button')).toBeNull();
-            });
-        });
-        await step('Clicking body should remove focus from the input', async () => {
-            userEvent.click(canvasElement);
-            await waitFor(() => {
-                expect(dsElem.querySelector('input')).not.toHaveFocus();
-            });
-        });
-    },
-};
-export const FullWidth = {
-    args: {
-        dsLabel: 'Full width text input',
-        dsFullWidth: true,
-    },
-};
-export const PrefixText = {
-    args: {
-        dsLabel: 'Phone number',
-        dsPrefixText: '+358',
-        dsType: 'tel',
-        dsHiddenAssistiveText: 'Without the country code',
-    },
-};
-export const SuffixText = {
-    args: {
-        dsLabel: 'Timeout',
-        dsSuffixText: 'minutes',
-        dsType: 'number',
-        dsHiddenAssistiveText: 'Enter the number of minutes',
-    },
-};
-export const Slots = {
-    render: () => html `
-    <ds-text-input>
-      <div slot="label">Label slot</div>
-      <div slot="assistiveText">Assistive text slot</div>
-      <div slot="prefix">Prefix slot</div>
-      <div slot="suffix">Suffix slot</div>
-      <div slot="validity">Validity slot</div>
-    </ds-text-input>
-  `,
-};
-export const CustomTagName = {
-    render: () => html `<custom-ds-text-input ds-label="Label" ds-type="search"></custom-ds-text-input>`,
-};

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

@@ -1,113 +0,0 @@
-import { html } from "lit";
-import { icons } from "../../../00-foundations/icons/iconList";
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
-import { getEventsStoryStyles } from "../../../../utils/storybook/storybookUtils";
-const meta = {
-    title: 'Base Components/TextInput',
-    component: 'ds-text-input',
-    argTypes: {
-        dsIcon: {
-            control: 'select',
-            options: icons.map(icon => icon.name).sort(),
-        },
-        ...getAriaAttributeArgTypes(['aria-label', 'aria-labelledby', 'aria-describedby']),
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        dsLabel: 'Label',
-    },
-};
-Default.args = {
-    dsLabel: 'Label',
-};
-export const Playground = {
-    args: {
-        dsLabel: 'Label',
-        dsPlaceholder: '',
-        dsId: 'playground-id',
-        dsName: 'playground-name',
-        dsDisabled: false,
-        dsRequired: false,
-        dsOptional: false,
-        dsOptionalText: '',
-        dsReadonly: false,
-        dsValue: '',
-        dsMin: 0,
-        dsMax: 5,
-        dsStep: 1,
-        dsMaxlength: -1,
-        dsAssistiveText: '',
-        dsPrefixText: '',
-        dsSuffixText: '',
-        dsErrorText: '',
-        dsSuccessText: '',
-        dsIcon: '',
-        dsType: 'text',
-        dsAutocomplete: 'off',
-        dsAriaLabel: '',
-        dsAriaLabelledby: '',
-        dsAriaDescribedby: '',
-        dsActionButtonAriaLabel: '',
-    },
-};
-export const Events = {
-    args: {
-        dsId: 'events-text-input',
-        dsLabel: 'Label',
-        dsPlaceholder: 'Type something',
-    },
-    render: args => html `
-    <style>
-      ${getEventsStoryStyles()}
-    </style>
-    <ds-grid>
-      <ds-grid>
-        <ds-card ds-link-type="none" ds-heading="Events" ds-description="Type in the input to observe the events it triggers. Change events are emitted only on user interaction.">
-          <ul slot="content" id="text-input-output" class="ds-bodytext-sm ds-m-sm">
-            <li id="text-input-output__value">Value: <span id="text-input-output__value-text">&lt;empty&gt;</span></li>
-            <li id="text-input-output__programmatic">Programmatic value: <span id="text-input-output__programmatic-text">&lt;empty&gt;</span></li>
-          </ul>
-        </ds-card>
-      </ds-grid>
-      <ds-grid>
-        <div class="ds-sb-events">
-          <ds-text-input
-            ds-id=${args.dsId}
-            ds-label=${args.dsLabel}
-            ds-placeholder=${args.dsPlaceholder}
-            @dsChange=${(event) => {
-        const output = document.getElementById('text-input-output__value-text');
-        if (output) {
-            output.textContent = event.detail.value || '<empty>';
-        }
-    }}
-          ></ds-text-input>
-          <div class="ds-sb-events-buttons">
-            <button
-              type="button"
-              class="ds-sb-events-button"
-              @click=${() => {
-        const input = document.querySelector(`ds-text-input[ds-id="${args.dsId}"]`);
-        if (!input)
-            return;
-        input.dsValue = 'Programmatic value';
-        const valueOutput = document.getElementById('text-input-output__value-text');
-        const output = document.getElementById('text-input-output__programmatic-text');
-        if (valueOutput) {
-            valueOutput.textContent = input.dsValue || '<empty>';
-        }
-        if (output) {
-            output.textContent = input.dsValue || '<empty>';
-        }
-    }}
-            >
-              Programmatic set
-            </button>
-          </div>
-        </div>
-      </ds-grid>
-    </ds-grid>
-  `,
-};

package/dist/collection/components/01-base-components/ds-versioned-css-variables/stories/ds-versioned-css-variables.stories.js

@@ -1,28 +0,0 @@
-import { html } from "lit-html";
-const meta = {
-    title: 'Base Components/Versioned CSS Variables',
-    component: 'ds-versioned-css-variables',
-};
-export default meta;
-export const Default = {
-    render: () => html `
-    <style>
-      :root {
-        /* Fake primary colour */
-        --ds-textColor-primary: #000;
-      }
-
-      .ds-sb-p {
-        color: var(--ds-textColor-primary);
-      }
-    </style>
-    <p class="ds-bodytext-lg">The <code>&lt;ds-versioned-css-variables&gt;</code> component applies versioned CSS variables to its children.</p>
-
-    <h2 class="ds-heading-lg">Fake example</h2>
-    <p class="ds-sb-p">Primary text colour.</p>
-    <custom-ds-versioned-css-variables>
-      <p class="ds-sb-p">Scoped primary text colour.</p>
-      <!-- You only need to use scoped variables if there are multiple instances of the component library (widgets etc.) -->
-    </custom-ds-versioned-css-variables>
-  `,
-};

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

@@ -1,9 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Base Components/VisuallyHidden',
-    component: 'ds-visually-hidden',
-};
-export default meta;
-export const Default = {
-    render: () => html `<ds-visually-hidden>Visually hidden content</ds-visually-hidden>`,
-};

package/dist/collection/introduction/introduction.stories.js

@@ -1,9 +0,0 @@
-import IntroDocs from "./Introduction.mdx";
-export default {
-    title: 'Introduction',
-    parameters: {
-        docs: {
-            page: IntroDocs,
-        },
-    },
-};