General updates before the 14th release

apps/website/pages/_app.tsx

@@ -2,10 +2,9 @@ import { ReactElement, ReactNode, useMemo, useState } from "react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import styled from "styled-components";
-import { DxcApplicationLayout, DxcTextInput, HalstackProvider } from "@dxc-technology/halstack-react";
-import { responsiveSizes } from "../screens/common/variables";
+import { DxcApplicationLayout, DxcTextInput, DxcToastsQueue, HalstackProvider } from "@dxc-technology/halstack-react";
 import SidenavLogo from "@/common/sidenav/SidenavLogo";
+import MainContent from "@/common/MainContent";
 import { useRouter } from "next/router";
 import { LinksSectionDetails, LinksSections, themeGeneratorLinks } from "@/common/pagesList";
 import Link from "next/link";
@@ -28,7 +27,7 @@ const ApplicationLayoutWrapper = ({ condition, wrapper, children }: ApplicationL
   <>{condition ? wrapper(children) : children}</>
 );
 
-const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
+const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   const getLayout = Component.getLayout || ((page) => page);
   const componentWithLayout = getLayout(<Component {...pageProps} />);
 
@@ -112,7 +111,9 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
               }
             >
               <DxcApplicationLayout.Main>
-                <MainContainer>{children}</MainContainer>
+                <DxcToastsQueue duration={5000}>
+                  <MainContent>{children}</MainContent>
+                </DxcToastsQueue>
               </DxcApplicationLayout.Main>
             </DxcApplicationLayout>
           )}
@@ -124,14 +125,4 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
   );
 };
 
-const MainContainer = styled.div`
-  margin: 80px 0;
-  max-width: 1124px;
-  margin-inline: max(5%, 50% - 1124px/2);
-
-  @media (max-width: ${responsiveSizes.laptop}px) {
-    margin: 80px 32px;
-  }
-`;
-
-export default MyApp;
+export default App;

apps/website/screens/common/ComponentHeading.tsx

@@ -1,5 +1,4 @@
 import { DxcHeading } from "@dxc-technology/halstack-react";
-import React from "react";
 
 type ComponentHeadingProps = {
   name: string;

apps/website/screens/common/HeadingLink.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 import slugify from "slugify";
 import { DxcBleed, DxcHeading } from "@dxc-technology/halstack-react";

apps/website/screens/common/MainContent.tsx

@@ -0,0 +1,64 @@
+import { useToast } from "@dxc-technology/halstack-react";
+import { ReactNode, useMemo, useState, useEffect } from "react";
+import styled from "styled-components";
+import { responsiveSizes } from "./variables";
+import { useRouter } from "next/router";
+
+const MainContainer = styled.div`
+  margin: 80px 0;
+  max-width: 1124px;
+  margin-inline: max(5%, 50% - 1124px/2);
+
+  @media (max-width: ${responsiveSizes.laptop}px) {
+    margin: 80px 32px;
+  }
+`;
+
+const MainContent = ({ children }: { children: ReactNode }) => {
+  const toast = useToast();
+  const router = useRouter();
+  const pathVersion = useMemo(
+    () =>
+      process.env.NEXT_PUBLIC_SITE_VERSION === "next" || process.env.NODE_ENV === "development"
+        ? 0
+        : parseInt(process.env.NEXT_PUBLIC_SITE_VERSION?.split(".")[0], 10),
+
+    []
+  );
+  const [latestRelease, setLatestRelease] = useState<number>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const response = await fetch("https://registry.npmjs.org/@dxc-technology/halstack-react/");
+        const data = await response.json();
+        const latestRelease = parseInt(data["dist-tags"].latest.split(".")[0], 10);
+        setLatestRelease(latestRelease);
+      } catch (error) {
+        console.error("Error fetching version:", error);
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (latestRelease > pathVersion) {
+      toast.info({
+        message: `Halstack ${latestRelease} is now available!`,
+        action: {
+          label: "Learn more",
+          onClick: () => {
+            if (window) {
+              const currentUrl = window.location.href;
+              const newUrl = currentUrl.replace(/halstack\/\d+\//, `halstack/${latestRelease}/`);
+              window.location.href = newUrl;
+            }
+          },
+        },
+      });
+    }
+  }, [latestRelease, toast]);
+
+  return <MainContainer>{children}</MainContainer>;
+};
+
+export default MainContent;

apps/website/screens/common/PageHeading.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 
 const PageHeading = ({ children }: { children: React.ReactNode }) => {

apps/website/screens/common/QuickNavContainer.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 import { DxcGrid, DxcQuickNav } from "@dxc-technology/halstack-react";
 import Section, { SectionType } from "./Section";

apps/website/screens/common/Section.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { DxcFlex } from "@dxc-technology/halstack-react";
 import HeadingLink from "./HeadingLink";
 

apps/website/screens/common/TabsPageLayout.tsx

@@ -1,6 +1,5 @@
 import { useRouter } from "next/router";
 import { DxcNavTabs } from "@dxc-technology/halstack-react";
-import React from "react";
 import Link from "next/link";
 
 type TabsPageLayoutProps = {

apps/website/screens/common/componentsList.json

@@ -9,14 +9,14 @@
   {
     "label": "Badge",
     "path": "/components/badge",
-    "status": "new"
+    "status": "stable"
   },
   { "label": "Bleed", "path": "/components/bleed", "status": "stable" },
   { "label": "Box", "path": "/components/box", "status": "deprecated" },
   {
     "label": "Breadcrumbs",
     "path": "/components/breadcrumbs",
-    "status": "new"
+    "status": "stable"
   },
   {
     "label": "Bulleted List",
@@ -35,7 +35,7 @@
   {
     "label": "Contextual Menu",
     "path": "/components/contextual-menu",
-    "status": "new"
+    "status": "stable"
   },
   {
     "label": "Data Grid",
@@ -51,7 +51,7 @@
   {
     "label": "Divider",
     "path": "/components/divider",
-    "status": "new"
+    "status": "stable"
   },
   { "label": "Dropdown", "path": "/components/dropdown", "status": "stable" },
   {
@@ -103,19 +103,19 @@
   {
     "label": "Status Light",
     "path": "/components/status-light",
-    "status": "new"
+    "status": "stable"
   },
   { "label": "Switch", "path": "/components/switch", "status": "stable" },
   { "label": "Table", "path": "/components/table", "status": "stable" },
   { "label": "Tabs", "path": "/components/tabs", "status": "stable" },
-  { "label": "Tag", "path": "/components/tag", "status": "legacy" },
+  { "label": "Tag", "path": "/components/tag", "status": "deprecated" },
   {
     "label": "Text Input",
     "path": "/components/text-input",
     "status": "stable"
   },
   { "label": "Textarea", "path": "/components/textarea", "status": "stable" },
-  { "label": "Toast", "path": "/components/toast", "status": "experimental" },
+  { "label": "Toast", "path": "/components/toast", "status": "new" },
   {
     "label": "Toggle Group",
     "path": "/components/toggle-group",
@@ -124,7 +124,7 @@
   {
     "label": "Tooltip",
     "path": "/components/tooltip",
-    "status": "new"
+    "status": "stable"
   },
   {
     "label": "Typography",