GovAlta · ArakTaiRoth · Mar 20, 2025 · Feb 21, 2025 · Feb 25, 2025 · Sep 11, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,16 +12,19 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "5.4.0",
-    "@abgov/web-components": "1.29.0",
+    "@abgov/react-components": "6.2.1",
+    "@abgov/ui-components-common": "1.2.1",
+    "@abgov/web-components": "1.32.1",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
+    "js-cookie": "^3.0.5",
     "octokit": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.13.0"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
     "@types/react-router-dom": "^5.3.3",
@@ -33,6 +36,8 @@
     "eslint-plugin-react-refresh": "^0.3.5",
     "prettier": "2.4.1",
     "typescript": "^5.4.2",
-    "vite": "^5.4.6"
+    "vite": "^5.4.6",
+    "lodash": "^4.17.21",
+    "@types/lodash": "^4.17.16"
   }
 }
diff --git a/public/images/text.png b/public/images/text.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,68 +1,21 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import ReactDOM from "react-dom/client";
 import {
   Route,
   RouterProvider,
   createBrowserRouter,
   createRoutesFromElements,
 } from "react-router-dom";
-
 import "@abgov/web-components";
 
 import Root from "@routes/root";
-import { useMediaQuery } from "@hooks/useMediaQuery";
-import { DeviceWidthContext } from "@contexts/DeviceWidthContext";
+import { DeviceWidthProvider } from "@contexts/DeviceWidthContext";
 import "./index.css";
 
 // Support
 
 import HomePage from "@routes/home";
 
-// Components
-
-import ComponentsPage from "@routes/components/Components";
-
-import AllComponentsPage from "@routes/components/AllComponents";
-import AccordionPage from "@routes/components/Accordion.tsx";
-import BadgePage from "@routes/components/Badge";
-import BlockPage from "@routes/components/Block";
-import ButtonGroupPage from "@routes/components/ButtonGroup";
-import ButtonPage from "@routes/components/Button";
-import CalloutPage from "@routes/components/Callout";
-import CheckboxPage from "@routes/components/Checkbox";
-import ComponentNotFoundPage from "@routes/not-found/NotFound";
-import ContainerPage from "@routes/components/Container";
-import DatePickerPage from "@routes/components/DatePicker";
-import DetailsPage from "@routes/components/Details";
-import DividerPage from "@routes/components/Divider";
-import DropdownPage from "@routes/components/Dropdown";
-import FileUploaderPage from "@routes/components/FileUploader";
-import FilterChipPage from "@routes/components/FilterChip";
-import FormItemPage from "@routes/components/FormItemPage.tsx";
-import FormStepperPage from "@routes/components/FormStepper";
-import GridPage from "@routes/components/Grid";
-import HeroBannerPage from "@routes/components/HeroBanner";
-import IconsPage from "@routes/components/Icons";
-import IconButtonPage from "@routes/components/IconButton";
-import ListPage from "@routes/components/List";
-import ModalPage from "@routes/components/Modal";
-import NotificationBannerPage from "@routes/components/Notificationbanner";
-import PaginationPage from "@routes/components/Pagination";
-import PopoverPage from "@routes/components/Popover";
-import ProgressIndicatorPage from "@routes/components/ProgressIndicator";
-import RadioPage from "@routes/components/Radio";
-import SkeletonPage from "@routes/components/Skeleton.tsx";
-import SpacerPage from "@routes/components/Spacer";
-import TablePage from "@routes/components/Table";
-import TabsPage from "@routes/components/Tabs.tsx";
-import TooltipPage from "@routes/components/Tooltip";
-import TextFieldPage from "@routes/components/TextField";
-import TextAreaPage from "@routes/components/TextArea";
-import MicrositeHeaderPage from "@routes/components/MicrositeHeader";
-import AppHeaderPage from "@routes/components/AppHeader";
-import AppFooterPage from "@routes/components/AppFooter";
-import SideMenuPage from "@routes/components/SideMenu";
-
 // Design Tokens
 
 import DesignTokensOverviewPage from "@routes/design-tokens/overview/Overview";
