@portfoliablejs/valence 0.1.0

package/src/stories/molecules/CaseNavigator/CaseNavigator.stories.js

@@ -0,0 +1,550 @@
+import { html } from 'lit';
+import { fn, userEvent, expect } from 'storybook/test';
+import './CaseNavigator.js';
+
+const MOCK_RESULTS = [
+  {
+    id: 'cassi-wrist',
+    title: 'UX on Wrist',
+    snippet: '...ased on projects developed at cassi, identify which mobile features would add ma...',
+  },
+  {
+    id: 'cassi-redesign',
+    title: 'US$400k Redesign',
+    snippet: '...nce upon a time, the cassi health insurance app served 229,000 mobile u...',
+  },
+];
+
+export default {
+  title: 'Molecules/Case Navigator [v1.0.0]',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'The `ds-case-navigator` is a composite molecule designed for sequential case study navigation, inline autocomplete search filtering, and global keyboard shortcut orchestration.',
+      },
+    },
+  },
+  decorators: [
+    (story) => html`
+      <div style="padding: 180px 40px 40px 40px; display: flex; justify-content: center; align-items: center; min-height: 250px;">
+        ${story()}
+      </div>
+    `,
+  ],
+  argTypes: {
+    /* Core Category */
+    currentIndex: {
+      control: { type: 'number', min: 0 },
+      description: 'Zero-based index of the currently active case.',
+      table: { category: 'Core', defaultValue: { summary: '0' } },
+    },
+    totalCases: {
+      control: { type: 'number', min: 1 },
+      description: 'Total number of case study items.',
+      table: { category: 'Core', defaultValue: { summary: '1' } },
+    },
+    searchExpanded: {
+      control: 'boolean',
+      description: 'Expands the inline search input.',
+      table: { category: 'Core', defaultValue: { summary: 'false' } },
+    },
+    value: {
+      control: 'text',
+      description: 'Text query pre-typed inside search input.',
+      table: { category: 'Core' },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables all user interactions.',
+      table: { category: 'Core', defaultValue: { summary: 'false' } },
+    },
+
+    /* Localization & Accessibility Category */
+    placeholder: {
+      control: 'text',
+      description: 'Localized placeholder text displayed inside search input.',
+      table: { category: 'Localization & Accessibility', defaultValue: { summary: 'Search cases...' } },
+    },
+    labelPrev: {
+      control: 'text',
+      description: 'Localized text label for the Previous button.',
+      table: { category: 'Localization & Accessibility', defaultValue: { summary: 'Previous' } },
+    },
+    labelNext: {
+      control: 'text',
+      description: 'Localized text label for the Next button.',
+      table: { category: 'Localization & Accessibility', defaultValue: { summary: 'Next' } },
+    },
+    tooltipSearch: {
+      control: 'text',
+      description: 'Localized tooltip text for the Search trigger button.',
+      table: { category: 'Localization & Accessibility', defaultValue: { summary: 'Search' } },
+    },
+    tooltipCloseSearch: {
+      control: 'text',
+      description: 'Localized tooltip text for the Search close button.',
+      table: { category: 'Localization & Accessibility', defaultValue: { summary: 'Close search' } },
+    },
+    tooltipPrev: {
+      control: 'text',
+      description: 'Localized tooltip text for the Previous Case button.',
+      table: { category: 'Localization & Accessibility', defaultValue: { summary: 'Previous case' } },
+    },
+    tooltipNext: {
+      control: 'text',
+      description: 'Localized tooltip text for the Next Case button.',
+      table: { category: 'Localization & Accessibility', defaultValue: { summary: 'Next case' } },
+    },
+    searchAriaLabel: {
+      control: 'text',
+      description: 'Accessible ARIA label for the Search button and input.',
+      table: { category: 'Localization & Accessibility', defaultValue: { summary: 'Search cases' } },
+    },
+    prevAriaLabel: {
+      control: 'text',
+      description: 'Accessible ARIA label for the Previous button.',
+      table: { category: 'Localization & Accessibility', defaultValue: { summary: 'Previous case' } },
+    },
+    nextAriaLabel: {
+      control: 'text',
+      description: 'Accessible ARIA label for the Next button.',
+      table: { category: 'Localization & Accessibility', defaultValue: { summary: 'Next case' } },
+    },
+
+    /* Keyboard Shortcuts Category */
+    kbdSearchLabel: {
+      control: 'text',
+      description: 'Keyboard shortcut label for Search.',
+      table: { category: 'Keyboard Shortcuts', defaultValue: { summary: 'S' } },
+    },
+    kbdSearchKey: {
+      control: 'text',
+      description: 'Secondary key for Search combination shortcut.',
+      table: { category: 'Keyboard Shortcuts' },
+    },
+    kbdSearchShowPlus: {
+      control: 'boolean',
+      description: 'Toggles + operator for Search combination shortcut.',
+      table: { category: 'Keyboard Shortcuts', defaultValue: { summary: 'false' } },
+    },
+
+    kbdCloseSearchLabel: {
+      control: 'text',
+      description: 'Keyboard shortcut label for Close Search.',
+      table: { category: 'Keyboard Shortcuts', defaultValue: { summary: 'X' } },
+    },
+    kbdCloseSearchKey: {
+      control: 'text',
+      description: 'Secondary key for Close Search combination shortcut.',
+      table: { category: 'Keyboard Shortcuts' },
+    },
+    kbdCloseSearchShowPlus: {
+      control: 'boolean',
+      description: 'Toggles + operator for Close Search combination shortcut.',
+      table: { category: 'Keyboard Shortcuts', defaultValue: { summary: 'false' } },
+    },
+
+    kbdPrevLabel: {
+      control: 'text',
+      description: 'Keyboard shortcut label for Previous Case.',
+      table: { category: 'Keyboard Shortcuts', defaultValue: { summary: '←' } },
+    },
+    kbdPrevKey: {
+      control: 'text',
+      description: 'Secondary key for Previous Case combination shortcut.',
+      table: { category: 'Keyboard Shortcuts' },
+    },
+    kbdPrevShowPlus: {
+      control: 'boolean',
+      description: 'Toggles + operator for Previous Case combination shortcut.',
+      table: { category: 'Keyboard Shortcuts', defaultValue: { summary: 'false' } },
+    },
+
+    kbdNextLabel: {
+      control: 'text',
+      description: 'Keyboard shortcut label for Next Case.',
+      table: { category: 'Keyboard Shortcuts', defaultValue: { summary: '→' } },
+    },
+    kbdNextKey: {
+      control: 'text',
+      description: 'Secondary key for Next Case combination shortcut.',
+      table: { category: 'Keyboard Shortcuts' },
+    },
+    kbdNextShowPlus: {
+      control: 'boolean',
+      description: 'Toggles + operator for Next Case combination shortcut.',
+      table: { category: 'Keyboard Shortcuts', defaultValue: { summary: 'false' } },
+    },
+
+    /* SUB-ATOMIC PROPS Category */
+    customBg: {
+      control: 'color',
+      name: '--ds-case-navigator-bg',
+      description: 'Sub-atomic override for main container background surface.',
+      table: { category: 'SUB-ATOMIC PROPS' },
+    },
+    customMenuBg: {
+      control: 'color',
+      name: '--ds-case-navigator-menu-bg',
+      description: 'Sub-atomic override for autocomplete popover background surface.',
+      table: { category: 'SUB-ATOMIC PROPS' },
+    },
+    customRadius: {
+      control: 'text',
+      name: '--ds-case-navigator-radius',
+      description: 'Sub-atomic override for container border radius.',
+      table: { category: 'SUB-ATOMIC PROPS' },
+    },
+    customBorderColor: {
+      control: 'color',
+      name: '--ds-case-navigator-border-color',
+      description: 'Sub-atomic override for container border line color.',
+      table: { category: 'SUB-ATOMIC PROPS' },
+    },
+    customPadding: {
+      control: 'text',
+      name: '--ds-case-navigator-padding',
+      description: 'Sub-atomic override for uniform container padding.',
+      table: { category: 'SUB-ATOMIC PROPS' },
+    },
+
+    /* Event Listeners */
+    onCaseSelect: {
+      action: 'ds-case-select',
+      table: { category: 'Event Listeners' },
+    },
+    onCasePrev: {
+      action: 'ds-case-prev',
+      table: { category: 'Event Listeners' },
+    },
+    onCaseNext: {
+      action: 'ds-case-next',
+      table: { category: 'Event Listeners' },
+    },
+    onSearchInput: {
+      action: 'ds-search-input',
+      table: { category: 'Event Listeners' },
+    },
+    onSearchSelect: {
+      action: 'ds-search-select',
+      table: { category: 'Event Listeners' },
+    },
+  },
+  args: {
+    currentIndex: 1,
+    totalCases: 3,
+    searchExpanded: false,
+    placeholder: 'Search cases...',
+    labelPrev: 'Previous',
+    labelNext: 'Next',
+    tooltipSearch: 'Search',
+    tooltipCloseSearch: 'Close search',
+    tooltipPrev: 'Previous case',
+    tooltipNext: 'Next case',
+    searchAriaLabel: 'Search cases',
+    prevAriaLabel: 'Previous case',
+    nextAriaLabel: 'Next case',
+    kbdSearchLabel: 'S',
+    kbdSearchShowPlus: false,
+    kbdCloseSearchLabel: 'X',
+    kbdCloseSearchShowPlus: false,
+    kbdPrevLabel: '←',
+    kbdPrevShowPlus: false,
+    kbdNextLabel: '→',
+    kbdNextShowPlus: false,
+    disabled: false,
+    onCaseSelect: fn(),
+    onCasePrev: fn(),
+    onCaseNext: fn(),
+    onSearchInput: fn(),
+    onSearchSelect: fn(),
+  },
+  render: (args) => {
+    const el = document.createElement('ds-case-navigator');
+    el.setAttribute('current-index', args.currentIndex.toString());
+    el.setAttribute('total-cases', args.totalCases.toString());
+
+    if (args.placeholder) el.setAttribute('placeholder', args.placeholder);
+    if (args.labelPrev) el.setAttribute('label-prev', args.labelPrev);
+    if (args.labelNext) el.setAttribute('label-next', args.labelNext);
+    if (args.tooltipSearch) el.setAttribute('tooltip-search', args.tooltipSearch);
+    if (args.tooltipCloseSearch) el.setAttribute('tooltip-close-search', args.tooltipCloseSearch);
+    if (args.tooltipPrev) el.setAttribute('tooltip-prev', args.tooltipPrev);
+    if (args.tooltipNext) el.setAttribute('tooltip-next', args.tooltipNext);
+
+    if (args.searchAriaLabel) el.setAttribute('search-aria-label', args.searchAriaLabel);
+    if (args.prevAriaLabel) el.setAttribute('prev-aria-label', args.prevAriaLabel);
+    if (args.nextAriaLabel) el.setAttribute('next-aria-label', args.nextAriaLabel);
+
+    if (args.kbdSearchLabel) el.setAttribute('kbd-search-label', args.kbdSearchLabel);
+    if (args.kbdSearchKey) el.setAttribute('kbd-search-key', args.kbdSearchKey);
+    if (args.kbdSearchShowPlus) el.setAttribute('kbd-search-show-plus', '');
+
+    if (args.kbdCloseSearchLabel) el.setAttribute('kbd-close-search-label', args.kbdCloseSearchLabel);
+    if (args.kbdCloseSearchKey) el.setAttribute('kbd-close-search-key', args.kbdCloseSearchKey);
+    if (args.kbdCloseSearchShowPlus) el.setAttribute('kbd-close-search-show-plus', '');
+
+    if (args.kbdPrevLabel) el.setAttribute('kbd-prev-label', args.kbdPrevLabel);
+    if (args.kbdPrevKey) el.setAttribute('kbd-prev-key', args.kbdPrevKey);
+    if (args.kbdPrevShowPlus) el.setAttribute('kbd-prev-show-plus', '');
+
+    if (args.kbdNextLabel) el.setAttribute('kbd-next-label', args.kbdNextLabel);
+    if (args.kbdNextKey) el.setAttribute('kbd-next-key', args.kbdNextKey);
+    if (args.kbdNextShowPlus) el.setAttribute('kbd-next-show-plus', '');
+
+    if (args.searchExpanded) el.setAttribute('search-expanded', 'true');
+    if (args.value) el.setAttribute('value', args.value);
+    if (args.disabled) el.setAttribute('disabled', 'true');
+
+    const styles = [];
+    if (args.customBg) styles.push(`--ds-case-navigator-bg: ${args.customBg}`);
+    if (args.customMenuBg) styles.push(`--ds-case-navigator-menu-bg: ${args.customMenuBg}`);
+    if (args.customRadius) styles.push(`--ds-case-navigator-radius: ${args.customRadius}`);
+    if (args.customBorderColor) styles.push(`--ds-case-navigator-border-color: ${args.customBorderColor}`);
+    if (args.customPadding) styles.push(`--ds-case-navigator-padding: ${args.customPadding}`);
+
+    if (styles.length > 0) {
+      el.setAttribute('style', styles.join('; '));
+    }
+
+    el.results = MOCK_RESULTS;
+
+    el.addEventListener('ds-case-select', (e) => args.onCaseSelect(e.detail));
+    el.addEventListener('ds-case-prev', (e) => args.onCasePrev(e.detail));
+    el.addEventListener('ds-case-next', (e) => args.onCaseNext(e.detail));
+    el.addEventListener('ds-search-input', (e) => args.onSearchInput(e.detail));
+    el.addEventListener('ds-search-select', (e) => args.onSearchSelect(e.detail));
+
+    return el;
+  },
+};
+
+export const Default = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default interactive state of the case navigator with search expansion and play test verification suite.',
+      },
+    },
+  },
+  args: {
+    currentIndex: 1,
+    totalCases: 3,
+  },
+  play: async ({ canvasElement, step }) => {
+    const navigator = canvasElement.querySelector('ds-case-navigator');
+    const searchBtn = navigator.shadowRoot.querySelector('.btn-case-search');
+
+    await step('Verify navigator controls use simplified ds-button props contract', async () => {
+      const prevBtn = navigator.shadowRoot.querySelector('.btn-prev-case');
+      const nextBtn = navigator.shadowRoot.querySelector('.btn-next-case');
+
+      expect(searchBtn.getAttribute('variant')).toBe('tertiary');
+      expect(searchBtn.getAttribute('has-text')).toBe('false');
+      expect(searchBtn.hasAttribute('has-icon')).toBe(true);
+
+      expect(prevBtn.getAttribute('variant')).toBe('tertiary');
+      expect(prevBtn.hasAttribute('has-icon')).toBe(true);
+      expect(nextBtn.getAttribute('variant')).toBe('tertiary');
+      expect(nextBtn.hasAttribute('has-icon')).toBe(true);
+    });
+
+    await step('Verify search button expands input and sets accessible name', async () => {
+      await userEvent.click(searchBtn);
+      expect(navigator.getAttribute('search-expanded')).toBe('true');
+      const input = navigator.shadowRoot.querySelector('.case-search-input');
+      expect(input.getAttribute('aria-label')).toBe('Search cases');
+    });
+
+    await step('Type query to trigger autocomplete menu', async () => {
+      const input = navigator.shadowRoot.querySelector('.case-search-input');
+      await userEvent.type(input, 'cassi');
+      const menu = navigator.shadowRoot.querySelector('.autocomplete-menu');
+      expect(menu.classList.contains('visible')).toBe(true);
+    });
+  },
+};
+
+export const FirstCaseDisabledPrev = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Navigator positioning at the first case study (`currentIndex = 0`), automatically disabling the Previous navigation button.',
+      },
+    },
+  },
+  args: {
+    currentIndex: 0,
+    totalCases: 3,
+  },
+};
+
+export const LastCaseDisabledNext = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Navigator positioning at the final case study (`currentIndex = totalCases - 1`), automatically disabling the Next navigation button.',
+      },
+    },
+  },
+  args: {
+    currentIndex: 2,
+    totalCases: 3,
+  },
+};
+
+export const SingleCaseBothDisabled = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Single case setup (`totalCases = 1`), resulting in disabled states for both Previous and Next navigation controls.',
+      },
+    },
+  },
+  args: {
+    currentIndex: 0,
+    totalCases: 1,
+  },
+};
+
+export const SearchExpanded = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the inline search input in its expanded state, hiding the adjacent navigation controls.',
+      },
+    },
+  },
+  args: {
+    currentIndex: 1,
+    totalCases: 3,
+    searchExpanded: true,
+  },
+};
+
+export const WithAutocompleteResults = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows active search query filtering results displayed inside the floating autocomplete suggestions popover with term highlighting.',
+      },
+    },
+  },
+  args: {
+    currentIndex: 1,
+    totalCases: 3,
+    searchExpanded: true,
+    value: 'cassi',
+  },
+};
+
+export const MultiKeyShortcutCombos = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Configures custom multi-key shortcut combinations (`⌘ Cmd + f`, `⌘ Cmd + ←`, `⌘ Cmd + →`) rendered inside action tooltips.',
+      },
+    },
+  },
+  args: {
+    currentIndex: 1,
+    totalCases: 3,
+    kbdSearchLabel: '⌘ Cmd',
+    kbdSearchShowPlus: true,
+    kbdSearchKey: 'f',
+    kbdPrevLabel: '⌘ Cmd',
+    kbdPrevShowPlus: true,
+    kbdPrevKey: '←',
+    kbdNextLabel: '⌘ Cmd',
+    kbdNextShowPlus: true,
+    kbdNextKey: '→',
+  },
+};
+
+export const CustomLocalization = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates customized localized text strings for action labels, input placeholders, tooltips, and keyboard shortcut keys.',
+      },
+    },
+  },
+  args: {
+    currentIndex: 1,
+    totalCases: 3,
+    labelPrev: 'Anterior',
+    labelNext: 'Próximo',
+    placeholder: 'Buscar casos...',
+    tooltipSearch: 'Buscar',
+    tooltipCloseSearch: 'Fechar busca',
+    tooltipPrev: 'Caso anterior',
+    tooltipNext: 'Próximo caso',
+    kbdSearchLabel: 'F',
+    kbdCloseSearchLabel: 'X',
+    kbdPrevLabel: 'A',
+    kbdNextLabel: 'D',
+  },
+};
+
+export const Disabled = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fully disabled component state where search input, navigation action buttons, and keyboard shortcut listeners are non-interactive.',
+      },
+    },
+  },
+  args: {
+    currentIndex: 1,
+    totalCases: 3,
+    disabled: true,
+  },
+};
+
+export const SubAtomicOverrides = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Design token customizations using sub-atomic CSS custom properties (`--ds-case-navigator-*`) for background colors, borders, radius, and padding.',
+      },
+    },
+  },
+  args: {
+    currentIndex: 1,
+    totalCases: 3,
+    customBg: '#101218',
+    customBorderColor: '#2B71F0',
+    customRadius: '12px',
+    customPadding: '4px 16px',
+  },
+};
+
+export const KeyboardInteractionTest = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Automated interaction test verifying focus management and keydown triggers (`Space` / `Enter`) on navigation controls.',
+      },
+    },
+  },
+  args: {
+    currentIndex: 1,
+    totalCases: 3,
+  },
+  play: async ({ canvasElement, step }) => {
+    const navigator = canvasElement.querySelector('ds-case-navigator');
+    const btnNext = navigator.shadowRoot.querySelector('.btn-next-case');
+
+    await step('Focus next button via Tab and activate via Space/Enter', async () => {
+      if (btnNext.shadowRoot && btnNext.shadowRoot.querySelector('button')) {
+        btnNext.shadowRoot.querySelector('button').focus();
+      } else {
+        btnNext.focus();
+      }
+      await userEvent.keyboard('[Space]');
+      expect(navigator.getAttribute('current-index')).toBe('2');
+    });
+  },
+};