From 9ebcb6430eb6c5ff10e1166dee76f9216c7e96cd Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez Date: Fri, 15 Mar 2024 14:20:15 +0100 Subject: [PATCH 1/3] Repace the Status tag with our Badge --- website/pages/_app.tsx | 4 +- website/screens/common/StatusBadge.tsx | 29 +++++++++++++ website/screens/common/StatusTag.tsx | 42 ------------------- .../screens/common/sidenav/SidenavLogo.tsx | 20 +++++---- .../accordion/code/AccordionCodePage.tsx | 14 ++++--- .../code/ApplicationLayoutCodePage.tsx | 4 +- .../components/bleed/code/BleedCodePage.tsx | 5 ++- .../components/box/code/BoxCodePage.tsx | 5 ++- .../components/button/code/ButtonCodePage.tsx | 5 ++- .../checkbox/code/CheckboxCodePage.tsx | 5 ++- .../container/code/ContainerCodePage.tsx | 5 ++- .../date-input/code/DateInputCodePage.tsx | 5 ++- .../components/dialog/code/DialogCodePage.tsx | 5 ++- .../dropdown/code/DropdownCodePage.tsx | 7 ++-- .../file-input/code/FileInputCodePage.tsx | 9 ++-- .../components/flex/code/FlexCodePage.tsx | 5 ++- .../components/footer/code/FooterCodePage.tsx | 7 ++-- .../components/grid/code/GridCodePage.tsx | 8 ++-- .../heading/code/HeadingCodePage.tsx | 5 ++- .../components/image/code/ImageCodePage.tsx | 8 ++-- .../components/inset/code/InsetCodePage.tsx | 5 ++- .../components/link/code/LinkCodePage.tsx | 5 ++- .../nav-tabs/code/NavTabsCodePage.tsx | 24 ++++++----- .../number-input/code/NumberInputCodePage.tsx | 5 ++- .../radio-group/code/RadioGroupCodePage.tsx | 5 ++- .../code/ResultsetTableCodePage.tsx | 17 +++++--- .../components/select/code/SelectCodePage.tsx | 5 ++- .../sidenav/code/SidenavCodePage.tsx | 17 +++++--- .../components/table/code/TableCodePage.tsx | 11 +++-- .../components/tabs/code/TabsCodePage.tsx | 5 ++- .../text-input/code/TextInputCodePage.tsx | 5 ++- .../textarea/code/TextareaCodePage.tsx | 5 ++- .../toggle-group/code/ToggleGroupCodePage.tsx | 7 ++-- .../typography/code/TypographyCodePage.tsx | 5 ++- .../components/wizard/code/WizardCodePage.tsx | 9 ++-- 35 files changed, 180 insertions(+), 147 deletions(-) create mode 100644 website/screens/common/StatusBadge.tsx delete mode 100644 website/screens/common/StatusTag.tsx diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx index 6b8a8a523..9c939ac88 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; @@ -117,7 +117,7 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => { > {label} {status !== "Ready" && ( - {status} + )} diff --git a/website/screens/common/StatusBadge.tsx b/website/screens/common/StatusBadge.tsx new file mode 100644 index 000000000..1b73cc71a --- /dev/null +++ b/website/screens/common/StatusBadge.tsx @@ -0,0 +1,29 @@ +import { DxcBadge } from "@dxc-technology/halstack-react"; + +type StatusBadgeProps = { + label: string; + status: "Deprecated" | "Experimental" | "Information" | "Ready" | "Required"; +}; + +const getBadgeColor = (status: StatusBadgeProps["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 StatusBadge = ({ label, status }: StatusBadgeProps) => ( + +); + +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/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..7e009594f 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 0d8fe2f73..43bd67c2c 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..5421d9876 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..046ed8ae8 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..544c14e13 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..14822c9c3 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..28dc44739 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..da0a5b82c 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..39234fae4 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..e49573ed9 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..63371017d 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..76ac9674c 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..ed2776c48 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..28f90e77d 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..1aab61181 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..7ad93d98d 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..0e417fcda 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 42f4018ca..ef3692794 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 = [ { @@ -106,7 +106,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..f3cfe6176 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..f0b9d4463 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..7552f413c 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..67007f603 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 069721139..5622f26a3 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 3b25ffdfc..ce9fcfd65 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 @@ -188,7 +191,8 @@ const sections = [ - Requiredchildren + + children @@ -292,7 +296,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..c07b63266 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..5411e0bd7 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..a84ddd8f5 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..ea86c6a03 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 168e7e5c5..20ebe96fd 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 @@ -91,7 +92,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..4d83388fd 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 8fcdf4d24..eeda7febf 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 @@ -97,9 +98,7 @@ const sections = [ onStepClick - - {"(currentStep: number) => void"} - + {"(currentStep: number) => void"} This function will be called when the user clicks a step. The step From 0905bb1f651c14f5763f6e1534d4dbe531d6b420 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez Date: Wed, 20 Mar 2024 15:33:10 +0100 Subject: [PATCH 2/3] Changes in status badge --- website/pages/_app.tsx | 4 +- website/screens/common/StatusBadge.tsx | 38 +++++-- website/screens/common/componentList.js | 100 +++++++++--------- website/screens/common/pagesList.ts | 23 ++-- .../accordion/code/AccordionCodePage.tsx | 10 +- .../code/ApplicationLayoutCodePage.tsx | 2 +- .../components/bleed/code/BleedCodePage.tsx | 2 +- .../components/box/code/BoxCodePage.tsx | 2 +- .../components/button/code/ButtonCodePage.tsx | 2 +- .../checkbox/code/CheckboxCodePage.tsx | 2 +- .../container/code/ContainerCodePage.tsx | 2 +- .../date-input/code/DateInputCodePage.tsx | 2 +- .../components/dialog/code/DialogCodePage.tsx | 2 +- .../dropdown/code/DropdownCodePage.tsx | 4 +- .../file-input/code/FileInputCodePage.tsx | 6 +- .../components/flex/code/FlexCodePage.tsx | 2 +- .../components/footer/code/FooterCodePage.tsx | 4 +- .../components/grid/code/GridCodePage.tsx | 4 +- .../heading/code/HeadingCodePage.tsx | 2 +- .../components/image/code/ImageCodePage.tsx | 4 +- .../components/inset/code/InsetCodePage.tsx | 2 +- .../components/link/code/LinkCodePage.tsx | 2 +- .../nav-tabs/code/NavTabsCodePage.tsx | 4 +- .../number-input/code/NumberInputCodePage.tsx | 2 +- .../radio-group/code/RadioGroupCodePage.tsx | 2 +- .../code/ResultsetTableCodePage.tsx | 10 +- .../components/select/code/SelectCodePage.tsx | 2 +- .../sidenav/code/SidenavCodePage.tsx | 10 +- .../components/table/code/TableCodePage.tsx | 6 +- .../components/tabs/code/TabsCodePage.tsx | 2 +- .../text-input/code/TextInputCodePage.tsx | 2 +- .../textarea/code/TextareaCodePage.tsx | 2 +- .../toggle-group/code/ToggleGroupCodePage.tsx | 4 +- .../typography/code/TypographyCodePage.tsx | 2 +- .../components/wizard/code/WizardCodePage.tsx | 2 +- 35 files changed, 146 insertions(+), 125 deletions(-) diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx index 9c939ac88..eaa8dedf7 100644 --- a/website/pages/_app.tsx +++ b/website/pages/_app.tsx @@ -116,8 +116,8 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => { selected={matchPaths(path)} > {label} - {status !== "Ready" && ( - + {status !== "ready" && ( + )} diff --git a/website/screens/common/StatusBadge.tsx b/website/screens/common/StatusBadge.tsx index 1b73cc71a..16754127e 100644 --- a/website/screens/common/StatusBadge.tsx +++ b/website/screens/common/StatusBadge.tsx @@ -1,29 +1,47 @@ import { DxcBadge } from "@dxc-technology/halstack-react"; -type StatusBadgeProps = { +type InfoStatus = { + status: "information"; label: string; - status: "Deprecated" | "Experimental" | "Information" | "Ready" | "Required"; }; -const getBadgeColor = (status: StatusBadgeProps["status"]) => { +type NoInfoStatus = { + status: "deprecated" | "experimental" | "ready" | "required"; + label?: never; +}; + +type Props = InfoStatus | NoInfoStatus; + +const getBadgeColor = (status: Props["status"]) => { switch (status) { - case "Deprecated": + case "deprecated": return "yellow"; - case "Experimental": + case "experimental": return "purple"; - case "Information": + case "information": return "blue"; - case "Ready": + case "ready": return "green"; - case "Required": + case "required": return "orange"; default: return "grey"; } }; -const StatusBadge = ({ label, status }: StatusBadgeProps) => ( - +const getStatusLabel = (label: Props["label"], status: Props["status"]) => { + if (label) { + return label; + } else { + return status.charAt(0).toUpperCase() + status.slice(1); + } +}; +const StatusBadge = ({ label, status }: Props) => ( + ); export default StatusBadge; 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/components/accordion/code/AccordionCodePage.tsx b/website/screens/components/accordion/code/AccordionCodePage.tsx index 7e009594f..a83bf08b0 100644 --- a/website/screens/components/accordion/code/AccordionCodePage.tsx +++ b/website/screens/components/accordion/code/AccordionCodePage.tsx @@ -34,7 +34,7 @@ const sections = [ - + label @@ -116,7 +116,7 @@ const sections = [ - + children @@ -234,7 +234,7 @@ const sections = [ gap="0.25rem" alignItems="baseline" > - + children @@ -295,7 +295,7 @@ const sections = [ gap="0.25rem" alignItems="baseline" > - + label @@ -353,7 +353,7 @@ const sections = [ gap="0.25rem" alignItems="baseline" > - + children diff --git a/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx b/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx index 9bd64b8ee..48aa04ad5 100644 --- a/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx +++ b/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx @@ -84,7 +84,7 @@ const ApplicationLayoutPropsTable = () => ( - + children diff --git a/website/screens/components/bleed/code/BleedCodePage.tsx b/website/screens/components/bleed/code/BleedCodePage.tsx index 5421d9876..f6b26d1fd 100644 --- a/website/screens/components/bleed/code/BleedCodePage.tsx +++ b/website/screens/components/bleed/code/BleedCodePage.tsx @@ -113,7 +113,7 @@ const sections = [ - + children diff --git a/website/screens/components/box/code/BoxCodePage.tsx b/website/screens/components/box/code/BoxCodePage.tsx index 046ed8ae8..56e254b87 100644 --- a/website/screens/components/box/code/BoxCodePage.tsx +++ b/website/screens/components/box/code/BoxCodePage.tsx @@ -47,7 +47,7 @@ const sections = [ - + children diff --git a/website/screens/components/button/code/ButtonCodePage.tsx b/website/screens/components/button/code/ButtonCodePage.tsx index 544c14e13..c64670221 100644 --- a/website/screens/components/button/code/ButtonCodePage.tsx +++ b/website/screens/components/button/code/ButtonCodePage.tsx @@ -44,7 +44,7 @@ const sections = [ - + title diff --git a/website/screens/components/checkbox/code/CheckboxCodePage.tsx b/website/screens/components/checkbox/code/CheckboxCodePage.tsx index 14822c9c3..50c241e2f 100644 --- a/website/screens/components/checkbox/code/CheckboxCodePage.tsx +++ b/website/screens/components/checkbox/code/CheckboxCodePage.tsx @@ -115,7 +115,7 @@ const sections = [ - + readOnly diff --git a/website/screens/components/container/code/ContainerCodePage.tsx b/website/screens/components/container/code/ContainerCodePage.tsx index 28dc44739..185950dba 100644 --- a/website/screens/components/container/code/ContainerCodePage.tsx +++ b/website/screens/components/container/code/ContainerCodePage.tsx @@ -181,7 +181,7 @@ const sections = [ - + children diff --git a/website/screens/components/date-input/code/DateInputCodePage.tsx b/website/screens/components/date-input/code/DateInputCodePage.tsx index da0a5b82c..81dadbf3d 100644 --- a/website/screens/components/date-input/code/DateInputCodePage.tsx +++ b/website/screens/components/date-input/code/DateInputCodePage.tsx @@ -146,7 +146,7 @@ const sections = [ - + readOnly diff --git a/website/screens/components/dialog/code/DialogCodePage.tsx b/website/screens/components/dialog/code/DialogCodePage.tsx index 39234fae4..eb9bfb43a 100644 --- a/website/screens/components/dialog/code/DialogCodePage.tsx +++ b/website/screens/components/dialog/code/DialogCodePage.tsx @@ -77,7 +77,7 @@ const sections = [ - + children diff --git a/website/screens/components/dropdown/code/DropdownCodePage.tsx b/website/screens/components/dropdown/code/DropdownCodePage.tsx index e49573ed9..8067cea6d 100644 --- a/website/screens/components/dropdown/code/DropdownCodePage.tsx +++ b/website/screens/components/dropdown/code/DropdownCodePage.tsx @@ -27,7 +27,7 @@ const sections = [ - + options @@ -151,7 +151,7 @@ const sections = [ - + onSelectOption diff --git a/website/screens/components/file-input/code/FileInputCodePage.tsx b/website/screens/components/file-input/code/FileInputCodePage.tsx index 63371017d..4bdd57d22 100644 --- a/website/screens/components/file-input/code/FileInputCodePage.tsx +++ b/website/screens/components/file-input/code/FileInputCodePage.tsx @@ -27,7 +27,7 @@ const sections = [ - + name @@ -123,7 +123,7 @@ const sections = [ - + value @@ -191,7 +191,7 @@ const sections = [ - + callbackFile diff --git a/website/screens/components/flex/code/FlexCodePage.tsx b/website/screens/components/flex/code/FlexCodePage.tsx index 76ac9674c..350f05927 100644 --- a/website/screens/components/flex/code/FlexCodePage.tsx +++ b/website/screens/components/flex/code/FlexCodePage.tsx @@ -268,7 +268,7 @@ const sections = [ - + children diff --git a/website/screens/components/footer/code/FooterCodePage.tsx b/website/screens/components/footer/code/FooterCodePage.tsx index ed2776c48..0a069f0ec 100644 --- a/website/screens/components/footer/code/FooterCodePage.tsx +++ b/website/screens/components/footer/code/FooterCodePage.tsx @@ -23,7 +23,7 @@ const sections = [ - + mode @@ -61,7 +61,7 @@ const sections = [ href: URL of the page the link goes to.
  • - 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 28f90e77d..fb99931d9 100644 --- a/website/screens/components/grid/code/GridCodePage.tsx +++ b/website/screens/components/grid/code/GridCodePage.tsx @@ -246,7 +246,7 @@ const sections = [ - + children @@ -398,7 +398,7 @@ const sections = [ - + children diff --git a/website/screens/components/heading/code/HeadingCodePage.tsx b/website/screens/components/heading/code/HeadingCodePage.tsx index 1aab61181..d3ed507c1 100644 --- a/website/screens/components/heading/code/HeadingCodePage.tsx +++ b/website/screens/components/heading/code/HeadingCodePage.tsx @@ -43,7 +43,7 @@ const sections = [ - + text diff --git a/website/screens/components/image/code/ImageCodePage.tsx b/website/screens/components/image/code/ImageCodePage.tsx index 7ad93d98d..0dbb8fa86 100644 --- a/website/screens/components/image/code/ImageCodePage.tsx +++ b/website/screens/components/image/code/ImageCodePage.tsx @@ -22,7 +22,7 @@ const sections = [ - + alt @@ -78,7 +78,7 @@ const sections = [ - + src diff --git a/website/screens/components/inset/code/InsetCodePage.tsx b/website/screens/components/inset/code/InsetCodePage.tsx index 0e417fcda..053170be5 100644 --- a/website/screens/components/inset/code/InsetCodePage.tsx +++ b/website/screens/components/inset/code/InsetCodePage.tsx @@ -113,7 +113,7 @@ const sections = [ - + children diff --git a/website/screens/components/link/code/LinkCodePage.tsx b/website/screens/components/link/code/LinkCodePage.tsx index ceb345e5e..046313891 100644 --- a/website/screens/components/link/code/LinkCodePage.tsx +++ b/website/screens/components/link/code/LinkCodePage.tsx @@ -113,7 +113,7 @@ const sections = [ - + children diff --git a/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx b/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx index f3cfe6176..f6854bf9f 100644 --- a/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx +++ b/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx @@ -45,7 +45,7 @@ const sections = [ - + children @@ -165,7 +165,7 @@ const sections = [ gap="0.25rem" alignItems="baseline" > - + children diff --git a/website/screens/components/number-input/code/NumberInputCodePage.tsx b/website/screens/components/number-input/code/NumberInputCodePage.tsx index f0b9d4463..b15808314 100644 --- a/website/screens/components/number-input/code/NumberInputCodePage.tsx +++ b/website/screens/components/number-input/code/NumberInputCodePage.tsx @@ -107,7 +107,7 @@ const sections = [ - + readOnly diff --git a/website/screens/components/radio-group/code/RadioGroupCodePage.tsx b/website/screens/components/radio-group/code/RadioGroupCodePage.tsx index 7552f413c..72a71a103 100644 --- a/website/screens/components/radio-group/code/RadioGroupCodePage.tsx +++ b/website/screens/components/radio-group/code/RadioGroupCodePage.tsx @@ -80,7 +80,7 @@ const sections = [ - + options diff --git a/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx b/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx index 67007f603..332fd7ba5 100644 --- a/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx +++ b/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx @@ -48,7 +48,7 @@ const sections = [ - + columns @@ -75,7 +75,7 @@ const sections = [ - + rows @@ -104,7 +104,7 @@ const sections = [ - + mode @@ -130,7 +130,7 @@ const sections = [ - + hidePaginator @@ -247,7 +247,7 @@ const sections = [ gap="0.25rem" alignItems="baseline" > - + actions diff --git a/website/screens/components/select/code/SelectCodePage.tsx b/website/screens/components/select/code/SelectCodePage.tsx index a220abfa6..85805b1eb 100644 --- a/website/screens/components/select/code/SelectCodePage.tsx +++ b/website/screens/components/select/code/SelectCodePage.tsx @@ -72,7 +72,7 @@ const sections = [ - + options diff --git a/website/screens/components/sidenav/code/SidenavCodePage.tsx b/website/screens/components/sidenav/code/SidenavCodePage.tsx index 9e9a65a7d..4ce923cda 100644 --- a/website/screens/components/sidenav/code/SidenavCodePage.tsx +++ b/website/screens/components/sidenav/code/SidenavCodePage.tsx @@ -37,7 +37,7 @@ const sections = [ - + children @@ -73,7 +73,7 @@ const sections = [ {" "} - + children @@ -116,7 +116,7 @@ const sections = [ {" "} - + children @@ -198,7 +198,7 @@ const sections = [ - + children @@ -306,7 +306,7 @@ const sections = [ - + children diff --git a/website/screens/components/table/code/TableCodePage.tsx b/website/screens/components/table/code/TableCodePage.tsx index c07b63266..dd2864c66 100644 --- a/website/screens/components/table/code/TableCodePage.tsx +++ b/website/screens/components/table/code/TableCodePage.tsx @@ -46,7 +46,7 @@ const sections = [ - + children @@ -62,7 +62,7 @@ const sections = [ - + mode @@ -133,7 +133,7 @@ const sections = [ gap="0.25rem" alignItems="baseline" > - + actions diff --git a/website/screens/components/tabs/code/TabsCodePage.tsx b/website/screens/components/tabs/code/TabsCodePage.tsx index 5411e0bd7..ec918150a 100644 --- a/website/screens/components/tabs/code/TabsCodePage.tsx +++ b/website/screens/components/tabs/code/TabsCodePage.tsx @@ -47,7 +47,7 @@ const sections = [ - + tabs diff --git a/website/screens/components/text-input/code/TextInputCodePage.tsx b/website/screens/components/text-input/code/TextInputCodePage.tsx index a84ddd8f5..2c04e74fd 100644 --- a/website/screens/components/text-input/code/TextInputCodePage.tsx +++ b/website/screens/components/text-input/code/TextInputCodePage.tsx @@ -156,7 +156,7 @@ const sections = [ - + readOnly diff --git a/website/screens/components/textarea/code/TextareaCodePage.tsx b/website/screens/components/textarea/code/TextareaCodePage.tsx index ea86c6a03..555aebb1b 100644 --- a/website/screens/components/textarea/code/TextareaCodePage.tsx +++ b/website/screens/components/textarea/code/TextareaCodePage.tsx @@ -105,7 +105,7 @@ const sections = [ - + readOnly diff --git a/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx b/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx index cc4bcc58c..010a5bf7f 100644 --- a/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx +++ b/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx @@ -67,7 +67,7 @@ const sections = [ - + options @@ -96,7 +96,7 @@ const sections = [ value: Number with the option inner value.
  • - 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 4d83388fd..a0d661f5c 100644 --- a/website/screens/components/typography/code/TypographyCodePage.tsx +++ b/website/screens/components/typography/code/TypographyCodePage.tsx @@ -183,7 +183,7 @@ const sections = [ - + children diff --git a/website/screens/components/wizard/code/WizardCodePage.tsx b/website/screens/components/wizard/code/WizardCodePage.tsx index c01b41788..ca929bfa3 100644 --- a/website/screens/components/wizard/code/WizardCodePage.tsx +++ b/website/screens/components/wizard/code/WizardCodePage.tsx @@ -59,7 +59,7 @@ const sections = [ - + steps From b199f07bc3b2a825aac7314dfd380513d8e8580d Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez Date: Wed, 20 Mar 2024 15:38:56 +0100 Subject: [PATCH 3/3] Small cahnge StatusBadge --- website/screens/common/StatusBadge.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/website/screens/common/StatusBadge.tsx b/website/screens/common/StatusBadge.tsx index 16754127e..be2d8bb8c 100644 --- a/website/screens/common/StatusBadge.tsx +++ b/website/screens/common/StatusBadge.tsx @@ -30,12 +30,9 @@ const getBadgeColor = (status: Props["status"]) => { }; const getStatusLabel = (label: Props["label"], status: Props["status"]) => { - if (label) { - return label; - } else { - return status.charAt(0).toUpperCase() + status.slice(1); - } + return label ? label : status.charAt(0).toUpperCase() + status.slice(1); }; + const StatusBadge = ({ label, status }: Props) => (