From bb2816fd6643627fba8d3040f864fd16062ce21d Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Mon, 10 Feb 2025 15:54:19 +0100 Subject: [PATCH 1/7] Reimplementation of the Container component with new CSS variables --- packages/lib/src/container/Container.tsx | 11 ++++------- packages/lib/src/container/types.ts | 7 +++---- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/lib/src/container/Container.tsx b/packages/lib/src/container/Container.tsx index 86ba16425a..5caad39929 100644 --- a/packages/lib/src/container/Container.tsx +++ b/packages/lib/src/container/Container.tsx @@ -1,11 +1,10 @@ import styled from "styled-components"; -import { getCoreColorToken } from "../common/coreTokens"; import ContainerPropsType, { BorderProperties, StyledProps } from "./types"; import { spaces } from "../common/variables"; const getBorderStyles = (direction: "top" | "bottom" | "left" | "right", borderProperties: BorderProperties) => `border-${direction}: ${borderProperties.width ?? ""} ${borderProperties.style ?? ""} ${ - borderProperties.color ? getCoreColorToken(borderProperties.color) : "" + borderProperties.color ?? "" };`; const Container = styled.div` @@ -27,7 +26,7 @@ const Container = styled.div` box-shadow: ${({ boxShadow }) => boxShadow}; background-attachment: ${({ background }) => background?.attachment}; background-clip: ${({ background }) => background?.clip}; - background-color: ${({ background }) => (background?.color ? getCoreColorToken(background?.color) : "")}; + background-color: ${({ background }) => background?.color ?? ""}; background-image: ${({ background }) => background?.image}; background-origin: ${({ background }) => background?.origin}; background-position: ${({ background }) => background?.position}; @@ -36,8 +35,7 @@ const Container = styled.div` border-radius: ${({ borderRadius }) => borderRadius}; border-width: ${({ border }) => (border && "width" in border ? `${border?.width}` : "")}; border-style: ${({ border }) => (border && "style" in border ? `${border?.style}` : "")}; - border-color: ${({ border }) => - border && "color" in border && border?.color ? `${getCoreColorToken(border?.color)}` : ""}; + border-color: ${({ border }) => (border && "color" in border ? `${border?.color}` : "")}; ${({ border }) => { let styles = ""; if (border != null) { @@ -59,8 +57,7 @@ const Container = styled.div` margin-right: ${({ margin }) => (typeof margin === "object" && margin.right ? spaces[margin.right] : "")}; margin-bottom: ${({ margin }) => (typeof margin === "object" && margin.bottom ? spaces[margin.bottom] : "")}; margin-left: ${({ margin }) => (typeof margin === "object" && margin.left ? spaces[margin.left] : "")}; - outline: ${({ outline }) => - `${outline?.width ?? ""} ${outline?.style ?? ""} ${outline?.color ? getCoreColorToken(outline?.color) : ""}`}; + outline: ${({ outline }) => `${outline?.width ?? ""} ${outline?.style ?? ""} ${outline?.color ?? ""}`}; outline-offset: ${({ outline }) => outline?.offset}; overflow: ${({ $overflow }) => (typeof $overflow === "string" ? $overflow : "")}; overflow-x: ${({ $overflow }) => (typeof $overflow === "object" ? `${$overflow?.x}` : "")}; diff --git a/packages/lib/src/container/types.ts b/packages/lib/src/container/types.ts index 056f6b4cd8..17e310d26f 100644 --- a/packages/lib/src/container/types.ts +++ b/packages/lib/src/container/types.ts @@ -1,6 +1,5 @@ import { ReactNode } from "react"; -import { CoreColorTokensType } from "../common/coreTokens"; -import { Space as SpacingValues } from "../common/utils" +import { Space as SpacingValues } from "../common/utils"; type Space = | SpacingValues | { @@ -20,7 +19,7 @@ type Inset = { type Background = { attachment?: string; clip?: string; - color?: CoreColorTokensType; + color?: string; image?: string; origin?: string; position?: string; @@ -31,7 +30,7 @@ type Background = { export type BorderProperties = { width?: string; style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"; - color?: CoreColorTokensType; + color?: string; }; type Border = | BorderProperties From b42b51bf51da699a76839d5302ae63e8ec351b66 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Wed, 19 Feb 2025 16:07:49 +0100 Subject: [PATCH 2/7] Prepared structure for new documentation --- .../pages/components/container/code.tsx | 19 +++++++++++++++++ .../pages/components/container/index.tsx | 12 +++++------ .../pages/components/container/usage.tsx | 21 ------------------- .../container/ContainerPageLayout.tsx | 6 +++--- .../ContainerOverviewPage.tsx} | 8 +++---- .../examples/alternateBoxModel.ts | 0 .../examples/defaultBoxModel.ts | 0 7 files changed, 31 insertions(+), 35 deletions(-) create mode 100644 apps/website/pages/components/container/code.tsx delete mode 100644 apps/website/pages/components/container/usage.tsx rename apps/website/screens/components/container/{usage/ContainerUsagePage.tsx => overview/ContainerOverviewPage.tsx} (97%) rename apps/website/screens/components/container/{usage => overview}/examples/alternateBoxModel.ts (100%) rename apps/website/screens/components/container/{usage => overview}/examples/defaultBoxModel.ts (100%) diff --git a/apps/website/pages/components/container/code.tsx b/apps/website/pages/components/container/code.tsx new file mode 100644 index 0000000000..75ca4e8c1c --- /dev/null +++ b/apps/website/pages/components/container/code.tsx @@ -0,0 +1,19 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import ContainerCodePage from "screens/components/container/code/ContainerCodePage"; +import ContainerPageLayout from "screens/components/container/ContainerPageLayout"; + +const Code = () => { + return ( + <> + + Container Code — Halstack Design System + + + + ); +}; + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/container/index.tsx b/apps/website/pages/components/container/index.tsx index 71663dd614..328e1ddbae 100644 --- a/apps/website/pages/components/container/index.tsx +++ b/apps/website/pages/components/container/index.tsx @@ -1,21 +1,19 @@ import Head from "next/head"; import type { ReactElement } from "react"; -import ContainerCodePage from "screens/components/container/code/ContainerCodePage"; +import ContainerOverviewPage from "screens/components/container/overview/ContainerOverviewPage"; import ContainerPageLayout from "screens/components/container/ContainerPageLayout"; -const Usage = () => { +const Index = () => { return ( <> Container — Halstack Design System - + ); }; -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; -export default Usage; +export default Index; diff --git a/apps/website/pages/components/container/usage.tsx b/apps/website/pages/components/container/usage.tsx deleted file mode 100644 index 16f68e6316..0000000000 --- a/apps/website/pages/components/container/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import ContainerUsagePage from "screens/components/container/usage/ContainerUsagePage"; -import ContainerPageLayout from "screens/components/container/ContainerPageLayout"; - -const Usage = () => { - return ( - <> - - Container Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/container/ContainerPageLayout.tsx b/apps/website/screens/components/container/ContainerPageLayout.tsx index 71e015cc1b..6ef62263e3 100644 --- a/apps/website/screens/components/container/ContainerPageLayout.tsx +++ b/apps/website/screens/components/container/ContainerPageLayout.tsx @@ -6,8 +6,8 @@ import { ReactNode } from "react"; const ContainerPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/container" }, - { label: "Usage", path: "/components/container/usage" }, + { label: "Overview", path: "/components/container" }, + { label: "Code", path: "/components/container/code" }, ]; return ( @@ -20,7 +20,7 @@ const ContainerPageHeading = ({ children }: { children: ReactNode }) => { container that allows for controlled use of our design tokens. Being generic in nature can be "over-used", so it's important to consider situations where more specific and expressive components could be used. - + {children} diff --git a/apps/website/screens/components/container/usage/ContainerUsagePage.tsx b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx similarity index 97% rename from apps/website/screens/components/container/usage/ContainerUsagePage.tsx rename to apps/website/screens/components/container/overview/ContainerOverviewPage.tsx index 727d27acf4..c9d9b6f85c 100644 --- a/apps/website/screens/components/container/usage/ContainerUsagePage.tsx +++ b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx @@ -5,7 +5,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; const sections = [ { - title: "Usage", + title: "Introduction", content: ( The primary function of a container is to structure and group other components or contents that are related to @@ -121,15 +121,15 @@ const sections = [ }, ]; -const ContainerUsagePage = () => { +const ContainerOverviewPage = () => { return ( - + ); }; -export default ContainerUsagePage; +export default ContainerOverviewPage; diff --git a/apps/website/screens/components/container/usage/examples/alternateBoxModel.ts b/apps/website/screens/components/container/overview/examples/alternateBoxModel.ts similarity index 100% rename from apps/website/screens/components/container/usage/examples/alternateBoxModel.ts rename to apps/website/screens/components/container/overview/examples/alternateBoxModel.ts diff --git a/apps/website/screens/components/container/usage/examples/defaultBoxModel.ts b/apps/website/screens/components/container/overview/examples/defaultBoxModel.ts similarity index 100% rename from apps/website/screens/components/container/usage/examples/defaultBoxModel.ts rename to apps/website/screens/components/container/overview/examples/defaultBoxModel.ts From 7aab3b8fa7301906a84ec8466b2cd9de732f44b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 19 Mar 2025 17:24:56 +0100 Subject: [PATCH 3/7] Container doc updates --- .../overview/ContainerOverviewPage.tsx | 81 +++++++++---------- 1 file changed, 37 insertions(+), 44 deletions(-) diff --git a/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx index c9d9b6f85c..46890c21ca 100644 --- a/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx +++ b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx @@ -8,42 +8,12 @@ const sections = [ title: "Introduction", content: ( - The primary function of a container is to structure and group other components or contents that are related to - each other, allowing certain styles of customization to obtain more cohesive and consistent interfaces. + The container component represents the box model inside the Halstack Design System. It is a general-purpose + container that allows users to build their own components, UI elements, and layouts. Being generic in nature, it + can be "over-used", so it's important to consider situations where more specific and expressive components could + be used. ), - subSections: [ - { - title: "Do's", - content: ( - - - Use a container to group and organize related content within a specific section of a page or layout. - - - Set size, spacing, and margins that are consistent by applying the box model properties. - - - Control the depth of the different elements of your UI by customizing the container's box shadow. - - - Change and custom border styles of the container to match the rest of your interface design. - - - ), - }, - { - title: "Don'ts", - content: ( - - - Use the container to build components without first making sure that there is no other, more semantic, - component in Halstack that you can use instead. - - - ), - }, - ], }, { title: "The Box Model", @@ -119,17 +89,40 @@ const sections = [ ), }, + { + title: "Best practices", + content: ( + + + Use a container to group and organize related content within a specific section of a page or layout. + + + Set size, spacing, and margins that are consistent by applying the box model properties. + + + Control the depth of the different elements of your UI by customizing the container's box shadow. + + + Change and custom border styles of the container to match the rest of your interface design. + + + + Don't use the container to build components without first making sure that there is no other, more specific, + Halstack component that could be used instead. + + + + ), + }, ]; -const ContainerOverviewPage = () => { - return ( - - - - - - - ); -}; +const ContainerOverviewPage = () => ( + + + + + + +); export default ContainerOverviewPage; From bf87600fe66cf52e7ded9a5fbadf216fb0b470b6 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 25 Mar 2025 15:21:53 +0100 Subject: [PATCH 4/7] Small fixes --- .../pages/components/container/code.tsx | 18 ++++++++---------- .../pages/components/container/index.tsx | 18 ++++++++---------- .../container/code/ContainerCodePage.tsx | 18 ++++++++---------- packages/lib/src/container/Container.tsx | 19 +++++++++++++++---- 4 files changed, 39 insertions(+), 34 deletions(-) diff --git a/apps/website/pages/components/container/code.tsx b/apps/website/pages/components/container/code.tsx index 75ca4e8c1c..9983ebbc4d 100644 --- a/apps/website/pages/components/container/code.tsx +++ b/apps/website/pages/components/container/code.tsx @@ -3,16 +3,14 @@ import type { ReactElement } from "react"; import ContainerCodePage from "screens/components/container/code/ContainerCodePage"; import ContainerPageLayout from "screens/components/container/ContainerPageLayout"; -const Code = () => { - return ( - <> - - Container Code — Halstack Design System - - - - ); -}; +const Code = () => ( + <> + + Container code — Halstack Design System + + + +); Code.getLayout = (page: ReactElement) => {page}; diff --git a/apps/website/pages/components/container/index.tsx b/apps/website/pages/components/container/index.tsx index 328e1ddbae..eeb5f807df 100644 --- a/apps/website/pages/components/container/index.tsx +++ b/apps/website/pages/components/container/index.tsx @@ -3,16 +3,14 @@ import type { ReactElement } from "react"; import ContainerOverviewPage from "screens/components/container/overview/ContainerOverviewPage"; import ContainerPageLayout from "screens/components/container/ContainerPageLayout"; -const Index = () => { - return ( - <> - - Container — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Container — Halstack Design System + + + +); Index.getLayout = (page: ReactElement) => {page}; diff --git a/apps/website/screens/components/container/code/ContainerCodePage.tsx b/apps/website/screens/components/container/code/ContainerCodePage.tsx index bb35e7b28b..f3c94ba793 100644 --- a/apps/website/screens/components/container/code/ContainerCodePage.tsx +++ b/apps/website/screens/components/container/code/ContainerCodePage.tsx @@ -427,15 +427,13 @@ const sections = [ }, ]; -const ContainerCodePage = () => { - return ( - - - - - - - ); -}; +const ContainerCodePage = () => ( + + + + + + +); export default ContainerCodePage; diff --git a/packages/lib/src/container/Container.tsx b/packages/lib/src/container/Container.tsx index 5caad39929..36ad1da0cc 100644 --- a/packages/lib/src/container/Container.tsx +++ b/packages/lib/src/container/Container.tsx @@ -26,16 +26,27 @@ const Container = styled.div` box-shadow: ${({ boxShadow }) => boxShadow}; background-attachment: ${({ background }) => background?.attachment}; background-clip: ${({ background }) => background?.clip}; - background-color: ${({ background }) => background?.color ?? ""}; + background-color: ${({ background }) => background?.color}; background-image: ${({ background }) => background?.image}; background-origin: ${({ background }) => background?.origin}; background-position: ${({ background }) => background?.position}; background-repeat: ${({ background }) => background?.repeat}; background-size: ${({ background }) => background?.size}; border-radius: ${({ borderRadius }) => borderRadius}; - border-width: ${({ border }) => (border && "width" in border ? `${border?.width}` : "")}; - border-style: ${({ border }) => (border && "style" in border ? `${border?.style}` : "")}; - border-color: ${({ border }) => (border && "color" in border ? `${border?.color}` : "")}; + ${({ border }) => { + let styles = ""; + if (border != null) { + switch (true) { + case "width" in border: + styles += border.width ? `border-width: ${border.width};` : ""; + case "style" in border: + styles += border.style ? `border-style: ${border.style};` : ""; + case "color" in border: + styles += border.color ? `border-color: ${border.color};` : ""; + } + } + return styles; + }}; ${({ border }) => { let styles = ""; if (border != null) { From abef877820d550f5dc8c529b1a12d4231b620c9d Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 25 Mar 2025 16:45:50 +0100 Subject: [PATCH 5/7] Fixed tokens for stories --- .../lib/src/container/Container.stories.tsx | 97 ++++++++++++------- packages/lib/src/container/types.ts | 2 +- 2 files changed, 65 insertions(+), 34 deletions(-) diff --git a/packages/lib/src/container/Container.stories.tsx b/packages/lib/src/container/Container.stories.tsx index 2162bfb679..189305e5c9 100644 --- a/packages/lib/src/container/Container.stories.tsx +++ b/packages/lib/src/container/Container.stories.tsx @@ -13,9 +13,13 @@ const Listbox = ({ suggestions = [] }: { suggestions: string[] }): JSX.Element = ( boxSizing="border-box" width="200px" height="200px" - background={{ color: "color_purple_400" }} + background={{ color: "var(--color-bg-primary-medium)" }} border={{ top: { - width: "2px", - color: "color_blue_600", - style: "solid", + width: "var(--border-width-m)", + color: "var(--border-color-secondary-strong)", + style: "var(--border-style-default)", }, bottom: { - width: "thick", - color: "color_purple_600", - style: "solid", + width: "var(--border-width-l)", + color: "var(--border-color-primary-strong)", + style: "var(--border-style-default)", }, }} - borderRadius="0 0 0.25rem 0.25rem" + borderRadius="var(--border-radius-none) var(--border-radius-none) var(--border-radius-s) var(--border-radius-s)" padding="medium" margin="large" > @@ -99,21 +103,35 @@ const Container = () => ( - + 1 - + 2 ( 1 - + 2 @@ -146,24 +173,28 @@ const Container = () => ( 1 2 @@ -173,8 +204,8 @@ const Container = () => ( <ExampleContainer> - <DxcContainer padding="medium" border={{ width: "1px", style: "solid", color: "color_black" }}> - <DxcContainer float="right" background={{ color: "color_purple_400" }} width="100px" height="100px"> + <DxcContainer padding="medium" border={{ width: "var(--border-width-s)", style: "var(--border-style-default)", color: "var(--border-color-neutral-strongest)" }}> + <DxcContainer float="right" background={{ color: "var(--color-bg-primary-medium)" }} width="100px" height="100px"> <b>Floating text</b> </DxcContainer> <p style={{ margin: 0 }}> @@ -193,7 +224,7 @@ const Container = () => ( <ExampleContainer> <DxcContainer padding="medium" - outline={{ width: "1px", style: "solid", color: "color_black" }} + outline={{ width: "var(--border-width-s)", style: "var(--border-style-default)", color: "var(--border-color-neutral-strongest)" }} boxShadow="10px 5px 5px #fe0123" > <p style={{ margin: 0 }}> @@ -215,8 +246,8 @@ const Container = () => ( <Title title="Border and outline" level={4} /> <ExampleContainer> <DxcContainer - outline={{ color: "color_blue_400", style: "solid", offset: "2px" }} - border={{ top: { style: "solid" } }} + outline={{ color: "var(--border-color-secondary-medium)", style: "var(--border-style-default)", offset: "var(--spacing-padding-xxxs)" }} + border={{ top: { style: "var(--border-style-default)" } }} > Example text </DxcContainer> diff --git a/packages/lib/src/container/types.ts b/packages/lib/src/container/types.ts index 17e310d26f..683cac799f 100644 --- a/packages/lib/src/container/types.ts +++ b/packages/lib/src/container/types.ts @@ -29,7 +29,7 @@ type Background = { export type BorderProperties = { width?: string; - style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"; + style?: string; color?: string; }; type Border = From 1c3e2c061b1a0a7aa8b2f8e214a808ae3821fbda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 26 Mar 2025 13:55:09 +0100 Subject: [PATCH 6/7] Container doc updates --- .../container/ContainerPageLayout.tsx | 4 +- .../overview/ContainerOverviewPage.tsx | 133 ++++++++++-------- 2 files changed, 73 insertions(+), 64 deletions(-) diff --git a/apps/website/screens/components/container/ContainerPageLayout.tsx b/apps/website/screens/components/container/ContainerPageLayout.tsx index 6ef62263e3..2b9822fc41 100644 --- a/apps/website/screens/components/container/ContainerPageLayout.tsx +++ b/apps/website/screens/components/container/ContainerPageLayout.tsx @@ -16,9 +16,7 @@ const ContainerPageHeading = ({ children }: { children: ReactNode }) => { <DxcFlex direction="column" gap="2rem"> <ComponentHeading name="Container" /> <DxcParagraph> - The container component represents the box model inside the Halstack Design System. Is a general-purpose - container that allows for controlled use of our design tokens. Being generic in nature can be "over-used", - so it's important to consider situations where more specific and expressive components could be used. + The container component represents the box model inside the Halstack Design System. </DxcParagraph> <TabsPageHeading tabs={tabs} /> </DxcFlex> diff --git a/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx index 46890c21ca..7058847246 100644 --- a/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx +++ b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx @@ -1,22 +1,28 @@ -import { DxcParagraph, DxcFlex, DxcBulletedList, DxcLink } from "@dxc-technology/halstack-react"; +import { DxcParagraph, DxcFlex, DxcBulletedList, DxcLink, DxcInset } from "@dxc-technology/halstack-react"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import Link from "next/link"; const sections = [ { title: "Introduction", content: ( - <DxcParagraph> - The container component represents the box model inside the Halstack Design System. It is a general-purpose - container that allows users to build their own components, UI elements, and layouts. Being generic in nature, it - can be "over-used", so it's important to consider situations where more specific and expressive components could - be used. - </DxcParagraph> + <> + <DxcParagraph> + The Halstack's container component provides a structured way to manage layout and spacing within the Halstack + Design System. It allows for controlled use of design tokens such as spacing, borders, and shadows, ensuring + consistency across the UI. + </DxcParagraph> + <DxcParagraph> + Being generic in nature can be "over-used", so it's important to consider situations where more specific and + expressive components could be used. + </DxcParagraph> + </> ), }, { - title: "The Box Model", + title: "The box model", content: ( <> <DxcParagraph> @@ -24,65 +30,52 @@ const sections = [ layouts for your application. </DxcParagraph> <DxcParagraph> - Below, we share a series of links that we consider essential to understand and use the Container component + Below, we share a series of links that we consider essential to understand and use the container component correctly. If you are not acquainted with these concepts, we strongly recommend taking a moment to review them: </DxcParagraph> <DxcBulletedList> <DxcBulletedList.Item> - The CSS Box Model - <DxcBulletedList type="circle"> - <DxcBulletedList.Item> - <DxcLink - href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model" - newWindow - > - MDN - </DxcLink> - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <DxcLink href="https://web.dev/learn/css/box-model" newWindow> - web.dev - </DxcLink> - , by Google. - </DxcBulletedList.Item> - </DxcBulletedList> - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <DxcLink - href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders" - newWindow - > - Backgrounds and borders - </DxcLink> - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <DxcLink - href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content" - newWindow - > - Overflowing content + <DxcLink href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model" newWindow> + MDN web docs: CSS box model </DxcLink> + <DxcInset top="0.5rem" bottom="0.5rem"> + <DxcBulletedList type="circle"> + <DxcBulletedList.Item> + <DxcLink + href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders" + newWindow + > + Backgrounds and borders + </DxcLink> + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <DxcLink + href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content" + newWindow + > + Overflowing content + </DxcLink> + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <DxcLink + href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS" + newWindow + > + Sizing items in CSS + </DxcLink> + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <DxcLink href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning" newWindow> + Positioning + </DxcLink> + </DxcBulletedList.Item> + </DxcBulletedList> + </DxcInset> </DxcBulletedList.Item> <DxcBulletedList.Item> - <DxcLink - href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS" - newWindow - > - Sizing items in CSS - </DxcLink> - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <DxcLink - href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing" - newWindow - > - Mastering margin collapsing - </DxcLink> - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <DxcLink href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning" newWindow> - Positioning + <DxcLink href="https://web.dev/learn/css/box-model" newWindow> + Google web.dev: Box model </DxcLink> </DxcBulletedList.Item> </DxcBulletedList> @@ -107,10 +100,28 @@ const sections = [ </DxcBulletedList.Item> <DxcBulletedList.Item> <strong> - Don't use the container to build components without first making sure that there is no other, more specific, - Halstack component that could be used instead. + Don't use the container to build components without first making sure that there is no other, more specific + and semantic, Halstack component that could be used instead. </strong> </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong> + Don't use the container to create complex layouts when more expressive components are available. + </strong>{" "} + Use the{" "} + <Link href="/components/flex" passHref legacyBehavior> + <DxcLink>flex</DxcLink> + </Link>{" "} + and{" "} + <Link href="/components/grid" passHref legacyBehavior> + <DxcLink>grid</DxcLink> + </Link>{" "} + components to create those layouts. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + If possible and although the component allows any value, <strong>try to use the design tokens</strong>{" "} + provided by the Halstack Design System. + </DxcBulletedList.Item> </DxcBulletedList> ), }, From 426ac1a715bd03eae60bed4b31b74f049a9ca172 Mon Sep 17 00:00:00 2001 From: Enrique Moreno <enrique.moreno@dxc.com> Date: Wed, 26 Mar 2025 14:28:22 +0100 Subject: [PATCH 7/7] Improved readability and did minor syntax problems --- .../overview/ContainerOverviewPage.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx index 7058847246..7932b3d2ff 100644 --- a/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx +++ b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx @@ -15,7 +15,7 @@ const sections = [ consistency across the UI. </DxcParagraph> <DxcParagraph> - Being generic in nature can be "over-used", so it's important to consider situations where more specific and + Being generic in nature, it can be overused, so it's important to consider situations where more specific and expressive components could be used. </DxcParagraph> </> @@ -30,9 +30,8 @@ const sections = [ layouts for your application. </DxcParagraph> <DxcParagraph> - Below, we share a series of links that we consider essential to understand and use the container component - correctly. If you are not acquainted with these concepts, we strongly recommend taking a moment to review - them: + Below, we share a series of essential links to help you understand and use the container component correctly. + If you are not acquainted with these concepts, we strongly recommend taking a moment to review them: </DxcParagraph> <DxcBulletedList> <DxcBulletedList.Item> @@ -96,17 +95,17 @@ const sections = [ Control the depth of the different elements of your UI by customizing the container's box shadow. </DxcBulletedList.Item> <DxcBulletedList.Item> - Change and custom border styles of the container to match the rest of your interface design. + Customize border styles of the container to match the rest of your interface design. </DxcBulletedList.Item> <DxcBulletedList.Item> <strong> - Don't use the container to build components without first making sure that there is no other, more specific - and semantic, Halstack component that could be used instead. + Don't use the container to build components without first ensuring that there isn't a more specific, + semantic Halstack component that could be used instead. </strong> </DxcBulletedList.Item> <DxcBulletedList.Item> <strong> - Don't use the container to create complex layouts when more expressive components are available. + Don't use the container to create complex layouts when more suitable components are available. </strong>{" "} Use the{" "} <Link href="/components/flex" passHref legacyBehavior> @@ -119,8 +118,8 @@ const sections = [ components to create those layouts. </DxcBulletedList.Item> <DxcBulletedList.Item> - If possible and although the component allows any value, <strong>try to use the design tokens</strong>{" "} - provided by the Halstack Design System. + Whenever possible, <strong>try to use the design tokens</strong> provided by the Halstack Design System, even + though the component allows any value. </DxcBulletedList.Item> </DxcBulletedList> ),