dxc-technology · jsuarezgonz · Sep 19, 2024 · Aug 30, 2024 · Sep 2, 2024 · Sep 3, 2024
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -11,7 +11,6 @@
     "@cloudscape-design/components": "^3.0.706",
     "@dxc-technology/halstack-react": "*",
     "@radix-ui/react-popover": "^1.0.7",
-    "@types/styled-components": "5.1.29",
     "cross-env": "^7.0.3",
     "next": "14.2.10",
     "raw-loader": "^4.0.2",
@@ -30,6 +29,7 @@
     "@types/react": "^18",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18",
+    "@types/styled-components": "5.1.29",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
     "typescript": "^5"

diff --git a/apps/website/pages/components/toast/index.tsx b/apps/website/pages/components/toast/index.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import ToastCodePage from "../../../screens/components/toast/code/ToastCodePage";
+import ToastPageLayout from "../../../screens/components/toast/ToastPageLayout";
+
+const Index = () => {
+  return (
+    <>
+      <Head>
+        <title>Toast — Halstack Design System</title>
+      </Head>
+      <ToastCodePage></ToastCodePage>
+    </>
+  );
+};
+
+Index.getLayout = function getLayout(page: ReactElement) {
+  return <ToastPageLayout>{page}</ToastPageLayout>;
+};
+
+export default Index;
diff --git a/apps/website/pages/components/toast/specifications.tsx b/apps/website/pages/components/toast/specifications.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import ToastSpecsPage from "../../../screens/components/toast/specs/ToastSpecsPage";
+import ToastPageLayout from "../../../screens/components/toast/ToastPageLayout";
+
+const Specifications = () => {
+  return (
+    <>
+      <Head>
+        <title>Toast Specs — Halstack Design System</title>
+      </Head>
+      <ToastSpecsPage></ToastSpecsPage>
+    </>
+  );
+};
+
+Specifications.getLayout = function getLayout(page: ReactElement) {
+  return <ToastPageLayout>{page}</ToastPageLayout>;
+};
+
+export default Specifications;
diff --git a/apps/website/pages/components/toast/usage.tsx b/apps/website/pages/components/toast/usage.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import ToastPageLayout from "../../../screens/components/toast/ToastPageLayout";
+import ToastUsagePage from "../../../screens/components/toast/usage/ToastUsagePage";
+
+const Usage = () => {
+  return (
+    <>
+      <Head>
+        <title>Toast Usage — Halstack Design System</title>
+      </Head>
+      <ToastUsagePage></ToastUsagePage>
+    </>
+  );
+};
+
+Usage.getLayout = function getLayout(page: ReactElement) {
+  return <ToastPageLayout>{page}</ToastPageLayout>;
+};
+
+export default Usage;
diff --git a/apps/website/screens/common/TabsPageLayout.tsx b/apps/website/screens/common/TabsPageLayout.tsx
@@ -2,7 +2,6 @@ import { useRouter } from "next/router";
 import { DxcNavTabs } from "@dxc-technology/halstack-react";
 import React from "react";
 import Link from "next/link";
-import styled from "styled-components";
 
 type TabsPageLayoutProps = {
   tabs: { label: string; path: string }[];

diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json
@@ -115,6 +115,7 @@
     "status": "stable"
   },
   { "label": "Textarea", "path": "/components/textarea", "status": "stable" },
