Production Release - June 17 / 2025

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.4.1",
-    "@abgov/ui-components-common": "1.4.0",
-    "@abgov/web-components": "1.34.0",
+    "@abgov/react-components": "6.5.0",
+    "@abgov/ui-components-common": "1.5.0",
+    "@abgov/web-components": "1.35.1",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",

src/App.tsx

@@ -39,6 +39,7 @@ import BugVerificationPage from "@routes/get-started/developers/BugVerification"
 import GetStartedLayout from "@routes/get-started/GetStartedLayout";
 import GetStartedOverviewPage from "@routes/get-started/GetStartedOverview";
 import QATestingOverviewPage from "@routes/get-started/qa-testing/QATestingOverview";
+import ComponentLifecyclePage from "@routes/get-started/ComponentLifecycle";
 import ContributePage from "@routes/get-started/Contribute";
 import SupportPage from "@routes/get-started/Support";
 import RequestFeaturePage from "@routes/get-started/RequestFeature";
@@ -109,6 +110,7 @@ const router = createBrowserRouter(
         <Route path="qa-testing">
           <Route index element={<QATestingOverviewPage />} />
         </Route>
+        <Route path="component-lifecycle" element={<ComponentLifecyclePage />} />
         <Route path="lts-policy">
           <Route index element={<LtsPolicyPage />} />
         </Route>

src/components/old-component-banner/OldComponentBanner.tsx

@@ -5,14 +5,15 @@ import { Link } from "react-router-dom";
 interface OldComponentBannerProps {
   componentName: string;
   language: string;
+  type?: "example" | "component"
 }
 
-export const OldComponentBanner = ({ componentName, language }: OldComponentBannerProps) => {
+export const OldComponentBanner = ({ componentName, language, type = "component" }: OldComponentBannerProps) => {
   return (
-    <GoabCallout type="important" size={"medium"} heading={
-      `${componentName} component not available in this version`
+    <GoabCallout type="important" size={"medium"} mt="m" heading={
+      `${componentName} ${type} is not available in this version`
     }>
-      This component is only available in {language == "angular" ? ANGULAR_VERSIONS.NEW.label.substring(0,2).toUpperCase()
+      This {type} is only available in {language == "angular" ? ANGULAR_VERSIONS.NEW.label.substring(0,2).toUpperCase()
       : REACT_VERSIONS.NEW.label.substring(0,2).toUpperCase()} of the design system components.
       <br/>
       <Link to="/get-started/developers/update">View upgrade guide</Link>{" "}

src/examples/checkbox/CheckboxExamples.tsx

@@ -1,5 +1,6 @@
 import CheckboxDescriptionExample from "@examples/checkbox/CheckboxDescriptionExample.tsx";
 import CheckboxNoneOrManyExample from "@examples/checkbox/CheckboxNoneOrManyExample.tsx";
+import { CheckboxRevealSlotExample } from "@examples/checkbox/CheckboxRevealSlotExample.tsx";
 import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
 
 export const CheckboxExamples = () => {
@@ -17,5 +18,11 @@ export const CheckboxExamples = () => {
       figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6564-70176&t=kFEYlzR03SibmVz9-1">
     </SandboxHeader>
     <CheckboxNoneOrManyExample/>
+
+    <SandboxHeader
+      exampleTitle="Reveal input based on selection"
+      figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-131069&m=dev">
+    </SandboxHeader>
+    <CheckboxRevealSlotExample/>
   </>;
 }

src/examples/checkbox/CheckboxRevealSlotExample.tsx

@@ -0,0 +1,226 @@
+import { GoabCheckbox, GoabFormItem, GoabInput, GoabSpacer } from "@abgov/react-components";
+import { Sandbox } from "@components/sandbox";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx";
+
+export const CheckboxRevealSlotExample = () => {
+  const { version, language } = useContext(LanguageVersionContext);
+  return (
+    <>
+      {/*Skip rendering because we use reveal that isn't supported by sandbox*/}
+      <Sandbox fullWidth skipRender>
+        {/*Angular*/}
+        {version === "old" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
+              <goa-form-item label="How would you like to be contacted?">
+                <goa-checkbox name="optionOne" text="Email" value="email" [checked]="optionOneChecked" (_change)="updateContactMethod($event)">
+                  <div slot="reveal">
+                    <goa-form-item label="Email address">
+                      <goa-input name="email" [value]="emailAddress" (_change)="updateEmailAddress($event)"></goa-input>
+                    </goa-form-item>
+                  </div>
+                </goa-checkbox>
+                <goa-checkbox name="optionTwo" text="Phone" value="phone" [checked]="optionTwoChecked" (_change)="updateContactMethod($event)">
+                  <div slot="reveal">
+                    <goa-form-item label="Phone number">
+                        <goa-input name="phone" [value]="phoneNumber" (_change)="updatePhoneNumber($event)"></goa-input>
+                    </goa-form-item>
+                  </div>
+                </goa-checkbox>
+                <goa-checkbox name="optionThree" text="Text message" value="text" [checked]="optionThreeChecked" (_change)="updateContactMethod($event)">
+                    <div slot="reveal">
+                      <goa-form-item label="Mobile phone number">
+                        <goa-input name="phone" [value]="phoneNumber" (_change)="updatePhoneNumber($event)"></goa-input>
+                      </goa-form-item>
+                    </div>
+                </goa-checkbox>
+              </goa-form-item>
+            `}
+          />
+        )}
+
+        {version === "old" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
+        export class ExampleComponent {
+          phoneNumber = "";
+          emailAddress = "";
+          optionOneChecked = false;
+          optionTwoChecked = false;
+          optionThreeChecked = false;
+
+          updateContactMethod(event: any) {
+            const value = (event as CustomEvent).detail.value;
+            if (value === "email") {
+              this.optionOneChecked = true;
+            }
+            if (value === "phone") {
+              this.optionTwoChecked = true;
+            }
+            if (value === "text") {
+              this.optionThreeChecked = true;
+            }
+          }
+          updatePhoneNumber(event: any) {
+            this.phoneNumber = (event as CustomEvent).detail.value;
+          }
+          updateEmailAddress(event: any) {
+            this.emailAddress = (event as CustomEvent).detail.value;
+          }
+        }
+     `}
+          />
+        )}
+
+        {/*Angular*/}
+        {version === "new" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
+              <goab-form-item [formGroup]="form" label="How would you like to be contacted?">
+                <goab-checkbox formControlName="emailContactMethod" text="Email" [reveal]="emailReveal">
+                  <ng-template #emailReveal>
+                    <goab-form-item label="Email address">
+                      <goab-input name="email" formControlName="emailAddress"></goab-input>
+                    </goab-form-item>
+                  </ng-template>
+                </goab-checkbox>
+                <goab-checkbox formControlName="phoneContactMethod" text="Phone" [reveal]="phoneNumberReveal">
+                  <ng-template #phoneNumberReveal>
+                    <goab-form-item label="Phone number">
+                      <goab-input name="phone" formControlName="phoneNumber"></goab-input>
+                    </goab-form-item>
+                  </ng-template>
+                </goab-checkbox>
+                <goab-checkbox formControlName="textContactMethod" text="Text message" [reveal]="textContactMethodReveal">
+                  <ng-template #textContactMethodReveal>
+                    <goab-form-item label="Mobile phone number">
+                      <goab-input name="phone" formControlName="phoneNumber"></goab-input>
+                    </goab-form-item>
+                  </ng-template>
+                </goab-checkbox>
+              </goab-form-item>
+            `}
+          />
+        )}
+
+        {version === "new" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="angular"
+            allowCopy={true}
+            code={`
+        export class ExampleComponent {
+          form!: FormGroup;
+          constructor(private fb: FormBuilder) {
+            this.form = this.fb.group({
+            emailContactMethod: [false],
+            phoneContactMethod: [false],
+            textContactMethod: [false],
+            emailAddress: [""],
+            phoneNumber: [""],
+          });
+        }
+        }
+     `}
+          />
+        )}
+
+        {/*React*/}
+        {version === "new" && (
+          <CodeSnippet
+            lang="typescript"
+            tags="react"
+            allowCopy={true}
+            code={`
+             <GoabFormItem label="How would you like to be contacted?">
+                <GoabCheckbox
+                  checked={false}
+                  name="optionOne"
+                  text="Email"
+                  reveal={
+                    <GoabFormItem label="Email address">
+                      <GoabInput name="email" onChange={(e) =>  {/** do nothing */}} value="" />
+                    </GoabFormItem>
+                  }
+                />
+                <GoabCheckbox
+                  checked={false}
+                  name="optionTwo"
+                  text="Phone"
+                  reveal={
+                    <GoabFormItem label="Phone number">
+                      <GoabInput name="phoneNumber" onChange={(e) => {/** do nothing */}} value="" />
+                    </GoabFormItem>
+                  }
+                />
+                <GoabCheckbox
+                  checked={false}
+                  name="optionThree"
+                  text="Text message"
+                  reveal={
+                    <GoabFormItem label="Mobile phone number">
+                      <GoabInput name="mobilePhoneNumber" onChange={(e) =>  {/** do nothing */}} value="" />
+                    </GoabFormItem>
+                  }
+                />
+              </GoabFormItem>
+            `}
+          />
+        )}
+
+        <GoabFormItem label="How would you like to be contacted?">
+          <GoabCheckbox
+            checked={false}
+            name="optionOne"
+            text="Email"
+            reveal={
+              <GoabFormItem label="Email address">
+                <GoabInput name="email" onChange={() => {}} value="" />
+              </GoabFormItem>
+            }
+          />
+          <GoabCheckbox
+            checked={false}
+            name="optionTwo"
+            text="Phone"
+            reveal={
+              <GoabFormItem label="Phone number">
+                <GoabInput name="phoneNumber" onChange={() => {}} value="" />
+              </GoabFormItem>
+            }
+          />
+          <GoabCheckbox
+            checked={false}
+            name="optionThree"
+            text="Text message"
+            reveal={
+              <GoabFormItem label="Mobile phone number">
+                <GoabInput name="mobilePhoneNumber" onChange={() => {}} value="" />
+              </GoabFormItem>
+            }
+          />
+        </GoabFormItem>
+      </Sandbox>
+      <GoabSpacer vSpacing={"1"}></GoabSpacer>
+      {version === "old" && language === "react" && (
+        <OldComponentBanner
+          componentName={"Reveal input based on selection"}
+          language={language}
+          type="example"
+        />
+      )}
+    </>
+  );
+};