Skip to content

Commit 5d6663e

Browse files
ArakTaiRothArakTaiRoth
authored
Merge pull request #323 from GovAlta/alpha
Production Release - March 20 / 2024
2 parents 9e016fe + d5f7081 commit 5d6663e

197 files changed

Lines changed: 18566 additions & 8257 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package-lock.json‎

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

‎package.json‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,19 @@
1212
"prettier": "npx prettier . --write"
1313
},
1414
"dependencies": {
15-
"@abgov/react-components": "5.4.0",
16-
"@abgov/web-components": "1.29.0",
15+
"@abgov/react-components": "6.2.1",
16+
"@abgov/ui-components-common": "1.2.1",
17+
"@abgov/web-components": "1.32.1",
1718
"@faker-js/faker": "^8.3.1",
1819
"highlight.js": "^11.8.0",
20+
"js-cookie": "^3.0.5",
1921
"octokit": "^4.0.2",
2022
"react": "^18.2.0",
2123
"react-dom": "^18.2.0",
2224
"react-router-dom": "^6.13.0"
2325
},
2426
"devDependencies": {
27+
"@types/js-cookie": "^3.0.6",
2528
"@types/react": "^18.2.13",
2629
"@types/react-dom": "^18.2.6",
2730
"@types/react-router-dom": "^5.3.3",
@@ -33,6 +36,8 @@
3336
"eslint-plugin-react-refresh": "^0.3.5",
3437
"prettier": "2.4.1",
3538
"typescript": "^5.4.2",
36-
"vite": "^5.4.6"
39+
"vite": "^5.4.6",
40+
"lodash": "^4.17.21",
41+
"@types/lodash": "^4.17.16"
3742
}
3843
}

‎public/images/text.png‎

105 KB
Loading

‎src/App.tsx‎

Lines changed: 18 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,21 @@
1-
import React, { ReactNode } from "react";
1+
import React from "react";
22
import ReactDOM from "react-dom/client";
33
import {
44
Route,
55
RouterProvider,
66
createBrowserRouter,
77
createRoutesFromElements,
88
} from "react-router-dom";
9-
109
import "@abgov/web-components";
1110

1211
import Root from "@routes/root";
13-
import { useMediaQuery } from "@hooks/useMediaQuery";
14-
import { DeviceWidthContext } from "@contexts/DeviceWidthContext";
12+
import { DeviceWidthProvider } from "@contexts/DeviceWidthContext";
1513
import "./index.css";
1614

1715
// Support
1816

1917
import HomePage from "@routes/home";
2018

21-
// Components
22-
23-
import ComponentsPage from "@routes/components/Components";
24-
25-
import AllComponentsPage from "@routes/components/AllComponents";
26-
import AccordionPage from "@routes/components/Accordion.tsx";
27-
import BadgePage from "@routes/components/Badge";
28-
import BlockPage from "@routes/components/Block";
29-
import ButtonGroupPage from "@routes/components/ButtonGroup";
30-
import ButtonPage from "@routes/components/Button";
31-
import CalloutPage from "@routes/components/Callout";
32-
import CheckboxPage from "@routes/components/Checkbox";
33-
import ComponentNotFoundPage from "@routes/not-found/NotFound";
34-
import ContainerPage from "@routes/components/Container";
35-
import DatePickerPage from "@routes/components/DatePicker";
36-
import DetailsPage from "@routes/components/Details";
37-
import DividerPage from "@routes/components/Divider";
38-
import DropdownPage from "@routes/components/Dropdown";
39-
import FileUploaderPage from "@routes/components/FileUploader";
40-
import FilterChipPage from "@routes/components/FilterChip";
41-
import FormItemPage from "@routes/components/FormItemPage.tsx";
42-
import FormStepperPage from "@routes/components/FormStepper";
43-
import GridPage from "@routes/components/Grid";
44-
import HeroBannerPage from "@routes/components/HeroBanner";
45-
import IconsPage from "@routes/components/Icons";
46-
import IconButtonPage from "@routes/components/IconButton";
47-
import ListPage from "@routes/components/List";
48-
import ModalPage from "@routes/components/Modal";
49-
import NotificationBannerPage from "@routes/components/Notificationbanner";
50-
import PaginationPage from "@routes/components/Pagination";
51-
import PopoverPage from "@routes/components/Popover";
52-
import ProgressIndicatorPage from "@routes/components/ProgressIndicator";
53-
import RadioPage from "@routes/components/Radio";
54-
import SkeletonPage from "@routes/components/Skeleton.tsx";
55-
import SpacerPage from "@routes/components/Spacer";
56-
import TablePage from "@routes/components/Table";
57-
import TabsPage from "@routes/components/Tabs.tsx";
58-
import TooltipPage from "@routes/components/Tooltip";
59-
import TextFieldPage from "@routes/components/TextField";
60-
import TextAreaPage from "@routes/components/TextArea";
61-
import MicrositeHeaderPage from "@routes/components/MicrositeHeader";
62-
import AppHeaderPage from "@routes/components/AppHeader";
63-
import AppFooterPage from "@routes/components/AppFooter";
64-
import SideMenuPage from "@routes/components/SideMenu";
65-
6619
// Design Tokens
6720

