From da56cdcb68246a36f891af6f2072e9a57891f258 Mon Sep 17 00:00:00 2001 From: Vanessa Tran Date: Tue, 13 May 2025 15:10:08 -0600 Subject: [PATCH] feat(#2629): add lts policy page --- package-lock.json | 27 +++++++--------- package.json | 6 ++-- src/App.tsx | 5 +++ src/routes/get-started/GetStartedLayout.tsx | 3 +- src/routes/get-started/LtsPolicyPage.tsx | 32 +++++++++++++++++++ .../upgrade-guide/DevelopersUpgrade.tsx | 24 ++++++++++---- 6 files changed, 71 insertions(+), 26 deletions(-) create mode 100644 src/routes/get-started/LtsPolicyPage.tsx diff --git a/package-lock.json b/package-lock.json index 8bd0b7845..e6f0d89ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,9 @@ "name": "code-sandbox", "version": "0.0.0", "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", @@ -67,10 +67,9 @@ } }, "node_modules/@abgov/react-components": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.3.0.tgz", - "integrity": "sha512-MxQFFHXL/WKrcG+h6cB7HpHGmgY8hgpFTMOkpLlwC9jdDpAd9lxwHLjp0TzYmYDjuwXrpC6i7lrPGaIV62sUzQ==", - "license": "Apache-2.0", + "version": "6.4.0-alpha.1", + "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.4.0-alpha.1.tgz", + "integrity": "sha512-or2dlW4MJz6W22/tMSHDPaLgXOTgVKqt2u7hefYYL3efCIEWe8BZXPrbjk0MVIIgUjkzfFKuhiv3yEbm7QBs2A==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", @@ -78,16 +77,14 @@ } }, "node_modules/@abgov/ui-components-common": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.3.0.tgz", - "integrity": "sha512-tQhaTvjPjBMQIh0khN8kUaZFp/mwdtqYy2yIC+ehA5si4X+k6+fwt39mnnRYNis9DDAdV1+MmMuHrMC4UTIPyA==", - "license": "Apache-2.0" + "version": "1.3.0-alpha.2", + "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.3.0-alpha.2.tgz", + "integrity": "sha512-UtoqKgjRq+JkGO8dC5/WE6roaaOsf0NRvGE2Njlyf+I2Mx8LlrwFuYOGJ1ehLBwUkzn1bMT70x7YFDVrCIWJog==" }, "node_modules/@abgov/web-components": { - "version": "1.33.0", - "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.33.0.tgz", - "integrity": "sha512-Iix6I3c6rQar3L2dBd6x+f+Q5yXoOmCXEFcFPK4RaOwIU6Y+FB86P8Se7QbUafSL/c350MSTBL2he4cvk5WRcQ==", - "license": "Apache-2.0", + "version": "1.34.0-alpha.2", + "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.34.0-alpha.2.tgz", + "integrity": "sha512-RvsCZAm1R3ORhPQd7hw4Ef92RjwAAHjgsHj6J1OeA/NCHgOlc0WYJb/Ai+hw4M2jCfOAbXac8v3VWTw5W/iB7A==", "peerDependencies": { "@sveltejs/vite-plugin-svelte": "3.x", "glob": "10.x", diff --git a/package.json b/package.json index 04d14174b..bfb0bac93 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index a207abd59..1c1673cd6 100644 --- a/src/App.tsx +++ b/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( }> @@ -96,6 +98,9 @@ const router = createBrowserRouter( } /> + + } /> + } /> diff --git a/src/routes/get-started/GetStartedLayout.tsx b/src/routes/get-started/GetStartedLayout.tsx index a143cbedb..5265de802 100644 --- a/src/routes/get-started/GetStartedLayout.tsx +++ b/src/routes/get-started/GetStartedLayout.tsx @@ -15,11 +15,12 @@ export default function GetStartedLayout() { Setup Verify a bug VS Code - Technologies + Technologies Supported Browsers Version update guide QA testing + Long Term Support (LTS) Contribute Support Roadmap diff --git a/src/routes/get-started/LtsPolicyPage.tsx b/src/routes/get-started/LtsPolicyPage.tsx new file mode 100644 index 000000000..321f6dad6 --- /dev/null +++ b/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 ( + <> + Long Term Support (LTS) + + + The Long Term Support (LTS) version will continue to be supported until September 30, 2025. Learn more about what you can expect. + + + + The previous version of the design system v3 (Angular) and v5 (React) is now in Long-Term Support (LTS). Here's what that means: + + +
    +
  • Bug fixes only: We'll continue fixing critical bugs and regressions.
    • +
  • No new features or enhancements: All new development is happening in the latest major version.
    • +
  • Same reliable experience: Your project will continue to work as expected.
    • +
+ +

+ Ready to update to the latest version, visit our update guide +

+ + + Projects still using LTS will continue to work, but new issues or bugs will not be prioritized. + + + ); +} diff --git a/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx b/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx index e2ed38e3e..529fa0745 100644 --- a/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx +++ b/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() {

Version update guide

Step-by-step guide to updating your code from DDD Design System v3 to v4 (Angular) and v5 to v6 (React)

- 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:

- +
    +
  • Type-ahead support for Angular components: Get coding faster with smart suggestions directly in your IDE.
    • +
  • New features and properties added across existing components: More flexibility, and improved accessibility.
    • +
  • New components available: Build more complex interfaces with less custom code.
    • +
  • Improved error checking during builds: Catch issues earlier for a smoother development experience.
    • +
+

+ This guide will help you update your project to DDD Design System v4 (Angular) and v6 (React). +

+ + + The component is stable and supported in the latest major release. However, we recommend using the public form pattern for a more modular, flexible, and accessible approach. + + +

Major differences between current and new version

One of the most significant changes in v4 (Angular) and v6 (React) is the renaming of component prefixes to align