@@ -103,88 +56,18 @@ import ErrorMessagesPage from "@routes/content/ErrorMessages";
 import HelperTextPage from "@routes/content/HelperText";
 import UserExperienceGuidelinesPage from "@routes/get-started/UserExperienceGuidelines";
 
-// Patterns Pages
-
-import PatternsLayout from "@routes/patterns/PatternsLayout";
-import LayoutPage from "@routes/patterns/LayoutPage";
-import PatternsOverviewPage from "@routes/patterns/PatternsOverview";
-import SimpleFormPage from "@routes/patterns/SimpleFormPage";
-import StartPage from "@routes/patterns/StartPage";
-import TaskListPage from "@routes/patterns/TaskListPage";
-import QuestionPage from "@routes/patterns/QuestionPage";
-import ReviewPage from "@routes/patterns/ReviewPage";
-import ResultPage from "@routes/patterns/ResultPage";
-
-interface DeviceWidthProviderProps {
-  children: ReactNode;
-}
-
-const DeviceWidthProvider: React.FC<DeviceWidthProviderProps> = ({ children }) => {
-  const isDesktop = useMediaQuery("(min-width: 1232px)");
-  const isMobile = useMediaQuery("(max-width: 623px)");
-
-  return (
-    <DeviceWidthContext.Provider value={{ isDesktop, isMobile }}>
-      {children}
-    </DeviceWidthContext.Provider>
-  );
-};
+import { VersionFromUrlProvider } from "@contexts/VersionFromUrlContext.tsx";
+import { ComponentsRouter, PatternsRouter } from "./versioned-router";
+import ComponentNotFound from "@routes/not-found/NotFound.tsx";
+import { LanguageVersionProvider } from "@contexts/LanguageVersionContext.tsx";
+import DevelopersUpgradePage from "@routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<Root />}>
       <Route path="/" element={<HomePage />} />
-      <Route
-        path="components"
-        element={<ComponentsPage />}
-        errorElement={<ComponentNotFoundPage />}>
-        <Route index element={<AllComponentsPage />} />
-        <Route path="accordion" element={<AccordionPage />} />
-        <Route path="header" element={<AppHeaderPage />} />
-        <Route path="footer" element={<AppFooterPage />} />
-        <Route path="badge" element={<BadgePage />} />
-        <Route path="block" element={<BlockPage />} />
-        <Route path="button" element={<ButtonPage />} />
-        <Route path="button-group" element={<ButtonGroupPage />} />
-        <Route path="callout" element={<CalloutPage />} />
-        <Route path="checkbox" element={<CheckboxPage />} />
-        <Route path="container" element={<ContainerPage />} />
-        <Route path="date-picker" element={<DatePickerPage />} />
-        <Route path="details" element={<DetailsPage />} />
-        <Route path="divider" element={<DividerPage />} />
-        <Route path="dropdown" element={<DropdownPage />} />
-        <Route path="file-uploader" element={<FileUploaderPage />} />
-        <Route path="filter-chip" element={<FilterChipPage />} />
-        <Route path="form-item" element={<FormItemPage />} />
-        <Route path="form-stepper" element={<FormStepperPage />} />
-        <Route path="grid" element={<GridPage />} />
-        <Route path="hero-banner" element={<HeroBannerPage />} />
-        <Route path="icons" element={<IconsPage />} />
-        <Route path="icon-button" element={<IconButtonPage />} />
-        <Route path="input" element={<TextFieldPage />} />
-        <Route path="list" element={<ListPage />} />
-        <Route path="microsite-header" element={<MicrositeHeaderPage />} />
-        <Route path="modal" element={<ModalPage />} />
-        <Route path="notification-banner" element={<NotificationBannerPage />} />
-        <Route path="pagination" element={<PaginationPage />} />
-        <Route path="popover" element={<PopoverPage />} />
-        <Route path="progress-indicator" element={<ProgressIndicatorPage />} />
-        <Route path="radio" element={<RadioPage />} />
-        <Route path="side-menu" element={<SideMenuPage />} />
-        <Route path="skeleton-loader" element={<SkeletonPage />} />
-        <Route path="spacer" element={<SpacerPage />} />
-        <Route path="table" element={<TablePage />} />
-        <Route path="tabs" element={<TabsPage />} />
-        <Route path="text-area" element={<TextAreaPage />} />
-        <Route path="tooltip" element={<TooltipPage />} />
-        <Route path="text-field" element={<TextFieldPage />} />
-        <Route path="*" element={<ComponentNotFoundPage />} />
-      </Route>
-
-      <Route
-        path="design-tokens"
-        element={<DesignTokens />}
-        errorElement={<ComponentNotFoundPage />}>
+      <Route path="/components/*" element={<ComponentsRouter />}></Route>
+      <Route path="design-tokens" element={<DesignTokens />} errorElement={<ComponentNotFound />}>
         <Route index element={<DesignTokensOverviewPage />} />
         <Route path="border-width" element={<BorderWidthPage />} />
         <Route path="border-radius" element={<BorderRadiusPage />} />