6821
import DesignTokensOverviewPage from "@routes/design-tokens/overview/Overview";
@@ -103,88 +56,18 @@ import ErrorMessagesPage from "@routes/content/ErrorMessages";
10356
import HelperTextPage from "@routes/content/HelperText";
10457
import UserExperienceGuidelinesPage from "@routes/get-started/UserExperienceGuidelines";
10558

106-
// Patterns Pages
107-
108-
import PatternsLayout from "@routes/patterns/PatternsLayout";
109-
import LayoutPage from "@routes/patterns/LayoutPage";
110-
import PatternsOverviewPage from "@routes/patterns/PatternsOverview";
111-
import SimpleFormPage from "@routes/patterns/SimpleFormPage";
112-
import StartPage from "@routes/patterns/StartPage";
113-
import TaskListPage from "@routes/patterns/TaskListPage";
114-
import QuestionPage from "@routes/patterns/QuestionPage";
115-
import ReviewPage from "@routes/patterns/ReviewPage";
116-
import ResultPage from "@routes/patterns/ResultPage";
117-
118-
interface DeviceWidthProviderProps {
119-
children: ReactNode;
120-
}
121-
122-
const DeviceWidthProvider: React.FC<DeviceWidthProviderProps> = ({ children }) => {
123-
const isDesktop = useMediaQuery("(min-width: 1232px)");
124-
const isMobile = useMediaQuery("(max-width: 623px)");
125-
126-
return (
127-
<DeviceWidthContext.Provider value={{ isDesktop, isMobile }}>
128-
{children}
129-
</DeviceWidthContext.Provider>
130-
);
131-
};
59+
import { VersionFromUrlProvider } from "@contexts/VersionFromUrlContext.tsx";
60+
import { ComponentsRouter, PatternsRouter } from "./versioned-router";
61+
import ComponentNotFound from "@routes/not-found/NotFound.tsx";
62+
import { LanguageVersionProvider } from "@contexts/LanguageVersionContext.tsx";
63+
import DevelopersUpgradePage from "@routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx";
13264

