feat(#3511): Add DS 2 upgrade notification & component links

Author: bdfranck

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/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" ? (
+    <GoabNotification type="information" maxContentWidth={MAX_CONTENT_WIDTH}>
         <>
-          Support for v3 (Angular) and v5 (React) has ended. Read the{" "}
-          <a ref={oldLinkRef} href="/get-started/developers/update">
+          Design System 2 is now available! Check out the{" "}
+          <a
+            ref={newLinkRef}
+            href={v2UpgradeLink}
+            className="no-external-icon"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <span style={{ whiteSpace: "nowrap" }}>upgrade guide</span>
-          </a>
-        </>
-      ) : (
-        <>
-          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>
+          </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/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 -