Website improvements

website/screens/common/ComponentHeading.tsx

@@ -1,6 +1,6 @@
 import { DxcHeading, DxcFlex } from "@dxc-technology/halstack-react";
 import React from "react";
-import styled from "styled-components";
+import StatusTag from "@/common/StatusTag";
 
 type ComponentHeadingProps = {
   name: string;
@@ -16,41 +16,4 @@ const ComponentHeading = ({ name, status }: ComponentHeadingProps) => {
   );
 };
 
-type StatusTagProps = { status: "Ready" | "Deprecated" | "Experimental" };
-
-const StatusTag = styled.div<StatusTagProps>`
-  box-sizing: border-box;
-  height: 24px;
-  border: 1px solid
-    ${(props) =>
-      props.status === "Ready"
-        ? "#24A148"
-        : props.status === "Deprecated"
-        ? "#C59F07"
-        : props.status === "Experimental"
-        ? "#5F249F"
-        : ""};
-  border-radius: 0.5rem;
-  padding: 4px 8px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1.125em;
-  color: ${(props) =>
-    props.status === "Ready"
-      ? "#135325"
-      : props.status === "Deprecated"
-      ? "#624F04"
-      : props.status === "Experimental"
-      ? "#321353"
-      : ""};
-  background-color: ${(props) =>
-    props.status === "Ready"
-      ? "#F7FDF9"
-      : props.status === "Deprecated"
-      ? "#FFFDF5"
-      : props.status === "Experimental"
-      ? "#FAF7FD"
-      : ""}; ;
-`;
-
 export default ComponentHeading;

website/screens/common/StatusTag.tsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+type StatusTagProps = {
+  status?: "Ready" | "Deprecated" | "Experimental";
+};
+
+const StatusTag = styled.div<StatusTagProps>`
+  box-sizing: border-box;
+  height: 24px;
+  border: 1px solid
+    ${(props) =>
+      props.status === "Ready"
+        ? "#24A148"
+        : props.status === "Deprecated"
+        ? "#C59F07"
+        : "#5F249F"};
+  border-radius: 0.5rem;
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.125em;
+  color: ${(props) =>
+    props.status === "Ready"
+      ? "#135325"
+      : props.status === "Deprecated"
+      ? "#624F04"
+      : "#321353"};
+  background-color: ${(props) =>
+    props.status === "Ready"
+      ? "#F7FDF9"
+      : props.status === "Deprecated"
+      ? "#FFFDF5"
+      : "#FAF7FD"}; ;
+`;
+
+export default StatusTag;

website/screens/common/sidenav/SidenavLogo.tsx

@@ -1,25 +1,41 @@
 import styled from "styled-components";
 import Image from "@/common/Image";
 import halstackLogo from "@/common/images/halstack_logo.svg";
+import StatusTag from "@/common/StatusTag";
+import React from "react";
+
+const siteVersion = process.env.SITE_VERSION
+  ? typeof process.env.SITE_VERSION === "number"
+    ? `v${process.env.SITE_VERSION}.0.0`
+    : process.env.SITE_VERSION
+  : "dev";
 
 const SidenavLogo = () => {
   return (
     <SidenavLogoContainer>
-      <Header>
-        <Image
-          src={halstackLogo}
-          alt="Halstack logo"
-          width="24px"
-          height="24px"
-        />
-        <Title>Halstack</Title>
-      </Header>
-      <Subtitle>Design system</Subtitle>
+      <LogoContainer>
+        <Header>
+          <Image
+            src={halstackLogo}
+            alt="Halstack logo"
+            width="24px"
+            height="24px"
+          />
+          <Title>Halstack</Title>
+        </Header>
+        <Subtitle>Design system</Subtitle>
+      </LogoContainer>
+      <StatusTag>{siteVersion}</StatusTag>
     </SidenavLogoContainer>
   );
 };
 
 const SidenavLogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const LogoContainer = styled.div`
   margin: 0 24px;
   display: flex;
   flex-direction: column;

website/screens/overview/introduction/IntroductionPage.tsx

@@ -185,6 +185,47 @@ const sections = [
       </>
     ),
   },
+  {
+    title: "Documentation of other releases",
+    content: (
+      <>
+        <DxcParagraph>
+          This site is new and comes to replace the existing one. However, the
+          old documentation is still available through the following links for
+          consultation:
+        </DxcParagraph>
+        <DxcBulletedList>
+          <DxcBulletedList.Item>
+            <DxcLink href="https://developer.dxc.com/tools/react" newWindow>
+              React CDK
+            </DxcLink>
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <DxcLink href="https://developer.dxc.com/tools/angular" newWindow>
+              Angular CDK
+            </DxcLink>
+          </DxcBulletedList.Item>
+        </DxcBulletedList>
+        <DxcParagraph>
+          <em>
+            Please note that these sites are discontinued and may not be updated
+            anymore.
+          </em>
+        </DxcParagraph>
+        <DxcParagraph>
+          The last development site can be accessed through this{" "}
+          <DxcLink href="https://developer.dxc.com/halstack/next/" newWindow>
+            link
+          </DxcLink>
+          ; and the last release is available{" "}
+          <DxcLink href="https://developer.dxc.com/halstack/6/" newWindow>
+            here
+          </DxcLink>
+          .
+        </DxcParagraph>
+      </>
+    ),
+  },
 ];
 
 const Introduction = () => {