[WNMGDS-2871] Adds ds-autocomplete component

examples/astro/src/pages/web-components.astro

@@ -124,11 +124,71 @@ import Layout from '../layouts/Layout.astro';
       <hr class="ds-u-margin-y--4">
 
       <ds-pagination id="pagination" total-pages="10" class="ds-u-margin-y--4"></ds-pagination>
+
+      <h2 class="ds-text-heading--2xl">Controlled text field example</h2>
+      <ds-text-field value="" id="the-text-field" label="Text field example"></ds-text-field>
+
+      <hr class="ds-u-margin-y--4">
+
+      <h2 class="ds-text-heading--2xl">Autocomplete example</h2>
+      <ds-autocomplete
+        id="the-autocomplete"
+        items='[{"id":"71","name":"Acetaminophen"},{"id":"72","name":"Advil"},{"id":"73","name":"Benadryl"},{"id":"74","name":"Claritin"},{"id":"75","name":"Detrol"},{"id":"76","name":"Excedrin"}]'
+        label="Enter and select a drug to see its cost under each plan."
+        hint="Type a letter to see results, then use ARROW keys to change options, ENTER key to make a selection, ESC to dismiss."
+        clear-search-button="true"
+        class-name="ds-u-padding-bottom--7"
+      >
+      </ds-autocomplete>
     </div>
   </main>
 </Layout>
 
 <script>
+  document.getElementById('the-text-field')?.addEventListener('ds-change', ((
+    e: CustomEvent<{ target: { value: string } }>
+  ) => {
+    const newValue = e.detail.target.value;
+    document.getElementById('the-text-field')?.setAttribute('value', newValue);
+  }) as EventListener);
+
+  let items: { id: string; name: string }[] | null = null;
+  window.addEventListener("load", () => {
+    const initialItems = document?.getElementById('the-autocomplete')?.getAttribute('items');
+    if (typeof initialItems === 'string') {
+      items = JSON.parse(initialItems)
+    }
+  })
+
+  const autocompleteElement = document.getElementById('the-autocomplete');
+  autocompleteElement?.addEventListener('ds-input-value-change', ((
+    e: CustomEvent<{ value: string }>
+  ) => {
+    const input = e?.detail?.value ?? '';
+
+    // reset items to original value
+    if (input.length === 0) {
+      autocompleteElement.setAttribute('items', JSON.stringify(items));
+      return;
+    }
+
+    if (input.length > 0 && items) {
+      const filteredItems = items.filter(
+        (item) => !item.name || item.name.toLowerCase().includes(input.toLowerCase())
+      );
+      autocompleteElement.setAttribute('items', JSON.stringify(filteredItems));
+    }
+  }) as EventListener);
+
+
+  document
+  .getElementById('the-autocomplete')
+  ?.addEventListener('ds-change', function (
+    e: CustomEvent<{ selectedItem: { id: string; name: string } }>
+  ) {
+    console.log(`Autocomplete selection: ${JSON.stringify(e.detail.selectedItem)}`);
+  } as EventListener);
+
   document.getElementById('the-button').addEventListener('click', function () {
     const alert = document.getElementById('alert');
     alert.setAttribute('variation', 'error');
@@ -162,10 +222,12 @@ import Layout from '../layouts/Layout.astro';
 <script src="@cmsgov/design-system/dist/web-components/bundle/base.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-accordion.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-alert.js"></script>
+<script src="@cmsgov/design-system/dist/web-components/bundle/ds-autocomplete.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-button.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-choice.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-dropdown.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-month-picker.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-pagination.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-spinner.js"></script>
+<script src="@cmsgov/design-system/dist/web-components/bundle/ds-text-field.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-usa-banner.js"></script>

packages/design-system/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -203,6 +203,6 @@ export const NoResults: Story = {
     items: [],
     clearSearchButton: false,
     textFieldLabel: 'This will show a "no results" message.',
-    textFieldHint: "Start typing, but you'll only get a loading message.",
+    textFieldHint: 'Start typing, but you’ll only get a "no results" message.',
   } as any,
 };

packages/design-system/src/components/web-components/ds-autocomplete/__snapshots__/ds-autocomplete.test.tsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Autocomplete renders correctly 1`] = `
+<DocumentFragment>
+  <ds-autocomplete
+    aria-clear-label="Clear search to try again"
+    clear-input-text="Clear search"
+    clear-search-button="true"
+    items="[{\\"id\\":\\"kRf6c2fY\\",\\"name\\":\\"Cook County, IL\\"}]"
+    label="autocomplete label"
+    loading-message="Loading..."
+    no-results-message="No results"
+  >
+    <div
+      class="ds-c-autocomplete"
+    >
+      <div
+        class="ds-u-clearfix"
+      >
+        <label
+          class="ds-c-label"
+          for="autocomplete--1"
+          id="autocomplete--1__label"
+        >
+          autocomplete label
+        </label>
+        <p
+          aria-atomic="true"
+          aria-live="assertive"
+          class="ds-c-inline-error"
+          id="autocomplete--1__error"
+        />
+        <input
+          aria-autocomplete="list"
+          aria-controls="autocomplete--1__menu"
+          aria-expanded="false"
+          aria-invalid="false"
+          aria-labelledby="autocomplete--1__label"
+          autocomplete="off"
+          autocorrect="off"
+          class="ds-c-field"
+          id="autocomplete--1"
+          name="autocomplete"
+          role="combobox"
+          spellcheck="false"
+          type="text"
+        />
+      </div>
+      <button
+        aria-label="Clear search to try again"
+        class="ds-c-button ds-c-button--small ds-c-button--ghost ds-u-padding-right--0 ds-c-autocomplete__clear-btn"
+        type="button"
+      >
+        Clear search
+      </button>
+    </div>
+    <template />
+  </ds-autocomplete>
+</DocumentFragment>
+`;
+
+exports[`Autocomplete renders item with custom className 1`] = `
+Array [
+  <li
+    aria-selected="false"
+    class="ds-c-autocomplete__menu-item"
+    data-key="1a"
+    id="autocomplete--13__item--0"
+    role="option"
+  >
+    <span>
+      Normal item
+    </span>
+  </li>,
+  <li
+    aria-selected="false"
+    class="custom-class ds-c-autocomplete__menu-item"
+    data-key="5b"
+    id="autocomplete--13__item--1"
+    role="option"
+  >
+    <span>
+      Special item
+    </span>
+  </li>,
+]
+`;