Skip to content

Commit 04bdf39

Browse files
chrisolsenchrisolsen
authored
Merge pull request #371 from GovAlta/alpha
Release - May 20
2 parents c488620 + 693c499 commit 04bdf39

24 files changed

Lines changed: 658 additions & 239 deletions

‎package-lock.json‎

Lines changed: 12 additions & 12 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.3.0",
16-
"@abgov/ui-components-common": "1.3.0",
17-
"@abgov/web-components": "1.33.0",
15+
"@abgov/react-components": "6.4.1",
16+
"@abgov/ui-components-common": "1.4.0",
17+
"@abgov/web-components": "1.34.0",
1818
"@faker-js/faker": "^8.3.1",
1919
"highlight.js": "^11.8.0",
2020
"js-cookie": "^3.0.5",

‎public/images/governance-process.png‎

144 KB
Loading

‎src/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import ReportBugPage from "@routes/get-started/ReportBug";
4646
import RoadmapPage from "@routes/get-started/Roadmap";
4747
import SupportedBrowsersPage from "@routes/get-started/developers/SupportedBrowsers";
4848
import UxDesignerPage from "@routes/get-started/designers/UxDesigner";
49+
import { LtsPolicyPage } from "@routes/get-started/LtsPolicyPage.tsx";
4950

5051
// Content Pages
5152

@@ -62,6 +63,7 @@ import ComponentNotFound from "@routes/not-found/NotFound.tsx";
6263
import { LanguageVersionProvider } from "@contexts/LanguageVersionContext.tsx";
6364
import DevelopersUpgradePage from "@routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx";
6465