13365
const router = createBrowserRouter(
13466
createRoutesFromElements(
13567
<Route path="/" element={<Root />}>
13668
<Route path="/" element={<HomePage />} />
137-
<Route
138-
path="components"
139-
element={<ComponentsPage />}
140-
errorElement={<ComponentNotFoundPage />}>
141-
<Route index element={<AllComponentsPage />} />
142-
<Route path="accordion" element={<AccordionPage />} />
143-
<Route path="header" element={<AppHeaderPage />} />
144-
<Route path="footer" element={<AppFooterPage />} />
145-
<Route path="badge" element={<BadgePage />} />
146-
<Route path="block" element={<BlockPage />} />
147-
<Route path="button" element={<ButtonPage />} />
148-
<Route path="button-group" element={<ButtonGroupPage />} />
149-
<Route path="callout" element={<CalloutPage />} />
150-
<Route path="checkbox" element={<CheckboxPage />} />
151-
<Route path="container" element={<ContainerPage />} />
152-
<Route path="date-picker" element={<DatePickerPage />} />
153-
<Route path="details" element={<DetailsPage />} />
154-
<Route path="divider" element={<DividerPage />} />
155-
<Route path="dropdown" element={<DropdownPage />} />
156-
<Route path="file-uploader" element={<FileUploaderPage />} />
157-
<Route path="filter-chip" element={<FilterChipPage />} />
158-
<Route path="form-item" element={<FormItemPage />} />
159-
<Route path="form-stepper" element={<FormStepperPage />} />
160-
<Route path="grid" element={<GridPage />} />
161-
<Route path="hero-banner" element={<HeroBannerPage />} />
162-
<Route path="icons" element={<IconsPage />} />
163-
<Route path="icon-button" element={<IconButtonPage />} />
164-
<Route path="input" element={<TextFieldPage />} />
165-
<Route path="list" element={<ListPage />} />
166-
<Route path="microsite-header" element={<MicrositeHeaderPage />} />
167-
<Route path="modal" element={<ModalPage />} />
168-
<Route path="notification-banner" element={<NotificationBannerPage />} />
169-
<Route path="pagination" element={<PaginationPage />} />
170-
<Route path="popover" element={<PopoverPage />} />
171-
<Route path="progress-indicator" element={<ProgressIndicatorPage />} />
172-
<Route path="radio" element={<RadioPage />} />
173-
<Route path="side-menu" element={<SideMenuPage />} />
174-
<Route path="skeleton-loader" element={<SkeletonPage />} />
175-
<Route path="spacer" element={<SpacerPage />} />
176-
<Route path="table" element={<TablePage />} />
177-
<Route path="tabs" element={<TabsPage />} />
178-
<Route path="text-area" element={<TextAreaPage />} />
179-
<Route path="tooltip" element={<TooltipPage />} />
180-
<Route path="text-field" element={<TextFieldPage />} />
181-
<Route path="*" element={<ComponentNotFoundPage />} />
182-
</Route>
183-
184-
<Route
185-
path="design-tokens"
186-
element={<DesignTokens />}
187-
errorElement={<ComponentNotFoundPage />}>
69+
<Route path="/components/*" element={<ComponentsRouter />}></Route>
70+
<Route path="design-tokens" element={<DesignTokens />} errorElement={<ComponentNotFound />}>
18871
<Route index element={<DesignTokensOverviewPage />} />
18972
<Route path="border-width" element={<BorderWidthPage />} />
19073
<Route path="border-radius" element={<BorderRadiusPage />} />
@@ -208,6 +91,7 @@ const router = createBrowserRouter(
20891
<Route path="technologies" element={<DevelopersTechnologiesPage />} />
20992
<Route path="vscode" element={<DevelopersVSCodePage />} />
21093
<Route path="bug" element={<BugVerificationPage />} />
94+
<Route path="update" element={<DevelopersUpgradePage />} />
21195
</Route>
21296
<Route path="qa-testing">
21397
<Route index element={<QATestingOverviewPage />} />
@@ -233,24 +117,19 @@ const router = createBrowserRouter(
233117
<Route path="helper-text" element={<HelperTextPage />} />
234118
</Route>
235119

236-
<Route path="patterns" element={<PatternsLayout />} errorElement={<ComponentNotFoundPage />}>
237-
<Route index element={<PatternsOverviewPage />} />
238-
<Route path="simple-form" element={<SimpleFormPage />} />
239-
<Route path="layout" element={<LayoutPage />} />
240-
<Route path="start-page" element={<StartPage />} />
241-
<Route path="task-list-page" element={<TaskListPage />} />
242-
<Route path="question-page" element={<QuestionPage />} />
243-
<Route path="review-page" element={<ReviewPage />} />
244-
<Route path="result-page" element={<ResultPage />} />
245-
</Route>
120+
<Route path="/patterns/*" element={<PatternsRouter />}></Route>
246121
</Route>
247122
)
248123
);
249124

250125
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
251126
<React.StrictMode>
252-
<DeviceWidthProvider>
253-
<RouterProvider router={router} />
254-
</DeviceWidthProvider>
127+
<LanguageVersionProvider>
128+
<VersionFromUrlProvider>
129+
<DeviceWidthProvider>
130+
<RouterProvider router={router} />
131+
</DeviceWidthProvider>
132+
</VersionFromUrlProvider>
133+
</LanguageVersionProvider>
255134
</React.StrictMode>
256135
);

‎src/components/code-snippet/CodeSnippet.tsx‎

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { FC, ReactElement, ReactNode, useEffect, useRef, useState } from "react";
1+
import { FC, ReactElement, ReactNode, useContext, useEffect, useRef, useState } from "react";
22

33
import "./CodeSnippet.css";
4-
import { GoAButton, GoAIconButton, GoATooltip } from "@abgov/react-components";
4+
import { GoabButton, GoabIconButton, GoabTooltip } from "@abgov/react-components";
55
import { renderToString } from "react-dom/server";
66

77
import hljs from "highlight.js/lib/core";
@@ -10,6 +10,7 @@ import html from "highlight.js/lib/languages/xml";
1010
import css from "highlight.js/lib/languages/css";
1111

1212
import "highlight.js/styles/github.css";
13+
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
1314

1415
type Language = "typescript" | "javascript" | "tsx" | "jsx" | "html" | "css" | string;
1516

@@ -23,7 +24,8 @@ interface Props {
2324
tags?: string[] | string;
2425
}
2526

26-
export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children }) => {
27+
export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children, tags }) => {
28+
const {language} = useContext(LanguageVersionContext);
2729
const [output, setOutput] = useState<string>("");
2830
const [isCopied, setIsCopied] = useState(false);
2931
const [isExpanded, setIsExpanded] = useState<boolean>(false);
@@ -39,7 +41,7 @@ export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children }) => {
3941
});
4042
resizeObserver.observe(codeSnippetRef.current);
4143
return () => resizeObserver.disconnect(); // clean up
42-
}, []);
44+
}, [language]);
4345

