From dea471e1a495081b498577b2f41d22a658048d7c Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 18 Feb 2025 10:51:53 +0100 Subject: [PATCH 01/11] Reimplementation of the Bleed component with new CSS variables --- packages/lib/src/bleed/Bleed.tsx | 3 +-- packages/lib/src/bleed/types.ts | 15 +++++++-------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/lib/src/bleed/Bleed.tsx b/packages/lib/src/bleed/Bleed.tsx index 7d003f52dd..183020edfd 100644 --- a/packages/lib/src/bleed/Bleed.tsx +++ b/packages/lib/src/bleed/Bleed.tsx @@ -1,8 +1,7 @@ import styled from "styled-components"; import BleedPropsType from "./types"; -import { CoreSpacingTokensType } from "../common/coreTokens"; -const getSpacingValue = (spacingName?: CoreSpacingTokensType) => (spacingName ?? "0rem"); +const getSpacingValue = (spacingName?: string) => spacingName ?? "0rem"; const StyledBleed = styled.div` ${({ space, horizontal, vertical, top, right, bottom, left }) => ` diff --git a/packages/lib/src/bleed/types.ts b/packages/lib/src/bleed/types.ts index f724eaf446..c008340530 100644 --- a/packages/lib/src/bleed/types.ts +++ b/packages/lib/src/bleed/types.ts @@ -1,35 +1,34 @@ import { ReactNode } from "react"; -import { CoreSpacingTokensType } from "../common/coreTokens"; type Props = { /** * Applies the spacing scale to all sides. */ - space?: CoreSpacingTokensType; + space?: string; /** * Applies the spacing scale to the left and right sides. */ - horizontal?: CoreSpacingTokensType; + horizontal?: string; /** * Applies the spacing scale to the top and bottom sides. */ - vertical?: CoreSpacingTokensType; + vertical?: string; /** * Applies the spacing scale to the top side. */ - top?: CoreSpacingTokensType; + top?: string; /** * Applies the spacing scale to the right side. */ - right?: CoreSpacingTokensType; + right?: string; /** * Applies the spacing scale to the bottom side. */ - bottom?: CoreSpacingTokensType; + bottom?: string; /** * Applies the spacing scale to the left side. */ - left?: CoreSpacingTokensType; + left?: string; /** * Custom content inside the bleed. */ From 2ad625184212579fe3779012fbb30cf5c2516813 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 18 Feb 2025 11:35:12 +0100 Subject: [PATCH 02/11] Prepared structure for new documentation --- apps/website/pages/components/bleed/code.tsx | 19 +++++++++ apps/website/pages/components/bleed/index.tsx | 4 +- .../pages/components/bleed/specifications.tsx | 21 ---------- apps/website/pages/components/bleed/usage.tsx | 21 ---------- .../components/bleed/BleedPageLayout.tsx | 11 +++--- .../components/bleed/code/BleedCodePage.tsx | 16 ++++---- .../BleedOverviewPage.tsx} | 10 ++--- .../components/bleed/specs/BleedSpecsPage.tsx | 36 ------------------ .../bleed/specs/images/bleed_specs.png | Bin 24114 -> 0 bytes 9 files changed, 37 insertions(+), 101 deletions(-) create mode 100644 apps/website/pages/components/bleed/code.tsx delete mode 100644 apps/website/pages/components/bleed/specifications.tsx delete mode 100644 apps/website/pages/components/bleed/usage.tsx rename apps/website/screens/components/bleed/{usage/BleedUsagePage.tsx => overview/BleedOverviewPage.tsx} (90%) delete mode 100644 apps/website/screens/components/bleed/specs/BleedSpecsPage.tsx delete mode 100644 apps/website/screens/components/bleed/specs/images/bleed_specs.png diff --git a/apps/website/pages/components/bleed/code.tsx b/apps/website/pages/components/bleed/code.tsx new file mode 100644 index 0000000000..c36ba79693 --- /dev/null +++ b/apps/website/pages/components/bleed/code.tsx @@ -0,0 +1,19 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import BleedPageLayout from "screens/components/bleed/BleedPageLayout"; +import BleedCodePage from "screens/components/bleed/code/BleedCodePage"; + +const Code = () => { + return ( + <> + + Bleed Code — Halstack Design System + + + + ); +}; + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/bleed/index.tsx b/apps/website/pages/components/bleed/index.tsx index 9de9edaad5..dcfd23da9d 100644 --- a/apps/website/pages/components/bleed/index.tsx +++ b/apps/website/pages/components/bleed/index.tsx @@ -14,8 +14,6 @@ const Index = () => { ); }; -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/bleed/specifications.tsx b/apps/website/pages/components/bleed/specifications.tsx deleted file mode 100644 index bbdf13920e..0000000000 --- a/apps/website/pages/components/bleed/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import BleedPageLayout from "screens/components/bleed/BleedPageLayout"; -import BleedSpecsPage from "screens/components/bleed/specs/BleedSpecsPage"; - -const Specifications = () => { - return ( - <> - - Bleed Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/bleed/usage.tsx b/apps/website/pages/components/bleed/usage.tsx deleted file mode 100644 index c068dd4a54..0000000000 --- a/apps/website/pages/components/bleed/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import BleedPageLayout from "screens/components/bleed/BleedPageLayout"; -import BleedUsagePage from "screens/components/bleed/usage/BleedUsagePage"; - -const Usage = () => { - return ( - <> - - Bleed Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/bleed/BleedPageLayout.tsx b/apps/website/screens/components/bleed/BleedPageLayout.tsx index 60dab729e4..64eb2bae85 100644 --- a/apps/website/screens/components/bleed/BleedPageLayout.tsx +++ b/apps/website/screens/components/bleed/BleedPageLayout.tsx @@ -4,11 +4,10 @@ import TabsPageHeading from "@/common/TabsPageLayout"; import ComponentHeading from "@/common/ComponentHeading"; import { ReactNode } from "react"; -const BleedPageHeading = ({ children }: { children: ReactNode }) => { +const BleedHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/bleed" }, - { label: "Usage", path: "/components/bleed/usage" }, - { label: "Specifications", path: "/components/bleed/specifications" }, + { label: "Overview", path: "/components/bleed" }, + { label: "Code", path: "/components/bleed/code" }, ]; return ( @@ -17,7 +16,7 @@ const BleedPageHeading = ({ children }: { children: ReactNode }) => { Bleed layout applies negative spacing scale to its child nodes. - + {children} @@ -25,4 +24,4 @@ const BleedPageHeading = ({ children }: { children: ReactNode }) => { ); }; -export default BleedPageHeading; +export default BleedHeading; diff --git a/apps/website/screens/components/bleed/code/BleedCodePage.tsx b/apps/website/screens/components/bleed/code/BleedCodePage.tsx index 7bac0816ee..dbba16ced9 100644 --- a/apps/website/screens/components/bleed/code/BleedCodePage.tsx +++ b/apps/website/screens/components/bleed/code/BleedCodePage.tsx @@ -8,8 +8,6 @@ import basicUsage from "./examples/basicUsage"; import customSizes from "./examples/customSides"; import StatusBadge from "@/common/StatusBadge"; -const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`; - const sections = [ { title: "Props", @@ -24,7 +22,7 @@ const sections = [ space - {coreSpacingTokensTypeString} + string Applies the spacing scale to all sides. - @@ -32,7 +30,7 @@ const sections = [ horizontal - {coreSpacingTokensTypeString} + string Applies the spacing scale to the left and right sides. - @@ -40,7 +38,7 @@ const sections = [ vertical - {coreSpacingTokensTypeString} + string Applies the spacing scale to the top and bottom sides. - @@ -48,7 +46,7 @@ const sections = [ top - {coreSpacingTokensTypeString} + string Applies the spacing scale to the top side. - @@ -56,7 +54,7 @@ const sections = [ right - {coreSpacingTokensTypeString} + string Applies the spacing scale to the right side. - @@ -64,7 +62,7 @@ const sections = [ bottom - {coreSpacingTokensTypeString} + string Applies the spacing scale to the bottom side. - @@ -72,7 +70,7 @@ const sections = [ left - {coreSpacingTokensTypeString} + string Applies the spacing scale to the left side. - diff --git a/apps/website/screens/components/bleed/usage/BleedUsagePage.tsx b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx similarity index 90% rename from apps/website/screens/components/bleed/usage/BleedUsagePage.tsx rename to apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx index 74d918ce85..a6718337b2 100644 --- a/apps/website/screens/components/bleed/usage/BleedUsagePage.tsx +++ b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx @@ -6,7 +6,7 @@ import Code from "@/common/Code"; const sections = [ { - title: "Usage", + title: "Introduction", content: ( <> @@ -24,15 +24,15 @@ const sections = [ }, ]; -const BleedUsagePage = () => { +const BleedOverviewPage = () => { return ( - + - + ); }; -export default BleedUsagePage; +export default BleedOverviewPage; diff --git a/apps/website/screens/components/bleed/specs/BleedSpecsPage.tsx b/apps/website/screens/components/bleed/specs/BleedSpecsPage.tsx deleted file mode 100644 index 9a5a3a750f..0000000000 --- a/apps/website/screens/components/bleed/specs/BleedSpecsPage.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import Figure from "@/common/Figure"; -import Image from "@/common/Image"; -import bleedSpecsImage from "./images/bleed_specs.png"; - -const sections = [ - { - title: "Specifications", - content: ( - <> -
- Bleed design specifications -
- - Negative space varies depending on the REM values and the approach to implementation. - - - ), - }, -]; - -const BleedSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default BleedSpecsPage; diff --git a/apps/website/screens/components/bleed/specs/images/bleed_specs.png b/apps/website/screens/components/bleed/specs/images/bleed_specs.png deleted file mode 100644 index 5583cb33ccdcd99e73f815fc2db994a3447f7abd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 24114 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 Js{B19>0i2H`49jA From 91eed761a765df4862fef9d352aecb7e08d7f5f2 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 18 Feb 2025 11:46:26 +0100 Subject: [PATCH 03/11] Fixed props order and github links --- apps/website/pages/components/bleed/index.tsx | 4 +- .../components/bleed/code/BleedCodePage.tsx | 48 +++++++++---------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/apps/website/pages/components/bleed/index.tsx b/apps/website/pages/components/bleed/index.tsx index dcfd23da9d..3dab7a80ba 100644 --- a/apps/website/pages/components/bleed/index.tsx +++ b/apps/website/pages/components/bleed/index.tsx @@ -1,7 +1,7 @@ import Head from "next/head"; import type { ReactElement } from "react"; import BleedPageLayout from "screens/components/bleed/BleedPageLayout"; -import BleedCodePage from "screens/components/bleed/code/BleedCodePage"; +import BleedOverviewPage from "screens/components/bleed/overview/BleedOverviewPage"; const Index = () => { return ( @@ -9,7 +9,7 @@ const Index = () => { Bleed — Halstack Design System - + ); }; diff --git a/apps/website/screens/components/bleed/code/BleedCodePage.tsx b/apps/website/screens/components/bleed/code/BleedCodePage.tsx index dbba16ced9..0c9313da94 100644 --- a/apps/website/screens/components/bleed/code/BleedCodePage.tsx +++ b/apps/website/screens/components/bleed/code/BleedCodePage.tsx @@ -20,35 +20,40 @@ const sections = [ Default - space + bottom string - Applies the spacing scale to all sides. + Applies the spacing scale to the bottom side. - - horizontal - string + + + children + - Applies the spacing scale to the left and right sides. + + React.ReactNode + + Custom content inside the bleed. - - vertical + horizontal string - Applies the spacing scale to the top and bottom sides. + Applies the spacing scale to the left and right sides. - - top + left string - Applies the spacing scale to the top side. + Applies the spacing scale to the left side. - @@ -60,32 +65,27 @@ const sections = [ - - bottom + space string - Applies the spacing scale to the bottom side. + Applies the spacing scale to all sides. - - left + top string - Applies the spacing scale to the left side. + Applies the spacing scale to the top side. - + vertical - - - children - - - - React.ReactNode + string - Custom content inside the bleed. + Applies the spacing scale to the top and bottom sides. - @@ -106,15 +106,15 @@ const sections = [ }, ]; -const BleedTableCodePage = () => { +const BleedCodePage = () => { return ( - + ); }; -export default BleedTableCodePage; +export default BleedCodePage; From b22164461eb3757c58b5ba953e562815f0441047 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 18 Feb 2025 13:51:21 +0100 Subject: [PATCH 04/11] Fixed text for export --- apps/website/screens/components/bleed/BleedPageLayout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/screens/components/bleed/BleedPageLayout.tsx b/apps/website/screens/components/bleed/BleedPageLayout.tsx index 64eb2bae85..9df070342c 100644 --- a/apps/website/screens/components/bleed/BleedPageLayout.tsx +++ b/apps/website/screens/components/bleed/BleedPageLayout.tsx @@ -4,7 +4,7 @@ import TabsPageHeading from "@/common/TabsPageLayout"; import ComponentHeading from "@/common/ComponentHeading"; import { ReactNode } from "react"; -const BleedHeading = ({ children }: { children: ReactNode }) => { +const BleedPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ { label: "Overview", path: "/components/bleed" }, { label: "Code", path: "/components/bleed/code" }, @@ -24,4 +24,4 @@ const BleedHeading = ({ children }: { children: ReactNode }) => { ); }; -export default BleedHeading; +export default BleedPageHeading; From 49b6ecd970f91176a0c41f51d10522a02b15cef1 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Mon, 10 Mar 2025 13:58:40 +0100 Subject: [PATCH 05/11] Converted to inline function --- .../components/bleed/code/BleedCodePage.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/apps/website/screens/components/bleed/code/BleedCodePage.tsx b/apps/website/screens/components/bleed/code/BleedCodePage.tsx index 0c9313da94..94328e6bb9 100644 --- a/apps/website/screens/components/bleed/code/BleedCodePage.tsx +++ b/apps/website/screens/components/bleed/code/BleedCodePage.tsx @@ -106,15 +106,13 @@ const sections = [ }, ]; -const BleedCodePage = () => { - return ( - - - - - - - ); -}; +const BleedCodePage = () => ( + + + + + + +); export default BleedCodePage; From 1e87a598a25f4c436a8e6ae3cdc9deaf5b4134f3 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Wed, 2 Apr 2025 13:51:10 +0200 Subject: [PATCH 06/11] Refactored bleed --- .../components/bleed/code/BleedCodePage.tsx | 2 +- packages/lib/src/bleed/Bleed.tsx | 43 ++++++++----------- 2 files changed, 18 insertions(+), 27 deletions(-) diff --git a/apps/website/screens/components/bleed/code/BleedCodePage.tsx b/apps/website/screens/components/bleed/code/BleedCodePage.tsx index 94328e6bb9..44243a7f6d 100644 --- a/apps/website/screens/components/bleed/code/BleedCodePage.tsx +++ b/apps/website/screens/components/bleed/code/BleedCodePage.tsx @@ -109,7 +109,7 @@ const sections = [ const BleedCodePage = () => ( - + diff --git a/packages/lib/src/bleed/Bleed.tsx b/packages/lib/src/bleed/Bleed.tsx index 183020edfd..0345eba09a 100644 --- a/packages/lib/src/bleed/Bleed.tsx +++ b/packages/lib/src/bleed/Bleed.tsx @@ -1,28 +1,19 @@ -import styled from "styled-components"; import BleedPropsType from "./types"; +import DxcContainer from "../container/Container"; -const getSpacingValue = (spacingName?: string) => spacingName ?? "0rem"; - -const StyledBleed = styled.div` - ${({ space, horizontal, vertical, top, right, bottom, left }) => ` - margin: -${getSpacingValue(top || vertical || space)} -${getSpacingValue( - right || horizontal || space - )} -${getSpacingValue(bottom || vertical || space)} -${getSpacingValue(left || horizontal || space)}; - `} -`; - -const Bleed = ({ space, horizontal, vertical, top, right, bottom, left, children }: BleedPropsType) => ( - - {children} - -); - -export default Bleed; +export default function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: BleedPropsType) { + return ( + + {children} + + ); +} From 4e1c3f19be76cbd4cde086c044d9837d81d0c294 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 3 Apr 2025 10:56:40 +0200 Subject: [PATCH 07/11] Fixed margin values --- packages/lib/src/bleed/Bleed.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/lib/src/bleed/Bleed.tsx b/packages/lib/src/bleed/Bleed.tsx index 0345eba09a..904e4b2614 100644 --- a/packages/lib/src/bleed/Bleed.tsx +++ b/packages/lib/src/bleed/Bleed.tsx @@ -1,17 +1,17 @@ import BleedPropsType from "./types"; import DxcContainer from "../container/Container"; +const getNegativeValue = (value?: string) => (value ? `-${value}` : null); + export default function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: BleedPropsType) { return ( {children} From bf9bff7480c759f29d378199778ea8b1bfd53270 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 3 Apr 2025 11:45:31 +0200 Subject: [PATCH 08/11] Added documentation --- .../bleed/overview/BleedOverviewPage.tsx | 68 +++++++++++++------ 1 file changed, 49 insertions(+), 19 deletions(-) diff --git a/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx index a6718337b2..a134defda6 100644 --- a/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx +++ b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx @@ -1,7 +1,8 @@ -import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; +import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; +import Link from "next/link"; import Code from "@/common/Code"; const sections = [ @@ -10,29 +11,58 @@ const sections = [ content: ( <> - Bleed properties refer to the scale of the spacing used outside a container. The unit commonly used for the - bleed scale is REM, which is a measurement unit that refers to the font-size of the root element of a - document. - - - The following values of REM are commonly used in the design system: 0, 0.125,{" "} - 0.25, 0.5, 1, 1.5, 2, 3,{" "} - 4, and 5. + The Bleed component is a container that applies negative margins around its content, allowing elements to + extend beyond their usual boundaries. This can be useful for aligning content seamlessly and creating dynamic, + edge-to-edge layouts. It provides customizable spacing options, offering greater design flexibility while + maintaining visual coherence. ), }, + { + title: "Best practices", + content: ( + + + Enhance visual flow: use the bleed component to create smooth transitions between sections, removing + unwanted spacing restrictions. + + + Maintain balance and aesthetics: choose appropriate spacing values to ensure a + well-proportioned and visually appealing design. + + + Avoid unnecessary clutter: excessive use of the Inset component may lead to a fragmented or + overcrowded layout. + + + Ensure consistency with design tokens: whenever possible, use the design tokens provided by + the Halstack Design System, to maintain visual and functional consistency across applications, even though the + component allows custom values. + + + Combine with other layout techniques: use this component alongside{" "} + + flex + {" "} + and{" "} + + grid + {" "} + components to create consistent and semantic layouts. + + + ), + }, ]; -const BleedOverviewPage = () => { - return ( - - - - - - - ); -}; +const BleedOverviewPage = () => ( + + + + + + +); export default BleedOverviewPage; From 85bb3493781acab0d03c4243e42dd465046c7aa1 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 3 Apr 2025 11:46:00 +0200 Subject: [PATCH 09/11] Document formatting --- .../screens/components/bleed/overview/BleedOverviewPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx index a134defda6..aaf8851cfa 100644 --- a/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx +++ b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx @@ -24,8 +24,8 @@ const sections = [ content: ( - Enhance visual flow: use the bleed component to create smooth transitions between sections, removing - unwanted spacing restrictions. + Enhance visual flow: use the bleed component to create smooth transitions between sections, + removing unwanted spacing restrictions. Maintain balance and aesthetics: choose appropriate spacing values to ensure a From a1fa460d5f931e097f53345e0111ab7b323ae285 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: Thu, 3 Apr 2025 12:22:46 +0200 Subject: [PATCH 10/11] Inset updates to stay consistent --- .../bleed/overview/BleedOverviewPage.tsx | 3 +-- packages/lib/src/inset/Inset.tsx | 14 ++++++-------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx index aaf8851cfa..af848e9e27 100644 --- a/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx +++ b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx @@ -3,7 +3,6 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import Link from "next/link"; -import Code from "@/common/Code"; const sections = [ { @@ -11,7 +10,7 @@ const sections = [ content: ( <> - The Bleed component is a container that applies negative margins around its content, allowing elements to + The bleed component is a container that applies negative margins around its content, allowing elements to extend beyond their usual boundaries. This can be useful for aligning content seamlessly and creating dynamic, edge-to-edge layouts. It provides customizable spacing options, offering greater design flexibility while maintaining visual coherence. diff --git a/packages/lib/src/inset/Inset.tsx b/packages/lib/src/inset/Inset.tsx index c952c7d9d0..d354442734 100644 --- a/packages/lib/src/inset/Inset.tsx +++ b/packages/lib/src/inset/Inset.tsx @@ -4,14 +4,12 @@ import DxcContainer from "../container/Container"; export default function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: InsetPropsType) { return ( {children} From a9659e4f710fb9107beb35d4e748afbaa0cb70a2 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 3 Apr 2025 12:55:35 +0200 Subject: [PATCH 11/11] Fixed examples and negative value behavior --- .../bleed/code/examples/basicUsage.ts | 12 +- .../bleed/code/examples/customSides.ts | 12 +- packages/lib/src/bleed/Bleed.stories.tsx | 367 +++--------------- packages/lib/src/bleed/Bleed.tsx | 2 +- 4 files changed, 69 insertions(+), 324 deletions(-) diff --git a/apps/website/screens/components/bleed/code/examples/basicUsage.ts b/apps/website/screens/components/bleed/code/examples/basicUsage.ts index 921900ac22..19d16497f3 100644 --- a/apps/website/screens/components/bleed/code/examples/basicUsage.ts +++ b/apps/website/screens/components/bleed/code/examples/basicUsage.ts @@ -3,13 +3,13 @@ import Placeholder from "@/common/Placeholder"; const code = `() => { return ( - - - - - + + + + + - + ); diff --git a/apps/website/screens/components/bleed/code/examples/customSides.ts b/apps/website/screens/components/bleed/code/examples/customSides.ts index aeabadfbc9..2f79aeba95 100644 --- a/apps/website/screens/components/bleed/code/examples/customSides.ts +++ b/apps/website/screens/components/bleed/code/examples/customSides.ts @@ -3,13 +3,13 @@ import Placeholder from "@/common/Placeholder"; const code = `() => { return ( - - - - - + + + + + - + ); diff --git a/packages/lib/src/bleed/Bleed.stories.tsx b/packages/lib/src/bleed/Bleed.stories.tsx index 04e3a5a7c3..eecacff8f1 100644 --- a/packages/lib/src/bleed/Bleed.stories.tsx +++ b/packages/lib/src/bleed/Bleed.stories.tsx @@ -1,340 +1,85 @@ -import styled from "styled-components"; import Title from "../../.storybook/components/Title"; import DxcBleed from "./Bleed"; import DxcFlex from "../flex/Flex"; import { Meta, StoryObj } from "@storybook/react"; +import DxcContainer from "../container/Container"; +import { ReactNode } from "react"; export default { title: "Bleed", component: DxcBleed, } as Meta; -const Container = styled.div` - background: #f2eafa; - padding: 5rem; - margin: 2.5rem; -`; +const Container = ({ children }: { children: ReactNode }) => ( + + {children} + +); -const Placeholder = styled.div` - min-height: 40px; - min-width: 120px; - border: 1px solid #a46ede; - border-radius: 0.5rem; - background-color: #e5d5f6; -`; +const Placeholder = () => ( + +); const Bleed = () => ( <> - - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed space="0rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Space = xxxsmall" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed space="0.125rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Space = xxsmall" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed space="0.25rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Space = xsmall" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed space="0.5rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Space = small" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed space="1rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Space = medium" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed space="1.5rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Space = large" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed space="2rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Space = xlarge" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed space="3rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Space = xxlarge" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed space="4rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Space = xxxlarge" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed space="5rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Horizontal = none" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed horizontal="0rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Horizontal = xxxsmall" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed horizontal="0.125rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Horizontal = xxsmall" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed horizontal="0.25rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Horizontal = xsmall" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed horizontal="0.5rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Horizontal = small" theme="light" level={4} /> + <Title title="No space (default)" level={4} /> <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed horizontal="1rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> + <DxcBleed> + <Placeholder /> + </DxcBleed> </Container> - <Title title="Horizontal = medium" theme="light" level={4} /> + <Title title="space = xxLarge" level={4} /> <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed horizontal="1.5rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> + <DxcBleed space="var(--spacing-padding-xxl)"> + <Placeholder /> + </DxcBleed> </Container> - <Title title="Horizontal = large" theme="light" level={4} /> + <Title title="horizontal = small" level={4} /> <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed horizontal="2rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> + <DxcBleed horizontal="var(--spacing-padding-s)"> + <Placeholder /> + </DxcBleed> </Container> - <Title title="Horizontal = xlarge" theme="light" level={4} /> + <Title title="vertical = large" level={4} /> <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed horizontal="3rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> + <DxcBleed vertical="var(--spacing-padding-l)"> + <Placeholder /> + </DxcBleed> </Container> - <Title title="Horizontal = xxlarge" theme="light" level={4} /> + <Title title="top = xxsmall, right= medium, bottom = large and left = xxlarge" level={4} /> <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed horizontal="4rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Horizontal = xxxlarge" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed horizontal="5rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> + <DxcBleed + top="var(--spacing-padding-xxs)" + right="var(--spacing-padding-m)" + bottom="var(--spacing-padding-l)" + left="var(--spacing-padding-xl)" + > + <Placeholder /> + </DxcBleed> </Container> - - <Title title="Vertical = none" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed vertical="0rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Vertical = xxxsmall" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed vertical="0.125rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Vertical = xxsmall" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed vertical="0.25rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Vertical = xsmall" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed vertical="0.5rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Vertical = small" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed vertical="1rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Vertical = medium" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed vertical="1.5rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Vertical = large" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed vertical="2rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Vertical = xlarge" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed vertical="3rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Vertical = xxlarge" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed vertical="4rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - <Title title="Vertical = xxxlarge" theme="light" level={4} /> - <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed vertical="5rem"> - <Placeholder></Placeholder> - </DxcBleed> - <Placeholder></Placeholder> - </DxcFlex> - </Container> - - <Title title="Top = xsmall, right = small, bottom = medium and left = large" theme="light" level={4} /> + <Title title="Inside a flex column" level={4} /> <Container> - <DxcFlex direction="column" gap="1.5rem"> - <Placeholder></Placeholder> - <DxcBleed top="0.5rem" right="1rem" bottom="1.5rem" left="2rem"> - <Placeholder></Placeholder> + <DxcFlex direction="column" gap="1rem"> + <Placeholder /> + <DxcBleed + top="var(--spacing-padding-xxs)" + right="var(--spacing-padding-l)" + bottom="var(--spacing-padding-xl)" + left="var(--spacing-padding-xxl)" + > + <Placeholder /> </DxcBleed> - <Placeholder></Placeholder> + <Placeholder /> </DxcFlex> </Container> </> diff --git a/packages/lib/src/bleed/Bleed.tsx b/packages/lib/src/bleed/Bleed.tsx index 904e4b2614..26ccf92fdb 100644 --- a/packages/lib/src/bleed/Bleed.tsx +++ b/packages/lib/src/bleed/Bleed.tsx @@ -1,7 +1,7 @@ import BleedPropsType from "./types"; import DxcContainer from "../container/Container"; -const getNegativeValue = (value?: string) => (value ? `-${value}` : null); +const getNegativeValue = (value?: string) => (value ? `calc(${value} * -1)` : null); export default function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: BleedPropsType) { return (