@@ -208,6 +91,7 @@ const router = createBrowserRouter(
           <Route path="technologies" element={<DevelopersTechnologiesPage />} />
           <Route path="vscode" element={<DevelopersVSCodePage />} />
           <Route path="bug" element={<BugVerificationPage />} />
+          <Route path="update" element={<DevelopersUpgradePage />} />
         </Route>
         <Route path="qa-testing">
           <Route index element={<QATestingOverviewPage />} />
@@ -233,24 +117,19 @@ const router = createBrowserRouter(
         <Route path="helper-text" element={<HelperTextPage />} />
       </Route>
 
-      <Route path="patterns" element={<PatternsLayout />} errorElement={<ComponentNotFoundPage />}>
-        <Route index element={<PatternsOverviewPage />} />
-        <Route path="simple-form" element={<SimpleFormPage />} />
-        <Route path="layout" element={<LayoutPage />} />
-        <Route path="start-page" element={<StartPage />} />
-        <Route path="task-list-page" element={<TaskListPage />} />
-        <Route path="question-page" element={<QuestionPage />} />
-        <Route path="review-page" element={<ReviewPage />} />
-        <Route path="result-page" element={<ResultPage />} />
-      </Route>
+      <Route path="/patterns/*" element={<PatternsRouter />}></Route>
     </Route>
   )
 );
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <DeviceWidthProvider>
-      <RouterProvider router={router} />
-    </DeviceWidthProvider>
+    <LanguageVersionProvider>
+      <VersionFromUrlProvider>
+        <DeviceWidthProvider>
+          <RouterProvider router={router} />
+        </DeviceWidthProvider>
+      </VersionFromUrlProvider>
+    </LanguageVersionProvider>
   </React.StrictMode>
 );
diff --git a/src/components/code-snippet/CodeSnippet.tsx b/src/components/code-snippet/CodeSnippet.tsx
@@ -1,7 +1,7 @@
-import { FC, ReactElement, ReactNode, useEffect, useRef, useState } from "react";
+import { FC, ReactElement, ReactNode, useContext, useEffect, useRef, useState } from "react";
 
 import "./CodeSnippet.css";
-import { GoAButton, GoAIconButton, GoATooltip } from "@abgov/react-components";
+import { GoabButton, GoabIconButton, GoabTooltip } from "@abgov/react-components";
 import { renderToString } from "react-dom/server";
 
 import hljs from "highlight.js/lib/core";