66+
6567
const router = createBrowserRouter(
6668
createRoutesFromElements(
6769
<Route path="/" element={<Root />}>
@@ -96,6 +98,9 @@ const router = createBrowserRouter(
9698
<Route path="qa-testing">
9799
<Route index element={<QATestingOverviewPage />} />
98100
</Route>
101+
<Route path="lts-policy">
102+
<Route index element={<LtsPolicyPage />} />
103+
</Route>
99104
<Route path="contribute">
100105
<Route index element={<ContributePage />} />
101106
</Route>

‎src/components/card-lite/CardLite.css‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
.card-lite .title {
2-
font: var(--goa-typography-heading-l);
3-
margin-bottom: var(--goa-space-m);
1+
.card-lite {
2+
text-decoration: none;
43
}
54

6-
.card-lite .description {
7-
font-size: var(--goa-font-size-4);
8-
margin-bottom: var(--goa-space-xs);
5+
.card-heading {
6+
color: black;
7+
display: inline-block;
98
}
109

11-
.card-content a {
12-
font-size: var(--goa-font-size-5);
10+
.card-description {
11+
color: black;
12+
display: block;
1313
}
1414

15-
.card-lite .link {
16-
font-size: var(--goa-font-size-5);
15+
a:hover .card-heading {
16+
color: var(--goa-color-interactive-hover);
17+
text-decoration: underline;
1718
}
1819

19-
@media screen and (min-width: 1231px) {
20-
.card-lite {
21-
max-width: 300px;
22-
}
20+
.card-lite:focus-visible {
21+
outline: 3px solid var(--goa-color-interactive-focus);
22+
outline-offset: 4px;
23+
border-radius: 4px;
2324
}
25+

‎src/components/card-lite/CardLite.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { ReactNode } from "react";
2-
import { Link } from "react-router-dom";
31
import "./CardLite.css";
2+
import { ReactNode } from "react";
3+
import { GoabLink, GoabText } from "@abgov/react-components";
44

55
export interface Props {
66
title: string;
@@ -11,13 +11,17 @@ export interface Props {
1111

1212
export function CardLite(props: Props) {
1313
return (
14-
<div className="card-lite">
15-
<div className="title">{props.title}</div>
16-
<div className="description">{props.description}</div>
17-
<div className="link">
18-
<Link to={props.linkTo}>{props.linkDisplay}</Link>
14+
<a href={props.linkTo} className="card-lite">
15+
<div>
16+
<GoabText size="heading-m" mt="none" mb="m">
17+
<b className="card-heading">{props.title}</b>
18+
</GoabText>
19+
<GoabText size="body-m" mt="none" mb="xs">
20+
<div className="card-description">{props.description}</div>
21+
</GoabText>
22+
<GoabLink>{props.linkDisplay}</GoabLink>
1923
</div>
20-
</div>
24+
</a>
2125
);
2226
}
2327

‎src/components/sandbox/Sandbox.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
.sandbox-note {
22
color: #666;
3+
margin-top: var(--goa-space-m);
4+
margin-bottom: var(--goa-space-2xl);
5+
font: var(--goa-typography-body-s);
36
}
47

58
.sandbox-render {

‎src/components/sandbox/Sandbox.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { ReactElement, ReactNode, useContext, useEffect, useState } from "react";
2+
import { GoabCallout } from "@abgov/react-components";
3+
import { GoabCalloutType } from "@abgov/ui-components-common";
24

35
import SandboxProperties from "./SandboxProperties";
46
import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
@@ -22,7 +24,7 @@ type Serializer = (el: any, properties: ComponentBinding[]) => string;
2224
interface SandboxProps {
2325
properties?: ComponentBinding[];
2426
formItemProperties?: ComponentBinding[];
25-
note?: string;
27+
note?: string | { type?: GoabCalloutType; heading?: string; content: string };
2628
fullWidth?: boolean;
2729
onChange?: (bindings: ComponentBinding[], props: Record<string, unknown>) => void;
2830
onChangeFormItemBindings?: (bindings: ComponentBinding[], props: Record<string, unknown>) => void;
@@ -140,7 +142,21 @@ export const Sandbox = (props: SandboxProps) => {
140142
</GoabAccordion>
141143
)}
142144
<SandboxCode props={props} formatLang={formatLang} lang={lang} serializers={serializers} version={version} />
143-
{props.note && (<div className="sandbox-note">{props.note}</div>)}
145+
{props.note &&
146+
(typeof props.note === "string" ? (
147+
<p className="sandbox-note">{props.note}</p>
148+
) : (
149+
<GoabCallout
150+
type={props.note.type || "important"}
151+
size="medium"
152+
heading={props.note.heading}
153+
maxWidth="596px"
154+
mt="m"
155+
mb="2xl"
156+
>
157+
{props.note.content}
158+
</GoabCallout>
159+
))}
144160
</>
145161
);
146162
};

‎src/examples/checkbox/CheckboxDescriptionExample.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { GoabCheckbox, GoabFormItem } from "@abgov/react-components";
2+
import { Sandbox } from "@components/sandbox";
3+
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
4+
import { useContext } from "react";
5+
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
6+
7+
export default function CheckboxDescriptionExample () {
8+
const {version} = useContext(LanguageVersionContext);
9+
return (
10+
<>
11+
<Sandbox fullWidth skipRender>
12+
{/*Angular*/}
13+
14+
{version === "old" && <CodeSnippet
15+
lang="typescript"
16+
tags="angular"
17+
allowCopy={true}
18+
code={`
19+
<goa-form-item label="How would you like to be contacted?">
20+
<goa-checkbox checked="true" name="optionOne" text="Email">
21+
<span slot="description">Help text with a <a href="#">link</a>.</span>
22+
</goa-checkbox>
23+
<goa-checkbox checked="false" name="optionTwo" text="Phone" />
24+
<goa-checkbox checked="false" name="optionThree" text="Text message" />
25+
</goa-form-item>
26+
`}
27+
/>}
28+
29+
{version === "new" && <CodeSnippet
30+
lang="typescript"
31+
tags="angular"
32+
allowCopy={true}
33+
code={`
34+
<goab-form-item label="How would you like to be contacted?">
35+
<goab-checkbox [checked]="true" name="optionOne" text="Email" [description]="descriptionTemplate">
36+
<ng-template #descriptionTemplate>
37+
<span>Help text with a <a href="#">link</a>.</span>
38+
</ng-template>
39+
</goab-checkbox>
40+
<goab-checkbox [checked]="false" name="optionTwo" text="Phone" />
41+
<goab-checkbox [checked]="false" name="optionThree" text="Text message" />
42+
</goab-form-item>
43+
`}
44+
/>}
45+
46+
{/*React*/}
47+
{version === "old" && <CodeSnippet
48+
lang="typescript"
49+
tags="react"
50+
allowCopy={true}
51+
code={`
52+
<GoAFormItem label="How would you like to be contacted?">
53+
<GoACheckbox
54+
checked={true}
55+
name="optionOne"
56+
text="Email"
57+
description={<span>Help text with a <a href="#">link</a>.</span>}
58+
/>
59+
<GoACheckbox checked={false} name="optionTwo" text="Phone" />
60+
<GoACheckbox checked={false} name="optionThree" text="Text message" />
61+
</GoAFormItem>
62+
`}
63+
/>}
64+
65+
{version === "new" && <CodeSnippet
66+
lang="typescript"
67+
tags="react"
68+
allowCopy={true}
69+
code={`
70+
<GoabFormItem label="How would you like to be contacted?">
71+
<GoabCheckbox
72+
checked={true}
73+
name="optionOne"
74+
text="Email"
75+
description={<span>Help text with a <a href="#">link</a>.</span>}
76+
/>
77+
<GoabCheckbox checked={false} name="optionTwo" text="Phone" />
78+
<GoabCheckbox checked={false} name="optionThree" text="Text message" />
79+
</GoabFormItem>
80+
`}
81+
/>}
82+
83+
<GoabFormItem label="How would you like to be contacted?">
84+
<GoabCheckbox
85+
checked={true}
86+
name="optionOne"
87+
text="Email"
88+
description={<span>Help text with a <a href="#">link</a>.</span>}
89+
/>
90+
<GoabCheckbox checked={false} name="optionTwo" text="Phone" />
91+
<GoabCheckbox checked={false} name="optionThree" text="Text message" />
92+
</GoabFormItem>
93+
</Sandbox>
94+
</>
95+
);
96+
}

0 commit comments

Comments
 (0)