`
- box-sizing: border-box;
- display: inline-flex;
- align-items: baseline;
- width: fit-content;
- border-radius: 0.5rem;
- padding: 3px 6px;
- font-size: 0.75rem;
- font-weight: 600;
- line-height: 1.125em;
- color: ${(props) =>
- props.status === "Ready"
- ? "#135325"
- : props.status === "Deprecated"
- ? "#947705"
- : props.status === "Information"
- ? "#003C66"
- : props.status === "Required"
- ? "#915108"
- : "#321353"};
- background-color: ${(props) =>
- props.status === "Ready"
- ? "#ACECBE"
- : props.status === "Deprecated"
- ? "#FBE89D"
- : props.status === "Information"
- ? "#CCEAFF"
- : props.status === "Required"
- ? "#FCE7CF"
- : "#E5D5F6"};
-`;
-
-export default StatusTag;
diff --git a/website/screens/common/componentList.js b/website/screens/common/componentList.js
index 184ea64c5..eaf9fc115 100644
--- 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
index 1ac1873ef..e3a72a115 100644
--- 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: "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" },
];
const componentsLinks = componentsList as LinkDetails[];
diff --git a/website/screens/common/sidenav/SidenavLogo.tsx b/website/screens/common/sidenav/SidenavLogo.tsx
index 6b9b779b9..8a625f873 100644
--- 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 = ({
{subtitle}
-
- {isDev
- ? "dev"
- : isNaN(parseInt(pathVersion))
- ? "next"
- : `v${halstackVersion}`}
-
+
);
};
diff --git a/website/screens/components/accordion/code/AccordionCodePage.tsx b/website/screens/components/accordion/code/AccordionCodePage.tsx
index 0ed4e1d7c..a83bf08b0 100644
--- 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 = [
- Requiredlabel
+
+ label
|
@@ -115,7 +116,7 @@ const sections = [
|
- Required
+
children
|
@@ -233,7 +234,7 @@ const sections = [
gap="0.25rem"
alignItems="baseline"
>
- Required
+
children
@@ -294,7 +295,8 @@ const sections = [
gap="0.25rem"
alignItems="baseline"
>
- Requiredlabel
+
+ label
@@ -351,7 +353,7 @@ const sections = [
gap="0.25rem"
alignItems="baseline"
>
- Required
+
children
|
diff --git a/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx b/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
index 8d4192ca9..48aa04ad5 100644
--- 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 = () => (
- Required
+
children
|
diff --git a/website/screens/components/bleed/code/BleedCodePage.tsx b/website/screens/components/bleed/code/BleedCodePage.tsx
index 90bfcb9a9..f6b26d1fd 100644
--- a/website/screens/components/bleed/code/BleedCodePage.tsx
+++ b/website/screens/components/bleed/code/BleedCodePage.tsx
@@ -6,7 +6,7 @@ import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import customSizes from "./examples/customSides";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -113,7 +113,8 @@ const sections = [
- Requiredchildren
+
+ children
|
diff --git a/website/screens/components/box/code/BoxCodePage.tsx b/website/screens/components/box/code/BoxCodePage.tsx
index 66123bf08..56e254b87 100644
--- a/website/screens/components/box/code/BoxCodePage.tsx
+++ b/website/screens/components/box/code/BoxCodePage.tsx
@@ -5,7 +5,7 @@ import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import Code from "@/common/Code";
const sections = [
@@ -47,7 +47,8 @@ const sections = [
|
- Requiredchildren
+
+ children
|
diff --git a/website/screens/components/button/code/ButtonCodePage.tsx b/website/screens/components/button/code/ButtonCodePage.tsx
index 25b3becb6..c64670221 100644
--- a/website/screens/components/button/code/ButtonCodePage.tsx
+++ b/website/screens/components/button/code/ButtonCodePage.tsx
@@ -6,7 +6,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import icons from "./examples/icons";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
const sections = [
@@ -44,7 +44,8 @@ const sections = [
|
- Newtitle
+
+ title
|
diff --git a/website/screens/components/checkbox/code/CheckboxCodePage.tsx b/website/screens/components/checkbox/code/CheckboxCodePage.tsx
index ed5221247..50c241e2f 100644
--- a/website/screens/components/checkbox/code/CheckboxCodePage.tsx
+++ b/website/screens/components/checkbox/code/CheckboxCodePage.tsx
@@ -5,7 +5,7 @@ import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
import Code from "@/common/Code";
@@ -115,7 +115,8 @@ const sections = [
|
- NewreadOnly
+
+ readOnly
|
diff --git a/website/screens/components/container/code/ContainerCodePage.tsx b/website/screens/components/container/code/ContainerCodePage.tsx
index 06be4a5b6..185950dba 100644
--- a/website/screens/components/container/code/ContainerCodePage.tsx
+++ b/website/screens/components/container/code/ContainerCodePage.tsx
@@ -8,7 +8,7 @@ import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode, { ExtendedTableCode } from "@/common/TableCode";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
@@ -181,7 +181,8 @@ const sections = [
|
- Requiredchildren
+
+ children
|
diff --git a/website/screens/components/date-input/code/DateInputCodePage.tsx b/website/screens/components/date-input/code/DateInputCodePage.tsx
index 088d35dfa..81dadbf3d 100644
--- a/website/screens/components/date-input/code/DateInputCodePage.tsx
+++ b/website/screens/components/date-input/code/DateInputCodePage.tsx
@@ -13,7 +13,7 @@ import basicUsage from "./examples/basicUsage";
import errorHandling from "./examples/errorHandling";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
const sections = [
@@ -146,7 +146,8 @@ const sections = [
|
- NewreadOnly
+
+ readOnly
|
diff --git a/website/screens/components/dialog/code/DialogCodePage.tsx b/website/screens/components/dialog/code/DialogCodePage.tsx
index 507bca0c6..eb9bfb43a 100644
--- a/website/screens/components/dialog/code/DialogCodePage.tsx
+++ b/website/screens/components/dialog/code/DialogCodePage.tsx
@@ -12,7 +12,7 @@ import basicUsage from "./examples/basicUsage";
import withContent from "./examples/withContent";
import backgroundClick from "./examples/backgroundClick";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -77,7 +77,8 @@ const sections = [
|
- Requiredchildren
+
+ children
|
diff --git a/website/screens/components/dropdown/code/DropdownCodePage.tsx b/website/screens/components/dropdown/code/DropdownCodePage.tsx
index 8e8d0d8f3..8067cea6d 100644
--- a/website/screens/components/dropdown/code/DropdownCodePage.tsx
+++ b/website/screens/components/dropdown/code/DropdownCodePage.tsx
@@ -7,7 +7,7 @@ import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import icons from "./examples/icons";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -27,7 +27,8 @@ const sections = [
|
- Requiredoptions
+
+ options
|
@@ -150,7 +151,7 @@ const sections = [
|
- Required
+
onSelectOption
|
diff --git a/website/screens/components/file-input/code/FileInputCodePage.tsx b/website/screens/components/file-input/code/FileInputCodePage.tsx
index acc53bd50..4bdd57d22 100644
--- a/website/screens/components/file-input/code/FileInputCodePage.tsx
+++ b/website/screens/components/file-input/code/FileInputCodePage.tsx
@@ -7,7 +7,7 @@ import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import errorHandling from "./examples/errorHandling";
import formFileInput from "./examples/formFileInput";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
const sections = [
@@ -27,7 +27,8 @@ const sections = [
- Deprecatedname
+
+ name
|
@@ -122,7 +123,7 @@ const sections = [
|
- Required
+
value
|
@@ -190,7 +191,7 @@ const sections = [
- Required
+
callbackFile
|
diff --git a/website/screens/components/flex/code/FlexCodePage.tsx b/website/screens/components/flex/code/FlexCodePage.tsx
index 61b3347ed..350f05927 100644
--- a/website/screens/components/flex/code/FlexCodePage.tsx
+++ b/website/screens/components/flex/code/FlexCodePage.tsx
@@ -7,7 +7,7 @@ import Example from "@/common/example/Example";
import directionAlignment from "./examples/directionAlignment";
import gapOrderGrow from "./examples/gapOrderGrow";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -268,7 +268,8 @@ const sections = [
- Requiredchildren
+
+ children
|
diff --git a/website/screens/components/footer/code/FooterCodePage.tsx b/website/screens/components/footer/code/FooterCodePage.tsx
index 5059df4ee..0a069f0ec 100644
--- a/website/screens/components/footer/code/FooterCodePage.tsx
+++ b/website/screens/components/footer/code/FooterCodePage.tsx
@@ -3,7 +3,7 @@ import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Code from "@/common/Code";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
const sections = [
@@ -23,7 +23,8 @@ const sections = [
|
- Newmode
+
+ mode
|
@@ -60,7 +61,7 @@ const sections = [
href: URL of the page the link goes to.
- New title:
+ title:
Text representing advisory information related to the social
link. Under the hood, it also serves as an accessible label
for the icon.
diff --git a/website/screens/components/grid/code/GridCodePage.tsx b/website/screens/components/grid/code/GridCodePage.tsx
index 327d9d7fa..fb99931d9 100644
--- a/website/screens/components/grid/code/GridCodePage.tsx
+++ b/website/screens/components/grid/code/GridCodePage.tsx
@@ -12,7 +12,7 @@ import Example from "@/common/example/Example";
import basic from "./examples/basic";
import layout from "./examples/layout";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -246,7 +246,8 @@ const sections = [
- Requiredchildren
+
+ children
|
@@ -397,7 +398,8 @@ const sections = [
|
- Requiredchildren
+
+ children
|
diff --git a/website/screens/components/heading/code/HeadingCodePage.tsx b/website/screens/components/heading/code/HeadingCodePage.tsx
index d164f27d4..d3ed507c1 100644
--- a/website/screens/components/heading/code/HeadingCodePage.tsx
+++ b/website/screens/components/heading/code/HeadingCodePage.tsx
@@ -5,7 +5,7 @@ import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import Code from "@/common/Code";
const sections = [
@@ -43,7 +43,8 @@ const sections = [
|
- Requiredtext
+
+ text
|
diff --git a/website/screens/components/image/code/ImageCodePage.tsx b/website/screens/components/image/code/ImageCodePage.tsx
index 55fb67088..0dbb8fa86 100644
--- a/website/screens/components/image/code/ImageCodePage.tsx
+++ b/website/screens/components/image/code/ImageCodePage.tsx
@@ -5,7 +5,7 @@ import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Example from "@/common/example/Example";
import basic from "./examples/basicUsage";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
const sections = [
@@ -22,7 +22,8 @@ const sections = [
|
- Requiredalt
+
+ alt
|
@@ -77,7 +78,8 @@ const sections = [
|
- Requiredsrc
+
+ src
|
diff --git a/website/screens/components/inset/code/InsetCodePage.tsx b/website/screens/components/inset/code/InsetCodePage.tsx
index f219444de..053170be5 100644
--- a/website/screens/components/inset/code/InsetCodePage.tsx
+++ b/website/screens/components/inset/code/InsetCodePage.tsx
@@ -6,7 +6,7 @@ import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import customSides from "./examples/customSides";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -113,7 +113,8 @@ const sections = [
|
- Requiredchildren
+
+ children
|
diff --git a/website/screens/components/link/code/LinkCodePage.tsx b/website/screens/components/link/code/LinkCodePage.tsx
index 9fceb3d35..046313891 100644
--- a/website/screens/components/link/code/LinkCodePage.tsx
+++ b/website/screens/components/link/code/LinkCodePage.tsx
@@ -15,7 +15,7 @@ import routerLink from "./examples/routerLink";
import routerLink6 from "./examples/routerLink6";
import icons from "./examples/icons";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -113,7 +113,8 @@ const sections = [
|
- Requiredchildren
+
+ children
|
diff --git a/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx b/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx
index 892f7fabf..f6854bf9f 100644
--- a/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx
+++ b/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx
@@ -14,7 +14,7 @@ import routerLink from "./examples/routerLink";
import routerLinkV6 from "./examples/routerLinkV6";
import nextLink from "./examples/nextLink";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -45,7 +45,8 @@ const sections = [
|
- Requiredchildren
+
+ children
|
@@ -130,14 +131,14 @@ const sections = [
|
-
- Material Symbol
- {" "}
- name or SVG element as the icon that will be displayed in the
- tab. When using Material Symbols, replace spaces with
- underscores. By default they are outlined if you want it to be
- filled prefix the symbol name with{" "}
- "filled_".
+
+ Material Symbol
+ {" "}
+ name or SVG element as the icon that will be displayed in the
+ tab. When using Material Symbols, replace spaces with
+ underscores. By default they are outlined if you want it to be
+ filled prefix the symbol name with{" "}
+ "filled_".
|
- |
@@ -164,7 +165,8 @@ const sections = [
gap="0.25rem"
alignItems="baseline"
>
- Requiredchildren
+
+ children
|
diff --git a/website/screens/components/number-input/code/NumberInputCodePage.tsx b/website/screens/components/number-input/code/NumberInputCodePage.tsx
index a13c4363c..b15808314 100644
--- a/website/screens/components/number-input/code/NumberInputCodePage.tsx
+++ b/website/screens/components/number-input/code/NumberInputCodePage.tsx
@@ -7,7 +7,7 @@ import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import errorUsage from "./examples/errorHandling";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
const sections = [
@@ -107,7 +107,8 @@ const sections = [
|
- NewreadOnly
+
+ readOnly
|
diff --git a/website/screens/components/radio-group/code/RadioGroupCodePage.tsx b/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
index f769e2407..72a71a103 100644
--- a/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
+++ b/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
@@ -12,7 +12,7 @@ import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import errorHandling from "./examples/errorHandling";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -80,7 +80,8 @@ const sections = [
|
- Requiredoptions
+
+ options
|
diff --git a/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx b/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx
index ad86ae6d6..332fd7ba5 100644
--- a/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx
+++ b/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx
@@ -12,7 +12,7 @@ import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import sortable from "./examples/sortable";
import TableCode, { ExtendedTableCode } from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import reduced from "./examples/reduced";
import Link from "next/link";
import paginatorHidden from "./examples/paginatorHidden";
@@ -48,7 +48,8 @@ const sections = [
|
- Requiredcolumns
+
+ columns
|
@@ -74,7 +75,8 @@ const sections = [
|
- Requiredrows
+
+ rows
|
@@ -102,7 +104,8 @@ const sections = [
|
- Newmode
+
+ mode
|
@@ -127,7 +130,8 @@ const sections = [
|
- NewhidePaginator
+
+ hidePaginator
|
@@ -243,7 +247,8 @@ const sections = [
gap="0.25rem"
alignItems="baseline"
>
- Requiredactions
+
+ actions
|
diff --git a/website/screens/components/select/code/SelectCodePage.tsx b/website/screens/components/select/code/SelectCodePage.tsx
index 4a635a3df..85805b1eb 100644
--- a/website/screens/components/select/code/SelectCodePage.tsx
+++ b/website/screens/components/select/code/SelectCodePage.tsx
@@ -10,7 +10,7 @@ import errorHandling from "./examples/errorHandling";
import groups from "./examples/groupedOptions";
import icons from "./examples/icons";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -72,7 +72,8 @@ const sections = [
|
- Requiredoptions
+
+ options
|
diff --git a/website/screens/components/sidenav/code/SidenavCodePage.tsx b/website/screens/components/sidenav/code/SidenavCodePage.tsx
index 574e2a2a9..4ce923cda 100644
--- a/website/screens/components/sidenav/code/SidenavCodePage.tsx
+++ b/website/screens/components/sidenav/code/SidenavCodePage.tsx
@@ -2,7 +2,7 @@ import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
import {
DxcLink,
@@ -37,7 +37,8 @@ const sections = [
|
- Requiredchildren
+
+ children
|
@@ -72,7 +73,8 @@ const sections = [
|
{" "}
- Requiredchildren
+
+ children
|
@@ -114,7 +116,8 @@ const sections = [
|
{" "}
- Requiredchildren
+
+ children
|
@@ -195,7 +198,8 @@ const sections = [
|
- Requiredchildren
+
+ children
|
@@ -302,7 +306,8 @@ const sections = [
|
- Requiredchildren
+
+ children
|
diff --git a/website/screens/components/table/code/TableCodePage.tsx b/website/screens/components/table/code/TableCodePage.tsx
index fa6367c5e..dd2864c66 100644
--- a/website/screens/components/table/code/TableCodePage.tsx
+++ b/website/screens/components/table/code/TableCodePage.tsx
@@ -9,7 +9,7 @@ import QuickNavContainer from "@/common/QuickNavContainer";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import TableCode, { ExtendedTableCode } from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import basic from "./examples/basicUsage";
import reduced from "./examples/reduced";
import Link from "next/link";
@@ -46,7 +46,8 @@ const sections = [
|
- Requiredchildren
+
+ children
|
@@ -61,7 +62,8 @@ const sections = [
|
- Newmode
+
+ mode
|
@@ -131,7 +133,8 @@ const sections = [
gap="0.25rem"
alignItems="baseline"
>
- Requiredactions
+
+ actions
|
diff --git a/website/screens/components/tabs/code/TabsCodePage.tsx b/website/screens/components/tabs/code/TabsCodePage.tsx
index 17c6825be..ec918150a 100644
--- a/website/screens/components/tabs/code/TabsCodePage.tsx
+++ b/website/screens/components/tabs/code/TabsCodePage.tsx
@@ -8,7 +8,7 @@ import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import icons from "./examples/icons";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -47,7 +47,8 @@ const sections = [
|
- Requiredtabs
+
+ tabs
|
diff --git a/website/screens/components/text-input/code/TextInputCodePage.tsx b/website/screens/components/text-input/code/TextInputCodePage.tsx
index c1ba0c5e0..2c04e74fd 100644
--- a/website/screens/components/text-input/code/TextInputCodePage.tsx
+++ b/website/screens/components/text-input/code/TextInputCodePage.tsx
@@ -9,7 +9,7 @@ import uncontrolled from "./examples/uncontrolled";
import action from "./examples/action";
import functionSuggestions from "./examples/functionSuggestions";
import errorHandling from "./examples/errorHandling";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
const sections = [
@@ -156,7 +156,8 @@ const sections = [
|
- NewreadOnly
+
+ readOnly
|
diff --git a/website/screens/components/textarea/code/TextareaCodePage.tsx b/website/screens/components/textarea/code/TextareaCodePage.tsx
index 9bc56c196..555aebb1b 100644
--- a/website/screens/components/textarea/code/TextareaCodePage.tsx
+++ b/website/screens/components/textarea/code/TextareaCodePage.tsx
@@ -7,7 +7,7 @@ import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import errorHandling from "./examples/errorHandling";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
const sections = [
@@ -105,7 +105,8 @@ const sections = [
|
- NewreadOnly
+
+ readOnly
|
diff --git a/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx b/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx
index e2efdbe75..010a5bf7f 100644
--- a/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx
+++ b/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx
@@ -6,7 +6,7 @@ import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
const sections = [
@@ -67,7 +67,8 @@ const sections = [
|
- Requiredoptions
+
+ options
|
@@ -95,7 +96,7 @@ const sections = [
value: Number with the option inner value.
- New title:
+ title:
Text representing advisory information related to an option.
Under the hood, it also serves as an accessible label for the
icon.
diff --git a/website/screens/components/typography/code/TypographyCodePage.tsx b/website/screens/components/typography/code/TypographyCodePage.tsx
index ac19d6182..a0d661f5c 100644
--- a/website/screens/components/typography/code/TypographyCodePage.tsx
+++ b/website/screens/components/typography/code/TypographyCodePage.tsx
@@ -6,7 +6,7 @@ import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import basicUsage from "./examples/basicUsage";
import nestedTexts from "./examples/nestedTexts";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
import Code from "@/common/Code";
const sections = [
@@ -183,7 +183,8 @@ const sections = [
- Requiredchildren
+
+ children
|
diff --git a/website/screens/components/wizard/code/WizardCodePage.tsx b/website/screens/components/wizard/code/WizardCodePage.tsx
index 3880f628c..ca929bfa3 100644
--- a/website/screens/components/wizard/code/WizardCodePage.tsx
+++ b/website/screens/components/wizard/code/WizardCodePage.tsx
@@ -8,7 +8,7 @@ import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import icons from "./examples/icons";
import TableCode from "@/common/TableCode";
-import StatusTag from "@/common/StatusTag";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
@@ -59,7 +59,8 @@ const sections = [
|
- Requiredsteps
+
+ steps
|
| |