Add examples for options with descriptions for combobox and dropdown

packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx

@@ -10,7 +10,7 @@ const {
   WithDefaultSelected,
   Disabled,
   DisabledOption,
-  MultiSelect,
+  Multiselect,
   WithFormField,
   Grouped,
   EmptyMessage,
@@ -283,7 +283,7 @@ describe("Given a ComboBox", () => {
 
   it("should allow multiple options to be selected with a mouse", () => {
     const selectionChangeSpy = cy.stub().as("selectionChange");
-    cy.mount(<MultiSelect onSelectionChange={selectionChangeSpy} />);
+    cy.mount(<Multiselect onSelectionChange={selectionChangeSpy} />);
     cy.findByRole("combobox").should(
       "have.attr",
       "aria-multiselectable",
@@ -321,7 +321,7 @@ describe("Given a ComboBox", () => {
 
   it("should allow multiple options to be selected with the keyboard", () => {
     const selectionChangeSpy = cy.stub().as("selectionChange");
-    cy.mount(<MultiSelect onSelectionChange={selectionChangeSpy} />);
+    cy.mount(<Multiselect onSelectionChange={selectionChangeSpy} />);
     cy.realPress("Tab");
     cy.realPress("ArrowDown");
     cy.realPress("Enter");
@@ -386,11 +386,9 @@ describe("Given a ComboBox", () => {
   it("should support complex options", () => {
     cy.mount(<ComplexOption />);
     cy.findByRole("combobox").realClick();
-    cy.findByRole("option", { name: "United States of America" }).should(
-      "exist"
-    );
-    cy.findByRole("option", { name: "United States of America" }).realClick();
-    cy.findByRole("combobox").should("have.value", "United States of America");
+    cy.findByRole("option", { name: /Kamron Marisa/ }).should("exist");
+    cy.findByRole("option", { name: /Kamron Marisa/ }).realClick();
+    cy.findByRole("combobox").should("have.value", "Kamron Marisa");
   });
 
   it("should support object values", () => {

packages/core/src/__tests__/__e2e__/dropdown/Dropdown.cy.tsx

@@ -9,7 +9,7 @@ const {
   Readonly,
   Disabled,
   DisabledOption,
-  MultiSelect,
+  Multiselect,
   WithFormField,
   Grouped,
   ComplexOption,
@@ -258,7 +258,7 @@ describe("Given a Dropdown", () => {
 
   it("should allow multiple options to be selected with a mouse", () => {
     const selectionChangeSpy = cy.stub().as("selectionChange");
-    cy.mount(<MultiSelect onSelectionChange={selectionChangeSpy} />);
+    cy.mount(<Multiselect onSelectionChange={selectionChangeSpy} />);
     cy.findByRole("combobox").should(
       "have.attr",
       "aria-multiselectable",
@@ -285,7 +285,7 @@ describe("Given a Dropdown", () => {
 
   it("should allow multiple options to be selected with the keyboard", () => {
     const selectionChangeSpy = cy.stub().as("selectionChange");
-    cy.mount(<MultiSelect onSelectionChange={selectionChangeSpy} />);
+    cy.mount(<Multiselect onSelectionChange={selectionChangeSpy} />);
     cy.realPress("Tab");
     cy.realPress("ArrowDown");
     cy.realPress(" ");
@@ -327,11 +327,9 @@ describe("Given a Dropdown", () => {
   it("should support complex options", () => {
     cy.mount(<ComplexOption />);
     cy.findByRole("combobox").realClick();
-    cy.findByRole("option", { name: "United States of America" }).should(
-      "exist"
-    );
-    cy.findByRole("option", { name: "United States of America" }).realClick();
-    cy.findByRole("combobox").should("have.text", "United States of America");
+    cy.findByRole("option", { name: "Read Read only" }).should("exist");
+    cy.findByRole("option", { name: "Read Read only" }).realClick();
+    cy.findByRole("combobox").should("have.text", "Read");
   });
 
   it("should support object values", () => {

packages/core/stories/combo-box/combo-box.stories.tsx

@@ -8,13 +8,13 @@ import {
   ComboBoxProps,
   Option,
   OptionGroup,
+  Text,
+  Avatar,
 } from "@salt-ds/core";
 import {
   CountryCode,
   countryMetaMap,
-  GB,
   LazyCountrySymbol,
-  US,
 } from "@salt-ds/countries";
 import { ChangeEvent, Suspense, SyntheticEvent, useState } from "react";
 import { usStateExampleData } from "../assets/exampleData";
@@ -177,8 +177,8 @@ export const Variants: StoryFn<typeof ComboBox> = () => {
   );
 };
 
-export const MultiSelect = Template.bind({});
-MultiSelect.args = {
+export const Multiselect = Template.bind({});
+Multiselect.args = {
   multiselect: true,
 };
 
@@ -311,26 +311,158 @@ export const Grouped: StoryFn<ComboBoxProps> = (args) => {
   );
 };
 
-type Country = {
-  value: string;
-  icon: JSX.Element;
-  textValue: string;
+type Contact = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  displayName: string;
+  id: string;
 };
 
-const options: Country[] = [
+const contacts: Contact[] = [
+  {
+    firstName: "Kamron",
+    lastName: "Marisa",
+    displayName: "Kamron Marisa",
+    email: "[email protected]",
+    id: "26c1ff5f-78a9-4b2b-bbaf-cb5285ed4d79",
+  },
+  {
+    firstName: "Matilda",
+    lastName: "Cathrine",
+    displayName: "Matilda Cathrine",
+    email: "[email protected]",
+    id: "45b8b157-2ab1-479f-9289-fe4a12e899c7",
+  },
+  {
+    firstName: "Neva",
+    lastName: "Reuben",
+    displayName: "Neva Reuben",
+    email: "[email protected]",
+    id: "bbe8230e-0559-4fc0-8575-10329b56b3c5",
+  },
+  {
+    firstName: "Laney",
+    lastName: "Hilton",
+    displayName: "Laney Hilton",
+    email: "[email protected]",
+    id: "f6b9885e-16e8-4fd5-a658-4207e168cdbb",
+  },
   {
-    value: "GB",
-    icon: <GB aria-hidden />,
-    textValue: "United Kingdom of Great Britain and Northern Ireland",
+    firstName: "Madison",
+    lastName: "Rosa",
+    displayName: "Madison Rosa",
+    email: "[email protected]",
+    id: "405fe991-84e6-4d45-85a6-feb0c010106b",
   },
   {
-    value: "US",
-    icon: <US aria-hidden />,
-    textValue: "United States of America",
+    firstName: "Consuelo",
+    lastName: "Elijah",
+    displayName: "Consuelo Elijah",
+    email: "[email protected]",
+    id: "688fdb00-9f31-4a33-90cd-e82b71b51f4c",
+  },
+  {
+    firstName: "Taurean",
+    lastName: "Blaise",
+    displayName: "Taurean Blaise",
+    email: "[email protected]",
+    id: "335662e3-0802-4f39-aaeb-78720aa75ca2",
+  },
+  {
+    firstName: "Therese",
+    lastName: "Irma",
+    displayName: "Therese Irma",
+    email: "[email protected]",
+    id: "c64c65d7-c193-48b1-b586-6ae4586d9d85",
+  },
+  {
+    firstName: "Terry",
+    lastName: "Alaina",
+    displayName: "Terry Alaina",
+    email: "[email protected]",
+    id: "f2f30596-f35e-4ef4-96ce-1d168a9c2db7",
+  },
+  {
+    firstName: "Mike",
+    lastName: "Shanny",
+    displayName: "Mike Shanny",
+    email: "[email protected]",
+    id: "66162734-165a-4fb6-8701-b59497b799aa",
+  },
+  {
+    firstName: "Adolf",
+    lastName: "Gerda",
+    displayName: "Adolf Gerda",
+    email: "[email protected]",
+    id: "93d62117-07a6-4615-95ed-4591af3205eb",
+  },
+  {
+    firstName: "Magali",
+    lastName: "Donna",
+    displayName: "Magali Donna",
+    email: "[email protected]",
+    id: "96b5c1a5-443b-44d3-bc39-f8ed746aa7b3",
+  },
+  {
+    firstName: "Rhiannon",
+    lastName: "Emerald",
+    displayName: "Rhiannon Emerald",
+    email: "[email protected]",
+    id: "53c6ac6a-56f3-4740-874f-57dceba46451",
+  },
+  {
+    firstName: "William",
+    lastName: "Rowan",
+    displayName: "William Rowan",
+    email: "[email protected]",
+    id: "27def2df-eb35-4229-8492-e80171abbe3a",
+  },
+  {
+    firstName: "Santiago",
+    lastName: "Maida",
+    displayName: "Santiago Maida",
+    email: "[email protected]",
+    id: "455be580-8f45-4ff3-9437-78dd60c03279",
+  },
+  {
+    firstName: "Marilyne",
+    lastName: "Candice",
+    displayName: "Marilyne Candice",
+    email: "[email protected]",
+    id: "539c291c-3c4a-4b47-b38d-1e946aa18a4e",
+  },
+  {
+    firstName: "Norbert",
+    lastName: "Nikita",
+    displayName: "Norbert Nikita",
+    email: "[email protected]",
+    id: "b01bf4fb-33ca-4ebf-befc-1ba27b06833a",
+  },
+  {
+    firstName: "Maximo",
+    lastName: "Carmel",
+    displayName: "Maximo Carmel",
+    email: "[email protected]",
+    id: "cf2de37d-9e72-4a8e-bfb4-db78e5a0b239",
+  },
+  {
+    firstName: "Edward",
+    lastName: "Kyler",
+    displayName: "Edward Kyler",
+    email: "[email protected]",
+    id: "50ec7911-f90a-4f3b-b49d-33bbb7a012dd",
+  },
+  {
+    firstName: "Judson",
+    lastName: "Carey",
+    displayName: "Judson Carey",
+    email: "[email protected]",
+    id: "4c6513a6-c08a-40a7-a54c-414b4d29db9f",
   },
 ];
 
-export const ComplexOption: StoryFn<ComboBoxProps<Country>> = (args) => {
+export const ComplexOption: StoryFn<ComboBoxProps<Contact>> = (args) => {
   const [value, setValue] = useState(args.defaultValue?.toString() ?? "");
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -343,34 +475,50 @@ export const ComplexOption: StoryFn<ComboBoxProps<Country>> = (args) => {
 
   const handleSelectionChange = (
     event: SyntheticEvent,
-    newSelected: Country[]
+    newSelected: Contact[]
   ) => {
     // React 16 backwards compatibility
     event.persist();
 
     if (newSelected.length === 1) {
-      setValue(newSelected[0].textValue);
+      setValue(newSelected[0].displayName);
     } else {
       setValue("");
     }
   };
 
   return (
-    <ComboBox<Country>
+    <ComboBox<Contact>
       {...args}
       onChange={handleChange}
       onSelectionChange={handleSelectionChange}
       value={value}
       style={{ width: 200 }}
-      valueToString={(country) => country.textValue}
+      valueToString={(contact) => contact.displayName}
     >
-      {options
-        .filter((country) =>
-          country.textValue.toLowerCase().includes(value.trim().toLowerCase())
+      {contacts
+        .filter((contact) =>
+          contact.displayName.toLowerCase().includes(value.trim().toLowerCase())
         )
-        .map((option) => (
-          <Option value={option} key={option.value}>
-            {option.icon} {option.textValue}
+        .map((contact) => (
+          <Option value={contact} key={contact.id}>
+            <StackLayout
+              gap={1}
+              direction="row"
+              align="center"
+              style={{
+                paddingBlock:
+                  "calc(var(--salt-spacing-100) + var(--salt-spacing-25))",
+              }}
+            >
+              <Avatar aria-hidden name={contact.displayName} size={1} />
+              <StackLayout gap={0.5} align="start">
+                <Text>{contact.displayName}</Text>
+                <Text styleAs="label" color="secondary">
+                  {contact.email}
+                </Text>
+              </StackLayout>
+            </StackLayout>
           </Option>
         ))}
     </ComboBox>
@@ -434,18 +582,18 @@ export const LongList: StoryFn<ComboBoxProps<CountryCode>> = (args) => {
       value={value}
       valueToString={(countryCode) => countryMetaMap[countryCode].countryName}
     >
-      <Suspense fallback="">
-        {Object.entries(groupedOptions).map(([firstLetter, options]) => (
-          <OptionGroup label={firstLetter} key={firstLetter}>
-            {options.map((country) => (
-              <Option value={country.countryCode} key={country.countryCode}>
+      {Object.entries(groupedOptions).map(([firstLetter, options]) => (
+        <OptionGroup label={firstLetter} key={firstLetter}>
+          {options.map((country) => (
+            <Option value={country.countryCode} key={country.countryCode}>
+              <Suspense fallback="">
                 <LazyCountrySymbol aria-hidden code={country.countryCode} />
-                {country.countryName}
-              </Option>
-            ))}
-          </OptionGroup>
-        ))}
-      </Suspense>
+              </Suspense>
+              {country.countryName}
+            </Option>
+          ))}
+        </OptionGroup>
+      ))}
     </ComboBox>
   );
 };
@@ -689,7 +837,7 @@ export const FreeText: StoryFn<ComboBoxProps> = (args) => {
         ))}
       {value && !usStates.includes(value) && (
         <Option value={value} key={value}>
-          Add "{value}"
+          Add &quot;{value}&quot;
         </Option>
       )}
     </ComboBox>