Production Release - October 3 / 2025

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.7.1-alpha.1",
-    "@abgov/ui-components-common": "1.7.0",
-    "@abgov/web-components": "1.37.1-alpha.2",
+    "@abgov/react-components": "6.8.0-alpha.3",
+    "@abgov/ui-components-common": "1.8.0-alpha.3",
+    "@abgov/web-components": "1.38.0-alpha.5",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",

src/components/sandbox/SandboxProperties.tsx

@@ -80,7 +80,7 @@ export function SandboxProperties({ properties = [], onChange }: Props) {
       case "list":
       case "dropdown":
         return (
-          <GoabDropdown key={p.name} name={p.name} value={p.value} onChange={onListChange}>
+          <GoabDropdown key={p.name} name={p.name} width="100%" value={p.value} onChange={onListChange}>
             {p.options.map(option => (
               <GoabDropdownItem
                 value={option || ""}
@@ -95,6 +95,7 @@ export function SandboxProperties({ properties = [], onChange }: Props) {
           <GoabDropdown
             key={p.name}
             name={p.name}
+            width="100%"
             filterable
             leadingIcon="search"
             value={p.value}

src/components/version-language-switcher/HelpButton.tsx

@@ -26,7 +26,6 @@ export function HelpButton() {
   return (
     <GoabTooltip content="Version and framework info">
       <GoabIconButton ml={"xs"}
-                      mb={"2xs"}
                       variant="color"
                       size="small"
                       icon="help-circle"

src/components/version-language-switcher/VersionLanguageSwitcher.tsx

@@ -85,30 +85,22 @@ export const VersionLanguageSwitcher = () => {
     return str.charAt(0).toUpperCase() + str.slice(1);
   }
 
-  const openLanguagePopOver = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-  };
-
-  const openVersionPopOver = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-  };
-
   const getCurrentVersionLabel = (language: string, version: string) => {
     if (language === "react") {
       return version === "new" ? REACT_VERSIONS.NEW.label : REACT_VERSIONS.OLD.label;
-    }    if (language === "angular") {
+    } if (language === "angular") {
       return version === "new" ? ANGULAR_VERSIONS.NEW.label : ANGULAR_VERSIONS.OLD.label;
     }
   }
 
   return (
-    <>
-      <div className="version-language-switcher">
+    <div className="version-language-switcher">
       <GoabPopover
         target={
-          <a className="version-language-switcher__heading" href="#" id="language-switcher" onClick={e => openLanguagePopOver(e)}>
-            <GoabIcon type="chevron-down" size="small"></GoabIcon> {capitalizeFirstLetter(language)}
-          </a>
+          <div className="menu-link">
+            <GoabIcon type="chevron-down" size="small" />
+            { capitalizeFirstLetter(language) }
+          </div>
         }
         padded={false}>
         <>
@@ -121,10 +113,10 @@ export const VersionLanguageSwitcher = () => {
       </GoabPopover>
 
       <GoabPopover target={
-        <a className="version-language-switcher__heading" href="#"
-           onClick={e => openVersionPopOver(e)}>
-          <GoabIcon type="chevron-down" size="small"></GoabIcon> {getCurrentVersionLabel(language, version)}
-        </a>
+        <div className="menu-link">
+          <GoabIcon type="chevron-down" size="small" />
+          { getCurrentVersionLabel(language, version) }
+        </div>
       } padded={false}>
         <>
           {["new", "old"].map(ver => (
@@ -134,7 +126,6 @@ export const VersionLanguageSwitcher = () => {
           ))}
         </>
       </GoabPopover>
-      </div>
-    </>
+    </div>
   );
 }

src/components/version-language-switcher/version-language-switcher.css

@@ -30,12 +30,22 @@
 }
 
 .version-language-switcher {
-    height: 20px;
     display: flex;
     flex-direction: row;
     align-items: center; /* vertically align content */
     gap: var(--goa-space-s);
-    margin-bottom: var(--goa-space-xs);
+}
+
+.menu-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--goa-color-interactive-default);
+}
+
+.menu-link:hover {
+    color: var(--goa-color-interactive-hover);
+    text-decoration: underline;
 }
 
 @media (max-width: 623px) {

src/global-constants.ts

@@ -3,4 +3,4 @@ export const DEFAULT_VERSION = "old";
 export const DEFAULT_LANGUAGE = "react";
 
 // Array of 'New' components
-export const NEW_COMPONENTS = ["Drawer", "Temporary notification"];
+export const NEW_COMPONENTS = ["Drawer", "Temporary notification", "Checkbox list"];

src/routes/components/Badge.tsx

@@ -53,7 +53,35 @@ export default function BadgePage() {
       label: "Type",
       type: "list",
       name: "type",
-      options: ["success", "important", "information", "emergency", "dark", "midtone", "light"],
+      options: [
+        "information",
+        "success",
+        "important",
+        "emergency",
+        "dark",
+        "midtone",
+        "light",
+        "archived",
+        "aqua",
+        "black",
+        "blue",
+        "green",
+        "orange",
+        "pink",
+        "red",
+        "violet",
+        "white",
+        "yellow",
+        "aqua-light",
+        "black-light",
+        "blue-light",
+        "green-light",
+        "orange-light",
+        "pink-light",
+        "red-light",
+        "violet-light",
+        "yellow-light",
+      ],
       value: "information",
     },
     {
@@ -79,7 +107,7 @@ export default function BadgePage() {
   const oldComponentProperties: ComponentProperty[] = [
     {
       name: "type",
-      type: "success | important | information | emergency | dark | midtone | light",
+      type: "information | success | important | emergency | dark | midtone | light | archived | aqua | black | blue | green | orange | pink | red | violet | white | yellow | aqua-light | black-light | blue-light | green-light | orange-light | pink-light | red-light | violet-light | yellow-light",
       description: "Define the context and colour of the badge",
       required: true,
     },
@@ -128,7 +156,7 @@ export default function BadgePage() {
   const componentProperties: ComponentProperty[] = [
     {
       name: "type",
-      type: "GoabBadgeType(success | important | information | emergency | dark | midtone | light)",
+      type: "GoabBadgeType(information | success | important | emergency | dark | midtone | light | archived | aqua | black | blue | green | orange | pink | red | violet | white | yellow | aqua-light | black-light | blue-light | green-light | orange-light | pink-light | red-light | violet-light | yellow-light)",
       description: "Define the context and colour of the badge",
       required: true,
     },

src/routes/components/Checkbox.tsx

@@ -55,7 +55,7 @@ export default function CheckboxPage() {
       name: "maxWidth",
       requirement: "optional",
       value: "",
-    },
+    }
   ]);
   const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({
     label: "Basic",
@@ -230,11 +230,16 @@ export default function CheckboxPage() {
       type: "(event: GoabCheckboxOnChangeDetail) => void",
       description: "Callback function when checkbox value is changed.",
     },
+    {
+      name: "indeterminate",
+      type: "boolean",
+      description: "Displays the checkbox styled with a dash when set to true",
+    },
     TestIdProperty,
     MarginProperty,
   ];
 
-  const noop = () => { };
+  const noop = () => {};
 
   function onChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
     const missingProps = {
@@ -284,10 +289,10 @@ export default function CheckboxPage() {
               />
 
               {version === "old" && <CodeSnippet
-                lang="typescript"
-                tags={["angular", "reactive"]}
-                allowCopy={true}
-                code={`
+                  lang="typescript"
+                  tags={["angular", "reactive"]}
+                  allowCopy={true}
+                  code={`
                   import { FormControl } from "@angular/forms";
                   export class SomeOtherComponent {
                     itemFormCtrl = new FormControl();
@@ -296,10 +301,10 @@ export default function CheckboxPage() {
               />}
 
               {version === "new" && <CodeSnippet
-                lang="typescript"
-                tags={["angular", "reactive"]}
-                allowCopy={true}
-                code={`
+                  lang="typescript"
+                  tags={["angular", "reactive"]}
+                  allowCopy={true}
+                  code={`
                   export class SomeOtherComponent {
                    form!: FormGroup;
                    constructor(private fb: FormBuilder) {
@@ -312,10 +317,10 @@ export default function CheckboxPage() {
               />}
 
               {version === "new" && <CodeSnippet
-                lang="typescript"
-                tags={["angular", "template-driven"]}
-                allowCopy={true}
-                code={`
+                  lang="typescript"
+                  tags={["angular", "template-driven"]}
+                  allowCopy={true}
+                  code={`
                   export class SomeOtherComponent {
                    item=false;
                    checkboxOnChange(event: GoabCheckboxOnChangeDetail) {
@@ -327,15 +332,15 @@ export default function CheckboxPage() {
               />}
 
               {version === "new" && <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
                   function checkboxOnChange(event: GoabCheckboxOnChangeDetail) {
                     console.log(event.value);
                   }
                 `}
-              />
+                />
               }
 
               <form>