4446
const cleanTabs = (code = "", tabSize: number): string => {
4547
const lines = code.trim().split("\n");
@@ -105,33 +107,37 @@ export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children }) => {
105107
}
106108

107109
return (
108-
<div
109-
ref={codeSnippetRef}
110-
className={`goa-code-snippet ${showMore ? "overflow" : ""}`}
111-
style={isExpanded ? { maxHeight: "none" } : {}}>
110+
(tags == null || tags?.includes(language)) && (
111+
<div
112+
ref={codeSnippetRef}
113+
className={`goa-code-snippet ${showMore ? "overflow" : ""}`}
114+
style={isExpanded ? { maxHeight: "none" } : {}}
115+
>
112116
<pre>
113117
<code className={`highlight-${lang}`}>{output}</code>
114118
</pre>
115-
{showMore && !isExpanded && <div className={"gradient"}></div>}
116-
{showMore && (
117-
<div className={"goa-code-snippet-actions--show-more"}>
118-
<GoAButton
119-
type="tertiary"
120-
size="compact"
121-
trailingIcon={isExpanded ? "chevron-up" : "chevron-down"}
122-
onClick={() => setIsExpanded(!isExpanded)}>
123-
Show {isExpanded ? "less" : "more"}
124-
</GoAButton>
125-
</div>
126-
)}
127-
128-
{allowCopy && (
129-
<div className="goa-code-snippet-actions--copy">
130-
<GoATooltip content={isCopied ? `Copied` : `Copy?`} position="left">
131-
<GoAIconButton icon="copy" onClick={copyCode}/>
132-
</GoATooltip>
133-
</div>
134-
)}
135-
</div>
119+
{showMore && !isExpanded && <div className={"gradient"}></div>}
120+
{showMore && (
121+
<div className={"goa-code-snippet-actions--show-more"}>
122+
<GoabButton
123+
type="tertiary"
124+
size="compact"
125+
trailingIcon={isExpanded ? "chevron-up" : "chevron-down"}
126+
onClick={() => setIsExpanded(!isExpanded)}
127+
>
128+
Show {isExpanded ? "less" : "more"}
129+
</GoabButton>
130+
</div>
131+
)}
132+
133+
{allowCopy && (
134+
<div className="goa-code-snippet-actions--copy">
135+
<GoabTooltip content={isCopied ? `Copied` : `Copy?`} position="left">
136+
<GoabIconButton icon="copy" onClick={copyCode} />
137+
</GoabTooltip>
138+
</div>
139+
)}
140+
</div>
141+
)
136142
);
137143
};

‎src/components/component-header/ComponentHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { GoABadge } from "@abgov/react-components";
1+
import { GoabBadge } from "@abgov/react-components";
22
import "./ComponentHeader.css";
33
import { Link } from "react-router-dom";
44

@@ -21,7 +21,7 @@ export enum Category {
2121
export const ComponentHeader: React.FC<Props> = (props: Props) => {
2222
return (
2323
<div className="component-header">
24-
<GoABadge type="information" content={props.category} />
24+
<GoabBadge type="information" content={props.category} />
2525
<h1>{props.name}</h1>
2626
<h2 id="component" className="hidden" aria-hidden="true">Component</h2>
2727
<h3 dangerouslySetInnerHTML={{__html: props.description || ''}}></h3>

0 commit comments

Comments
 (0)