Skip to content

Commit 0bea355

Browse files
ArakTaiRothArakTaiRoth
authored
Merge pull request #386 from GovAlta/alpha
Production Release - June 17 / 2025
2 parents eb6173e + 4792af2 commit 0bea355

18 files changed

Lines changed: 1348 additions & 223 deletions

‎package-lock.json‎

Lines changed: 15 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
"prettier": "npx prettier . --write"
1313
},
1414
"dependencies": {
15-
"@abgov/react-components": "6.4.1",
16-
"@abgov/ui-components-common": "1.4.0",
17-
"@abgov/web-components": "1.34.0",
15+
"@abgov/react-components": "6.5.0",
16+
"@abgov/ui-components-common": "1.5.0",
17+
"@abgov/web-components": "1.35.1",
1818
"@faker-js/faker": "^8.3.1",
1919
"highlight.js": "^11.8.0",
2020
"js-cookie": "^3.0.5",

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import BugVerificationPage from "@routes/get-started/developers/BugVerification"
3939
import GetStartedLayout from "@routes/get-started/GetStartedLayout";
4040
import GetStartedOverviewPage from "@routes/get-started/GetStartedOverview";
4141
import QATestingOverviewPage from "@routes/get-started/qa-testing/QATestingOverview";
42+
import ComponentLifecyclePage from "@routes/get-started/ComponentLifecycle";
4243
import ContributePage from "@routes/get-started/Contribute";
4344
import SupportPage from "@routes/get-started/Support";
4445
import RequestFeaturePage from "@routes/get-started/RequestFeature";
@@ -109,6 +110,7 @@ const router = createBrowserRouter(
109110
<Route path="qa-testing">
110111
<Route index element={<QATestingOverviewPage />} />
111112
</Route>
113+
<Route path="component-lifecycle" element={<ComponentLifecyclePage />} />
112114
<Route path="lts-policy">
113115
<Route index element={<LtsPolicyPage />} />
114116
</Route>

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import { Link } from "react-router-dom";
55
interface OldComponentBannerProps {
66
componentName: string;
77
language: string;
8+
type?: "example" | "component"
89
}
910

10-
export const OldComponentBanner = ({ componentName, language }: OldComponentBannerProps) => {
11+
export const OldComponentBanner = ({ componentName, language, type = "component" }: OldComponentBannerProps) => {
1112
return (
12-
<GoabCallout type="important" size={"medium"} heading={
13-
`${componentName} component not available in this version`
13+
<GoabCallout type="important" size={"medium"} mt="m" heading={
14+
`${componentName} ${type} is not available in this version`
1415
}>
15-
This component is only available in {language == "angular" ? ANGULAR_VERSIONS.NEW.label.substring(0,2).toUpperCase()
16+
This {type} is only available in {language == "angular" ? ANGULAR_VERSIONS.NEW.label.substring(0,2).toUpperCase()
1617
: REACT_VERSIONS.NEW.label.substring(0,2).toUpperCase()} of the design system components.
1718
<br/>
1819
<Link to="/get-started/developers/update">View upgrade guide</Link>{" "}

‎src/examples/checkbox/CheckboxExamples.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import CheckboxDescriptionExample from "@examples/checkbox/CheckboxDescriptionExample.tsx";
22
import CheckboxNoneOrManyExample from "@examples/checkbox/CheckboxNoneOrManyExample.tsx";
3+
import { CheckboxRevealSlotExample } from "@examples/checkbox/CheckboxRevealSlotExample.tsx";
34
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
45

56
export const CheckboxExamples = () => {
@@ -17,5 +18,11 @@ export const CheckboxExamples = () => {
1718
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6564-70176&t=kFEYlzR03SibmVz9-1">
1819
</SandboxHeader>
1920
<CheckboxNoneOrManyExample/>
21+
22+
<SandboxHeader
23+
exampleTitle="Reveal input based on selection"
24+
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-131069&m=dev">
25+
</SandboxHeader>
26+
<CheckboxRevealSlotExample/>
2027
</>;
2128
}

‎src/examples/checkbox/CheckboxRevealSlotExample.tsx‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
import { GoabCheckbox, GoabFormItem, GoabInput, GoabSpacer } from "@abgov/react-components";
2+
import { Sandbox } from "@components/sandbox";
3+
import { useContext } from "react";
4+
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
5+
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
6+
import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx";
7+
8+
export const CheckboxRevealSlotExample = () => {
9+
const { version, language } = useContext(LanguageVersionContext);
10+
return (
11+
<>
12+
{/*Skip rendering because we use reveal that isn't supported by sandbox*/}
13+
<Sandbox fullWidth skipRender>
14+
{/*Angular*/}
15+
{version === "old" && (
16+
<CodeSnippet
17+
lang="typescript"
18+
tags="angular"
19+
allowCopy={true}
20+
code={`
21+
<goa-form-item label="How would you like to be contacted?">
22+
<goa-checkbox name="optionOne" text="Email" value="email" [checked]="optionOneChecked" (_change)="updateContactMethod($event)">
23+
<div slot="reveal">
24+
<goa-form-item label="Email address">
25+
<goa-input name="email" [value]="emailAddress" (_change)="updateEmailAddress($event)"></goa-input>
26+
</goa-form-item>
27+
</div>
28+
</goa-checkbox>
29+
<goa-checkbox name="optionTwo" text="Phone" value="phone" [checked]="optionTwoChecked" (_change)="updateContactMethod($event)">
30+
<div slot="reveal">
31+
<goa-form-item label="Phone number">
32+
<goa-input name="phone" [value]="phoneNumber" (_change)="updatePhoneNumber($event)"></goa-input>
33+
</goa-form-item>
34+
</div>
35+
</goa-checkbox>
36+
<goa-checkbox name="optionThree" text="Text message" value="text" [checked]="optionThreeChecked" (_change)="updateContactMethod($event)">
37+
<div slot="reveal">
38+
<goa-form-item label="Mobile phone number">
39+
<goa-input name="phone" [value]="phoneNumber" (_change)="updatePhoneNumber($event)"></goa-input>
40+
</goa-form-item>
41+
</div>
42+
</goa-checkbox>
43+
</goa-form-item>
44+
`}
45+
/>
46+
)}
47+
48+
{version === "old" && (
49+
<CodeSnippet
50+
lang="typescript"
51+
tags="angular"
52+
allowCopy={true}
53+
code={`
54+
export class ExampleComponent {
55+
phoneNumber = "";
56+
emailAddress = "";
57+
optionOneChecked = false;
58+
optionTwoChecked = false;
59+
optionThreeChecked = false;
60+
61+
updateContactMethod(event: any) {
62+
const value = (event as CustomEvent).detail.value;
63+
if (value === "email") {
64+
this.optionOneChecked = true;
65+
}
66+
if (value === "phone") {
67+
this.optionTwoChecked = true;
68+
}
69+
if (value === "text") {
70+
this.optionThreeChecked = true;
71+
}
72+
}
73+
updatePhoneNumber(event: any) {
74+
this.phoneNumber = (event as CustomEvent).detail.value;
75+
}
76+
updateEmailAddress(event: any) {
77+
this.emailAddress = (event as CustomEvent).detail.value;
78+
}
79+
}
80+
`}
81+
/>
82+
)}
83+
84+
{/*Angular*/}
85+
{version === "new" && (
86+
<CodeSnippet
87+
lang="typescript"
88+
tags="angular"
89+
allowCopy={true}
90+
code={`
91+
<goab-form-item [formGroup]="form" label="How would you like to be contacted?">
92+
<goab-checkbox formControlName="emailContactMethod" text="Email" [reveal]="emailReveal">
93+
<ng-template #emailReveal>
94+
<goab-form-item label="Email address">
95+
<goab-input name="email" formControlName="emailAddress"></goab-input>
96+
</goab-form-item>
97+
</ng-template>
98+
</goab-checkbox>
99+
<goab-checkbox formControlName="phoneContactMethod" text="Phone" [reveal]="phoneNumberReveal">
100+
<ng-template #phoneNumberReveal>
101+
<goab-form-item label="Phone number">
102+
<goab-input name="phone" formControlName="phoneNumber"></goab-input>
103+
</goab-form-item>
104+
</ng-template>
105+
</goab-checkbox>
106+
<goab-checkbox formControlName="textContactMethod" text="Text message" [reveal]="textContactMethodReveal">
107+
<ng-template #textContactMethodReveal>
108+
<goab-form-item label="Mobile phone number">
109+
<goab-input name="phone" formControlName="phoneNumber"></goab-input>
110+
</goab-form-item>
111+
</ng-template>
112+
</goab-checkbox>
113+
</goab-form-item>
114+
`}
115+
/>
116+
)}
117+
118+
{version === "new" && (
119+
<CodeSnippet
120+
lang="typescript"
121+
tags="angular"
122+
allowCopy={true}
123+
code={`
124+
export class ExampleComponent {
125+
form!: FormGroup;
126+
constructor(private fb: FormBuilder) {
127+
this.form = this.fb.group({
128+
emailContactMethod: [false],
129+
phoneContactMethod: [false],
130+
textContactMethod: [false],
131+
emailAddress: [""],
132+
phoneNumber: [""],
133+
});
134+
}
135+
}
136+
`}
137+
/>
138+
)}
139+
140+
{/*React*/}
141+
{version === "new" && (
142+
<CodeSnippet
143+
lang="typescript"
144+
tags="react"
145+
allowCopy={true}
146+
code={`
147+
<GoabFormItem label="How would you like to be contacted?">
148+
<GoabCheckbox
149+
checked={false}
150+
name="optionOne"
151+
text="Email"
152+
reveal={
153+
<GoabFormItem label="Email address">
154+
<GoabInput name="email" onChange={(e) => {/** do nothing */}} value="" />
155+
</GoabFormItem>
156+
}
157+
/>
158+
<GoabCheckbox
159+
checked={false}
160+
name="optionTwo"
161+
text="Phone"
162+
reveal={
163+
<GoabFormItem label="Phone number">
164+
<GoabInput name="phoneNumber" onChange={(e) => {/** do nothing */}} value="" />
165+
</GoabFormItem>
166+
}
167+
/>
168+
<GoabCheckbox
169+
checked={false}
170+
name="optionThree"
171+
text="Text message"
172+
reveal={
173+
<GoabFormItem label="Mobile phone number">
174+
<GoabInput name="mobilePhoneNumber" onChange={(e) => {/** do nothing */}} value="" />
175+
</GoabFormItem>
176+
}
177+
/>
178+
</GoabFormItem>
179+
`}
180+
/>
181+
)}
182+
183+
<GoabFormItem label="How would you like to be contacted?">
184+
<GoabCheckbox
185+
checked={false}
186+
name="optionOne"
187+
text="Email"
188+
reveal={
189+
<GoabFormItem label="Email address">
190+
<GoabInput name="email" onChange={() => {}} value="" />
191+
</GoabFormItem>
192+
}
193+
/>
194+
<GoabCheckbox
195+
checked={false}
196+
name="optionTwo"
197+
text="Phone"
198+
reveal={
199+
<GoabFormItem label="Phone number">
200+
<GoabInput name="phoneNumber" onChange={() => {}} value="" />
201+
</GoabFormItem>
202+
}
203+
/>
204+
<GoabCheckbox
205+
checked={false}
206+
name="optionThree"
207+
text="Text message"
208+
reveal={
209+
<GoabFormItem label="Mobile phone number">
210+
<GoabInput name="mobilePhoneNumber" onChange={() => {}} value="" />
211+
</GoabFormItem>
212+
}
213+
/>
214+
</GoabFormItem>
215+
</Sandbox>
216+
<GoabSpacer vSpacing={"1"}></GoabSpacer>
217+
{version === "old" && language === "react" && (
218+
<OldComponentBanner
219+
componentName={"Reveal input based on selection"}
220+
language={language}
221+
type="example"
222+
/>
223+
)}
224+
</>
225+
);
226+
};

0 commit comments

Comments
 (0)