Merge to prod

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.9.3-next.1",
-    "@abgov/ui-components-common": "1.9.1-next.1",
-    "@abgov/web-components": "1.39.3-next.1",
+    "@abgov/react-components": "6.10.0-dev.8",
+    "@abgov/ui-components-common": "1.10.0-dev.2",
+    "@abgov/web-components": "1.40.0-dev.17",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",

src/App.tsx

@@ -35,7 +35,6 @@ import TypographyPage from "@routes/design-tokens/typography/Typography";
 import DevelopersOverviewPage from "@routes/get-started/developers/DevelopersOverview";
 import DevelopersSetupPage from "@routes/get-started/developers/DevelopersSetup";
 import DevelopersTechnologiesPage from "@routes/get-started/developers/DevelopersTechnologies";
-import DevelopersVSCodePage from "@routes/get-started/developers/DevelopersVSCode";
 import BugVerificationPage from "@routes/get-started/developers/BugVerification";
 import GetStartedLayout from "@routes/get-started/GetStartedLayout";
 import GetStartedOverviewPage from "@routes/get-started/GetStartedOverview";
@@ -50,7 +49,7 @@ import RoadmapPage from "@routes/get-started/Roadmap";
 import SupportedBrowsersPage from "@routes/get-started/developers/SupportedBrowsers";
 import UxDesignerPage from "@routes/get-started/designers/UxDesigner";
 import UserExperienceGuidelinesPage from "@routes/get-started/UserExperienceGuidelines";
-import { LtsPolicyPage } from "@routes/get-started/LtsPolicyPage.tsx";
+import { OutOfSupportPage } from "@routes/get-started/OutOfSupport";
 
 // Examples Pages
 import { VersionFromUrlProvider } from "@contexts/VersionFromUrlContext.tsx";
