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

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

@@ -1,358 +0,0 @@
-import { html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
-const meta = {
-    title: 'Base Components/Combobox',
-    component: 'ds-combobox',
-    argTypes: {
-        ...getAriaAttributeArgTypes(['aria-label']),
-    },
-};
-export default meta;
-const options = [
-    { value: 'cat', label: 'Cat' },
-    { value: 'wildcat', label: 'Wildcat' },
-    { value: 'bobcat', label: 'Bobcat' },
-    { value: 'catfish', label: 'Catfish' },
-    { value: 'housecat', label: 'Housecat' },
-];
-const getOptions = (variant) => options.map(option => html `<ds-option ds-variant=${variant} ds-value=${option.value}>${option.label}</ds-option>`);
-const renderCombobox = (args) => {
-    const dsValue = args.dsVariant === 'multiple' ? args.dsValue : args.dsValue?.[0];
-    return html `
-    <ds-combobox
-      ds-variant=${args.dsVariant}
-      ds-id=${ifDefined(args.dsId)}
-      ds-name=${args.dsName}
-      ds-label=${args.dsLabel}
-      ds-assistive-text=${args.dsAssistiveText}
-      ds-icon=${args.dsIcon}
-      ds-placeholder=${args.dsPlaceholder}
-      ?ds-placeholder-hidden=${args.dsPlaceholderHidden}
-      ?ds-disabled=${args.dsDisabled}
-      ds-aria-label=${ifDefined(args.dsAriaLabel)}
-      aria-label=${ifDefined(args.ariaLabel)}
-      ?ds-clearable=${args.dsClearable}
-      ?ds-error-text=${args.dsErrorText}
-      ds-filtering-strategy=${args.dsFilteringStrategy}
-      ?ds-loading=${args.dsLoading}
-      ds-loading-text=${ifDefined(args.dsLoadingText || undefined)}
-      ?ds-options-error=${args.dsOptionsError}
-      ds-options-error-title=${ifDefined(args.dsOptionsErrorTitle || undefined)}
-      ds-options-error-text=${ifDefined(args.dsOptionsErrorText || undefined)}
-      ?ds-no-results=${args.dsNoResults}
-      ds-no-results-title=${ifDefined(args.dsNoResultsTitle || undefined)}
-      ds-no-results-text=${ifDefined(args.dsNoResultsText || undefined)}
-      dsValue=${dsValue}
-      ?ds-required=${args.dsRequired}
-      ?ds-optional=${args.dsOptional}
-      ds-optional-text=${ifDefined(args.dsOptionalText)}
-      ?ds-full-width=${args.dsFullWidth}
-    >
-      ${getOptions(args.dsVariant)}
-    </ds-combobox>
-  `;
-};
-export const Default = {
-    args: {
-        dsFilteringStrategy: 'dynamic',
-        dsLabel: 'Select an option',
-        dsVariant: 'default',
-    },
-    render: args => renderCombobox(args),
-};
-const eventsOptions = options.map(option => ({ ...option, id: option.value }));
-export const Events = {
-    parameters: {
-        docs: {
-            source: {
-                code: `
-          <ul id="combobox-output">
-            <li id="combobox-output__selected-value">
-              Selected value: <span id="combobox-output__selected-value-text">None</span>
-            </li>
-            <li id="combobox-output__change-emitted">
-              Change event emitted: <span id="combobox-output__change-emitted-text">No</span>
-            </li>
-            <li id="combobox-output__filter">
-              Filter value: <span id="combobox-output__filter-text">&lt;empty&gt;</span>
-            </li>
-            <li id="combobox-output__is-focused">
-              Combobox has focus: <span id="combobox-output__is-focused-text">No</span>
-            </li>
-            <li id="combobox-output__validity">
-              Combobox is valid: <span id="combobox-output__validity-text">No</span>
-            </li>
-            <li id="combobox-output__selected-option-removed">
-              Removed option: <span id="combobox-output__selected-option-removed-text">None</span>
-            </li>
-            <li id="combobox-output__selected-option-changed">
-              Changed option: <span id="combobox-output__selected-option-changed-text">None</span>
-            </li>
-          </ul>
-          <script>
-            document.addEventListener('dsFilterChange', (event: CustomEvent<string>) => {
-              const output = document.getElementById('combobox-output__filter-text');
-              if (output) {
-                output.textContent = event.detail || '<empty>';
-              }
-            });
-            document.addEventListener('dsChange', (event: CustomEvent<string>) => {
-              const output = document.getElementById('combobox-output__selected-value-text');
-              if (output) {
-                output.textContent = event.detail || 'None';
-              }
-              const changeOutput = document.getElementById('combobox-output__change-emitted-text');
-              if (changeOutput) {
-                changeOutput.textContent = 'Yes';
-              }
-              if (event.detail) {
-                const combobox = document.getElementById(args.dsId).closest('ds-combobox');
-                combobox.dsValue = event.detail;
-              }
-            });
-            document.addEventListener('dsBlur', () => {
-              const output = document.getElementById('combobox-output__is-focused-text');
-              if (output) {
-                output.textContent = 'No';
-              }
-            });
-            document.addEventListener('dsFocus', () => {
-              const output = document.getElementById('combobox-output__is-focused-text');
-              if (output) {
-                output.textContent = 'Yes';
-              }
-            });
-            document.addEventListener('dsSelectedOptionRemoved', (event: CustomEvent<void>) => {
-              const target = event.target as HTMLDsComboboxElement;
-              const originalValue = target.dsValue;
-              target.dsValue = null;
-              const output = document.getElementById('combobox-output__selected-option-removed-text');
-              if (output) {
-                output.textContent = originalValue || 'None';
-              }
-            });
-            document.addEventListener('dsSelectedOptionValueChange', (event: CustomEvent<string>) => {
-              const target = event.target as HTMLDsComboboxElement;
-              target.dsValue = event.detail;
-              const output = document.getElementById('combobox-output__selected-option-changed-text');
-              if (output) {
-                output.textContent = event.detail || 'None';
-              }
-            });
-            document.addEventListener('dsValidity', (event: CustomEvent<{ flag: string; message: string }>) => {
-              const output = document.getElementById('combobox-output__validity-text');
-              if (output) {
-                output.textContent = event.detail.flag === 'valid' ? 'Yes' : 'No, ' + event.detail.message;
-              }
-            });
-            document.addEventListener('dsSubmitInvalid', (event: CustomEvent<{ flag: string; message: string }>) => {
-              const output = document.getElementById('combobox-output__validity-text');
-              if (output) {
-                output.textContent = 'No, ' + event.detail.message;
-              }
-            });
-          </script>
-        `,
-            },
-        },
-    },
-    args: {
-        dsId: 'events-combobox',
-        dsFilteringStrategy: 'dynamic',
-        dsLabel: 'Select an option',
-        dsRequired: true,
-    },
-    render: args => html `
-    <style>
-      .ds-sb-combobox {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        gap: var(--ds-spacing-sm, 16px);
-
-        @media (min-width: 75rem) {
-          flex-direction: row;
-        }
-      }
-      .ds-sb-combobox-buttons {
-        display: flex;
-        margin-block-start: var(--ds-spacing-large, 32px);
-        margin-block-end: var(--ds-spacing-large, 32px);
-        gap: var(--ds-spacing-2xSmall, 8px);
-      }
-    </style>
-    <ds-grid>
-      <ds-grid>
-        <ds-card
-          ds-link-type="none"
-          ds-heading="Events"
-          ds-description="Use the combobox and the other controls to observe the events it triggers. Change events are emitted only on user interaction. For implementation details, view 'Show code' in the Docs."
-        >
-          <ul slot="content" id="combobox-output" class="ds-bodytext-sm ds-m-sm">
-            <li id="combobox-output__selected-value">Selected value: <span id="combobox-output__selected-value-text">None</span></li>
-            <li id="combobox-output__change-emitted">Change event emitted: <span id="combobox-output__change-emitted-text">No</span></li>
-            <li id="combobox-output__filter">Filter value: <span id="combobox-output__filter-text">&lt;empty&gt;</span></li>
-            <li id="combobox-output__is-focused">Combobox has focus: <span id="combobox-output__is-focused-text">No</span></li>
-            <li id="combobox-output__validity">Combobox is valid: <span id="combobox-output__validity-text">No</span></li>
-            <li id="combobox-output__selected-option-removed">Removed option: <span id="combobox-output__selected-option-removed-text">None</span></li>
-            <li id="combobox-output__selected-option-changed">Changed option: <span id="combobox-output__selected-option-changed-text">None</span></li>
-          </ul>
-        </ds-card>
-      </ds-grid>
-      <ds-grid>
-        <form @submit=${(event) => event.preventDefault()}>
-          <div class="ds-sb-combobox">
-            <ds-combobox
-              ds-id=${args.dsId}
-              ds-filtering-strategy=${args.dsFilteringStrategy}
-              ds-label=${args.dsLabel}
-              ?ds-required=${args.dsRequired}
-              @dsFilterChange=${(event) => {
-        const output = document.getElementById('combobox-output__filter-text');
-        if (output) {
-            output.textContent = event.detail || '<empty>';
-        }
-    }}
-              @dsChange=${(event) => {
-        const output = document.getElementById('combobox-output__selected-value-text');
-        if (output) {
-            output.textContent = event.detail || 'None';
-        }
-        const changeOutput = document.getElementById('combobox-output__change-emitted-text');
-        if (changeOutput) {
-            changeOutput.textContent = 'Yes';
-        }
-        const combobox = document.getElementById(args.dsId)?.closest('ds-combobox');
-        if (combobox) {
-            combobox.dsValue = event.detail;
-        }
-    }}
-              @dsBlur=${() => {
-        const output = document.getElementById('combobox-output__is-focused-text');
-        if (output) {
-            output.textContent = 'No';
-        }
-    }}
-              @dsFocus=${() => {
-        const output = document.getElementById('combobox-output__is-focused-text');
-        if (output) {
-            output.textContent = 'Yes';
-        }
-    }}
-              @dsSelectedOptionRemoved=${() => {
-        const valueOutput = document.getElementById('combobox-output__selected-value-text');
-        if (valueOutput) {
-            valueOutput.textContent = 'None';
-        }
-    }}
-              @dsSelectedOptionValueChange=${(event) => {
-        const target = event.target;
-        target.dsValue = event.detail;
-        const output = document.getElementById('combobox-output__selected-option-changed-text');
-        if (output) {
-            output.textContent = event.detail || 'None';
-        }
-    }}
-              @dsValidity=${(event) => {
-        const output = document.getElementById('combobox-output__validity-text');
-        if (output) {
-            output.textContent = event.detail.flag === 'valid' ? 'Yes' : `No, "${event.detail.message}"`;
-        }
-    }}
-              @dsSubmitInvalid=${(event) => {
-        const output = document.getElementById('combobox-output__validity-text');
-        if (output) {
-            output.textContent = `No, "${event.detail.message}"`;
-        }
-    }}
-            >
-              ${eventsOptions.map(option => html `<ds-option ds-id=${option.id} ds-value=${option.value} ds-label=${option.label}></ds-option>`)}
-            </ds-combobox>
-            <div class="ds-sb-combobox-buttons">
-              <ds-button
-                ds-value="Change selected option"
-                @click=${() => {
-        const changeOutput = document.getElementById('combobox-output__change-emitted-text');
-        if (changeOutput) {
-            changeOutput.textContent = 'No';
-        }
-        const combobox = document.getElementById(args.dsId)?.closest('ds-combobox');
-        if (combobox?.dsValue) {
-            const option = document.getElementById(combobox.dsValue)?.closest('ds-option');
-            if (option) {
-                option.dsId = `${option.dsId}-changed`;
-                option.dsValue = `${option.dsValue}-changed`;
-                option.dsLabel = `${option.dsLabel} (changed)`;
-            }
-        }
-    }}
-              ></ds-button>
-              <ds-button
-                ds-variant="secondary"
-                ds-value="Delete selected option"
-                @click=${() => {
-        const changeOutput = document.getElementById('combobox-output__change-emitted-text');
-        if (changeOutput) {
-            changeOutput.textContent = 'No';
-        }
-        const combobox = document.getElementById(args.dsId)?.closest('ds-combobox');
-        if (combobox?.dsValue) {
-            const removedValue = combobox.dsValue;
-            const option = document.getElementById(removedValue)?.closest('ds-option');
-            if (option) {
-                combobox.dsValue = null;
-                option.remove();
-                const removedOutput = document.getElementById('combobox-output__selected-option-removed-text');
-                if (removedOutput) {
-                    removedOutput.textContent = removedValue;
-                }
-                const valueOutput = document.getElementById('combobox-output__selected-value-text');
-                if (valueOutput) {
-                    valueOutput.textContent = 'None';
-                }
-            }
-        }
-    }}
-              ></ds-button>
-            </div>
-          </div>
-          <ds-grid>
-            <ds-button ds-value="Submit" ds-type="submit"></ds-button>
-          </ds-grid>
-        </form>
-      </ds-grid>
-    </ds-grid>
-  `,
-};
-export const Playground = {
-    args: {
-        dsVariant: 'default',
-        dsId: 'playground-combobox',
-        dsName: 'playground-name',
-        dsLabel: 'Playground Combobox',
-        dsAssistiveText: '',
-        dsIcon: '',
-        dsPlaceholder: 'Select an option',
-        dsPlaceholderHidden: false,
-        dsDisabled: false,
-        dsAriaLabel: '',
-        dsClearable: true,
-        dsErrorText: '',
-        dsFilteringStrategy: 'dynamic',
-        dsLoading: false,
-        dsLoadingText: '',
-        dsOptionsError: false,
-        dsOptionsErrorTitle: '',
-        dsOptionsErrorText: '',
-        dsNoResults: false,
-        dsNoResultsTitle: '',
-        dsNoResultsText: '',
-        dsValue: [],
-        dsRequired: false,
-        dsOptional: false,
-        dsOptionalText: '',
-        dsFullWidth: false,
-    },
-    render: args => renderCombobox(args),
-};

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

@@ -1,44 +0,0 @@
-import { html } from "lit";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-const meta = {
-    title: 'Base Components/Labels/Control Label/Features',
-    component: 'ds-control-label',
-};
-export default meta;
-export const Empty = {
-    render: () => html `
-    <p>
-      When no content is provided (neither slots nor properties), the component renders as a hidden <code>div</code>. This behaviour is necessary to avoid flickering and an extra
-      rendering cycle for detecting a slots presence.
-    </p>
-    <ds-control-label></ds-control-label>
-    <p><em>Note: The component above is present but hidden due to having no content.</em></p>
-  `,
-};
-export const Required = {
-    render: () => html ` <ds-control-label ds-label="Control label" ds-required="true"></ds-control-label> `,
-};
-export const Optional = {
-    render: () => html ` <ds-control-label ds-label="Control label" ds-optional="true"></ds-control-label> `,
-};
-export const Slots = {
-    args: {
-        labelSlot: 'Label slot',
-        assistiveTextSlot: 'Assistive text slot',
-    },
-    render: args => html `
-    <ds-control-label>
-      <div slot="label">${unsafeHTML(args.labelSlot)}</div>
-      <ds-assistive-text slot="assistiveText" ds-id="slots-assistive-text">${unsafeHTML(args.assistiveTextSlot)}</ds-assistive-text>
-    </ds-control-label>
-  `,
-};
-export const CustomTagName = {
-    render: () => html `
-    <custom-ds-control-label
-      ds-label="custom-ds-control-label"
-      ds-assistive-text="custom-ds-control-assistive-text"
-      ds-visually-hidden-assistive-text="custom-ds-control-visually-hidden-assistive-text"
-    ></custom-ds-control-label>
-  `,
-};

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

@@ -1,47 +0,0 @@
-import { html } from "lit";
-import classNames from "classnames";
-const meta = {
-    title: 'Base Components/Labels/Control Label',
-    component: 'ds-control-label',
-};
-export default meta;
-export const Default = {
-    args: {
-        dsId: 'ds-control-label-id',
-        dsHtmlFor: 'ds-control-label-input-id',
-        dsLabel: 'Control label',
-        dsAssistiveText: 'Assistive text for the control label',
-        dsAssistiveTextId: 'ds-control-label-assistive-text-id',
-        dsVisuallyHiddenAssistiveText: 'Additional assistive text for screen readers',
-        dsVisuallyHiddenAssistiveTextId: 'ds-control-label-visually-hidden-assistive-text-id',
-        dsRequired: false,
-        dsOptional: false,
-        dsOptionalText: '',
-    },
-    parameters: {
-        a11y: { disable: true },
-    },
-    render: args => html `
-    <ds-control-label
-      ds-id=${args.dsId}
-      ds-html-for=${args.dsHtmlFor}
-      ds-label=${args.dsLabel}
-      ds-assistive-text=${args.dsAssistiveText}
-      ds-assistive-text-id=${args.dsAssistiveTextId}
-      ds-visually-hidden-assistive-text=${args.dsVisuallyHiddenAssistiveText}
-      ds-visually-hidden-assistive-text-id=${args.dsVisuallyHiddenAssistiveTextId}
-      ?ds-required=${args.dsRequired}
-      ?ds-optional=${args.dsOptional}
-      ds-optional-text=${args.dsOptionalText}
-    ></ds-control-label>
-    <input
-      placeholder="Example control"
-      type="text"
-      id=${args.dsHtmlFor}
-      aria-describedby=${classNames({
-        [args.dsAssistiveTextId]: !!args.dsVisuallyHiddenAssistiveText,
-        [args.dsVisuallyHiddenAssistiveTextId]: !!args.dsVisuallyHiddenAssistiveText,
-    })}
-    />
-  `,
-};

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

@@ -1,103 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Base Components/Datepicker/Features',
-    component: 'ds-datepicker',
-};
-export default meta;
-export const NativeVariant = {};
-NativeVariant.args = {
-    dsLabel: 'Native datepicker',
-    dsVariant: 'native',
-};
-export const SimpleVariant = {};
-SimpleVariant.args = {
-    dsLabel: 'Simple datepicker',
-    dsVariant: 'simple',
-};
-export const CustomVariant = {};
-CustomVariant.args = {
-    dsLabel: 'Custom datepicker',
-    dsVariant: 'custom',
-};
-export const WithPlaceholder = {};
-WithPlaceholder.args = {
-    dsLabel: 'Label',
-    dsPlaceholder: 'dd.mm.yyyy',
-};
-export const WithAssistiveText = {};
-WithAssistiveText.args = {
-    dsLabel: 'Label',
-    dsAssistiveText: 'Select your date of birth',
-};
-export const WithHiddenAssistiveText = {};
-WithHiddenAssistiveText.args = {
-    dsLabel: 'Label',
-    dsHiddenAssistiveText: 'Use format dd.mm.yyyy',
-};
-export const ReadOnly = {};
-ReadOnly.args = {
-    dsLabel: 'Read-only datepicker',
-    dsReadonly: true,
-    dsValue: '2024-06-15',
-};
-export const Required = {};
-Required.args = {
-    dsLabel: 'Required date field',
-    dsRequired: true,
-};
-export const Optional = {};
-Optional.args = {
-    dsLabel: 'Label',
-    dsOptional: true,
-};
-export const OptionalWithCustomText = {
-    render: () => html `<ds-datepicker ds-label="Label" ds-optional ds-optional-text="vapaaehtoinen"></ds-datepicker>`,
-};
-export const Disabled = {};
-Disabled.args = {
-    dsLabel: 'Disabled datepicker',
-    dsDisabled: true,
-    dsValue: '2026-01-28',
-};
-export const Invalid = {};
-Invalid.args = {
-    dsLabel: 'Label',
-    dsErrorText: 'Please select a valid date',
-};
-export const PrefilledDate = {};
-PrefilledDate.args = {
-    dsLabel: 'Date with default value',
-    dsValue: '2026-01-28',
-};
-export const WithMinAndMaxDate = {};
-WithMinAndMaxDate.args = {
-    dsLabel: 'Select a date within range',
-    dsMin: '2026-01-20',
-    dsMax: '2026-02-05',
-    dsAssistiveText: 'Allowed dates: 20.1.2026 – 5.2.2026',
-};
-export const DisabledDates = {
-    args: {
-        dsLabel: 'Select a date (some dates disabled)',
-        dsVariant: 'custom',
-        dsDisabledDates: ['2026-02-14', '2026-02-15', '2026-02-28'],
-    },
-    render: args => html `<ds-datepicker ds-label=${args.dsLabel} ds-variant=${args.dsVariant} .dsDisabledDates=${args.dsDisabledDates}></ds-datepicker>`,
-};
-export const YearRange = {};
-YearRange.args = {
-    dsLabel: 'Select a date',
-    dsYearRangeStart: 2020,
-    dsYearRangeEnd: 2030,
-    dsAssistiveText: 'Year range: 2020–2030',
-};
-export const Slots = {
-    render: () => html `
-    <ds-datepicker>
-      <span slot="label">Custom <strong>label</strong> content</span>
-    </ds-datepicker>
-  `,
-};
-export const CustomTagName = {
-    render: () => html `<custom-ds-datepicker ds-label="Select a date" ds-variant="custom" ds-required></custom-ds-datepicker>`,
-};