diff --git a/apps/website/pages/components/container/code.tsx b/apps/website/pages/components/container/code.tsx new file mode 100644 index 0000000000..9983ebbc4d --- /dev/null +++ b/apps/website/pages/components/container/code.tsx @@ -0,0 +1,17 @@ +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 = () => ( + <> + + 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..eeb5f807df 100644 --- a/apps/website/pages/components/container/index.tsx +++ b/apps/website/pages/components/container/index.tsx @@ -1,21 +1,17 @@ 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 = () => { - return ( - <> - - Container — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + 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..2b9822fc41 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 ( @@ -16,11 +16,9 @@ const ContainerPageHeading = ({ children }: { children: ReactNode }) => { - 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. - + {children} 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/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx new file mode 100644 index 0000000000..7932b3d2ff --- /dev/null +++ b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx @@ -0,0 +1,138 @@ +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: ( + <> + + 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. + + + Being generic in nature, it can be overused, so it's important to consider situations where more specific and + expressive components could be used. + + + ), + }, + { + title: "The box model", + content: ( + <> + + Everything in CSS has a box around it. Understanding these boxes is key to being able to create more complex + layouts for your application. + + + 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: + + + + + MDN web docs: CSS box model + + + + + + Backgrounds and borders + + + + + Overflowing content + + + + + Sizing items in CSS + + + + + Positioning + + + + + + + + Google web.dev: Box model + + + + + ), + }, + { + 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. + + + Customize border styles of the container to match the rest of your interface design. + + + + 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. + + + + + Don't use the container to create complex layouts when more suitable components are available. + {" "} + Use the{" "} + + flex + {" "} + and{" "} + + grid + {" "} + components to create those layouts. + + + Whenever possible, try to use the design tokens provided by the Halstack Design System, even + though the component allows any value. + + + ), + }, +]; + +const ContainerOverviewPage = () => ( + + + + + + +); + +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 diff --git a/apps/website/screens/components/container/usage/ContainerUsagePage.tsx b/apps/website/screens/components/container/usage/ContainerUsagePage.tsx deleted file mode 100644 index 727d27acf4..0000000000 --- a/apps/website/screens/components/container/usage/ContainerUsagePage.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { DxcParagraph, DxcFlex, DxcBulletedList, DxcLink } from "@dxc-technology/halstack-react"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; - -const sections = [ - { - title: "Usage", - 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. - - ), - 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", - content: ( - <> - - Everything in CSS has a box around it. Understanding these boxes is key to being able to create more complex - layouts for your application. - - - 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: - - - - The CSS Box Model - - - - MDN - - - - - web.dev - - , by Google. - - - - - - Backgrounds and borders - - - - - Overflowing content - - - - - Sizing items in CSS - - - - - Mastering margin collapsing - - - - - Positioning - - - - - ), - }, -]; - -const ContainerUsagePage = () => { - return ( - - - - - - - ); -}; - -export default ContainerUsagePage; 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/Container.tsx b/packages/lib/src/container/Container.tsx index 86ba16425a..36ad1da0cc 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<StyledProps>` @@ -27,17 +26,27 @@ const Container = styled.div<StyledProps>` 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}; 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 ? `${getCoreColorToken(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) { @@ -59,8 +68,7 @@ const Container = styled.div<StyledProps>` 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..683cac799f 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; @@ -30,8 +29,8 @@ type Background = { export type BorderProperties = { width?: string; - style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"; - color?: CoreColorTokensType; + style?: string; + color?: string; }; type Border = | BorderProperties