Skip to content

Commit eb6173e

Browse files
twjefferytwjeffery
authored
Merge pull request #377 from GovAlta/alpha
Prod release
2 parents 71b582a + 9a155a3 commit eb6173e

7 files changed

Lines changed: 115 additions & 112 deletions

File tree

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"eslint-plugin-react-refresh": "^0.3.5",
3737
"prettier": "2.4.1",
3838
"typescript": "^5.4.2",
39-
"vite": "^5.4.16",
39+
"vite": "^5.4.19",
4040
"lodash": "^4.17.21",
4141
"@types/lodash": "^4.17.16"
4242
}

‎src/examples/pagination/PaginationExamples.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const PaginationExamples = () => {
6161
<>
6262

6363
<SandboxHeader
64-
exampleTitle="Show # results per page"
64+
exampleTitle="Set items per page and navigate multiple pages in a table"
6565
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6311-118312&t=X0IQW5flDDaj8Vyg-4">
6666
</SandboxHeader>
6767
<Sandbox fullWidth skipRender>

‎src/examples/radio/RadioExamples.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
1+
12
import { RadioSlottedDescriptionExample } from "@examples/radio/RadioSlottedDescriptionExample.tsx";
2-
import { RadioMaxWidthExample } from "@examples/radio/RadioMaxWidthExample.tsx";
3+
import { RadioYesNoExample } from "@examples/radio/RadioYesNoExample.tsx";
34
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
45

56
export default function RadioExamples () {
67

78
return (
89
<>
910
<SandboxHeader
10-
exampleTitle="Include a link in the helper text of an option"
11-
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6311-133375&t=X0IQW5flDDaj8Vyg-4">
11+
exampleTitle="Radio items with description"
12+
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6844-1982128&t=esZgJXviyArNDmmo-1">
1213
</SandboxHeader>
1314
<RadioSlottedDescriptionExample/>
1415

1516
<SandboxHeader
16-
exampleTitle="Max width on long radio items"
17-
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6311-133539&t=X0IQW5flDDaj8Vyg-4">
17+
exampleTitle="Yes or no question horizontally"
18+
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6844-165351&t=esZgJXviyArNDmmo-1">
1819
</SandboxHeader>
19-
<RadioMaxWidthExample/>
20+
<RadioYesNoExample/>
2021
</>
2122
);
2223
}

‎src/examples/radio/RadioMaxWidthExample.tsx‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎src/examples/radio/RadioSlottedDescriptionExample.tsx‎

Lines changed: 47 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,14 @@ export const RadioSlottedDescriptionExample = () => {
1616
tags="angular"
1717
allowCopy={true}
1818
code={`
19-
<goa-form-item label="Select one option">
20-
<goa-radio-group name="selectOne" value="1" (_change)="onChange($event)">
21-
<goa-radio-item value="1" label="Option one">
22-
<span slot="description">Help text with a <a href="#">link</a>.</span>
19+
<goa-form-item label="How do you want to sign in?">
20+
<goa-radio-group name="selectOne" (_change)="onChange($event)">
21+
<goa-radio-item value="1" label="Sign in as a business">
22+
<span slot="description">Use the account associated with the business</span>
23+
</goa-radio-item>
24+
<goa-radio-item value="2" label="Sign in as an individual">
25+
<span slot="description">If you don't have a Alberta.ca login, you can create one</span>
2326
</goa-radio-item>
24-
<goa-radio-item value="2" label="Option two" />
25-
<goa-radio-item value="3" label="Option three" />
2627
</goa-radio-group>
2728
</goa-form-item>
2829
`}
@@ -53,15 +54,18 @@ export const RadioSlottedDescriptionExample = () => {
5354
tags="angular"
5455
allowCopy={true}
5556
code={`
56-
<goab-form-item label="Select one option" [formGroup]="form">
57+
<goab-form-item label="How do you want to sign in?" [formGroup]="form">
5758
<goab-radio-group name="selectOne" formControlName="selectOne">
58-
<goab-radio-item value="1" label="Option one" [description]="optionOneDescription">
59+
<goab-radio-item value="1" label="Sign in as a business" [description]="optionOneDescription">
5960
<ng-template #optionOneDescription>
60-
Help text with a <a href="#">link</a>.
61+
Use the account associated with the business
62+
</ng-template>
63+
</goab-radio-item>
64+
<goab-radio-item value="2" label="Sign in as an individual" [description]="optionTwoDescription">
65+
<ng-template #optionTwoDescription>
66+
If you don't have a Alberta.ca login, you can create one
6167
</ng-template>
6268
</goab-radio-item>
63-
<goab-radio-item value="2" label="Option two"></goab-radio-item>
64-
<goab-radio-item value="3" label="Option three"></goab-radio-item>
6569
</goab-radio-group>
6670
</goab-form-item>
6771
`}
@@ -75,15 +79,18 @@ export const RadioSlottedDescriptionExample = () => {
7579
tags="react"
7680
allowCopy={true}
7781
code={`
78-
<GoAFormItem label="Select one option">
79-
<GoARadioGroup name="selectOne" value="1" onChange={onChange}>
82+
<GoAFormItem label="How do you want to sign in?">
83+
<GoARadioGroup name="selectOne" onChange={onChange}>
84+
<GoARadioItem
85+
value="1"
86+
label="Sign in as a business"
87+
description="Use the account associated with the business"
88+
/>
8089
<GoARadioItem
81-
value="1"
82-
label="Option one"
83-
description={<span>Help text with a <a href="#">link</a>.</span>}
84-
/>
85-
<GoARadioItem value="2" label="Option two" />
86-
<GoARadioItem value="3" label="Option three" />
90+
value="2"
91+
label="Sign in as an individual"
92+
description="If you don't have a Alberta.ca login, you can create one"
93+
/>
8794
</GoARadioGroup>
8895
</GoAFormItem>
8996
`}
@@ -96,36 +103,38 @@ export const RadioSlottedDescriptionExample = () => {
96103
tags="react"
97104
allowCopy={true}
98105
code={`
99-
<GoabFormItem label="Select one option">
100-
<GoabRadioGroup name="selectOne" value="1" onChange={onChange}>
106+
<GoabFormItem label="How do you want to sign in?">
107+
<GoabRadioGroup name="selectOne" onChange={onChange}>
101108
<GoabRadioItem
102-
value="1"
103-
label="Option one"
104-
description={<span>Help text with a <a href="#">link</a>.</span>}
105-
/>
106-
<GoabRadioItem value="2" label="Option two" />
107-
<GoabRadioItem value="3" label="Option three" />
109+
value="1"
110+
label="Sign in as a business"
111+
description="Use the account associated with the business"
112+
/>
113+
<GoabRadioItem
114+
value="2"
115+
label="Sign in as an individual"
116+
description="If you don't have a Alberta.ca login, you can create one"
117+
/>
108118
</GoabRadioGroup>
109119
</GoabFormItem>
110120
`}
111121
/>
112122
)}
113123

114-
<GoabFormItem label="Select one option">
115-
<GoabRadioGroup name="selectOne" value="1" onChange={noop}>
124+
<GoabFormItem label="How do you want to sign in?">
125+
<GoabRadioGroup name="selectOne" onChange={noop}>
116126
<GoabRadioItem
117127
value="1"
118-
label="Option one"
119-
description={
120-
<span>
121-
Help text with a <a href="#">link</a>.
122-
</span>
123-
}
128+
label="Sign in as a business"
129+
description="Use the account associated with the business"
130+
/>
131+
<GoabRadioItem
132+
value="2"
133+
label="Sign in as an individual"
134+
description="If you don't have a Alberta.ca login, you can create one"
124135
/>
125-
<GoabRadioItem value="2" label="Option two" />
126-
<GoabRadioItem value="3" label="Option three" />
127136
</GoabRadioGroup>
128137
</GoabFormItem>
129138
</Sandbox>
130139
)
131-
}
140+
}

