Skip to content

Commit 98b332a

Browse files
ArakTaiRothArakTaiRoth
authored
Merge pull request #441 from GovAlta/alpha
Production Release - October 3 / 2025
2 parents e6ff051 + 5fc7497 commit 98b332a

File tree

15 files changed

+668
-712
lines changed

15 files changed

+668
-712
lines changed

‎package-lock.json‎

Lines changed: 83 additions & 638 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.7.1-alpha.1",
16-
"@abgov/ui-components-common": "1.7.0",
17-
"@abgov/web-components": "1.37.1-alpha.2",
15+
"@abgov/react-components": "6.8.0-alpha.3",
16+
"@abgov/ui-components-common": "1.8.0-alpha.3",
17+
"@abgov/web-components": "1.38.0-alpha.5",
1818
"@faker-js/faker": "^8.3.1",
1919
"highlight.js": "^11.8.0",
2020
"js-cookie": "^3.0.5",

‎src/components/sandbox/SandboxProperties.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export function SandboxProperties({ properties = [], onChange }: Props) {
8080
case "list":
8181
case "dropdown":
8282
return (
83-
<GoabDropdown key={p.name} name={p.name} value={p.value} onChange={onListChange}>
83+
<GoabDropdown key={p.name} name={p.name} width="100%" value={p.value} onChange={onListChange}>
8484
{p.options.map(option => (
8585
<GoabDropdownItem
8686
value={option || ""}
@@ -95,6 +95,7 @@ export function SandboxProperties({ properties = [], onChange }: Props) {
9595
<GoabDropdown
9696
key={p.name}
9797
name={p.name}
98+
width="100%"
9899
filterable
99100
leadingIcon="search"
100101
value={p.value}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ export function HelpButton() {
2626
return (
2727
<GoabTooltip content="Version and framework info">
2828
<GoabIconButton ml={"xs"}
29-
mb={"2xs"}
3029
variant="color"
3130
size="small"
3231
icon="help-circle"

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

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -85,30 +85,22 @@ export const VersionLanguageSwitcher = () => {
8585
return str.charAt(0).toUpperCase() + str.slice(1);
8686
}
8787

88-
const openLanguagePopOver = (e: React.MouseEvent<HTMLAnchorElement>) => {
89-
e.preventDefault();
90-
};
91-
92-
const openVersionPopOver = (e: React.MouseEvent<HTMLAnchorElement>) => {
93-
e.preventDefault();
94-
};
95-
9688
const getCurrentVersionLabel = (language: string, version: string) => {
9789
if (language === "react") {
9890
return version === "new" ? REACT_VERSIONS.NEW.label : REACT_VERSIONS.OLD.label;
99-
} if (language === "angular") {
91+
} if (language === "angular") {
10092
return version === "new" ? ANGULAR_VERSIONS.NEW.label : ANGULAR_VERSIONS.OLD.label;
10193
}
10294
}
10395

10496
return (
105-
<>
106-
<div className="version-language-switcher">
97+
<div className="version-language-switcher">
10798
<GoabPopover
10899
target={
109-
<a className="version-language-switcher__heading" href="#" id="language-switcher" onClick={e => openLanguagePopOver(e)}>
110-
<GoabIcon type="chevron-down" size="small"></GoabIcon> {capitalizeFirstLetter(language)}
111-
</a>
100+
<div className="menu-link">
101+
<GoabIcon type="chevron-down" size="small" />
102+
{ capitalizeFirstLetter(language) }
103+
</div>
112104
}
113105
padded={false}>
114106
<>
@@ -121,10 +113,10 @@ export const VersionLanguageSwitcher = () => {
121113
</GoabPopover>
122114

123115
<GoabPopover target={
124-
<a className="version-language-switcher__heading" href="#"
125-
onClick={e => openVersionPopOver(e)}>
126-
<GoabIcon type="chevron-down" size="small"></GoabIcon> {getCurrentVersionLabel(language, version)}
127-
</a>
116+
<div className="menu-link">
117+
<GoabIcon type="chevron-down" size="small" />
118+
{ getCurrentVersionLabel(language, version) }
119+
</div>
128120
} padded={false}>
129121
<>
130122
{["new", "old"].map(ver => (
@@ -134,7 +126,6 @@ export const VersionLanguageSwitcher = () => {
134126
))}
135127
</>
136128
</GoabPopover>
137-
</div>
138-
</>
129+
</div>
139130
);
140131
}

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,22 @@
3030
}
3131

3232
.version-language-switcher {
33-
height: 20px;
3433
display: flex;
3534
flex-direction: row;
3635
align-items: center; /* vertically align content */
3736
gap: var(--goa-space-s);
38-
margin-bottom: var(--goa-space-xs);
37+
}
38+
39+
.menu-link {
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
color: var(--goa-color-interactive-default);
44+
}
45+
46+
.menu-link:hover {
47+
color: var(--goa-color-interactive-hover);
48+
text-decoration: underline;
3949
}
4050

4151
@media (max-width: 623px) {

‎src/global-constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ export const DEFAULT_VERSION = "old";
33
export const DEFAULT_LANGUAGE = "react";
44

55
// Array of 'New' components
6-
export const NEW_COMPONENTS = ["Drawer", "Temporary notification"];
6+
export const NEW_COMPONENTS = ["Drawer", "Temporary notification", "Checkbox list"];

‎src/routes/components/Badge.tsx‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,35 @@ export default function BadgePage() {
5353
label: "Type",
5454
type: "list",
5555
name: "type",
56-
options: ["success", "important", "information", "emergency", "dark", "midtone", "light"],
56+
options: [
57+
"information",
58+
"success",
59+
"important",
60+
"emergency",
61+
"dark",
62+
"midtone",
63+
"light",
64+
"archived",
65+
"aqua",
66+
"black",
67+
"blue",
68+
"green",
69+
"orange",
70+
"pink",
71+
"red",
72+
"violet",
73+
"white",
74+
"yellow",
75+
"aqua-light",
76+
"black-light",
77+
"blue-light",
78+
"green-light",
79+
"orange-light",
80+
"pink-light",
81+
"red-light",
82+
"violet-light",
83+
"yellow-light",
84+
],
5785
value: "information",
5886
},
5987
{
@@ -79,7 +107,7 @@ export default function BadgePage() {
79107
const oldComponentProperties: ComponentProperty[] = [
80108
{
81109
name: "type",
82-
type: "success | important | information | emergency | dark | midtone | light",
110+
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",
83111
description: "Define the context and colour of the badge",
84112
required: true,
85113
},
@@ -128,7 +156,7 @@ export default function BadgePage() {
128156
const componentProperties: ComponentProperty[] = [
129157
{
130158
name: "type",
131-
type: "GoabBadgeType(success | important | information | emergency | dark | midtone | light)",
159+
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)",
132160
description: "Define the context and colour of the badge",
133161
required: true,
134162
},

‎src/routes/components/Checkbox.tsx‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default function CheckboxPage() {
5555
name: "maxWidth",
5656
requirement: "optional",
5757
value: "",
58-
},
58+
}
5959
]);
6060
const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({
6161
label: "Basic",
@@ -230,11 +230,16 @@ export default function CheckboxPage() {
230230
type: "(event: GoabCheckboxOnChangeDetail) => void",
231231
description: "Callback function when checkbox value is changed.",
232232
},
233+
{
234+
name: "indeterminate",
235+
type: "boolean",
236+
description: "Displays the checkbox styled with a dash when set to true",
237+
},
233238
TestIdProperty,
234239
MarginProperty,
235240
];
236241

237-
const noop = () => { };
242+
const noop = () => {};
238243

239244
function onChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
240245
const missingProps = {
@@ -284,10 +289,10 @@ export default function CheckboxPage() {
284289
/>
285290

286291
{version === "old" && <CodeSnippet
287-
lang="typescript"
288-
tags={["angular", "reactive"]}
289-
allowCopy={true}
290-
code={`
292+
lang="typescript"
293+
tags={["angular", "reactive"]}
294+
allowCopy={true}
295+
code={`
291296
import { FormControl } from "@angular/forms";
292297
export class SomeOtherComponent {
293298
itemFormCtrl = new FormControl();
@@ -296,10 +301,10 @@ export default function CheckboxPage() {
296301
/>}
297302

298303
{version === "new" && <CodeSnippet
299-
lang="typescript"
300-
tags={["angular", "reactive"]}
301-
allowCopy={true}
302-
code={`
304+
lang="typescript"
305+
tags={["angular", "reactive"]}
306+
allowCopy={true}
307+
code={`
303308
export class SomeOtherComponent {
304309
form!: FormGroup;
305310
constructor(private fb: FormBuilder) {
@@ -312,10 +317,10 @@ export default function CheckboxPage() {
312317
/>}
313318

314319
{version === "new" && <CodeSnippet
315-
lang="typescript"
316-
tags={["angular", "template-driven"]}
317-
allowCopy={true}
318-
code={`
320+
lang="typescript"
321+
tags={["angular", "template-driven"]}
322+
allowCopy={true}
323+
code={`
319324
export class SomeOtherComponent {
320325
item=false;
321326
checkboxOnChange(event: GoabCheckboxOnChangeDetail) {
@@ -327,15 +332,15 @@ export default function CheckboxPage() {
327332
/>}
328333

329334
{version === "new" && <CodeSnippet
330-
lang="typescript"
331-
tags="react"
332-
allowCopy={true}
333-
code={`
335+
lang="typescript"
336+
tags="react"
337+
allowCopy={true}
338+
code={`
334339
function checkboxOnChange(event: GoabCheckboxOnChangeDetail) {
335340
console.log(event.value);
336341
}
337342
`}
338-
/>
343+
/>
339344
}
340345

341346
<form>

0 commit comments

Comments
 (0)