@adobe-commerce/elsie 1.5.0-beta4 → 1.5.0

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -0,0 +1,457 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
+ *******************************************************************/
+
+import type { Meta, StoryObj } from '@storybook/preact';
+import { expect, userEvent, within } from '@storybook/test';
+import {
+  MultiSelect,
+  type MultiSelectProps,
+} from '@adobe-commerce/elsie/components/MultiSelect';
+import { useState, useEffect } from 'preact/hooks';
+
+export default {
+  title: 'Components/MultiSelect',
+  component: MultiSelect,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+The MultiSelect component allows users to select multiple options from a dropdown list. 
+It includes features like search filtering, keyboard navigation, bulk selection/deselection, 
+and comprehensive accessibility support.
+
+## Key Features
+- **Keyboard Navigation**: Full arrow key navigation with Enter to select
+- **Search Filtering**: Type to filter available options
+- **Bulk Actions**: Select All and Deselect All buttons
+- **Accessibility**: Screen reader announcements, proper ARIA attributes
+- **Floating Labels**: Optional floating label support
+- **Error/Success States**: Visual feedback for form validation
+        `,
+      },
+    },
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    options: [],
+    value: [],
+  },
+  argTypes: {
+    onChange: { action: 'changed' },
+    options: {
+      description: 'Array of selectable options',
+      control: { type: 'object' },
+    },
+    value: {
+      description: 'Currently selected values',
+      control: { type: 'object' },
+    },
+    placeholder: {
+      description: 'Placeholder text shown when no options are selected',
+      control: { type: 'text' },
+    },
+    floatingLabel: {
+      description: 'Floating label text',
+      control: { type: 'text' },
+    },
+    disabled: {
+      description: 'Disable the entire component',
+      control: { type: 'boolean' },
+    },
+    error: {
+      description: 'Show error state styling',
+      control: { type: 'boolean' },
+    },
+    success: {
+      description: 'Show success state styling',
+      control: { type: 'boolean' },
+    },
+  },
+} as Meta<MultiSelectProps>;
+
+const Template = {
+  render: (args: MultiSelectProps) => {
+    const [optionList] = useState(() =>
+      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((num) => ({
+        value: num,
+        label: `Option ${num}`,
+      }))
+    );
+
+    // Initialize selected options from story args, so preselected stories work
+    const [selectedOptions, setSelectedOptions] = useState<(string | number)[]>(
+      () => (args.value || []) as (string | number)[]
+    );
+
+    useEffect(() => {
+      setSelectedOptions((args.value || []) as (string | number)[]);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+      <div style={{ minHeight: '400px', padding: '50px' }}>
+        {/* Visually hidden label to give the internal search input an accessible name for a11y tests */}
+        <label
+          htmlFor={`${args.id || args.name || 'multi-select-sdk'}-search`}
+          style={{
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            padding: 0,
+            margin: '-1px',
+            overflow: 'hidden',
+            clip: 'rect(0 0 0 0)',
+            whiteSpace: 'nowrap',
+            border: 0,
+          }}
+        >
+          Search
+        </label>
+        <MultiSelect
+          {...args}
+          key={JSON.stringify(args.value ?? [])}
+          options={optionList}
+          value={selectedOptions}
+          onChange={setSelectedOptions}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj<MultiSelectProps>;
+
+export const DefaultView = {
+  ...Template,
+  parameters: {
+    layout: 'fullscreen',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    placeholder: 'Select your options',
+    selectAllText: 'Select All',
+    deselectAllText: 'Deselect All',
+    noResultsText: 'No results found',
+    name: 'example-multi-select',
+    disabled: false,
+    floatingLabel: '',
+    error: false,
+    success: false,
+    id: 'multi-select-id',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    const container = canvas.getByTestId('multi-select-container');
+
+    // Verify initial state
+    await expect(canvas.getByTestId('multi-select')).toBeInTheDocument();
+    await expect(
+      canvas.queryByTestId('multi-select-dropdown')
+    ).not.toBeInTheDocument();
+
+    // Open dropdown
+    await userEvent.click(container);
+    await expect(
+      canvas.getByTestId('multi-select-dropdown')
+    ).toBeInTheDocument();
+
+    // Verify dropdown contents
+    await expect(
+      canvas.getByTestId('multi-select-options')
+    ).toBeInTheDocument();
+    await expect(
+      canvas.getByTestId('multi-select-select-all')
+    ).toBeInTheDocument();
+    await expect(
+      canvas.getByTestId('multi-select-deselect-all')
+    ).toBeInTheDocument();
+
+    // Select an option
+    const firstOption = canvas.getByTestId('multi-select-option-0');
+    await userEvent.click(firstOption);
+
+    // Verify option was selected (should show selected state)
+    await expect(firstOption.className).toMatch(/--selected/);
+
+    // Verify tag appears in the tags area (be more specific to avoid multiple matches)
+    const tagsArea = canvas.getByTestId('multi-select-tags-area');
+    await expect(tagsArea).toHaveTextContent('Option 1');
+  },
+};
+
+export const WithFloatingLabel = {
+  ...Template,
+  args: {
+    floatingLabel: 'Floating label text',
+    placeholder: 'Start typing...',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    // floating label should be visible
+    const label = canvas.queryByText('Floating label text');
+    await expect(label).toBeInTheDocument();
+  },
+};
+
+export const DisabledState = {
+  ...Template,
+  args: {
+    disabled: true,
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    const container = canvas.getByTestId('multi-select-container');
+    // input should be disabled and dropdown shouldn't open on click
+    const hiddenInput = canvas.getByTestId('multi-select-hidden-input');
+    await expect(hiddenInput).toBeDisabled();
+    await userEvent.click(container);
+    // dropdown should not open
+    await expect(
+      canvas.queryByTestId('multi-select-dropdown')
+    ).not.toBeInTheDocument();
+    // container should have disabled class
+    await expect(container.className).toMatch(/--disabled/);
+  },
+};
+
+export const ErrorState = {
+  ...Template,
+  args: {
+    error: true,
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    const container = canvas.getByTestId('multi-select-container');
+    // container should have error class
+    await expect(container.className).toMatch(/--error/);
+  },
+};
+
+export const SuccessState = {
+  ...Template,
+  args: {
+    success: true,
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    const container = canvas.getByTestId('multi-select-container');
+    // container should have success class
+    await expect(container.className).toMatch(/--success/);
+  },
+};
+
+export const CustomTexts = {
+  ...Template,
+  args: {
+    placeholder: 'Pick items',
+    selectAllText: 'Add All',
+    deselectAllText: 'Remove All',
+    noResultsText: 'Nothing matches',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    const container = canvas.getByTestId('multi-select-container');
+    const input = canvas.getByRole('combobox');
+
+    // Verify custom placeholder is used
+    await expect(input).toHaveAttribute('placeholder', 'Pick items');
+
+    // Open dropdown to check custom button texts
+    await userEvent.click(container);
+    await expect(
+      canvas.getByTestId('multi-select-dropdown')
+    ).toBeInTheDocument();
+
+    // Verify custom button texts
+    await expect(canvas.getByText('Add All')).toBeInTheDocument();
+    await expect(canvas.getByText('Remove All')).toBeInTheDocument();
+
+    // Clear any existing input and type something that won't match to test no results text
+    await userEvent.clear(input);
+    await userEvent.type(input, 'xyz');
+
+    // Wait for no results to appear and verify custom no results text
+    await expect(
+      canvas.getByTestId('multi-select-no-results')
+    ).toHaveTextContent('Nothing matches');
+  },
+};
+
+export const WithNameAndId = {
+  ...Template,
+  args: {
+    name: 'custom-name',
+    id: 'custom-id',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    // Verify the hidden input has the correct name and id
+    const hiddenInput = canvas.getByTestId('multi-select-hidden-input');
+    await expect(hiddenInput).toHaveAttribute('name', 'custom-name');
+    await expect(hiddenInput).toHaveAttribute('id', 'custom-id');
+
+    // Verify the search input has the correct id pattern
+    const searchInput = canvas.getByRole('combobox');
+    await expect(searchInput).toHaveAttribute('id', 'custom-id-search');
+  },
+};
+
+export const PreselectedValues = {
+  ...Template,
+  args: {
+    value: [1, 3, 5],
+    placeholder: 'Already selected',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    // Tags area should contain the preselected labels
+    const tagArea = canvas.getByTestId('multi-select-tags-area');
+    await expect(tagArea).toBeInTheDocument();
+    // Check for the presence of tags - they should be rendered as Tag components
+    await expect(canvas.queryByText('Option 1')).toBeInTheDocument();
+    await expect(canvas.queryByText('Option 3')).toBeInTheDocument();
+    await expect(canvas.queryByText('Option 5')).toBeInTheDocument();
+    // Verify the tags area has the appropriate class for having values
+    await expect(tagArea.className).toMatch(/--has-values/);
+  },
+};
+
+export const KeyboardNavigation = {
+  ...Template,
+  args: {
+    placeholder: 'Use keyboard to navigate',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    const searchInput = canvas.getByRole('combobox');
+
+    // Focus the input and open dropdown
+    await userEvent.click(searchInput);
+    await expect(searchInput).toHaveFocus();
+
+    // Open dropdown with Arrow Down
+    await userEvent.keyboard('{ArrowDown}');
+    await expect(
+      canvas.getByTestId('multi-select-dropdown')
+    ).toBeInTheDocument();
+
+    // Test that keyboard navigation works by verifying we can:
+    // 1. Open dropdown with keyboard ✓ (done above)
+    // 2. Navigate and select an option
+    // 3. Close dropdown with Escape
+
+    // Navigate and select with keyboard
+    await userEvent.keyboard('{ArrowDown}'); // Move to first option
+    await userEvent.keyboard('{Enter}'); // Select first option
+
+    // Verify selection occurred by checking if a tag component appears
+    const tags = canvas.queryAllByTestId('dropin-tag-container');
+    await expect(tags.length).toBeGreaterThan(0);
+
+    // Test escape closes the dropdown
+    await userEvent.keyboard('{Escape}');
+    await expect(
+      canvas.queryByTestId('multi-select-dropdown')
+    ).not.toBeInTheDocument();
+
+    // Verify the search input still has focus after closing
+    await expect(searchInput).toHaveFocus();
+  },
+};
+
+export const SearchFiltering = {
+  ...Template,
+  args: {
+    placeholder: 'Type to search options',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    const searchInput = canvas.getByRole('combobox');
+
+    // Type to search and open dropdown
+    await userEvent.type(searchInput, '1');
+    await expect(
+      canvas.getByTestId('multi-select-dropdown')
+    ).toBeInTheDocument();
+
+    // Should show only options containing '1' (Option 1, Option 10)
+    const firstFilteredOption = canvas.getByTestId('multi-select-option-0');
+    await expect(firstFilteredOption).toBeInTheDocument();
+    // Check the dropdown contains the filtered options
+    const dropdown = canvas.getByTestId('multi-select-dropdown');
+    await expect(dropdown).toHaveTextContent('Option 1');
+    await expect(dropdown).toHaveTextContent('Option 10');
+
+    // Clear search and type something that doesn't match
+    await userEvent.clear(searchInput);
+    await userEvent.type(searchInput, 'xyz');
+
+    // Should show no results state
+    const noResultsElement = canvas.getByTestId('multi-select-no-results');
+    await expect(noResultsElement).toBeInTheDocument();
+    // Verify the search term appears in quotes (the specific message may vary)
+    await expect(noResultsElement).toHaveTextContent('"xyz"');
+  },
+};
+
+export const BulkSelectionActions = {
+  ...Template,
+  args: {
+    placeholder: 'Demonstrate bulk selection',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    const container = canvas.getByTestId('multi-select-container');
+
+    // Open dropdown
+    await userEvent.click(container);
+    await expect(
+      canvas.getByTestId('multi-select-dropdown')
+    ).toBeInTheDocument();
+
+    // Initially, Deselect All should be disabled (no selections)
+    const deselectAllButton = canvas.getByTestId('multi-select-deselect-all');
+    await expect(deselectAllButton).toBeDisabled();
+
+    // Click Select All
+    const selectAllButton = canvas.getByTestId('multi-select-select-all');
+    await userEvent.click(selectAllButton);
+
+    // All options should now be selected - check tags appear in the tags area
+    const tagsArea = canvas.getByTestId('multi-select-tags-area');
+    await expect(tagsArea).toHaveTextContent('Option 1');
+    await expect(tagsArea).toHaveTextContent('Option 2');
+    await expect(tagsArea).toHaveTextContent('Option 10');
+
+    // Deselect All should now be enabled
+    await expect(deselectAllButton).not.toBeDisabled();
+
+    // Click Deselect All
+    await userEvent.click(deselectAllButton);
+
+    // Tags should be gone from tags area
+    await expect(tagsArea).not.toHaveTextContent('Option 1');
+    await expect(tagsArea).not.toHaveTextContent('Option 2');
+
+    // Deselect All should be disabled again
+    await expect(deselectAllButton).toBeDisabled();
+  },
+};
+
+/**
+ * MultiSelect component allows users to select multiple options from a list.
+ * It supports keyboard navigation, search filtering, and accessibility features.
+ */