Add examples for options with descriptions for combobox and dropdown

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

@@ -8,13 +8,13 @@
   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";
@@ -184,8 +184,8 @@
   );
 };
 
-export const MultiSelect = Template.bind({});
-MultiSelect.args = {
+export const Multiselect = Template.bind({});
+Multiselect.args = {
   multiselect: true,
 };
 
@@ -318,26 +318,158 @@
   );
 };
 
-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>) => {
@@ -350,34 +482,50 @@
 
   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 name={value.displayName} size={1} />
+              <StackLayout gap={0.5} align="start">
+                <Text>{value.displayName}</Text>
+                <Text styleAs="label" color="secondary">
+                  {value.email}
+                </Text>
+              </StackLayout>
+            </StackLayout>
           </Option>
         ))}
     </ComboBox>
@@ -441,18 +589,18 @@
       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>
   );
 };
@@ -696,7 +844,7 @@
         ))}
       {value && !usStates.includes(value) && (
         <Option value={value} key={value}>
-          Add "{value}"
+          Add &quot;{value}&quot;
         </Option>
       )}
     </ComboBox>