From b2f216cb7f10f7426bf22bd959ee0141e8d18b54 Mon Sep 17 00:00:00 2001 From: Kim Niedermaier Date: Fri, 30 Aug 2024 08:59:17 -0700 Subject: [PATCH 01/27] initial autocomplete scaffolding --- .../ds-autocomplete.stories.tsx | 193 ++++++++++++++++++ .../ds-autocomplete/ds-autocomplete.test.tsx | 0 .../ds-autocomplete/ds-autocomplete.tsx | 115 +++++++++++ .../web-components/ds-autocomplete/index.ts | 1 + .../src/components/web-components/index.ts | 1 + 5 files changed, 310 insertions(+) create mode 100644 packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.stories.tsx create mode 100644 packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.test.tsx create mode 100644 packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.tsx create mode 100644 packages/design-system/src/components/web-components/ds-autocomplete/index.ts diff --git a/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.stories.tsx b/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.stories.tsx new file mode 100644 index 0000000000..9c34357c0a --- /dev/null +++ b/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.stories.tsx @@ -0,0 +1,193 @@ +import { useEffect, useState } from 'react'; +import { action } from '@storybook/addon-actions'; +import type { Meta } from '@storybook/react'; +import WebComponentDocTemplate from '../../../../../../.storybook/docs/WebComponentDocTemplate.mdx'; +import { webComponentDecorator } from '../storybook'; +import './ds-autocomplete'; +import { AutocompleteItem } from '../../Autocomplete'; +import uniqueId from 'lodash/uniqueId'; +import '../ds-text-field'; + +const meta: Meta = { + title: 'Web Components/ds-autocomplete', + decorators: [webComponentDecorator], + parameters: { + docs: { + page: WebComponentDocTemplate, + }, + }, + args: { + 'clear-input-text': 'Clear search', + 'clear-search-button': true, + 'loading-message': 'Loading...', + 'no-results-message': 'No results', + name: 'ds-autocomplete', + }, + argTypes: { + 'aria-clear-label': { + description: + "Screen reader-specific label for the Clear search ` + +