feat(#2629): add lts policy page

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.3.0",
-    "@abgov/ui-components-common": "1.3.0",
-    "@abgov/web-components": "1.33.0",
+    "@abgov/react-components": "6.4.0-alpha.1",
+    "@abgov/ui-components-common": "1.3.0-alpha.2",
+    "@abgov/web-components": "1.34.0-alpha.2",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",

src/App.tsx

@@ -46,6 +46,7 @@ import ReportBugPage from "@routes/get-started/ReportBug";
 import RoadmapPage from "@routes/get-started/Roadmap";
 import SupportedBrowsersPage from "@routes/get-started/developers/SupportedBrowsers";
 import UxDesignerPage from "@routes/get-started/designers/UxDesigner";
+import { LtsPolicyPage } from "@routes/get-started/LtsPolicyPage.tsx";
 
 // Content Pages
 
@@ -62,6 +63,7 @@ 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 />}>
@@ -96,6 +98,9 @@ const router = createBrowserRouter(
         <Route path="qa-testing">
           <Route index element={<QATestingOverviewPage />} />
         </Route>
+        <Route path="lts-policy">
+          <Route index element={<LtsPolicyPage />} />
+        </Route>
         <Route path="contribute">
           <Route index element={<ContributePage />} />
         </Route>

src/routes/get-started/GetStartedLayout.tsx

@@ -15,11 +15,12 @@ export default function GetStartedLayout() {
             <Link to="developers/setup">Setup</Link>
             <Link to="developers/bug">Verify a bug</Link>
             <Link to="developers/vscode">VS Code</Link>
-            <Link to="developers/technologies">Technologies</Link>
+            <Link to="developers/technologies">Technologies </Link>
             <Link to="developers/browsers">Supported Browsers</Link>
             <Link to="developers/update">Version update guide</Link>
           </GoabSideMenuGroup>
           <Link to="qa-testing">QA testing</Link>
+          <Link to="lts-policy">Long Term Support (LTS)</Link>
           <Link to="contribute">Contribute</Link>
           <Link to="support">Support</Link>
           <Link to="roadmap">Roadmap</Link>

src/routes/get-started/LtsPolicyPage.tsx

@@ -0,0 +1,32 @@
+import { GoabCallout, GoabText } from "@abgov/react-components";
+import { Link } from "react-router-dom";
+
+export const LtsPolicyPage = () => {
+  return (
+    <>
+      <GoabText tag="h1" mt="xl" mb="xl">Long Term Support (LTS)</GoabText>
+
+      <GoabText size="body-l" tag="h3" mb="xl">
+        The Long Term Support (LTS) version will continue to be supported until September 30, 2025. Learn more about what you can expect.
+      </GoabText>
+
+      <GoabText tag={"p"} mt={"5"}>
+        The previous version of the design system v3 (Angular) and v5 (React) is now in Long-Term Support (LTS). Here's what that means:
+      </GoabText>
+
+      <ul>
+        <li><strong>Bug fixes only:</strong> We'll continue fixing critical bugs and regressions.</li>
+        <li><strong>No new features or enhancements:</strong> All new development is happening in the latest major version.</li>
+        <li><strong>Same reliable experience:</strong> Your project will continue to work as expected.</li>
+      </ul>
+
+      <p>
+        Ready to update to the latest version, visit our <Link to="/get-started/developers/update">update guide</Link>
+      </p>
+
+      <GoabCallout type="important" size={"medium"} heading="Active maintenance will cease on September 30, 2025" maxWidth={"72ch"} mt={"5"}>
+        Projects still using LTS will continue to work, but new issues or bugs will not be prioritized.
+      </GoabCallout>
+    </>
+  );
+}

src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx

@@ -1,4 +1,4 @@
-import { GoabContainer } from "@abgov/react-components";
+import { GoabCallout, GoabContainer } from "@abgov/react-components";
 import "../Developers.css";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 import css from "@routes/patterns/patterns.module.css";
@@ -13,13 +13,23 @@ export default function DevelopersUpgradePage() {
         <h1>Version update guide</h1>
         <h3>Step-by-step guide to updating your code from DDD Design System v3 to v4 (Angular) and v5 to v6 (React)</h3>
         <p>
-          This guide will help you update your project to DDD Design System v4 (Angular) and v6 (React). The update
-          introduces key improvements, including enhanced alignment between Angular and React
-          properties, better error checking during builds, and type-ahead suggestions for Angular
-          components. These changes aim to improve the developer experience when working with the
-          design system.
+          The update introduces the following key improvements:
         </p>
-        <GoabContainer>
+        <ul>
+          <li><strong>Type-ahead support for Angular components:</strong> Get coding faster with smart suggestions directly in your IDE.</li>
+          <li><strong>New features and properties added across existing components:</strong> More flexibility, and improved accessibility.</li>
+          <li><strong>New components available:</strong> Build more complex interfaces with less custom code.</li>
+          <li><strong>Improved error checking during builds:</strong> Catch issues earlier for a smoother development experience.</li>
+        </ul>
+        <p>
+          This guide will help you update your project to DDD Design System v4 (Angular) and v6 (React).
+        </p>
+
+        <GoabCallout size="medium" type="important" heading={"Legacy component: Form stepper"} mb={"l"}>
+          The component is stable and supported in the latest major release. However, we recommend using the <a href="/patterns/public-form">public form pattern</a> for a more modular, flexible, and accessible approach.
+        </GoabCallout>
+
+        <GoabContainer mt="xl">
           <h3>Major differences between current and new version</h3>
           <p>
             One of the most significant changes in v4 (Angular) and v6 (React) is the renaming of component prefixes to align