diff --git a/lib/src/chip/Chip.stories.tsx b/lib/src/chip/Chip.stories.tsx index 0dcaefefe..2320e286e 100644 --- a/lib/src/chip/Chip.stories.tsx +++ b/lib/src/chip/Chip.stories.tsx @@ -199,7 +199,7 @@ const ChipPrefixFocused = () => ( const ChipSuffixFocused = () => ( - <DxcChip label="Chip with suffix" suffixIcon="https://icons-for-free.com/download-icon-close+icon-1320184117228553763_512.png" onClickSuffix={() => {}} /> + <DxcChip label="Chip with suffix" suffixIcon="https://cdn.iconscout.com/icon/free/png-256/free-delete-2902143-2411575.png" onClickSuffix={() => {}} /> </ExampleContainer> ); diff --git a/lib/src/common/coreTokens.ts b/lib/src/common/coreTokens.ts index 793832602..3ca0f71b8 100644 --- a/lib/src/common/coreTokens.ts +++ b/lib/src/common/coreTokens.ts @@ -1,6 +1,6 @@ /** * Halstack Color Palette - * @link https://developer.dxc.com/halstack/next/principles/color/usage/#color-tokens-core-color-tokens + * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens */ const CoreColorTokens = { // Color diff --git a/website/pages/principles/color.tsx b/website/pages/principles/color.tsx new file mode 100644 index 000000000..93c8c8ca7 --- /dev/null +++ b/website/pages/principles/color.tsx @@ -0,0 +1,15 @@ +import Head from "next/head"; +import ColorPage from "../../screens/principles/color/ColorPage"; + +const Color = () => { + return ( + <> + <Head> + <title>Color — Halstack Design System + + + + ); +}; + +export default Color; diff --git a/website/pages/principles/color/index.tsx b/website/pages/principles/color/index.tsx deleted file mode 100644 index 2a37e830a..000000000 --- a/website/pages/principles/color/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import ColorCodePage from "../../../screens/principles/color/code/ColorCodePage"; -import ColorPageLayout from "../../../screens/principles/color/ColorPageLayout"; - -const Index = () => { - return ( - <> - - Color — Halstack Design System - - - - ); -}; - -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Index; diff --git a/website/pages/principles/color/usage.tsx b/website/pages/principles/color/usage.tsx deleted file mode 100644 index 003bf35a4..000000000 --- a/website/pages/principles/color/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import { ReactElement } from "react"; -import ColorUsagePage from "../../../screens/principles/color/usage/ColorUsagePage"; -import ColorPageLayout from "../../../screens/principles/color/ColorPageLayout"; - -const Usage = () => { - return ( - <> - - Color Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/website/screens/common/componentList.js b/website/screens/common/componentList.js index 521dbbf9f..e3d1e19ad 100644 --- a/website/screens/common/componentList.js +++ b/website/screens/common/componentList.js @@ -7,7 +7,7 @@ exports.componentsList = [ status: "Ready", }, { label: "Bleed", path: "/components/bleed", status: "Ready" }, - { label: "Box", path: "/components/box", status: "Ready" }, + { label: "Box", path: "/components/box", status: "Deprecated" }, { label: "Bulleted List", path: "/components/bulleted-list", diff --git a/website/screens/components/box/BoxPageLayout.tsx b/website/screens/components/box/BoxPageLayout.tsx index 76808171d..3507ef864 100644 --- a/website/screens/components/box/BoxPageLayout.tsx +++ b/website/screens/components/box/BoxPageLayout.tsx @@ -1,4 +1,9 @@ -import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; +import { + DxcParagraph, + DxcFlex, + DxcAlert, + DxcLink, +} from "@dxc-technology/halstack-react"; import PageHeading from "@/common/PageHeading"; import TabsPageHeading from "@/common/TabsPageLayout"; import ComponentHeading from "@/common/ComponentHeading"; @@ -22,6 +27,12 @@ const BoxPageHeading = ({ children }: { children: React.ReactNode }) => { organize the webpage is by using groups of related content, this can be achieved by using a dedicated Box component. + + This component will be removed from Halstack Design System in the future. + Please consider the new{" "} + Container component + as an alternative for your current use cases. + diff --git a/website/screens/components/container/code/ContainerCodePage.tsx b/website/screens/components/container/code/ContainerCodePage.tsx index 0b4b515fb..06be4a5b6 100644 --- a/website/screens/components/container/code/ContainerCodePage.tsx +++ b/website/screens/components/container/code/ContainerCodePage.tsx @@ -73,7 +73,7 @@ const sections = [ being CoreColorTokens the color tokens provided by Halstack Design System. See our{" "} diff --git a/website/screens/components/heading/specs/HeadingSpecsPage.tsx b/website/screens/components/heading/specs/HeadingSpecsPage.tsx index b52ff13bd..b0f49f539 100644 --- a/website/screens/components/heading/specs/HeadingSpecsPage.tsx +++ b/website/screens/components/heading/specs/HeadingSpecsPage.tsx @@ -70,18 +70,11 @@ const sections = [ font-style - regular + normal font-normal - - - text-transform - - initial - - letter-spacing @@ -138,18 +131,11 @@ const sections = [ font-style - regular + normal font-normal - - - text-transform - - initial - - letter-spacing @@ -206,18 +192,11 @@ const sections = [ font-style - regular + normal font-normal - - - text-transform - - initial - - letter-spacing @@ -274,18 +253,11 @@ const sections = [ font-style - regular + normal font-normal - - - text-transform - - initial - - letter-spacing @@ -342,18 +314,11 @@ const sections = [ font-style - regular + normal font-normal - - - text-transform - - initial - - letter-spacing diff --git a/website/screens/components/typography/TypographyPageLayout.tsx b/website/screens/components/typography/TypographyPageLayout.tsx index a012d643a..e97c89212 100644 --- a/website/screens/components/typography/TypographyPageLayout.tsx +++ b/website/screens/components/typography/TypographyPageLayout.tsx @@ -1,5 +1,5 @@ import PageHeading from "@/common/PageHeading"; -import { DxcHeading, DxcFlex, DxcAlert } from "@dxc-technology/halstack-react"; +import { DxcFlex, DxcAlert } from "@dxc-technology/halstack-react"; import TabsPageHeading from "@/common/TabsPageLayout"; import ComponentHeading from "@/common/ComponentHeading"; diff --git a/website/screens/principles/color/usage/ColorUsagePage.tsx b/website/screens/principles/color/ColorPage.tsx similarity index 97% rename from website/screens/principles/color/usage/ColorUsagePage.tsx rename to website/screens/principles/color/ColorPage.tsx index 706fbc6de..ef97d9d3f 100644 --- a/website/screens/principles/color/usage/ColorUsagePage.tsx +++ b/website/screens/principles/color/ColorPage.tsx @@ -3,6 +3,7 @@ import { DxcFlex, DxcLink, DxcParagraph, + DxcHeading, } from "@dxc-technology/halstack-react"; import Figure from "@/common/Figure"; import Image from "@/common/Image"; @@ -12,6 +13,7 @@ import Code from "@/common/Code"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import colorOverview from "./images/color_overview.png"; import colorFamilies from "./images/color_families.png"; +import PageHeading from "@/common/PageHeading"; const sections = [ { @@ -820,38 +822,25 @@ const sections = [ }, ], }, - { - title: "Dark mode", - subSections: [ - { - title: "BackgroundColorProvider", - content: ( - <> - - The Design System components have two versions, 'onDark' and - 'onLight' to ensure that they are displayed correctly regardless - of their background. This is not two different themes of the same - component but a way to ensure correct display. - - - ), - }, - ], - }, ]; -const ColorUsagePage = () => { +const ColorPage = () => { return ( + + + + + - + ); }; -export default ColorUsagePage; +export default ColorPage; diff --git a/website/screens/principles/color/ColorPageLayout.tsx b/website/screens/principles/color/ColorPageLayout.tsx deleted file mode 100644 index b43aa3951..000000000 --- a/website/screens/principles/color/ColorPageLayout.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { - DxcHeading, - DxcParagraph, - DxcFlex, -} from "@dxc-technology/halstack-react"; -import PageHeading from "@/common/PageHeading"; -import TabsPageHeading from "@/common/TabsPageLayout"; - -const ColorPageHeading = ({ children }: { children: React.ReactNode }) => { - const tabs = [ - { label: "Code", path: "/principles/color" }, - { label: "Usage", path: "/principles/color/usage" }, - ]; - return ( - - - - - - This section explains and shows examples of all colors used in - Halstack Design System. - - - - - {children} - - ); -}; - -export default ColorPageHeading; diff --git a/website/screens/principles/color/code/ColorCodePage.tsx b/website/screens/principles/color/code/ColorCodePage.tsx deleted file mode 100644 index 46d384ba1..000000000 --- a/website/screens/principles/color/code/ColorCodePage.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import Code from "@/common/Code"; -import DocFooter from "@/common/DocFooter"; -import Example from "@/common/example/Example"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; -import customUse from "./examples/customUse"; -import internalUse from "./examples/internalUse"; - -const sections = [ - { - title: "Examples", - subSections: [ - { - title: "Internal use", - content: ( - <> - - This is an example of how some components of the Design System use - internally the BackgroundColorProvider, in this case - the DxcAccordion knows that its background color is - black and shows the DxcTextInput in its onDark - version for its correct visualization. - - - - ), - }, - { - title: "Custom use", - content: ( - <> - - If at some point it is necessary that the components of the Design - System are aware of the color on which they are going to be - displayed to guarantee their correct visibility, we must wrap the - container (where the components of the Design System are going to - be displayed) with the BackgroundColorProvider and - pass it the background color. This way the{" "} - BackgroundColorProvider will evaluate that color and - if it is dark it will show the onDark version of the components. - - - In this example we see how the same DxcTextInput{" "} - component is shown in a different way, in the first case it is - shown in its onDark version, since we have wrapped the container - with the BackgroundColorProvider as we explained in - the previous paragraph. - - - - ), - }, - ], - }, -]; - -const ColorCodePage = () => { - return ( - - - - - - - ); -}; - -export default ColorCodePage; diff --git a/website/screens/principles/color/code/examples/customUse.js b/website/screens/principles/color/code/examples/customUse.js deleted file mode 100644 index c451bd46c..000000000 --- a/website/screens/principles/color/code/examples/customUse.js +++ /dev/null @@ -1,34 +0,0 @@ -import { - BackgroundColorProvider, - DxcTextInput, - DxcInset, - DxcFlex, -} from "@dxc-technology/halstack-react"; - -const code = `() => { - return ( - - - -
- - - -
- -
- -
- - - ); -}`; - -const scope = { - BackgroundColorProvider, - DxcTextInput, - DxcInset, - DxcFlex, -}; - -export default { code, scope }; diff --git a/website/screens/principles/color/code/examples/internalUse.js b/website/screens/principles/color/code/examples/internalUse.js deleted file mode 100644 index 1a5695019..000000000 --- a/website/screens/principles/color/code/examples/internalUse.js +++ /dev/null @@ -1,37 +0,0 @@ -import { - HalstackProvider, - DxcTextInput, - DxcInset, - DxcAccordion, -} from "@dxc-technology/halstack-react"; - -const code = `() => { - const customTheme = { - accordion: { - backgroundColor: "#000000", - hoverBackgroundColor: "#111111", - arrowColor: "#ffffff", - titleLabelFontColor: "#ffffff", - }, - }; - return ( - - - - - - - - - - ); -}`; - -const scope = { - HalstackProvider, - DxcTextInput, - DxcInset, - DxcAccordion, -}; - -export default { code, scope }; diff --git a/website/screens/principles/color/usage/images/color_families.png b/website/screens/principles/color/images/color_families.png similarity index 100% rename from website/screens/principles/color/usage/images/color_families.png rename to website/screens/principles/color/images/color_families.png diff --git a/website/screens/principles/color/usage/images/color_overview.png b/website/screens/principles/color/images/color_overview.png similarity index 100% rename from website/screens/principles/color/usage/images/color_overview.png rename to website/screens/principles/color/images/color_overview.png diff --git a/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx index 5bde2d658..c85aa8a24 100644 --- a/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx +++ b/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx @@ -18,6 +18,7 @@ import { } from "@dxc-technology/halstack-react"; import Link from "next/link"; import PageHeading from "@/common/PageHeading"; +import TableCode from "@/common/TableCode"; const sections = [ { @@ -26,32 +27,42 @@ const sections = [ Name - Default + Type Description + Default - theme: OpinionatedTheme - + theme + + OpinionatedTheme + Object with a given structure, specified below, for defining the opinionated theme. + - - advancedTheme: AdvancedTheme - + advancedTheme + + AdvancedTheme + Object with a given structure, specified below, for defining the advanced theme. + - - labels: TranslatedLabels - + labels + + TranslatedLabels + Object with a given structure, specified below, for defining translations. + - ), @@ -91,8 +102,8 @@ const sections = [ We create a customTheme object with as many components as we want and their respective values. Then we pass this object to the{" "} - Halstack Provider, which wraps our components, through - its theme property. + Halstack Provider, which wraps our components, through its{" "} + theme property. ),