diff --git a/apps/website/pages/components/divider/code.tsx b/apps/website/pages/components/divider/code.tsx new file mode 100644 index 0000000000..f0352fdc7d --- /dev/null +++ b/apps/website/pages/components/divider/code.tsx @@ -0,0 +1,19 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import DividerPageLayout from "screens/components/divider/DividerPageLayout"; +import DividerCodePage from "screens/components/divider/code/DividerCodePage"; + +const Code = () => { + return ( + <> + + Divider Code — Halstack Design System + + + + ); +}; + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/divider/index.tsx b/apps/website/pages/components/divider/index.tsx index 66ccec307b..b0aa521886 100644 --- a/apps/website/pages/components/divider/index.tsx +++ b/apps/website/pages/components/divider/index.tsx @@ -1,6 +1,6 @@ import Head from "next/head"; import type { ReactElement } from "react"; -import DividerCodePage from "screens/components/divider/code/DividerCodePage"; +import DividerOverviewPage from "screens/components/divider/overview/DividerOverviewPage"; import DividerPageLayout from "screens/components/divider/DividerPageLayout"; const Index = () => { @@ -9,13 +9,11 @@ const Index = () => { Divider — 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/divider/specifications.tsx b/apps/website/pages/components/divider/specifications.tsx deleted file mode 100644 index 08601fc920..0000000000 --- a/apps/website/pages/components/divider/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import DividerPageLayout from "screens/components/divider/DividerPageLayout"; -import DividerSpecsPage from "screens/components/divider/specs/DividerSpecsPage"; - -const Specifications = () => { - return ( - <> - - Divider Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/divider/usage.tsx b/apps/website/pages/components/divider/usage.tsx deleted file mode 100644 index a28c17d2d0..0000000000 --- a/apps/website/pages/components/divider/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import DividerPageLayout from "screens/components/divider/DividerPageLayout"; -import DividerUsagePage from "screens/components/divider/usage/DividerUsagePage"; - -const Usage = () => { - return ( - <> - - Divider Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/divider/DividerPageLayout.tsx b/apps/website/screens/components/divider/DividerPageLayout.tsx index a51ed8d4ec..e1138eee11 100644 --- a/apps/website/screens/components/divider/DividerPageLayout.tsx +++ b/apps/website/screens/components/divider/DividerPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const DividerPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/divider" }, - { label: "Usage", path: "/components/divider/usage" }, - { label: "Specifications", path: "/components/divider/specifications" }, + { label: "Overview", path: "/components/divider" }, + { label: "Code", path: "/components/divider/code" }, ]; return ( @@ -19,7 +18,7 @@ const DividerPageHeading = ({ children }: { children: ReactNode }) => { A divider is a thin line that visually separates groups of content within a specific area of an application. - + {children} diff --git a/apps/website/screens/components/divider/code/DividerCodePage.tsx b/apps/website/screens/components/divider/code/DividerCodePage.tsx index 587b845e45..389f4860d9 100644 --- a/apps/website/screens/components/divider/code/DividerCodePage.tsx +++ b/apps/website/screens/components/divider/code/DividerCodePage.tsx @@ -22,46 +22,46 @@ const sections = [ - orientation + color - 'horizontal' | 'vertical' + 'lightGrey' | 'mediumGrey' | 'darkGrey' - The divider can be showed in horizontal or vertical. + Modifies the color of the divider. - 'horizontal' + 'mediumGrey' - weight + decorative - 'regular' | 'strong' + boolean - Modifies the thickness of the divider. - 'regular' + Specifies whether the divider serves a purely decorative purpose or functions as a semantic separator for + content. Additionally, it determines whether the divider is accessible to screen readers. + + + true - color + orientation - 'lightGrey' | 'mediumGrey' | 'darkGrey' + 'horizontal' | 'vertical' - Modifies the color of the divider. + The divider can be showed in horizontal or vertical. - 'mediumGrey' + 'horizontal' - decorative - - boolean - + weight - Specifies whether the divider serves a purely decorative purpose or functions as a semantic separator for - content. Additionally, it determines whether the divider is accessible to screen readers. + 'regular' | 'strong' + Modifies the thickness of the divider. - true + 'regular' @@ -87,7 +87,7 @@ const DividerCodePage = () => { return ( - + diff --git a/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx new file mode 100644 index 0000000000..ca79e3f921 --- /dev/null +++ b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx @@ -0,0 +1,122 @@ +import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import Image from "@/common/Image"; +import anatomy from "./images/divider_anatomy.png"; +import weight from "./images/divider_weight.png"; +import color from "./images/divider_color.png"; +import orientation from "./images/divider_orientation.png"; + +const sections = [ + { + title: "Introduction", + content: ( + + The divider component is a simple yet effective element for visually separating content within an interface. It + helps improve readability and organization by creating clear distinctions between sections or groups of + information. Our divider also has different weights and colors, allowing it to structure different layouts, + enhance hierarchy, and guide users through content seamlessly without adding visual clutter. + + ), + }, + { + title: "Anatomy", + content: ( + <> + Divider's anatomy + + + Divider: a thin, horizontal or vertical rule that visually separates content sections. + + + + ), + }, + { + title: "Configuring a divider", + content: ( + <> + + Depending on the context in which it is used, the divider can have different weights, colors, and orientations + to better suit the content it separates. + + + ), + subSections: [ + { + title: "Weight", + content: ( + <> + Divider's weight + + + Regular (1px of weight): ideal for subtle divisions within the same section, + maintaining a clean structure without being intrusive. It is used in layouts with related content or in + lists where a light separation is needed. + + + Divider (2px of weight): useful for creating a more noticeable separation between + sections or distinct content groups, reinforcing visual organization. It can be applied to significant + context changes within a page or as a separator for grouped information headers. + + + + ), + }, + { + title: "Color", + content: ( + <> + Divider's color + + + Light: best suited for dark backgrounds, providing a subtle yet clear separation + without overwhelming the interface. + + + Medium: a balanced option that works well in most cases, offering a neutral and + adaptable separation that maintains readability. + + + Dark: ideal for light backgrounds or when a stronger visual distinction is needed to + emphasize section breaks. + + + + ), + }, + { + title: "Orientation", + content: ( + <> + Divider's orientation + + + Horizontal: used to separate sections within a page, creating clear distinctions + between content blocks, lists, or form fields. It helps establish a visual flow and hierarchy. + + + Vertical: useful for dividing content side by side, such as in multi-column layouts, + toolbars, or menus. It helps guide the user's eye and structure information efficiently. + + + + ), + }, + ], + }, +]; + +const DividerOverviewPage = () => { + return ( + + + + + + + ); +}; + +export default DividerOverviewPage; diff --git a/apps/website/screens/components/divider/overview/images/divider_anatomy.png b/apps/website/screens/components/divider/overview/images/divider_anatomy.png new file mode 100644 index 0000000000..22bc64977e Binary files /dev/null and b/apps/website/screens/components/divider/overview/images/divider_anatomy.png differ diff --git a/apps/website/screens/components/divider/overview/images/divider_color.png b/apps/website/screens/components/divider/overview/images/divider_color.png new file mode 100644 index 0000000000..0445c7ff05 Binary files /dev/null and b/apps/website/screens/components/divider/overview/images/divider_color.png differ diff --git a/apps/website/screens/components/divider/overview/images/divider_orientation.png b/apps/website/screens/components/divider/overview/images/divider_orientation.png new file mode 100644 index 0000000000..245a3bd95c Binary files /dev/null and b/apps/website/screens/components/divider/overview/images/divider_orientation.png differ diff --git a/apps/website/screens/components/divider/overview/images/divider_weight.png b/apps/website/screens/components/divider/overview/images/divider_weight.png new file mode 100644 index 0000000000..9d4a991f80 Binary files /dev/null and b/apps/website/screens/components/divider/overview/images/divider_weight.png differ diff --git a/apps/website/screens/components/divider/specs/DividerSpecsPage.tsx b/apps/website/screens/components/divider/specs/DividerSpecsPage.tsx deleted file mode 100644 index 6358848107..0000000000 --- a/apps/website/screens/components/divider/specs/DividerSpecsPage.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; -import Image from "@/common/Image"; -import Figure from "@/common/Figure"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import orientationSpecs from "./images/divider_orientation.png"; -import colorsSpecs from "./images/divider_colors.png"; -import weightSpecs from "./images/divider_weight.png"; - -const sections = [ - { - title: "Specifications", - content: ( - <> -
- Divider orientation design specifications -
-
- Divider colors design specifications -
-
- Divider weight design specifications -
- - ), - }, - { - title: "Design tokens", - content: ( - <> - This component currently has no design tokens. - - ), - }, -]; - -const DividerSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default DividerSpecsPage; diff --git a/apps/website/screens/components/divider/specs/images/divider_colors.png b/apps/website/screens/components/divider/specs/images/divider_colors.png deleted file mode 100644 index 17afceffd4..0000000000 Binary files a/apps/website/screens/components/divider/specs/images/divider_colors.png and /dev/null differ diff --git a/apps/website/screens/components/divider/specs/images/divider_orientation.png b/apps/website/screens/components/divider/specs/images/divider_orientation.png deleted file mode 100644 index 369bab514f..0000000000 Binary files a/apps/website/screens/components/divider/specs/images/divider_orientation.png and /dev/null differ diff --git a/apps/website/screens/components/divider/specs/images/divider_weight.png b/apps/website/screens/components/divider/specs/images/divider_weight.png deleted file mode 100644 index c86271dada..0000000000 Binary files a/apps/website/screens/components/divider/specs/images/divider_weight.png and /dev/null differ diff --git a/apps/website/screens/components/divider/usage/DividerUsagePage.tsx b/apps/website/screens/components/divider/usage/DividerUsagePage.tsx deleted file mode 100644 index 2f3bcd27e6..0000000000 --- a/apps/website/screens/components/divider/usage/DividerUsagePage.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { DxcBulletedList, DxcFlex } 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: ( - - Use dividers to separate content into distinct groups. - - A divider should be visibly noticeable enough to divide a section but should not be so distinct that it - attracts attention away from the content. - - Use dividers to create groups, not individual items. - - Apply the use of dividers in the right context. Determine when it is appropriate to use white space and when - it is better to use a divider to separate content. - - - ), - }, -]; - -const DividerUsagePage = () => { - return ( - - - - - - - ); -}; - -export default DividerUsagePage; diff --git a/packages/lib/src/divider/Divider.tsx b/packages/lib/src/divider/Divider.tsx index 9f8780390f..c0e328d1f3 100644 --- a/packages/lib/src/divider/Divider.tsx +++ b/packages/lib/src/divider/Divider.tsx @@ -1,30 +1,14 @@ import styled from "styled-components"; -import CoreTokens from "../common/coreTokens"; import DividerPropsType from "./types"; -const DxcDivider = ({ - orientation = "horizontal", - weight = "regular", - color = "mediumGrey", - decorative = true, -}: DividerPropsType): JSX.Element => ( - -); - const StyledDivider = styled.hr` ${({ orientation, weight, color }) => ` border-color: ${ color === "lightGrey" - ? CoreTokens.color_grey_200 + ? "var(--border-color-neutral-lighter)" : color === "mediumGrey" - ? CoreTokens.color_grey_400 - : CoreTokens.color_grey_700 + ? "var(--border-color-neutral-medium)" + : "var(--border-color-neutral-strongest)" }; ${orientation === "horizontal" ? "width" : "min-height"}: 100%; ${orientation === "horizontal" ? "height" : "width"}: 0px; @@ -37,4 +21,19 @@ const StyledDivider = styled.hr` `} `; +const DxcDivider = ({ + orientation = "horizontal", + weight = "regular", + color = "mediumGrey", + decorative = true, +}: DividerPropsType) => ( + +); + export default DxcDivider;