@@ -10,6 +10,7 @@ import html from "highlight.js/lib/languages/xml";
 import css from "highlight.js/lib/languages/css";
 
 import "highlight.js/styles/github.css";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
 type Language = "typescript" | "javascript" | "tsx" | "jsx" | "html" | "css" | string;
 
@@ -23,7 +24,8 @@ interface Props {
   tags?: string[] | string;
 }
 
-export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children }) => {
+export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children, tags }) => {
+  const {language} = useContext(LanguageVersionContext);
   const [output, setOutput] = useState<string>("");
   const [isCopied, setIsCopied] = useState(false);
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
@@ -39,7 +41,7 @@ export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children }) => {
     });
     resizeObserver.observe(codeSnippetRef.current);
     return () => resizeObserver.disconnect(); // clean up
-  }, []);
+  }, [language]);
 
   const cleanTabs = (code = "", tabSize: number): string => {
     const lines = code.trim().split("\n");
@@ -105,33 +107,37 @@ export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children }) => {
   }
 
   return (
-    <div
-      ref={codeSnippetRef}
-      className={`goa-code-snippet ${showMore ? "overflow" : ""}`}
-      style={isExpanded ? { maxHeight: "none" } : {}}>
+    (tags == null || tags?.includes(language)) && (
+      <div
+        ref={codeSnippetRef}
+        className={`goa-code-snippet ${showMore ? "overflow" : ""}`}
+        style={isExpanded ? { maxHeight: "none" } : {}}
+      >
       <pre>
         <code className={`highlight-${lang}`}>{output}</code>
       </pre>
-      {showMore && !isExpanded && <div className={"gradient"}></div>}
-      {showMore && (
-        <div className={"goa-code-snippet-actions--show-more"}>
-          <GoAButton
-            type="tertiary"
-            size="compact"
-            trailingIcon={isExpanded ? "chevron-up" : "chevron-down"}
-            onClick={() => setIsExpanded(!isExpanded)}>
-            Show {isExpanded ? "less" : "more"}
-          </GoAButton>
-        </div>
-      )}
-
-      {allowCopy && (
-        <div className="goa-code-snippet-actions--copy">
-          <GoATooltip content={isCopied ? `Copied` : `Copy?`} position="left">
-            <GoAIconButton icon="copy" onClick={copyCode}/>
-          </GoATooltip>
-        </div>
-      )}
-    </div>
+        {showMore && !isExpanded && <div className={"gradient"}></div>}
+        {showMore && (
+          <div className={"goa-code-snippet-actions--show-more"}>
+            <GoabButton
+              type="tertiary"
+              size="compact"
+              trailingIcon={isExpanded ? "chevron-up" : "chevron-down"}
+              onClick={() => setIsExpanded(!isExpanded)}
+            >
+              Show {isExpanded ? "less" : "more"}
+            </GoabButton>
+          </div>
+        )}
+
+        {allowCopy && (
+          <div className="goa-code-snippet-actions--copy">
+            <GoabTooltip content={isCopied ? `Copied` : `Copy?`} position="left">
+              <GoabIconButton icon="copy" onClick={copyCode} />
+            </GoabTooltip>
+          </div>
+        )}
+      </div>
+    )
   );
 };
diff --git a/src/components/component-header/ComponentHeader.tsx b/src/components/component-header/ComponentHeader.tsx
@@ -1,4 +1,4 @@
-import { GoABadge } from "@abgov/react-components";
+import { GoabBadge } from "@abgov/react-components";
 import "./ComponentHeader.css";
 import { Link } from "react-router-dom";
 
@@ -21,7 +21,7 @@ export enum Category {
 export const ComponentHeader: React.FC<Props> = (props: Props) => {
   return (
     <div className="component-header">
-      <GoABadge type="information" content={props.category} />
+      <GoabBadge type="information" content={props.category} />
       <h1>{props.name}</h1>
       <h2 id="component" className="hidden" aria-hidden="true">Component</h2>
       <h3 dangerouslySetInnerHTML={{__html: props.description || ''}}></h3>