‎src/examples/radio/RadioYesNoExample.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Sandbox } from "@components/sandbox";
2+
import { GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
3+
import { useContext} from "react";
4+
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
5+
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
6+
7+
export const RadioYesNoExample = () => {
8+
const {version} = useContext(LanguageVersionContext);
9+
const noop = () => {}
10+
return (
11+
<Sandbox fullWidth flags={["reactive"]} allow={["form"]} skipRenderOnly={"react"}>
12+
{/*We skipRenderOnly React because it is quite complex to remove value (2 els have value: radio-item and radio-group which radio-group is the one should remove value*/}
13+
{version === "old" && (
14+
<CodeSnippet
15+
lang="typescript"
16+
tags="react"
17+
allowCopy={true}
18+
code={`
19+
<GoAFormItem label="Have you changed your name?" helpText="This includes changing your last name or spelling your name differently">
20+
<GoARadioGroup orientation="horizontal" name="selectOne" onChange={onChange}>
21+
<GoARadioItem value="1" label="Yes" />
22+
<GoARadioItem value="2" label="No" />
23+
</GoARadioGroup>
24+
</GoAFormItem>
25+
`}
26+
/>
27+
)}
28+
29+
{version === "new" && (
30+
<CodeSnippet
31+
lang="typescript"
32+
tags="react"
33+
allowCopy={true}
34+
code={`
35+
<GoabFormItem label="Have you changed your name?" helpText="This includes changing your last name or spelling your name differently">
36+
<GoabRadioGroup orientation="horizontal" name="selectOne" onChange={onChange}>
37+
<GoabRadioItem value="1" label="Yes" />
38+
<GoabRadioItem value="2" label="No" />
39+
</GoabRadioGroup>
40+
</GoabFormItem>
41+
`}
42+
/>
43+
)}
44+
45+
<form>
46+
<GoabFormItem label="Have you changed your name?" helpText="This includes changing your last name or spelling your name differently">
47+
<GoabRadioGroup orientation="horizontal" name="selectOne" onChange={noop}>
48+
<GoabRadioItem value="1" label="Yes" />
49+
<GoabRadioItem value="2" label="No" />
50+
</GoabRadioGroup>
51+
</GoabFormItem>
52+
</form>
53+
</Sandbox>
54+
);
55+
};

0 commit comments

Comments
 (0)