Vanessa/3356 docs

src/routes/components/Badge.tsx

@@ -10,7 +10,7 @@ import { ComponentContent } from "@components/component-content/ComponentContent
 import BadgeExamples from "@examples/badge/BadgeExamples.tsx";
 import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
 import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
-import ICONS from "@routes/components/icons.json";
+import { getIconOptions } from "@utils/iconUtils";
 
 // == Page props ==
 
@@ -89,7 +89,7 @@ export default function BadgePage() {
       label: "Icon type",
       type: "combobox",
       name: "iconType",
-      options: [""].concat(ICONS),
+      options: getIconOptions(),
       value: "",
     },
     {

src/routes/components/Button.tsx

@@ -12,7 +12,7 @@ import {
   ComponentProperties,
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties";
-import ICONS from "@routes/components/icons.json";
+import { getIconOptions } from "@utils/iconUtils";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { ButtonExamples } from "@examples/button/ButtonExamples.tsx";
 import {
@@ -55,14 +55,14 @@ export default function ButtonPage() {
       label: "Leading icon",
       type: "combobox",
       name: "leadingIcon",
-      options: [""].concat(ICONS),
+      options: getIconOptions(),
       value: "",
     },
     {
       label: "Trailing Icon",
       type: "combobox",
       name: "trailingIcon",
-      options: [""].concat(ICONS),
+      options: getIconOptions(),
       value: "",
     },
     {label: "Width", type: "string", name: "width", value: ""},

src/routes/components/Container.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import {
   ComponentProperties,
@@ -16,6 +16,7 @@ import { ComponentContent } from "@components/component-content/ComponentContent
 const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=1789-12623";
 import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
 import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
 // == Page props ==
 const componentName = "Container";
@@ -29,6 +30,7 @@ const relatedComponents = [
 type ComponentPropsType = GoabContainerProps;
 
 export default function ContainerPage() {
+  const { version } = useContext(LanguageVersionContext);
   const [containerProps, setContainerProps] = useState<ComponentPropsType>({});
 
   const [containerBindings, setContainerBindings] = useState<ComponentBinding[]>([
@@ -71,6 +73,20 @@ export default function ContainerPage() {
       requirement: "optional",
       value: "",
     },
+    {
+      label: "Min Height",
+      type: "string",
+      name: "minHeight",
+      requirement: "optional",
+      value: "",
+    },
+    {
+      label: "Max Height",
+      type: "string",
+      name: "maxHeight",
+      requirement: "optional",
+      value: "",
+    },
   ]);
 
   const oldComponentProperties: ComponentProperty[] = [
@@ -170,6 +186,16 @@ export default function ContainerPage() {
       type: "string",
       description: "Sets the maximum width of the container.",
     },
+    {
+      name: "minHeight",
+      type: "string",
+      description: "Sets the minimum height of the container.",
+    },
+    {
+      name: "maxHeight",
+      type: "string",
+      description: "Sets the maximum height of the container.",
+    },
     {
       name: "title",
       lang: "angular",
@@ -231,7 +257,13 @@ export default function ContainerPage() {
         <GoabTabs initialTab={1}>
           <GoabTab heading="Code playground">
             <h2 id="component" style={{ display: "none" }}>Playground</h2>
-            <Sandbox<ComponentPropsType> properties={containerBindings} onChange={onSandboxChange} fullWidth>
+            <Sandbox<ComponentPropsType>
+              properties={version === "new"
+                ? containerBindings
+                : containerBindings.filter(b => b.name !== "minHeight" && b.name !== "maxHeight")}
+              onChange={onSandboxChange}
+              fullWidth
+            >
               <GoabContainer {...containerProps}>
                 <h2>Detach to use</h2>
                 <p>Add things inside me</p>

src/routes/components/Dropdown.tsx

@@ -9,7 +9,7 @@ import {
   GoabTabs,
 } from "@abgov/react-components";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
-import ICONS from "./icons.json";
+import { getIconOptions } from "@utils/iconUtils";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import {
   ComponentProperties,
@@ -60,7 +60,7 @@ export default function DropdownPage() {
       label: "Leading icon",
       type: "combobox",
       name: "leadingIcon",
-      options: [""].concat(ICONS),
+      options: getIconOptions(),
       value: "",
     },
     {

src/routes/components/IconButton.tsx

@@ -12,7 +12,7 @@ import {
 } from "@components/component-properties/ComponentProperties.tsx";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { useState } from "react";
-import ICONS from "./icons.json";
+import { getIconOptions } from "@utils/iconUtils";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { GoabIconType } from "@abgov/ui-components-common";
 import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
@@ -46,7 +46,7 @@ export default function IconButtonPage() {
       label: "Icon",
       type: "combobox",
       name: "icon",
-      options: [""].concat(ICONS),
+      options: getIconOptions(),
       value: "refresh",
     },
     {

src/routes/components/Icons.tsx

@@ -1,4 +1,3 @@
-import ICONS from "./icons.json";
 import { useState } from "react";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import {
@@ -15,20 +14,22 @@ import {
   LegacyTestIdProperties, MarginProperty,
   TestIdProperty
 } from "@components/component-properties/common-properties.ts";
+import { getIconOptions } from "@utils/iconUtils";
 
 const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=24019-471310";
 
 export default function IconsPage() {
+  const iconOptions = getIconOptions(false);
   const [iconsProps, setIconsProps] = useState({
-    type: ICONS[0] as GoabIconType,
+    type: iconOptions[0] as GoabIconType,
   });
   const [iconsBindings, setIconsBindings] = useState<ComponentBinding[]>([
     {
       label: "Type",
       type: "combobox",
       name: "type",
-      options: ICONS,
-      value: ICONS[0],
+      options: iconOptions,
+      value: iconOptions[0],
     },
     {
       label: "Size",
@@ -38,14 +39,6 @@ export default function IconsPage() {
       value: "",
       defaultValue: "medium",
     },
-    {
-      label: "Theme",
-      type: "list",
-      name: "theme",
-      options: ["", "outline", "filled"],
-      value: "",
-      defaultValue: "outline",
-    },
     {
       label: "Opacity",
       type: "number",
@@ -91,12 +84,6 @@ export default function IconsPage() {
       description: "Sets the size of icon.",
       defaultValue: "medium",
     },
-    {
-      name: "theme",
-      type: "outline | filled",
-      description: "Styles the icon to show outline or filled.",
-      defaultValue: "outline",
-    },
     {
       name: "opacity",
       type: "number",
@@ -147,7 +134,7 @@ export default function IconsPage() {
     {
       name: "type",
       type: "GoabIconType",
-      description: "Sets the icon.",
+      description: "Sets the icon. You can optionally append a theme suffix to control the icon style (e.g. search:filled or search:outline). Defaults to outline if no theme is specified.",
       required: true,
     },
     {
@@ -156,12 +143,6 @@ export default function IconsPage() {
       description: "Sets the size of icon.",
       defaultValue: "medium",
     },
-    {
-      name: "theme",
-      type: "GoabIconTheme (outline | filled)",
-      description: "Styles the icon to show outline or filled.",
-      defaultValue: "outline",
-    },
     {
       name: "inverted",
       type: "boolean",
@@ -195,9 +176,9 @@ export default function IconsPage() {
   ];
 
 
-  function onSandboxChange(iconsBindings: ComponentBinding[], props: Record<string, unknown>) {
-    setIconsBindings(iconsBindings);
-    setIconsProps(props as { type: GoabIconType; [key: string]: unknown });
+  function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
+    setIconsBindings(bindings);
+    setIconsProps(props as { type: GoabIconType;[key: string]: unknown });
   }
 
   return (
@@ -223,7 +204,10 @@ export default function IconsPage() {
             <h2 id="component" style={{ display: "none" }}>
               Playground
             </h2>
-            <Sandbox properties={iconsBindings} onChange={onSandboxChange}>
+            <Sandbox
+              properties={iconsBindings}
+              onChange={onSandboxChange}
+            >
               <GoabIcon {...iconsProps} />
             </Sandbox>
 
@@ -305,9 +289,9 @@ export default function IconsPage() {
               <GoabText size="body-m" mt="none" mb="none">
                 The extended icon set includes the full
                 {" "}<a href="https://ionic.io/ionicons"
-                        target="_blank" rel="noreferrer">
-                Ionicons library.
-              </a>{" "}
+                  target="_blank" rel="noreferrer">
+                  Ionicons library.
+                </a>{" "}
                 When you need additional icons outside of the core icon set, use these icons to maintain a consistent
                 visual language.
               </GoabText>

src/routes/components/Link.tsx

@@ -9,7 +9,7 @@ import { GoabBadge, GoabTab, GoabTabs, GoabLink } from "@abgov/react-components"
 import LinkExamples from "@examples/link/LinkExamples.tsx";
 import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
 import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
-import ICONS from "@routes/components/icons.json";
+import { getIconOptions } from "@utils/iconUtils";
 
 
 export default function LinkPage() {
@@ -21,14 +21,14 @@ export default function LinkPage() {
       label: "Leading Icon",
       type: "combobox",
       name: "leadingIcon",
-      options: [""].concat(ICONS),
+      options: getIconOptions(),
       value: "",
     },
     {
       label: "Trailing Icon",
       type: "combobox",
       name: "trailingIcon",
-      options: [""].concat(ICONS),
+      options: getIconOptions(),
       value: "",
     },
     {

src/routes/components/MenuButton.tsx

@@ -22,6 +22,7 @@ import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty
 import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
+import { getIconOptions } from "@utils/iconUtils";
 
 const FIGMA_LINK =
   "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=69366-164803";
@@ -39,7 +40,7 @@ type ComponentPropsType = GoabMenuButtonProps;
 
 export default function MenuButtonPage() {
   const { version, language } = useContext(LanguageVersionContext);
-  
+
   const [menuButtonProps, setMenuButtonProps] = useState<ComponentPropsType>({
     text: "Menu actions",
     type: "primary",
@@ -59,6 +60,20 @@ export default function MenuButtonPage() {
       options: ["primary", "secondary", "tertiary"],
       value: "primary",
     },
+    {
+      label: "Leading icon",
+      type: "combobox",
+      name: "leadingIcon",
+      options: getIconOptions(),
+      value: "",
+    },
+    {
+      label: "Max width",
+      type: "string",
+      name: "maxWidth",
+      helpText: "Sets the maximum width of the dropdown menu options.",
+      value: "",
+    },
   ]);
 
   const menuButtonProperties: ComponentProperty[] = [
@@ -74,6 +89,16 @@ export default function MenuButtonPage() {
       description: "Controls the visual style of the trigger button.",
       defaultValue: "primary",
     },
+    {
+      name: "leadingIcon",
+      type: "GoabIconType",
+      description: "Optional leading icon appearing within the button.",
+    },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Sets the maximum width of the dropdown menu.",
+    },
     TestIdProperty,
     {
       name: "onAction",