+  { "label": "Toast", "path": "/components/toast", "status": "experimental" },
   {
     "label": "Toggle Group",
     "path": "/components/toggle-group",

diff --git a/apps/website/screens/components/accordion/specs/AccordionSpecsPage.tsx b/apps/website/screens/components/accordion/specs/AccordionSpecsPage.tsx
@@ -33,31 +33,26 @@ const sections = [
     ),
   },
   {
-    title: "Formatting",
-    subSections: [
-      {
-        title: "Anatomy",
-        content: (
-          <>
-            <Image src={accordionAnatomy} alt="Accordion anatomy" />
-            <DxcBulletedList type="number">
-              <DxcBulletedList.Item>Header</DxcBulletedList.Item>
-              <DxcBulletedList.Item>
-                Custom icon <em>(Optional)</em>
-              </DxcBulletedList.Item>
-              <DxcBulletedList.Item>Title</DxcBulletedList.Item>
-              <DxcBulletedList.Item>
-                Helper text <em>(Optional)</em>
-              </DxcBulletedList.Item>
-              <DxcBulletedList.Item>
-                Caret icon <em>(Expand/collapse)</em>
-              </DxcBulletedList.Item>
-              <DxcBulletedList.Item>Expanded panel</DxcBulletedList.Item>
-            </DxcBulletedList>
-          </>
-        ),
-      },
-    ],
+    title: "Anatomy",
+    content: (
+      <>
+        <Image src={accordionAnatomy} alt="Accordion anatomy" />
+        <DxcBulletedList type="number">
+          <DxcBulletedList.Item>Header</DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            Custom icon <em>(Optional)</em>
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>Title</DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            Helper text <em>(Optional)</em>
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            Caret icon <em>(Expand/collapse)</em>
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>Expanded panel</DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
   },
   {
     title: "Design tokens",

diff --git a/apps/website/screens/components/badge/usage/BadgeUsagePage.tsx b/apps/website/screens/components/badge/usage/BadgeUsagePage.tsx
@@ -29,7 +29,7 @@ const sections = [
               the teams involved in the task, repositories, folders…).
             </DxcBulletedList.Item>
             <DxcBulletedList.Item>
-              Keep it concise: comprehensively use badges, only displaying essential information that adds value to the
+              Keep it concise. Comprehensively use badges, only displaying essential information that adds value to the
               user experience.
             </DxcBulletedList.Item>
             <DxcBulletedList.Item>
@@ -119,12 +119,12 @@ const sections = [
             </DxcParagraph>
             <DxcBulletedList>
               <DxcBulletedList.Item>
-                Non-semantic categorization: used in instances where the badge does not carry semantic meaning, it can
-                be employed in any color from the available palette.
+                <strong>Non-semantic categorization:</strong> used in instances where the badge does not carry semantic
+                meaning, it can be employed in any color from the available palette.
               </DxcBulletedList.Item>
               <DxcBulletedList.Item>
-                Semantic categorization: when the badge conveys semantic information, spacific semantic colors are
-                available:
+                <strong>Semantic categorization:</strong> when the badge conveys semantic information, specific semantic
+                colors are available:
                 <DxcBulletedList type="circle">
                   <DxcBulletedList.Item>
                     Green: positive actions, such as approved, completed, success…

diff --git a/apps/website/screens/components/button/usage/ButtonUsagePage.tsx b/apps/website/screens/components/button/usage/ButtonUsagePage.tsx
@@ -14,6 +14,8 @@ import variants from "./examples/variants";
 import icons from "./examples/iconUsage";
 import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
 import Code from "@/common/Code";
+import Image from "@/common/Image";
+import semanticButtons from "./images/semantic_buttons.png";
 
 const sections = [
   {
@@ -141,7 +143,7 @@ const sections = [
               </td>
               <td>
                 Neutral action with no specific context. Typically used for general actions. Shown in the brand's
-                primary color. Use for neutral actions such as "Submit", "Save" or "Continue.”
+                primary color. Use for neutral actions such as "Submit", "Save" or "Continue.”.
               </td>
             </tr>
             <tr>
@@ -152,18 +154,18 @@ const sections = [
               </td>
               <td>
                 Indicates a destructive action or highlights a critical issue. Styled in red. Use for actions like
-                "Delete", "Remove" or "Cancel Subscription.”
+                "Delete", "Remove" or "Cancel Subscription.”.
               </td>
             </tr>
             <tr>
               <td>
-                <DxcTypography color="#c26c0a" fontWeight="600">
-                  Warning
+                <DxcTypography color="#0086e6" fontWeight="600">
+                  Info
                 </DxcTypography>
               </td>
               <td>
-                Alerts the user to potential issues or actions that need caution. Styled in orange. Use for actions like
-                "Warning" or "Attention Needed.”
+                Provides additional information or context. Shown in blue, the brand's secondary color. Use for actions
+                like "More Info", "Details" or "Learn More.”.
               </td>
             </tr>
             <tr>
@@ -174,22 +176,23 @@ const sections = [
               </td>
               <td>
                 Represents a positive action or confirms the completion of a task. Styled in green. Use for actions like
-                "Confirm", "Complete" or "Approve.”
+                "Confirm", "Complete" or "Approve.”.
               </td>
             </tr>
             <tr>
               <td>
-                <DxcTypography color="#0086e6" fontWeight="600">
-                  Info
+                <DxcTypography color="#c26c0a" fontWeight="600">
+                  Warning
                 </DxcTypography>
               </td>
               <td>
-                Provides additional information or context. Shown in blue, the brand's secondary color. Use for actions
-                like "More Info", "Details" or "Learn More.”
+                Alerts the user to potential issues or actions that need caution. Styled in orange. Use for actions like
+                "Warning" or "Attention Needed.”.
               </td>
             </tr>
           </tbody>
         </DxcTable>
+        <Image src={semanticButtons} alt="Semantic buttons based on their purpose" />
       </>
     ),
   },

diff --git a/apps/website/screens/components/button/usage/images/semantic_buttons.png b/apps/website/screens/components/button/usage/images/semantic_buttons.png
diff --git a/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx b/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx
@@ -159,7 +159,7 @@ const sections = [
           <tr>
             <td>ref</td>
             <td>
-              <TableCode>{"React.Ref <HTMLDivElement>"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
             <td>Reference to the component.</td>
             <td>-</td>

diff --git a/apps/website/screens/components/date-input/code/DateInputCodePage.tsx b/apps/website/screens/components/date-input/code/DateInputCodePage.tsx
@@ -231,7 +231,7 @@ const sections = [
           <tr>
             <td>ref</td>
             <td>
-              <TableCode>{"React.Ref <HTMLDivElement>"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
             <td>Reference to the component.</td>
             <td>-</td>

diff --git a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
@@ -207,7 +207,7 @@ const sections = [
           <tr>
             <td>ref</td>
             <td>
-              <TableCode>{"React.Ref <HTMLDivElement>"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
             <td>Reference to the component.</td>
             <td>-</td>

diff --git a/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx b/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx
@@ -252,7 +252,7 @@ const sections = [
           <tr>
             <td>ref</td>
             <td>
-              <TableCode>{"React.Ref <HTMLDivElement>"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
             <td>Reference to the component.</td>
             <td>-</td>

diff --git a/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx b/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx
@@ -199,7 +199,7 @@ const sections = [
           <tr>
             <td>ref</td>
             <td>
-              <TableCode>{"React.Ref <HTMLDivElement>"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
             <td>Reference to the component.</td>
             <td>-</td>

diff --git a/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx b/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
@@ -201,7 +201,7 @@ const sections = [
           <tr>
             <td>ref</td>
             <td>
-              <TableCode>{"React.Ref <HTMLDivElement>"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
             <td>Reference to the component.</td>
             <td>-</td>

diff --git a/apps/website/screens/components/select/code/SelectCodePage.tsx b/apps/website/screens/components/select/code/SelectCodePage.tsx
@@ -9,9 +9,15 @@ import uncontrolled from "./examples/uncontrolled";
 import errorHandling from "./examples/errorHandling";
 import groups from "./examples/groupedOptions";
 import icons from "./examples/icons";
-import TableCode from "@/common/TableCode";
+import TableCode, { ExtendedTableCode } from "@/common/TableCode";
 import StatusBadge from "@/common/StatusBadge";
 
+const optionsType = `{ 
+    label: string;
+    value: string; 
+    icon: string | Icon;
+}`;
+
 const sections = [
   {
     title: "Props",
@@ -74,11 +80,15 @@ const sections = [
               </DxcFlex>
             </td>
             <td>
-              <TableCode>
-                {
-                  "({ label: string, value: string, icon: (string | React.ReactNode & React.SVGProps <SVGSVGElement>) })[] | ({ label: string, options: Option[] })[]"
-                }
-              </TableCode>
+              <TableCode>{"Option[] | ({ label: string, options: Option[] })[]"}</TableCode>
+              <p>
+                being <Code>Option</Code> the following type:
+              </p>
+              <ExtendedTableCode>{optionsType}</ExtendedTableCode>
+              <p>
+                and <Code>Icon</Code>:
+              </p>
+              <TableCode>{`React.ReactNode & React.SVGProps<SVGSVGElement>`}</TableCode>
             </td>
             <td>
               An array of objects representing the selectable options. Each object has the following properties
@@ -253,7 +263,7 @@ const sections = [
           <tr>
             <td>ref</td>
             <td>
-              <TableCode>{"React.Ref <HTMLDivElement>"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
             <td>Reference to the component.</td>
             <td>-</td>

diff --git a/apps/website/screens/components/slider/code/SliderCodePage.tsx b/apps/website/screens/components/slider/code/SliderCodePage.tsx
@@ -208,7 +208,7 @@ const sections = [
           <tr>
             <td>ref</td>
             <td>
-              <TableCode>{"React.Ref <HTMLDivElement>"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
             <td>Reference to the component.</td>
             <td>-</td>

diff --git a/apps/website/screens/components/switch/code/SwitchCodePage.tsx b/apps/website/screens/components/switch/code/SwitchCodePage.tsx
@@ -147,7 +147,7 @@ const sections = [
           <tr>
             <td>ref</td>
             <td>
-              <TableCode>{"React.Ref <HTMLDivElement>"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
             <td>Reference to the component.</td>
             <td>-</td>

diff --git a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx
@@ -325,7 +325,7 @@ const sections = [
           <tr>
             <td>ref</td>
             <td>
-              <TableCode>{"React.Ref <HTMLDivElement>"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
             <td>Reference to the component.</td>
             <td>-</td>

diff --git a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx
@@ -272,7 +272,7 @@ const sections = [
           <tr>
             <td>ref</td>
             <td>
-              <TableCode>{"React.Ref <HTMLDivElement>"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
             <td>Reference to the component.</td>
             <td>-</td>