feat(#3511): add links to DS 2 docs

src/App.tsx

@@ -5,6 +5,7 @@ import {
   RouterProvider,
   createBrowserRouter,
   createRoutesFromElements,
+  Navigate,
 } from "react-router-dom";
 import "@abgov/web-components";
 
@@ -151,6 +152,12 @@ const router = createBrowserRouter(
         <Route path="helper-text" element={<HelperTextPage />} />
       </Route>
 
+      {/* Redirects from DS2 (Astro) canonical URLs back to this site's canonical URLs */}
+      <Route path="tokens" element={<Navigate replace to="/design-tokens" />} />
+      <Route path="support" element={<Navigate replace to="/get-started/support" />} />
+      {/* Old URL alias — both sites use the compact version as canonical */}
+      <Route path="/examples/show-multiple-actions-in-a-table" element={<Navigate replace to="/examples/show-multiple-actions-in-a-compact-table" />} />
+
       {/* Examples Pages */}
       <Route path="/examples" element={<ExamplesLayout />}>
         <Route index element={<ExamplesOverviewPage />} />

src/components/component-header/ComponentHeader.tsx

@@ -1,8 +1,8 @@
 import { GoabBadge, GoabBlock, GoabText } from "@abgov/react-components";
 import "./ComponentHeader.css";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { useEffect, useState } from "react";
-import { toSentenceCase, fetchAllIssueCounts, fetchComponentMetadataFromProject } from "../../utils";
+import { toSentenceCase, fetchAllIssueCounts, fetchComponentMetadataFromProject, getV2Link } from "../../utils";
 
 export enum Category {
   CONTENT_AND_LAYOUT = "Content and layout",
@@ -23,6 +23,7 @@ interface Props {
 
 export const ComponentHeader: React.FC<Props> = (props) => {
   const [issueCount, setIssueCount] = useState<number | null>(null);
+  const v2Link = getV2Link(useLocation().pathname);
 
   useEffect(() => {
     if (!props.githubLink) return;
@@ -49,6 +50,7 @@ export const ComponentHeader: React.FC<Props> = (props) => {
         </GoabText>
         {(props.githubLink || props.figmaLink) && (
           <GoabBlock gap="l" direction="row" mt="l">
+            <a className="small" target="_blank" rel="noopener noreferrer" href={v2Link}>New version</a>
             {/* GitHub Issues link, if we have a "githubLink" */}
             <GoabBlock gap="2xs" direction="row">
               {props.githubLink && (

src/components/example-header/ExampleHeader.tsx

@@ -1,5 +1,7 @@
 import { GoabBlock, GoabText, GoabBadge } from "@abgov/react-components";
 import "../component-header/ComponentHeader.css"; // reusing existing styling from component pages
+import { getV2Link } from "../../utils";
+import { useLocation } from "react-router-dom";
 
 interface Props {
   name: string;
@@ -10,6 +12,9 @@ interface Props {
 }
 
 export const ExampleHeader: React.FC<Props> = ({ name, description, githubLink, figmaLink, tags }) => {
+
+  const v2Link = getV2Link(useLocation().pathname);
+
   return (
     <div className="component-header">
 
@@ -46,6 +51,7 @@ export const ExampleHeader: React.FC<Props> = ({ name, description, githubLink,
         {(githubLink || figmaLink) && (
 
           <GoabBlock gap="l" direction="row">
+            <a className="small" target="_blank" rel="noopener noreferrer" href={v2Link}>New version</a>
             {githubLink && (
               <GoabBlock gap="2xs" direction="row">
                 <goa-icon type="logo-github" size="2xsmall" mb="xs" fillcolor="#666666" />

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

@@ -1,30 +1,19 @@
 import { useContext } from "react";
-import { useLocation } from "react-router-dom";
 import { GoabIconButton, GoabTooltip } from "@abgov/react-components";
 
 import { useVersionUpdateNotification } from "@components/version-language-switcher/VersionUpdateNotificationContext";
-import { useSiteWideNotification } from "@contexts/SiteWideNotificationContext";
 import { LanguageVersionContext } from "@contexts/LanguageVersionContext";
 
 export function HelpButton() {
   const { reset: resetVersion } = useVersionUpdateNotification();
-  const { reset: resetSiteWideNotification } = useSiteWideNotification();
   useContext(LanguageVersionContext);
-  const location = useLocation();
 
-  const handleHelpClick = () => {
-    const isComponentOrExamplePage =
-      location.pathname.startsWith("/components") || location.pathname.startsWith("/examples");
-
-    if (isComponentOrExamplePage) {
-      resetVersion();
-    } else {
-      resetSiteWideNotification();
-    }
+  const handleHelpClick = () => {  
+    resetVersion();
   };
 
   return (
-    <GoabTooltip content="Version and framework info">
+    <GoabTooltip content="Version info">
       <GoabIconButton ml={"xs"}
                       variant="color"
                       size="small"

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

@@ -3,7 +3,7 @@ import {
   GoabPopover
 } from "@abgov/react-components";
 import {
-  ANGULAR_VERSIONS, getVersionedUrlPath, Language, LanguageVersion,
+  ANGULAR_VERSIONS, DS_V2_URL, getVersionedUrlPath, Language, LanguageVersion,
   VERSIONED_ANGULAR_URL_SEGMENT,
   VERSIONED_REACT_URL_SEGMENT, REACT_VERSIONS
 } from "./version-language-constants.ts";
@@ -73,7 +73,8 @@ export const VersionLanguageSwitcher = () => {
     }, 0); // timeout related to popover collapse
   };
 
-  const updateVersion = (newValue: "old" | "new") => {
+  const updateVersion = (newValue: LanguageVersion) => {
+    if (newValue === "next") return;
     setTimeout(() => {
       setVersion(newValue);
       updateURL("version", newValue);
@@ -87,9 +88,10 @@ export const VersionLanguageSwitcher = () => {
 
   const getCurrentVersionLabel = (language: string, version: string) => {
     if (language === "react") {
-      return version === "new" ? REACT_VERSIONS.NEW.label : REACT_VERSIONS.OLD.label;
-    } if (language === "angular") {
-      return version === "new" ? ANGULAR_VERSIONS.NEW.label : ANGULAR_VERSIONS.OLD.label;
+      return version === "next" ? REACT_VERSIONS.NEXT.label : version === "new" ? REACT_VERSIONS.NEW.label : REACT_VERSIONS.OLD.label;
+    }
+    if (language === "angular") {
+      return version === "next" ? ANGULAR_VERSIONS.NEXT.label : version === "new" ? ANGULAR_VERSIONS.NEW.label : ANGULAR_VERSIONS.OLD.label;
     }
   }
 
@@ -119,11 +121,20 @@ export const VersionLanguageSwitcher = () => {
         </div>
       } padded={false}>
         <>
-          {["new", "old"].map(ver => (
-            <a key={ver} href={generateHyperlink(ver as LanguageVersion)} className={`version-language-switcher__menu ${version === ver ? "version-language-switcher__menu--current" : ""}`} onClick={() => updateVersion(ver as LanguageVersion)}>
-              {getCurrentVersionLabel(language, ver)}
-            </a>
-          ))}
+          {["next", "new", "old"].map(ver => {
+            if (ver === "next") {
+              return (
+                <a key={ver} href={DS_V2_URL} target="_blank" rel="noopener noreferrer" className="version-language-switcher__menu no-external-icon">
+                  {getCurrentVersionLabel(language, ver)}
+                </a>
+              );
+            }
+            return (
+              <a key={ver} href={generateHyperlink(ver as LanguageVersion)} className={`version-language-switcher__menu ${version === ver ? "version-language-switcher__menu--current" : ""}`} onClick={() => updateVersion(ver as LanguageVersion)}>
+                {getCurrentVersionLabel(language, ver)}
+              </a>
+            );
+          })}
         </>
       </GoabPopover>
     </div>

src/components/version-language-switcher/VersionUpdateNotification.tsx

@@ -2,14 +2,11 @@ import { useEffect } from "react";
 import { GoabNotification } from "@abgov/react-components";
 import { MAX_CONTENT_WIDTH } from "../../global-constants";
 import { useVersionUpdateNotification } from "./VersionUpdateNotificationContext";
-import type { LanguageVersion } from "@components/version-language-switcher/version-language-constants";
+import { getV2Link } from "../../utils";
 
-interface VersionUpdateNotificationProps {
-  version: LanguageVersion;
-}
-
-export function VersionUpdateNotification({ version }: VersionUpdateNotificationProps) {
-  const { isDismissed, dismiss, oldLinkRef, newLinkRef } = useVersionUpdateNotification();
+export function VersionUpdateNotification() {
+  const { isDismissed, dismiss, newLinkRef } = useVersionUpdateNotification();
+  const v2UpgradeLink = getV2Link("/upgrade-guide");
 
   useEffect(() => {
     const el = document.querySelector("goa-notification");
@@ -24,22 +21,19 @@ export function VersionUpdateNotification({ version }: VersionUpdateNotification
   if (isDismissed) return null;
 
   return (
-    <GoabNotification type={version === "old" ? "important" : "information"} maxContentWidth={MAX_CONTENT_WIDTH}>
-      {version === "old" ? (
-        <>
-          Support for v3 (Angular) and v5 (React) has ended. Read the{" "}
-          <a ref={oldLinkRef} href="/get-started/developers/update">
-            <span style={{ whiteSpace: "nowrap" }}>upgrade guide</span>
-          </a>
-        </>
-      ) : (
+    <GoabNotification type="information" maxContentWidth={MAX_CONTENT_WIDTH}>
         <>
-          Upgrading to the latest version of the design system?{" "}
-          <a ref={newLinkRef} href="/get-started/developers/update">
-            <span style={{ whiteSpace: "nowrap" }}>View the upgrade guide</span>
-          </a>
+          The new Design System is now available! Check out the{" "}
+          <a
+            ref={newLinkRef}
+            href={v2UpgradeLink}
+            className="no-external-icon"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span style={{ whiteSpace: "nowrap" }}>migration guide</span>
+          </a>.
         </>
-      )}
     </GoabNotification>
   );
 }

src/components/version-language-switcher/VersionUpdateNotificationContext.tsx

@@ -25,17 +25,17 @@ export const VersionUpdateNotificationProvider = ({
   const newLinkRef = useRef<HTMLAnchorElement>(null);
 
   useEffect(() => {
-    const storedValue = localStorage.getItem(storageKey);
+    const storedValue = sessionStorage.getItem(storageKey);
     setIsDismissed(storedValue === "true");
   }, [version]);
 
   const dismiss = () => {
-    localStorage.setItem(storageKey, "true");
+    sessionStorage.setItem(storageKey, "true");
     setIsDismissed(true);
   };
 
   const reset = () => {
-    localStorage.removeItem(storageKey);
+    sessionStorage.removeItem(storageKey);
     setIsDismissed(false);
   };
 

src/components/version-language-switcher/version-language-constants.ts

@@ -1,4 +1,4 @@
-export type LanguageVersion = "old" | "new";
+export type LanguageVersion = "old" | "new" | "next";
 export type Language = "react" | "angular";
 export const ANGULAR_VERSIONS = {
   OLD: {
@@ -8,6 +8,10 @@ export const ANGULAR_VERSIONS = {
   NEW: {
     label: "v4.0.0+",
     value: "new"
+  },
+  NEXT: {
+    label: "v5.0.0+",
+    value: "next"
   }
 }
 export const REACT_VERSIONS = {
@@ -18,9 +22,15 @@ export const REACT_VERSIONS = {
   NEW: {
     label: "v6.0.0+",
     value: "new"
+  },
+  NEXT: {
+    label: "v7.0.0+",
+    value: "next"
   }
 }
 
+export const DS_V2_URL = "https://design.alberta.ca/";
+
 export const LOCAL_STORAGE_LANGUAGE_KEY = "goa-docs-lang";
 export const LOCAL_STORAGE_VERSION_KEY = "goa-docs-version";
 

src/routes/root.tsx

@@ -22,10 +22,6 @@ import { HelpButton } from "@components/version-language-switcher/HelpButton";
 import {
   VersionLanguageSwitcher
 } from "@components/version-language-switcher/VersionLanguageSwitcher";
-import { LanguageVersionContext } from "@contexts/LanguageVersionContext";
-import { useContext } from "react";
-import SiteWideNotification from "@components/version-language-switcher/SiteWideNotification";
-
 
 function ScrollToTop() {
   const { pathname } = useLocation();
@@ -38,10 +34,7 @@ function ScrollToTop() {
 }
 
 export default function Root() {
-  const { version } = useContext(LanguageVersionContext);
   const location = useLocation();
-  const showNotification =
-    location.pathname.startsWith("/components") || location.pathname.startsWith("/examples");
   const [visible, setVisibility] = useState<boolean>(false);
 
   // to show temporary notification on examples route, except temporary-notification playground which needs playground bindings
@@ -81,8 +74,7 @@ export default function Root() {
             <Link to="/design-tokens">Tokens</Link>
             <Link to="/get-started/support" className="interactive">Get support</Link>
           </GoabAppHeader>
-          {showNotification && <VersionUpdateNotification version={version} />}
-          <SiteWideNotification />
+          <VersionUpdateNotification />          
           <Outlet />
         </section>
 

src/utils/index.ts

@@ -6,6 +6,10 @@ import {
 
 type IssueGroup = "Components" | "Examples";
 
+export function getV2Link(pathname: string): string {
+  return `https://design.alberta.ca${pathname}`;
+}
+
 export function toKebabCase(str: string) {
   return str
     .replace(/\s+/g, "-")        // Replace spaces with -

src/versioned-router.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes, useParams } from "react-router-dom";
+import { Route, Routes, useParams, Navigate } from "react-router-dom";
 import ComponentsPage from "@routes/components/Components.tsx";
 import ComponentNotFoundPage from "@routes/not-found/NotFound.tsx";
 import AllComponentsPage from "@routes/components/AllComponents.tsx";
@@ -128,6 +128,15 @@ export const ComponentsRouter = () => {
     radio: <RadioPage />,
     "side-menu": <SideMenuPage />,
     "skeleton-loader": <SkeletonPage />,
+    // DS2 (Astro) URL aliases — redirect to DS1 canonical URLs
+    "circular-progress": <Navigate replace to="/components/circular-progress-indicator" />,
+    "file-upload-input": <Navigate replace to="/components/file-uploader" />,
+    "app-header": <Navigate replace to="/components/header" />,
+    icon: <Navigate replace to="/components/icons" />,
+    "linear-progress": <Navigate replace to="/components/linear-progress-indicator" />,
+    notification: <Navigate replace to="/components/notification-banner" />,
+    "radio-group": <Navigate replace to="/components/radio" />,
+    skeleton: <Navigate replace to="/components/skeleton-loader" />,
     spacer: <SpacerPage />,
     table: <TablePage />,
     tabs: <TabsPage />,