Merge branch 'master' into gomezivann/breadcrumbs

dxc-technology · Mar 21, 2024 · 26f3851 · 26f3851
2 parents c66893b + 8b295c2
commit 26f3851
Show file tree

Hide file tree

Showing 37 changed files with 258 additions and 205 deletions.
diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx
@@ -18,7 +18,7 @@ import {
   themeGeneratorLinks,
 } from "@/common/pagesList";
 import Link from "next/link";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
 
 type NextPageWithLayout = NextPage & {
   getLayout?: (page: ReactElement) => ReactNode;
@@ -116,8 +116,8 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
                               selected={matchPaths(path)}
                             >
                               {label}
-                              {status !== "Ready" && (
-                                <StatusTag status={status}>{status}</StatusTag>
+                              {status !== "ready" && (
+                                <StatusBadge status={status} />
                               )}
                             </DxcApplicationLayout.SideNav.Link>
                           </Link>

diff --git a/website/screens/common/StatusBadge.tsx b/website/screens/common/StatusBadge.tsx
@@ -0,0 +1,44 @@
+import { DxcBadge } from "@dxc-technology/halstack-react";
+
+type InfoStatus = {
+  status: "information";
+  label: string;
+};
+
+type NoInfoStatus = {
+  status: "deprecated" | "experimental" | "ready" | "required";
+  label?: never;
+};
+
+type Props = InfoStatus | NoInfoStatus;
+
+const getBadgeColor = (status: Props["status"]) => {
+  switch (status) {
+    case "deprecated":
+      return "yellow";
+    case "experimental":
+      return "purple";
+    case "information":
+      return "blue";
+    case "ready":
+      return "green";
+    case "required":
+      return "orange";
+    default:
+      return "grey";
+  }
+};
+
+const getStatusLabel = (label: Props["label"], status: Props["status"]) => {
+  return label ? label : status.charAt(0).toUpperCase() + status.slice(1);
+};
+
+const StatusBadge = ({ label, status }: Props) => (
+  <DxcBadge
+    label={getStatusLabel(label, status)}
+    color={getBadgeColor(status)}
+    size="small"
+  />
+);
+
+export default StatusBadge;
diff --git a/website/screens/common/StatusTag.tsx b/website/screens/common/StatusTag.tsx
diff --git a/website/screens/common/componentList.js b/website/screens/common/componentList.js
@@ -1,70 +1,74 @@
 exports.componentsList = [
-  { label: "Accordion", path: "/components/accordion", status: "Ready" },
-  { label: "Alert", path: "/components/alert", status: "Ready" },
+  { label: "Accordion", path: "/components/accordion", status: "ready" },
+  { label: "Alert", path: "/components/alert", status: "ready" },
   {
     label: "Application Layout",
     path: "/components/application-layout",
-    status: "Ready",
+    status: "ready",
   },
   {
     label: "Badge",
     path: "/components/badge",
-    status: "Experimental",
+    status: "experimental",
   },
-  { label: "Bleed", path: "/components/bleed", status: "Ready" },
-  { label: "Box", path: "/components/box", status: "Deprecated" },
+  { label: "Bleed", path: "/components/bleed", status: "ready" },
+  { label: "Box", path: "/components/box", status: "deprecated" },
   {
     label: "Bulleted List",
     path: "/components/bulleted-list",
-    status: "Ready",
+    status: "ready",
   },
-  { label: "Button", path: "/components/button", status: "Ready" },
-  { label: "Card", path: "/components/card", status: "Ready" },
-  { label: "Checkbox", path: "/components/checkbox", status: "Ready" },
-  { label: "Chip", path: "/components/chip", status: "Ready" },
-  { label: "Container", path: "/components/container", status: "Experimental" },
-  { label: "Date Input", path: "/components/date-input", status: "Ready" },
-  { label: "Dialog", path: "/components/dialog", status: "Ready" },
-  { label: "Divider", path: "/components/divider", status: "Experimental" },
-  { label: "Dropdown", path: "/components/dropdown", status: "Ready" },
-  { label: "File Input", path: "/components/file-input", status: "Ready" },
-  { label: "Flex", path: "/components/flex", status: "Ready" },
-  { label: "Footer", path: "/components/footer", status: "Ready" },
-  { label: "Grid", path: "/components/grid", status: "Ready" },
-  { label: "Header", path: "/components/header", status: "Ready" },
-  { label: "Heading", path: "/components/heading", status: "Ready" },
-  { label: "Image", path: "/components/image", status: "Experimental" },
-  { label: "Inset", path: "/components/inset", status: "Ready" },
-  { label: "Link", path: "/components/link", status: "Ready" },
-  { label: "Nav Tabs", path: "/components/nav-tabs", status: "Ready" },
-  { label: "Number Input", path: "/components/number-input", status: "Ready" },
-  { label: "Paginator", path: "/components/paginator", status: "Ready" },
-  { label: "Paragraph", path: "/components/paragraph", status: "Ready" },
+  { label: "Button", path: "/components/button", status: "ready" },
+  { label: "Card", path: "/components/card", status: "ready" },
+  { label: "Checkbox", path: "/components/checkbox", status: "ready" },
+  { label: "Chip", path: "/components/chip", status: "ready" },
+  { label: "Container", path: "/components/container", status: "experimental" },
+  { label: "Date Input", path: "/components/date-input", status: "ready" },
+  { label: "Dialog", path: "/components/dialog", status: "ready" },
+  { label: "Divider", path: "/components/divider", status: "experimental" },
+  { label: "Dropdown", path: "/components/dropdown", status: "ready" },
+  { label: "File Input", path: "/components/file-input", status: "ready" },
+  { label: "Flex", path: "/components/flex", status: "ready" },
+  { label: "Footer", path: "/components/footer", status: "ready" },
+  { label: "Grid", path: "/components/grid", status: "ready" },
+  { label: "Header", path: "/components/header", status: "ready" },
+  { label: "Heading", path: "/components/heading", status: "ready" },
+  { label: "Image", path: "/components/image", status: "experimental" },
+  { label: "Inset", path: "/components/inset", status: "ready" },
+  { label: "Link", path: "/components/link", status: "ready" },
+  { label: "Nav Tabs", path: "/components/nav-tabs", status: "ready" },
+  { label: "Number Input", path: "/components/number-input", status: "ready" },
+  { label: "Paginator", path: "/components/paginator", status: "ready" },
+  { label: "Paragraph", path: "/components/paragraph", status: "ready" },
   {
     label: "Password Input",
     path: "/components/password-input",
-    status: "Ready",
+    status: "ready",
   },
-  { label: "Progress Bar", path: "/components/progress-bar", status: "Ready" },
-  { label: "Quick Nav", path: "/components/quick-nav", status: "Ready" },
-  { label: "Radio Group", path: "/components/radio-group", status: "Ready" },
+  { label: "Progress Bar", path: "/components/progress-bar", status: "ready" },
+  { label: "Quick Nav", path: "/components/quick-nav", status: "ready" },
+  { label: "Radio Group", path: "/components/radio-group", status: "ready" },
   {
     label: "Resultset Table",
     path: "/components/resultset-table",
-    status: "Ready",
+    status: "ready",
   },
-  { label: "Select", path: "/components/select", status: "Ready" },
-  { label: "Sidenav", path: "/components/sidenav", status: "Ready" },
-  { label: "Slider", path: "/components/slider", status: "Ready" },
-  { label: "Spinner", path: "/components/spinner", status: "Ready" },
-  { label: "Status Light", path: "/components/status-light", status: "Experimental" },
-  { label: "Switch", path: "/components/switch", status: "Ready" },
-  { label: "Table", path: "/components/table", status: "Ready" },
-  { label: "Tabs", path: "/components/tabs", status: "Ready" },
-  { label: "Tag", path: "/components/tag", status: "Ready" },
-  { label: "Text Input", path: "/components/text-input", status: "Ready" },
-  { label: "Textarea", path: "/components/textarea", status: "Ready" },
-  { label: "Toggle Group", path: "/components/toggle-group", status: "Ready" },
-  { label: "Typography", path: "/components/typography", status: "Ready" },
-  { label: "Wizard", path: "/components/wizard", status: "Ready" },
+  { label: "Select", path: "/components/select", status: "ready" },
+  { label: "Sidenav", path: "/components/sidenav", status: "ready" },
+  { label: "Slider", path: "/components/slider", status: "ready" },
+  { label: "Spinner", path: "/components/spinner", status: "ready" },
+  {
+    label: "Status Light",
+    path: "/components/status-light",
+    status: "experimental",
+  },
+  { label: "Switch", path: "/components/switch", status: "ready" },
+  { label: "Table", path: "/components/table", status: "ready" },
+  { label: "Tabs", path: "/components/tabs", status: "ready" },
+  { label: "Tag", path: "/components/tag", status: "ready" },
+  { label: "Text Input", path: "/components/text-input", status: "ready" },
+  { label: "Textarea", path: "/components/textarea", status: "ready" },
+  { label: "Toggle Group", path: "/components/toggle-group", status: "ready" },
+  { label: "Typography", path: "/components/typography", status: "ready" },
+  { label: "Wizard", path: "/components/wizard", status: "ready" },
 ];
diff --git a/website/screens/common/pagesList.ts b/website/screens/common/pagesList.ts
@@ -1,5 +1,5 @@
 import { componentsList } from "./componentList";
-type ComponentStatus = "Ready" | "Deprecated" | "Experimental";
+type ComponentStatus = "ready" | "deprecated" | "experimental";
 
 export type LinkDetails = {
   label: string;
@@ -23,26 +23,25 @@ export const themeGeneratorLinks = [
 ];
 
 const overviewLinks: LinkDetails[] = [
-  { label: "Introduction", path: "/overview/introduction", status: "Ready" },
-  { label: "Releases", path: "/overview/releases", status: "Ready" },
+  { label: "Introduction", path: "/overview/introduction", status: "ready" },
+  { label: "Releases", path: "/overview/releases", status: "ready" },
 ];
 const utilitiesLinks: LinkDetails[] = [
   {
     label: "Halstack Provider",
     path: "/utilities/halstack-provider",
-    status: "Ready",
+    status: "ready",
   },
 ];
 
 const principlesLinks: LinkDetails[] = [
-  { label: "Color", path: "/principles/color", status: "Ready" },
-  { label: "Layout", path: "/principles/layout", status: "Ready" },
-  { label: "Localization", path: "/principles/localization", status: "Ready" },
-  { label: "Spacing", path: "/principles/spacing", status: "Ready" },
-  { label: "Themes", path: "/principles/themes", status: "Ready" },
-  { label: "Typography", path: "/principles/typography", status: "Ready" },
-  { label: "Iconography", path: "/principles/iconography", status: "Ready" },
-
+  { label: "Color", path: "/principles/color", status: "ready" },
+  { label: "Iconography", path: "/principles/iconography", status: "ready" },
+  { label: "Layout", path: "/principles/layout", status: "ready" },
+  { label: "Localization", path: "/principles/localization", status: "ready" },
+  { label: "Spacing", path: "/principles/spacing", status: "ready" },
+  { label: "Themes", path: "/principles/themes", status: "ready" },
+  { label: "Typography", path: "/principles/typography", status: "ready" },
 ];
 
 const componentsLinks = componentsList as LinkDetails[];

diff --git a/website/screens/common/sidenav/SidenavLogo.tsx b/website/screens/common/sidenav/SidenavLogo.tsx
@@ -1,10 +1,10 @@
 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";
 import { useRouter } from "next/router";
 import pjson from "../../../package-lock.json";
+import { DxcBadge } from "@dxc-technology/halstack-react";
 
 type SidenavLogoProps = { subtitle?: string };
 
@@ -31,13 +31,17 @@ const SidenavLogo = ({
         </Header>
         <Subtitle>{subtitle}</Subtitle>
       </LogoContainer>
-      <StatusTag>
-        {isDev
-          ? "dev"
-          : isNaN(parseInt(pathVersion))
-          ? "next"
-          : `v${halstackVersion}`}
-      </StatusTag>
+      <DxcBadge
+        label={
+          isDev
+            ? "dev"
+            : isNaN(parseInt(pathVersion))
+            ? "next"
+            : `v${halstackVersion}`
+        }
+        color="purple"
+        size="small"
+      />
     </SidenavLogoContainer>
   );
 };

diff --git a/website/screens/components/accordion/code/AccordionCodePage.tsx b/website/screens/components/accordion/code/AccordionCodePage.tsx
@@ -14,7 +14,7 @@ import icons from "./examples/icons";
 import controlledAccordionGroup from "./examples/controlledAccordionGroup";
 import uncontrolledAccordionGroup from "./examples/uncontrolledAccordionGroup";
 import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
 import Code from "@/common/Code";
 
 const sections = [
@@ -34,7 +34,8 @@ const sections = [
           <tr>
             <td>
               <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
-                <StatusTag status="Required">Required</StatusTag>label
+                <StatusBadge status="required" />
+                label
               </DxcFlex>
             </td>
             <td>
@@ -115,7 +116,7 @@ const sections = [
           <tr>
             <td>
               <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
-                <StatusTag status="Required">Required</StatusTag>
+                <StatusBadge status="required" />
                 children
               </DxcFlex>
             </td>
@@ -233,7 +234,7 @@ const sections = [
                     gap="0.25rem"
                     alignItems="baseline"
                   >
-                    <StatusTag status="Required">Required</StatusTag>
+                    <StatusBadge status="required" />
                     children
                   </DxcFlex>
                 </td>
@@ -294,7 +295,8 @@ const sections = [
                         gap="0.25rem"
                         alignItems="baseline"
                       >
-                        <StatusTag status="Required">Required</StatusTag>label
+                        <StatusBadge status="required" />
+                        label
                       </DxcFlex>
                     </td>
                     <td>
@@ -351,7 +353,7 @@ const sections = [
                         gap="0.25rem"
                         alignItems="baseline"
                       >
-                        <StatusTag status="Required">Required</StatusTag>
+                        <StatusBadge status="required" />
                         children
                       </DxcFlex>
                     </td>

diff --git a/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx b/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
@@ -9,7 +9,7 @@ import QuickNavContainer from "@/common/QuickNavContainer";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import Link from "next/link";
 import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
 import Code from "@/common/Code";
 
 const ApplicationLayoutPropsTable = () => (
@@ -84,7 +84,7 @@ const ApplicationLayoutPropsTable = () => (
       <tr>
         <td>
           <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
-            <StatusTag status="Required">Required</StatusTag>
+            <StatusBadge status="required" />
             children
           </DxcFlex>
         </td>