diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx index 6b8a8a523..eaa8dedf7 100644 --- 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" && ( - {status} + {status !== "ready" && ( + )} diff --git a/website/screens/common/StatusBadge.tsx b/website/screens/common/StatusBadge.tsx new file mode 100644 index 000000000..be2d8bb8c --- /dev/null +++ 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) => ( + +); + +export default StatusBadge; diff --git a/website/screens/common/StatusTag.tsx b/website/screens/common/StatusTag.tsx deleted file mode 100644 index 67d22e076..000000000 --- a/website/screens/common/StatusTag.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import styled from "styled-components"; - -type StatusTagProps = { - status?: "Deprecated" | "Experimental" | "Information" | "Ready" | "Required"; - children: React.ReactNode; -}; - -const StatusTag = (props: StatusTagProps) => ; - -const StyledStatusTag = styled.div` - 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