From c1d76595d42265999393202cdb6a5561ab1f874f Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Wed, 26 Jun 2024 09:38:06 +0200
Subject: [PATCH] Added missing information in doc

---
 .../breadcrumbs/code/BreadcrumbsCodePage.tsx         |  8 +++++++-
 .../bulleted-list/code/BulletedListCodePage.tsx      | 12 +++++++++++-
 .../contextual-menu/code/ContextualMenuCodePage.tsx  |  8 +++++++-
 .../screens/components/flex/code/FlexCodePage.tsx    |  2 +-
 .../components/paragraph/code/ParagraphCodePage.tsx  |  8 +++++++-
 .../components/quick-nav/code/QuickNavCodePage.tsx   |  8 +++++++-
 .../status-light/code/StatusLightCodePage.tsx        |  8 +++++++-
 7 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx b/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx
index 1a465180c..6b39940d3 100644
--- a/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx
+++ b/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx
@@ -11,6 +11,7 @@ import {
 import TableCode, { ExtendedTableCode } from "@/common/TableCode";
 import basicUsage from "./examples/basicUsage";
 import nextJS from "./examples/nextJS";
+import StatusBadge from "@/common/StatusBadge";
 
 const itemTypeString = `{
   href?: string;
@@ -45,7 +46,12 @@ const sections = [
             </td>
           </tr>
           <tr>
-            <td>items</td>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusBadge status="required" />
+                items
+              </DxcFlex>
+            </td>
             <td>
               <TableCode>Item[]</TableCode>
               <p>
diff --git a/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx b/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
index a8e23d194..06f2609f4 100644
--- a/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
+++ b/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
@@ -12,6 +12,7 @@ import {
 import basicUsage from "./examples/basicUsage";
 import nestedList from "./examples/nestedList";
 import TableCode from "@/common/TableCode";
+import StatusBadge from "@/common/StatusBadge";
 
 const sections = [
   {
@@ -84,7 +85,16 @@ const sections = [
             </thead>
             <tbody>
               <tr>
-                <td>children</td>
+                <td>
+                  <DxcFlex
+                    direction="column"
+                    gap="0.25rem"
+                    alignItems="baseline"
+                  >
+                    <StatusBadge status="required" />
+                    children
+                  </DxcFlex>
+                </td>
                 <td>
                   <TableCode>React.ReactNode</TableCode>
                 </td>
diff --git a/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx b/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx
index 20a5555dc..d016b9730 100644
--- a/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx
+++ b/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx
@@ -7,6 +7,7 @@ import Example from "@/common/example/Example";
 import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
 import actionMenu from "./examples/actionMenu";
 import navigationMenu from "./examples/navigationMenu";
+import StatusBadge from "@/common/StatusBadge";
 
 const itemTypeString = `{
     badge?: React.ReactElement;
@@ -40,7 +41,12 @@ const sections = [
           <th>Default</th>
         </tr>
         <tr>
-          <td>items</td>
+          <td>
+            <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+              <StatusBadge status="required" />
+              items
+            </DxcFlex>
+          </td>
           <td>
             <TableCode style={{ fontSize: "0.875rem" }}>
               (Item | GroupItem)[] | Section[]
diff --git a/website/screens/components/flex/code/FlexCodePage.tsx b/website/screens/components/flex/code/FlexCodePage.tsx
index 350f05927..e7d0285f9 100644
--- a/website/screens/components/flex/code/FlexCodePage.tsx
+++ b/website/screens/components/flex/code/FlexCodePage.tsx
@@ -46,7 +46,7 @@ const sections = [
           <td>
             <TableCode>
               'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'right' |
-              'center' | 'space-between' | 'space-around' | 'space-evenly
+              'center' | 'space-between' | 'space-around' | 'space-evenly'
             </TableCode>
           </td>
           <td>
diff --git a/website/screens/components/paragraph/code/ParagraphCodePage.tsx b/website/screens/components/paragraph/code/ParagraphCodePage.tsx
index 7bee28841..58440ec83 100644
--- a/website/screens/components/paragraph/code/ParagraphCodePage.tsx
+++ b/website/screens/components/paragraph/code/ParagraphCodePage.tsx
@@ -6,6 +6,7 @@ import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
 import basicUsage from "./examples/basicUsage";
 import multipleParagraphs from "./examples/multipleParagraphs";
 import TableCode from "@/common/TableCode";
+import StatusBadge from "@/common/StatusBadge";
 
 const sections = [
   {
@@ -19,7 +20,12 @@ const sections = [
           <th>Default</th>
         </tr>
         <tr>
-          <td>children</td>
+          <td>
+            <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+              <StatusBadge status="required" />
+              children
+            </DxcFlex>
+          </td>
           <td>
             <TableCode>React.ReactNode</TableCode>
           </td>
diff --git a/website/screens/components/quick-nav/code/QuickNavCodePage.tsx b/website/screens/components/quick-nav/code/QuickNavCodePage.tsx
index 8243f9489..95df96044 100644
--- a/website/screens/components/quick-nav/code/QuickNavCodePage.tsx
+++ b/website/screens/components/quick-nav/code/QuickNavCodePage.tsx
@@ -6,6 +6,7 @@ import Example from "@/common/example/Example";
 import quickNav from "./examples/quickNav";
 import withContent from "./examples/withContent";
 import TableCode from "@/common/TableCode";
+import StatusBadge from "@/common/StatusBadge";
 
 const sections = [
   {
@@ -30,7 +31,12 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
-            <td>links</td>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusBadge status="required" />
+                links
+              </DxcFlex>
+            </td>
             <td>
               <TableCode>{"{ label: string; links?: Link[]; }[]"}</TableCode>
             </td>
diff --git a/website/screens/components/status-light/code/StatusLightCodePage.tsx b/website/screens/components/status-light/code/StatusLightCodePage.tsx
index c0d91772a..ebe465067 100644
--- a/website/screens/components/status-light/code/StatusLightCodePage.tsx
+++ b/website/screens/components/status-light/code/StatusLightCodePage.tsx
@@ -5,6 +5,7 @@ import DocFooter from "@/common/DocFooter";
 import TableCode from "@/common/TableCode";
 import Example from "@/common/example/Example";
 import basicUsage from "./examples/basicUsage";
+import StatusBadge from "@/common/StatusBadge";
 
 const sections = [
   {
@@ -36,7 +37,12 @@ const sections = [
             </td>
           </tr>
           <tr>
-            <td>label</td>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusBadge status="required" />
+                label
+              </DxcFlex>
+            </td>
             <td>
               <TableCode>string</TableCode>
             </td>