@@ -108,7 +107,6 @@ const router = createBrowserRouter(
           <Route path="browsers" element={<SupportedBrowsersPage />} />
           <Route path="setup" element={<DevelopersSetupPage />} />
           <Route path="technologies" element={<DevelopersTechnologiesPage />} />
-          <Route path="vscode" element={<DevelopersVSCodePage />} />
           <Route path="bug" element={<BugVerificationPage />} />
           <Route path="update" element={<DevelopersUpgradePage />} />
         </Route>
@@ -120,8 +118,8 @@ const router = createBrowserRouter(
           <Route index element={<AutomatedAccessibilityPage />} />
         </Route>
         <Route path="component-lifecycle" element={<ComponentLifecyclePage />} />
-        <Route path="lts-policy">
-          <Route index element={<LtsPolicyPage />} />
+        <Route path="out-of-support">
+          <Route index element={<OutOfSupportPage />} />
         </Route>
         <Route path="contribute">
           <Route index element={<ContributePage />} />

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

@@ -27,7 +27,7 @@ export function VersionUpdateNotification({ version }: VersionUpdateNotification
     <GoabNotification type={version === "old" ? "important" : "information"} maxContentWidth={MAX_CONTENT_WIDTH}>
       {version === "old" ? (
         <>
-          Long-term support (LTS) for v3 (Angular) and v5 (React) has ended. Read the{" "}
+          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>

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

@@ -2,7 +2,7 @@ export type LanguageVersion = "old" | "new";
 export type Language = "react" | "angular";
 export const ANGULAR_VERSIONS = {
   OLD: {
-    label: "v3.2.2 (LTS)",
+    label: "v3.2.2",
     value: "old"
   },
   NEW: {
@@ -12,7 +12,7 @@ export const ANGULAR_VERSIONS = {
 }
 export const REACT_VERSIONS = {
   OLD: {
-    label: "v5.4.1 (LTS)",
+    label: "v5.4.1",
     value: "old"
   },
   NEW: {

src/examples/linear-progress/linear-progress-auto-example.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+import { GoabLinearProgress } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export function LinearProgressAutoExample() {
+  const [autoProgress, setAutoProgress] = useState(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      let nextProgress = autoProgress + 0.25;
+      if (nextProgress > 100) {
+        nextProgress = 0;
+      }
+      setAutoProgress(nextProgress);
+    }, 100);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  });
+
+  return (
+    <>
+      <GoabLinearProgress progress={autoProgress} />
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+  export function LinearProgressAutoExample() {
+    const [autoProgress, setAutoProgress] = useState(0);
+
+    useEffect(() => {
+      const intervalId = setInterval(() => {
+        let nextProgress = autoProgress + 0.25;
+        if (nextProgress > 100) {
+          nextProgress = 0;
+        }
+        setAutoProgress(nextProgress);
+      }, 100);
+
+      return () => {
+        clearInterval(intervalId);
+      };
+    });
+
+    return <GoabLinearProgress progress={autoProgress} />;
+  };`}
+      />
+      <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+    autoProgress = 0;
+    private intervalId: any;
+
+    ngOnInit() {
+      this.intervalId = setInterval(() => {
+        this.autoProgress += 0.25;
+        if (this.autoProgress > 100) {
+          this.autoProgress = 0;
+        }
+      }, 100);
+    }
+
+    ngOnDestroy() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+    }
+
+    <goab-linear-progress [progress]="autoProgress" />`}
+      />{" "}
+    </>
+  );
+}

src/global-constants.ts

@@ -3,4 +3,9 @@ export const DEFAULT_VERSION = "new";
 export const DEFAULT_LANGUAGE = "react";
 
 // Array of 'New' components
-export const NEW_COMPONENTS = ["Drawer", "Temporary notification", "Checkbox list"];
+export const NEW_COMPONENTS = [
+  "Drawer",
+  "Temporary notification",
+  "Checkbox list",
+  "Linear Progress indicator",
+];

src/routes/components/ProgressIndicator.tsx → src/routes/components/CircularProgressIndicator.tsx

@@ -11,33 +11,36 @@ import {
   GoabTab,
   GoabTabs,
   GoabCircularProgress,
-  GoabCircularProgressProps, GoabButton
+  GoabCircularProgressProps,
+  GoabButton,
 } from "@abgov/react-components";
 import { resetScrollbars } from "../../utils/styling";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import { TestIdProperty } from "@components/component-properties/common-properties.ts";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
 import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
-import {ExamplesEmpty} from "@components/empty-states/examples-empty/ExamplesEmpty.tsx";
+import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesEmpty.tsx";
 
 // == Page props ==
 
-const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-13604";
+const FIGMA_LINK =
+  "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-13604";
 const componentName = "Progress indicator";
 const description = "Provide visual feedback to users while loading.";
 const category = Category.FEEDBACK_AND_ALERTS;
 const relatedComponents = [
+  { link: "/components/linear-progress-indicator", name: "Linear Progress indicator" },
   { link: "/components/file-uploader", name: "File uploader" },
-  { link: "/components/skeleton-loader", name: "Skeleton loading" }
+  { link: "/components/skeleton-loader", name: "Skeleton loading" },
 ];
 type ComponentPropsType = GoabCircularProgressProps;
 type CastingType = {
   // add any required props here
   [key: string]: unknown;
 };
 
-export default function ProgressIndicatorPage() {
+export default function CircularProgressIndicatorPage() {
   const [componentProps, setComponentProps] = useState<ComponentPropsType>({
     variant: "inline",
     size: "large",
@@ -137,7 +140,7 @@ export default function ProgressIndicatorPage() {
   const [visible, setVisible] = useState<boolean>(true);
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
-    const updatedProps = { ...props} as CastingType;
+    const updatedProps = { ...props } as CastingType;
 
     setComponentBindings(bindings);
     setComponentProps(updatedProps);
@@ -155,7 +158,7 @@ export default function ProgressIndicatorPage() {
       // reset body styles after closing the modal, sandbox renders multiple times that not trigger modal component no-scroll destroy effects
       resetScrollbars();
     }, 3000);
-  }
+  };
 
   return (
     <>
@@ -168,24 +171,32 @@ export default function ProgressIndicatorPage() {
         githubLink="Progress indicator"
       />
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-
         <GoabTabs initialTab={1}>
           <GoabTab heading="Code playground">
-            <h2 id="component" style={{ display: "none" }}>Playground</h2>
-            <Sandbox properties={componentBindings} onChange={onSandboxChange} variableNames={["visible"]}>
+            <h2 id="component" style={{ display: "none" }}>
+              Playground
+            </h2>
+            <Sandbox
+              properties={componentBindings}
+              onChange={onSandboxChange}
+              variableNames={["visible"]}>
               <CodeSnippet
                 lang="typescript"
                 tags="react"
                 allowCopy={true}
                 code={`
                   const [visible, setVisible] = useState(${visible});
-                  ${componentProps.variant === 'fullscreen' ? `
+                  ${
+                    componentProps.variant === "fullscreen"
+                      ? `
                   function onClick() {
                     setVisible(true);
                     setTimeout(() => {
                       setVisible(false);
                     }, 3000);
-                  }` : ''}
+                  }`
+                      : ""
+                  }
                 `}
               />
               <CodeSnippet
@@ -195,19 +206,28 @@ export default function ProgressIndicatorPage() {
                 code={`
                   export class ExampleComponent {
                     visible = ${visible};
-                    ${componentProps.variant === 'fullscreen' ? `
+                    ${
+                      componentProps.variant === "fullscreen"
+                        ? `
                     onClick() {
                       this.visible = true;
                       setTimeout(() => {
                         this.visible = false;
                       }, 3000);
-                    }` : ''}
+                    }`
+                        : ""
+                    }
                 `}
               />
-              {componentProps.variant === "fullscreen" && <GoabButton onClick={openFullScreenProgress}>Show Fullscreen</GoabButton>}
+              {componentProps.variant === "fullscreen" && (
+                <GoabButton onClick={openFullScreenProgress}>Show Fullscreen</GoabButton>
+              )}
               <GoabCircularProgress {...componentProps} visible={visible} />
             </Sandbox>
-            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
+            <ComponentProperties
+              properties={componentProperties}
+              oldProperties={oldComponentProperties}
+            />
           </GoabTab>
 
           <GoabTab
@@ -216,8 +236,7 @@ export default function ProgressIndicatorPage() {
                 Examples
                 <GoabBadge type="information" content="0" />
               </>
-            }
-          >
+            }>
             <ExamplesEmpty />
           </GoabTab>
 

src/routes/components/Components.tsx

@@ -41,7 +41,7 @@ export function Components() {
     };
 
     return (
-      <GoabBlock alignment="center">
+      <GoabBlock alignment="center" width="185px">
         {componentName} <GoabBadge type={getBadgeType()} content={getBadgeLabel()}></GoabBadge>
       </GoabBlock>
     );
@@ -78,9 +78,14 @@ export function Components() {
               <Link to={getUrl("filter-chip")}>Filter chip</Link>
               <Link to={getUrl("modal")}>Modal</Link>
               <Link to={getUrl("notification-banner")}>Notification banner</Link>
-              <Link to={getUrl("progress-indicator")}>Progress indicator</Link>
+              <Link to={getUrl("circular-progress-indicator")}>Circular Progress indicator</Link>
+              <Link to={getUrl("linear-progress-indicator")}>
+                {newComponentLabel("Linear Progress indicator")}
+              </Link>
               <Link to={getUrl("skeleton-loader")}>Skeleton loader</Link>
-              <Link to={getUrl("temporary-notification")}>{newComponentLabel("Temporary notification")}</Link>
+              <Link to={getUrl("temporary-notification")}>
+                {newComponentLabel("Temporary notification")}
+              </Link>
               <Link to={getUrl("tooltip")}>Tooltip</Link>
             </GoabSideMenuGroup>
             <GoabSideMenuGroup heading="Inputs and actions">