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..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,13 +9,11 @@ const Index = () => { Bleed — Halstack Design System - + ); }; -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..9df070342c 100644 --- a/apps/website/screens/components/bleed/BleedPageLayout.tsx +++ b/apps/website/screens/components/bleed/BleedPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const BleedPageHeading = ({ 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} diff --git a/apps/website/screens/components/bleed/code/BleedCodePage.tsx b/apps/website/screens/components/bleed/code/BleedCodePage.tsx index 7bac0816ee..44243a7f6d 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", @@ -22,72 +20,72 @@ const sections = [ Default - space + bottom - {coreSpacingTokensTypeString} + string - Applies the spacing scale to all sides. + Applies the spacing scale to the bottom side. - - horizontal - {coreSpacingTokensTypeString} + + + children + - Applies the spacing scale to the left and right sides. + + React.ReactNode + + Custom content inside the bleed. - - vertical + horizontal - {coreSpacingTokensTypeString} + string - Applies the spacing scale to the top and bottom sides. + Applies the spacing scale to the left and right sides. - - top + left - {coreSpacingTokensTypeString} + string - Applies the spacing scale to the top side. + Applies the spacing scale to the left side. - right - {coreSpacingTokensTypeString} + string Applies the spacing scale to the right side. - - bottom + space - {coreSpacingTokensTypeString} + string - Applies the spacing scale to the bottom side. + Applies the spacing scale to all sides. - - left + top - {coreSpacingTokensTypeString} + 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. - @@ -108,15 +106,13 @@ const sections = [ }, ]; -const BleedTableCodePage = () => { - return ( - - - - - - - ); -}; +const BleedCodePage = () => ( + + + + + + +); -export default BleedTableCodePage; +export default BleedCodePage; 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/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx new file mode 100644 index 0000000000..af848e9e27 --- /dev/null +++ b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx @@ -0,0 +1,67 @@ +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"; + +const sections = [ + { + title: "Introduction", + content: ( + <> + + 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 = () => ( + + + + + + +); + +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 5583cb33cc..0000000000 Binary files a/apps/website/screens/components/bleed/specs/images/bleed_specs.png and /dev/null differ diff --git a/apps/website/screens/components/bleed/usage/BleedUsagePage.tsx b/apps/website/screens/components/bleed/usage/BleedUsagePage.tsx deleted file mode 100644 index 74d918ce85..0000000000 --- a/apps/website/screens/components/bleed/usage/BleedUsagePage.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import DocFooter from "@/common/DocFooter"; -import Code from "@/common/Code"; - -const sections = [ - { - title: "Usage", - 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. - - - ), - }, -]; - -const BleedUsagePage = () => { - return ( - - - - - - - ); -}; - -export default BleedUsagePage; 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 7d003f52dd..26ccf92fdb 100644 --- a/packages/lib/src/bleed/Bleed.tsx +++ b/packages/lib/src/bleed/Bleed.tsx @@ -1,29 +1,19 @@ -import styled from "styled-components"; import BleedPropsType from "./types"; -import { CoreSpacingTokensType } from "../common/coreTokens"; +import DxcContainer from "../container/Container"; -const getSpacingValue = (spacingName?: CoreSpacingTokensType) => (spacingName ?? "0rem"); +const getNegativeValue = (value?: string) => (value ? `calc(${value} * -1)` : null); -const StyledBleed = styled.div<BleedPropsType>` - ${({ 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) => ( - <StyledBleed - space={space} - horizontal={horizontal} - vertical={vertical} - top={top} - right={right} - bottom={bottom} - left={left} - > - {children} - </StyledBleed> -); - -export default Bleed; +export default function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: BleedPropsType) { + return ( + <DxcContainer + margin={{ + top: getNegativeValue(top) ?? getNegativeValue(vertical) ?? getNegativeValue(space) ?? "0rem", + right: getNegativeValue(right) ?? getNegativeValue(horizontal) ?? getNegativeValue(space) ?? "0rem", + bottom: getNegativeValue(bottom) ?? getNegativeValue(vertical) ?? getNegativeValue(space) ?? "0rem", + left: getNegativeValue(left) ?? getNegativeValue(horizontal) ?? getNegativeValue(space) ?? "0rem", + }} + > + {children} + </DxcContainer> + ); +} 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. */ 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 ( <DxcContainer - padding={ - space || { - bottom: (bottom || vertical) ?? "0rem", - left: (left || horizontal) ?? "0rem", - right: (right || horizontal) ?? "0rem", - top: (top || vertical) ?? "0rem", - } - } + padding={{ + bottom: bottom ?? vertical ?? space ?? "0rem", + left: left ?? horizontal ?? space ?? "0rem", + right: right ?? horizontal ?? space ?? "0rem", + top: top ?? vertical ?? space ?? "0rem", + }} > {children} </DxcContainer>