@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.features.stories.js

@@ -1,494 +0,0 @@
-import { expect, fn, waitFor } from "@storybook/test";
-import { useArgs } from "@storybook/preview-api";
-import { html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { getDsElem, waitForElem } from "../../../../utils/tests/testUtils";
-const meta = {
-    title: 'Base Components/Combobox/Features',
-    component: 'ds-combobox',
-};
-export default meta;
-const renderDsOption = (dsValue, dsLabel, dsDescription, useSlot = true, dsMultiple = false) => html `
-  <ds-option ds-value=${dsValue} ds-description=${ifDefined(dsDescription)} ?ds-label=${!useSlot && dsLabel} ds-variant=${dsMultiple ? 'multiple' : 'default'}
-    >${useSlot && dsLabel}</ds-option
-  >
-`;
-const renderDsOptions = (length = 3, from = 1) => html ` ${Array.from({ length }, (_, i) => renderDsOption(`option${i + from}`, `Option ${i + from}`))} `;
-export const AriaLabel = {
-    render: () => html ` <ds-combobox ds-aria-label="Select an option" ds-icon="search"> ${renderDsOptions()} </ds-combobox> `,
-};
-export const GroupedOptions = {
-    parameters: {
-        docs: {
-            source: {
-                code: `
-        <ds-combobox
-          ds-label="Select an option"
-        >
-          <ds-option-group ds-label="Group 1">
-            ${renderDsOptions(2, 1)}
-          </ds-option-group>
-          <ds-option-group ds-label="Group 2">
-            ${renderDsOptions(2, 3)}
-          </ds-option-group>
-        </ds-combobox>`,
-            },
-        },
-    },
-    render: () => html `
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <ds-notification
-        ds-description="Grouped options in the Combobox are currently not fully accessible with the VoiceOver screen reader when using macOS and Safari. This issue does not occur in browsers such as Chrome or Edge."
-        ds-variant="info"
-        ds-heading-level="2"
-      ></ds-notification>
-      <ds-combobox ds-label="Select an option">
-        <ds-option-group ds-label="Group 1"> ${renderDsOptions(2, 1)} </ds-option-group>
-        <ds-option-group ds-label="Group 2"> ${renderDsOptions(2, 3)} </ds-option-group>
-      </ds-combobox>
-    </div>
-  `,
-};
-export const Disabled = {
-    render: () => html ` <ds-combobox ds-disabled="true" ds-label="Disabled Combobox"> ${renderDsOptions()} </ds-combobox> `,
-};
-export const Invalid = {
-    render: () => html ` <ds-combobox ds-error-text="Error text" ds-label="Invalid Combobox"> ${renderDsOptions()} </ds-combobox> `,
-};
-export const LongList = {
-    render: () => html ` <ds-combobox ds-label="Select an option"> ${renderDsOptions(30)} </ds-combobox> `,
-};
-export const LongGroupedList = {
-    render: () => html `
-    <ds-combobox ds-label="Select an option">
-      <ds-option-group ds-label="Group 1"> ${renderDsOptions(10, 1)} </ds-option-group>
-      <ds-option-group ds-label="Group 2"> ${renderDsOptions(10, 11)} </ds-option-group>
-      <ds-option-group ds-label="Group 3"> ${renderDsOptions(10, 21)} </ds-option-group>
-    </ds-combobox>
-  `,
-};
-export const WithIcon = {
-    render: () => html ` <ds-combobox ds-label="Select an option" ds-icon="language"> ${renderDsOptions()} </ds-combobox> `,
-};
-export const WithDescriptions = {
-    render: () => html `
-    <ds-combobox ds-label="Select an option">
-      ${renderDsOption('option1', 'Option 1', 'This is the first option')} ${renderDsOption('option2', 'Option 2', 'This is the second option')}
-      ${renderDsOption('option3', 'Option 3', 'This is the third option')}
-    </ds-combobox>
-  `,
-};
-export const LongOptionText = {
-    render: () => html `
-    <ds-combobox ds-label="Select an option">
-      ${renderDsOption('option1', 'This is a very long option text that should be truncated if it exceeds the width of the combobox')}
-      ${renderDsOption('option2', 'Another long option text that might not fit in the combobox')} ${renderDsOption('option3', 'Short option')}
-    </ds-combobox>
-  `,
-};
-export const LongOptionTextMultiple = {
-    render: () => html `
-    <ds-combobox ds-variant="multiple" ds-label="Select an option">
-      ${renderDsOption('option1', 'This is a very long option text that should be truncated if it exceeds the width of the combobox', undefined, true, true)}
-      ${renderDsOption('option2', 'Another long option text that might not fit in the combobox', undefined, true, true)}
-      ${renderDsOption('option3', 'Short option', undefined, true, true)}
-    </ds-combobox>
-  `,
-};
-export const ControlledValue = {
-    render: () => html `
-    <p>The combobox value is controlled by the <code>dsValue</code> property.</p>
-    <ds-combobox ds-label="Select an option" ds-value="option2">
-      ${renderDsOption('option1', 'This is a very long option text that should be truncated if it exceeds the width of the combobox')}
-      ${renderDsOption('option2', 'Another long option text that might not fit in the combobox')} ${renderDsOption('option3', 'Short option')}
-    </ds-combobox>
-  `,
-    play: async ({ canvasElement, step }) => {
-        const dsSelectedOptionValueChangeSpy = fn();
-        const dsSelectedOptionRemovedSpy = fn();
-        const combobox = (await getDsElem(canvasElement, 'ds-combobox'));
-        const getOption = (conditionFn) => {
-            const options = combobox.querySelectorAll('ds-option');
-            return Array.from(options).find(conditionFn);
-        };
-        combobox.addEventListener('dsSelectedOptionValueChange', (event) => {
-            combobox.dsValue = event.detail;
-            dsSelectedOptionValueChangeSpy(event.detail);
-        });
-        combobox.addEventListener('dsSelectedOptionRemoved', () => {
-            combobox.dsValue = null;
-            dsSelectedOptionRemovedSpy();
-        });
-        await step('Check the initial value', async () => {
-            await expect(await combobox.getSelectedOption()).toEqual({
-                value: 'option2',
-                label: 'Another long option text that might not fit in the combobox',
-                description: null,
-            });
-            await expect(combobox.dsValue).toBe('option2');
-        });
-        await step('Changing the value programmatically should update value', async () => {
-            combobox.dsValue = 'option3';
-            await waitFor(async () => {
-                await expect(await combobox.getSelectedOption()).toEqual({
-                    value: 'option3',
-                    label: 'Short option',
-                    description: null,
-                });
-                await expect(combobox.dsValue).toBe('option3');
-            });
-        });
-        await step('Changing selected option value programmatically should not update controlled value or emit selected-option-value-change event', async () => {
-            await waitFor(async () => {
-                const option = getOption(option => option.dsSelected);
-                if (!option) {
-                    throw new Error('Selected option not found');
-                }
-                option.dsValue = 'optionX';
-            });
-            await waitFor(async () => {
-                await expect(await combobox.getSelectedOption()).toEqual({
-                    value: 'optionX',
-                    label: 'Short option',
-                    description: null,
-                });
-                await expect(combobox.dsValue).toBe('option3');
-                await expect(dsSelectedOptionValueChangeSpy).not.toHaveBeenCalled();
-            });
-        });
-        await step('Changing controlled value programmatically should sync selected option value', async () => {
-            combobox.dsValue = 'optionX';
-            await waitFor(async () => {
-                await expect(await combobox.getSelectedOption()).toEqual({
-                    value: 'optionX',
-                    label: 'Short option',
-                    description: null,
-                });
-                await expect(combobox.dsValue).toBe('optionX');
-            });
-        });
-        await step('Removing selected option should nullify combobox value', async () => {
-            await waitFor(async () => {
-                const option = getOption(option => option.dsSelected);
-                if (!option) {
-                    throw new Error('Selected option not found');
-                }
-                option.remove();
-            });
-            await waitFor(async () => {
-                await expect(await combobox.getSelectedOption()).toEqual(null);
-                await expect(combobox.dsValue).toBe(null);
-                await expect(dsSelectedOptionRemovedSpy).toHaveBeenCalled();
-            });
-        });
-    },
-};
-const createDsOption = (value, label, useSlot = true) => {
-    const option = document.createElement('ds-option');
-    option.dsValue = value;
-    if (useSlot) {
-        option.textContent = label;
-    }
-    else {
-        option.dsLabel = label;
-    }
-    return option;
-};
-const createDsOptions = (length, start = 1, useSlots = true) => {
-    return Array.from({ length }, (_, i) => createDsOption(`option${i + start}`, `Option ${i + start}`, useSlots));
-};
-const renderDynamicOptions = (prop, ms = 3000) => (args) => {
-    let appendChildren = true;
-    const div = document.createElement('div');
-    const p = document.createElement('p');
-    p.textContent = `The state is toggled every ${ms / 1000} seconds.`;
-    const combobox = document.createElement('ds-combobox');
-    combobox.dsLabel = 'Select an option';
-    combobox[prop] = true;
-    if (prop === 'dsLoading') {
-        combobox.dsLoadingText = args.dsLoadingText;
-    }
-    else if (prop === 'dsOptionsError') {
-        combobox.dsOptionsErrorTitle = args.dsOptionsErrorTitle;
-        combobox.dsOptionsErrorText = args.dsOptionsErrorText;
-    }
-    else if (prop === 'dsNoResults') {
-        combobox.dsNoResultsTitle = args.dsNoResultsTitle;
-        combobox.dsNoResultsText = args.dsNoResultsText;
-    }
-    setInterval(() => {
-        if (appendChildren) {
-            combobox[prop] = false;
-            const options = createDsOptions(3);
-            options.forEach(option => combobox.appendChild(option));
-        }
-        else {
-            combobox[prop] = true;
-            const options = combobox.querySelectorAll('ds-option');
-            options.forEach(option => option.remove());
-        }
-        appendChildren = !appendChildren;
-    }, ms);
-    div.appendChild(p);
-    div.appendChild(combobox);
-    return div;
-};
-const dynamicOptionsParameters = (propsString, contentProps) => ({
-    docs: {
-        source: {
-            code: `
-        <ds-combobox ${propsString}>
-          <!-- Options are dynamically added/removed. Change the text content with ${contentProps.map(prop => `"${prop}"`).join(' and ')} prop${contentProps.length > 1 ? 's' : ''}. -->
-        </ds-combobox>
-      `,
-        },
-    },
-});
-export const DynamicOptionsLoading = {
-    parameters: dynamicOptionsParameters('ds-loading="true"', ['ds-loading-text']),
-    render: args => renderDynamicOptions('dsLoading', 3000)(args),
-};
-export const DynamicOptionsError = {
-    parameters: dynamicOptionsParameters('ds-options-error="true"', ['ds-options-error-title', 'ds-options-error-text']),
-    render: args => renderDynamicOptions('dsOptionsError', 3000)(args),
-};
-export const DynamicOptionsNoResults = {
-    parameters: dynamicOptionsParameters('ds-no-results="true"', ['ds-no-results-title', 'ds-no-results-text']),
-    render: args => renderDynamicOptions('dsNoResults', 3000)(args),
-};
-export const Multiple = {
-    argTypes: {
-        dsValue: { control: 'multi-select', options: ['option1', 'option2', 'option3', 'option4'] },
-    },
-    args: {
-        dsValue: ['option2', 'option3'],
-    },
-    render: () => {
-        const [{ dsValue }, updateArgs] = useArgs();
-        return html `
-      <ds-combobox
-        @dsMultipleChange=${(e) => updateArgs({ dsValue: e.detail.values })}
-        ds-label="Multiple"
-        ds-placeholder="Select options"
-        ds-variant="multiple"
-        .dsValue=${dsValue}
-      >
-        <ds-option ds-variant="multiple" ds-value="option1">Option 1</ds-option>
-        <ds-option ds-variant="multiple" ds-value="option2">Option 2</ds-option>
-        <ds-option ds-variant="multiple" ds-value="option3">Option 3</ds-option>
-        <ds-option ds-variant="multiple" ds-value="option4">Option 4</ds-option>
-      </ds-combobox>
-    `;
-    },
-};
-export const MutatingDOM = {
-    render: () => html `
-    <p class="ds-heading-lg">Dynamic Options Testing</p>
-    <p>The interaction tests of this story demonstrate how the combobox handles dynamically modified option lists:</p>
-    <ul>
-      <li>
-        <strong>Adding options and groups with options</strong>: New options become available for selection
-      </li>
-      <li>
-        <strong>Removing unselected options</strong>: Options are removed without affecting the current selection
-      </li>
-      <li>
-        <strong>Removing selected options</strong>: When the currently selected option is removed,
-        the combobox display value is cleared while preserving the <code>dsValue</code> property
-      </li>
-      <li>
-        <strong>Changing option text</strong>: Updates to the selected option's text reflect in the combobox input value
-      </li>
-      <li>
-        <strong>Changing option value</strong>: Updates to the selected option's value reflect in the combobox value
-        while preserving the <code>dsValue</code> property
-      </li>
-    </ul>
-  </p>
-    <ds-combobox ds-label="Select an option"></ds-combobox>
-  `,
-    play: async ({ canvasElement, step }) => {
-        const combobox = (await getDsElem(canvasElement, 'ds-combobox'));
-        await waitForElem(combobox, 'ds-options-message');
-        const optionsMessage = combobox.querySelector('ds-options-message');
-        const getOption = (conditionFn) => {
-            const options = combobox.querySelectorAll('ds-option');
-            return Array.from(options).find(conditionFn);
-        };
-        await step('Setup 1: Append first option', async () => {
-            const firstOption = createDsOption('option1', 'Option 1');
-            optionsMessage.after(firstOption);
-        });
-        await step('Setup 2: Append another option after the first one', async () => {
-            const option = createDsOption('option2', 'Option 2');
-            const firstOption = combobox.querySelector('ds-option');
-            firstOption.after(option);
-        });
-        await step('Setup 3: Prepend an option before the first one', async () => {
-            const newOption = createDsOption('option0', 'Option 0');
-            const firstOption = combobox.querySelector('ds-option');
-            firstOption.before(newOption);
-        });
-        await step('Updating value should select an option (1)', async () => {
-            combobox.dsValue = 'option1';
-            const option = getOption(option => option.dsValue === 'option1');
-            if (!option) {
-                throw new Error('Option not found');
-            }
-            await expect(await combobox.getSelectedOption()).toEqual({
-                value: 'option1',
-                label: 'Option 1',
-                description: null,
-            });
-            await expect(combobox.dsValue).toBe('option1');
-            await expect(option.dsSelected).toBeTruthy();
-        });
-        await step('Removing an unselected option should not nullify selection', async () => {
-            const option = getOption(option => option.dsValue === 'option0');
-            if (!option) {
-                throw new Error('Option not found');
-            }
-            option.remove();
-            await expect(await combobox.getSelectedOption()).toEqual({
-                value: 'option1',
-                label: 'Option 1',
-                description: null,
-            });
-        });
-        await step('Removing a selected option should nullify selection without mutating combobox value', async () => {
-            const option = getOption(option => option.dsSelected);
-            if (!option) {
-                throw new Error('Selected option not found');
-            }
-            option.remove();
-            await waitFor(async () => {
-                await expect(await combobox.getSelectedOption()).toBeNull();
-                await expect(combobox.dsValue).toBe('option1');
-            });
-        });
-        await step('Updating value should select an option (2)', async () => {
-            combobox.dsValue = 'option2';
-            const option = getOption(option => option.dsValue === 'option2');
-            if (!option) {
-                throw new Error('Option not found');
-            }
-            await expect(await combobox.getSelectedOption()).toEqual({
-                value: 'option2',
-                label: 'Option 2',
-                description: null,
-            });
-            await expect(combobox.dsValue).toBe('option2');
-            await expect(option.dsSelected).toBeTruthy();
-        });
-        await step('Changing selected option `textContent` should update input value', async () => {
-            await waitFor(async () => {
-                const option = getOption(option => option.dsSelected);
-                if (!option) {
-                    throw new Error('Selected option not found');
-                }
-                option.textContent = 'Option X';
-                await expect(option.dsSelected).toBeTruthy();
-                await expect(option.textContent).toBe('Option X');
-            });
-            await waitFor(async () => {
-                const input = combobox.querySelector('input');
-                await expect(input.value).toBe('Option X');
-                await expect(await combobox.getSelectedOption()).toEqual({
-                    value: 'option2',
-                    label: 'Option X',
-                    description: null,
-                });
-                await expect(combobox.dsValue).toBe('option2');
-            });
-        });
-        await step('Changing option value should update selected option without mutating combobox value', async () => {
-            await waitFor(async () => {
-                const option = getOption(option => option.dsSelected);
-                if (!option) {
-                    throw new Error('Selected option not found');
-                }
-                option.dsValue = 'optionX';
-                await expect(option.dsSelected).toBeTruthy();
-                await expect(option.dsValue).toBe('optionX');
-            });
-            await waitFor(async () => {
-                await expect(await combobox.getSelectedOption()).toEqual({
-                    value: 'optionX',
-                    label: 'Option X',
-                    description: null,
-                });
-                await expect(combobox.dsValue).toBe('option2');
-            });
-        });
-        await step('Append option group with options', async () => {
-            const group = document.createElement('ds-option-group');
-            group.dsLabel = 'Group 1';
-            const options = createDsOptions(3, 11, false);
-            options.forEach(option => group.appendChild(option));
-            combobox.appendChild(group);
-        });
-        await step('Updating value should select an option (3)', async () => {
-            combobox.dsValue = 'option11';
-            const option = combobox.querySelector('ds-option[ds-value="option11"]');
-            if (!option) {
-                throw new Error('Option not found');
-            }
-            await expect(await combobox.getSelectedOption()).toEqual({
-                value: 'option11',
-                label: 'Option 11',
-                description: null,
-            });
-            await expect(combobox.dsValue).toBe('option11');
-            await expect(option.dsSelected).toBeTruthy();
-        });
-        await step('Changing selected option `dsLabel` should update input value', async () => {
-            await waitFor(async () => {
-                const option = getOption(option => option.dsSelected);
-                if (!option) {
-                    throw new Error('Selected option not found');
-                }
-                option.dsLabel = 'Option Y';
-                await expect(option.dsSelected).toBeTruthy();
-                await expect(option.dsLabel).toBe('Option Y');
-            });
-            await waitFor(async () => {
-                const input = combobox.querySelector('input');
-                await expect(input.value).toBe('Option Y');
-                await expect(await combobox.getSelectedOption()).toEqual({
-                    value: 'option11',
-                    label: 'Option Y',
-                    description: null,
-                });
-                await expect(combobox.dsValue).toBe('option11');
-            });
-        });
-    },
-};
-export const FullWidth = {
-    args: {
-        dsLabel: 'Select an option',
-        dsAssistiveText: 'This combobox takes the full width of its container.',
-        dsFullWidth: true,
-    },
-    render: args => html ` <ds-combobox ds-label=${args.dsLabel} ds-assistive-text=${args.dsAssistiveText} ?ds-full-width=${args.dsFullWidth}> ${renderDsOptions()} </ds-combobox> `,
-};
-export const Slots = {
-    render: () => html `
-    <ds-combobox>
-      <div slot="label">Label slot</div>
-      <div slot="assistiveText">Assistive text slot</div>
-      <ds-option ds-value="option1">Default slot 1</ds-option>
-      <ds-option ds-value="option2">Default slot 2</ds-option>
-      <ds-option ds-value="option3">Default slot 3</ds-option>
-    </ds-combobox>
-  `,
-};
-export const CustomTagName = {
-    render: () => html `
-    <custom-ds-combobox ds-label="custom-ds-combobox">
-      <custom-ds-option ds-value="option1">custom-ds-option-1</custom-ds-option>
-      <custom-ds-option ds-value="option2" ds-label="custom-ds-option-2"></custom-ds-option>
-      <custom-ds-option ds-value="option3">custom-ds-option-3</custom-ds-option>
-    </custom-ds-combobox>
-  `,
-};