docs(root): update select code and guidance to show custom elements

Update select code and guidance to show custom elements and icons

. #601

src/content/structured/components/select/code.mdx

@@ -981,6 +981,138 @@ export const SelectExampleValidation = () => (
   <SelectExampleValidation />
 </ComponentPreview>
 
+### Custom elements in options
+
+export const snippetsCustomElements = [
+  {
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select 
+  placeholder="Select an option..." 
+  label="What is your favourite coffee?"
+></ic-select>`,
+      long: `{shortCode}
+<script>
+  const select = document.querySelector("ic-select");
+  select.options = [
+   { 
+      label: "Cappuccino", 
+      value: "Cap", 
+    },
+   { 
+      label: "Latte", 
+      value: "Lat",
+      element: {
+        component: '<ic-status-tag label="Neutral status"></ic-status-tag>',
+        ariaLabel: "Neutral status tag",
+      }
+    },
+   { 
+      label: "Americano", 
+      value: "Ame",
+      icon: '<svg aria-labelledby="warning-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><g id="warning"><path id="Vector" d="M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z" /></g></svg>'
+    },
+ ];
+  select.addEventListener("icChange", function (event) {
+    console.log(event.detail.value);
+  });
+</script>`,
+    },
+  },
+  {
+    technology: "React",
+    snippets: {
+      short: `<IcSelect 
+  placeholder="Select an option..." 
+  label="What is your favourite coffee?"
+  options={options}
+  onIcChange={(event) => console.log(event.detail.value)}
+/>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `const options = [
+   { 
+      label: "Cappuccino", 
+      value: "Cap", 
+    },
+   { 
+      label: "Latte", 
+      value: "Lat",
+      element: {
+        component: '<ic-status-tag label="Neutral status"></ic-status-tag>',
+        ariaLabel: "Neutral status tag",
+      }
+    },
+   { 
+      label: "Americano", 
+      value: "Ame",
+      icon: '<svg aria-labelledby="warning-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><g id="warning"><path id="Vector" d="M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z" /></g></svg>'
+    },
+ ];
+ return (
+   {shortCode}
+ )`,
+        },
+        {
+          language: "Javascript",
+          snippet: `const options = [
+   { 
+      label: "Cappuccino", 
+      value: "Cap", 
+    },
+   { 
+      label: "Latte", 
+      value: "Lat",
+      element: {
+        component: '<ic-status-tag label="Neutral status"></ic-status-tag>',
+        ariaLabel: "Neutral status tag",
+      }
+    },
+   { 
+      label: "Americano", 
+      value: "Ame",
+      icon: '<svg aria-labelledby="warning-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><g id="warning"><path id="Vector" d="M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z" /></g></svg>'
+    },
+ ];
+ return (
+   {shortCode}
+ )`,
+        },
+      ],
+    },
+  },
+];
+
+export const optionsWithCustomElements = [
+  {
+    label: "Cappuccino",
+    value: "Cap",
+  },
+  {
+    label: "Latte",
+    value: "Lat",
+    element: {
+      component: `<ic-status-tag label="Neutral status"></ic-status-tag>`,
+      ariaLabel: "Neutral status tag",
+    },
+  },
+  {
+    label: "Americano",
+    value: "Ame",
+    icon: `<svg aria-labelledby="warning-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><g id="warning"><path id="Vector" d="M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z" /></g></svg>`,
+  },
+];
+
+<ComponentPreview snippets={snippetsCustomElements}>
+  <IcSelect
+    placeholder="Select an option…"
+    label="What is your favourite coffee?"
+    options={optionsWithCustomElements}
+    onIcChange={(event) => console.log(event.detail.value)}
+  />
+</ComponentPreview>
+
 ### Searchable
 
 export const snippetsSearchable = [

src/content/structured/components/select/guidance.mdx

@@ -91,7 +91,7 @@ Real-time validation helps the user streamline their process and efficiently com
 
 ### Option list
 
-The options in the option list display a label by default and can also include a description.
+The options display a label by default for the option list, which can also include a description or custom elements. Any custom elements used should be non-interactive, such as status tags or icons.
 
 Use a default option list to display all options without any grouping or recommendations.