Skip to content

Commit 6a99bfa

Browse files
GomezIvannGomezIvann
authoredMar 4, 2025··
Merge pull request #2160 from dxc-technology/Mil4n0r/tokens-divider
Divider redesign
2 parents f1c046a + c17da26 commit 6a99bfa

17 files changed

+185
-176
lines changed
 

‎apps/website/pages/components/divider/code.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import DividerPageLayout from "screens/components/divider/DividerPageLayout";
4+
import DividerCodePage from "screens/components/divider/code/DividerCodePage";
5+
6+
const Code = () => {
7+
return (
8+
<>
9+
<Head>
10+
<title>Divider Code — Halstack Design System</title>
11+
</Head>
12+
<DividerCodePage />
13+
</>
14+
);
15+
};
16+
17+
Code.getLayout = (page: ReactElement) => <DividerPageLayout>{page}</DividerPageLayout>;
18+
19+
export default Code;

‎apps/website/pages/components/divider/index.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
3-
import DividerCodePage from "screens/components/divider/code/DividerCodePage";
3+
import DividerOverviewPage from "screens/components/divider/overview/DividerOverviewPage";
44
import DividerPageLayout from "screens/components/divider/DividerPageLayout";
55

66
const Index = () => {
@@ -9,13 +9,11 @@ const Index = () => {
99
<Head>
1010
<title>Divider — Halstack Design System</title>
1111
</Head>
12-
<DividerCodePage></DividerCodePage>
12+
<DividerOverviewPage/>
1313
</>
1414
);
1515
};
1616

17-
Index.getLayout = function getLayout(page: ReactElement) {
18-
return <DividerPageLayout>{page}</DividerPageLayout>;
19-
};
17+
Index.getLayout = (page: ReactElement) => <DividerPageLayout>{page}</DividerPageLayout>;
2018

2119
export default Index;

‎apps/website/pages/components/divider/specifications.tsx

-21
This file was deleted.

‎apps/website/pages/components/divider/usage.tsx

-21
This file was deleted.

‎apps/website/screens/components/divider/DividerPageLayout.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
66

77
const DividerPageHeading = ({ children }: { children: ReactNode }) => {
88
const tabs = [
9-
{ label: "Code", path: "/components/divider" },
10-
{ label: "Usage", path: "/components/divider/usage" },
11-
{ label: "Specifications", path: "/components/divider/specifications" },
9+
{ label: "Overview", path: "/components/divider" },
10+
{ label: "Code", path: "/components/divider/code" },
1211
];
1312

1413
return (
@@ -19,7 +18,7 @@ const DividerPageHeading = ({ children }: { children: ReactNode }) => {
1918
<DxcParagraph>
2019
A divider is a thin line that visually separates groups of content within a specific area of an application.
2120
</DxcParagraph>
22-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
21+
<TabsPageHeading tabs={tabs} />
2322
</DxcFlex>
2423
</PageHeading>
2524
{children}

‎apps/website/screens/components/divider/code/DividerCodePage.tsx

+20-20
Original file line numberDiff line numberDiff line change
@@ -22,46 +22,46 @@ const sections = [
2222
</thead>
2323
<tbody>
2424
<tr>
25-
<td>orientation</td>
25+
<td>color</td>
2626
<td>
27-
<TableCode>'horizontal' | 'vertical'</TableCode>
27+
<TableCode>'lightGrey' | 'mediumGrey' | 'darkGrey'</TableCode>
2828
</td>
29-
<td>The divider can be showed in horizontal or vertical.</td>
29+
<td>Modifies the color of the divider.</td>
3030
<td>
31-
<TableCode>'horizontal'</TableCode>
31+
<TableCode>'mediumGrey'</TableCode>
3232
</td>
3333
</tr>
3434
<tr>
35-
<td>weight</td>
35+
<td>decorative</td>
3636
<td>
37-
<TableCode>'regular' | 'strong'</TableCode>
37+
<TableCode>boolean</TableCode>
3838
</td>
39-
<td>Modifies the thickness of the divider.</td>
4039
<td>
41-
<TableCode>'regular'</TableCode>
40+
Specifies whether the divider serves a purely decorative purpose or functions as a semantic separator for
41+
content. Additionally, it determines whether the divider is accessible to screen readers.
42+
</td>
43+
<td>
44+
<TableCode>true</TableCode>
4245
</td>
4346
</tr>
4447
<tr>
45-
<td>color</td>
48+
<td>orientation</td>
4649
<td>
47-
<TableCode>'lightGrey' | 'mediumGrey' | 'darkGrey'</TableCode>
50+
<TableCode>'horizontal' | 'vertical'</TableCode>
4851
</td>
49-
<td>Modifies the color of the divider.</td>
52+
<td>The divider can be showed in horizontal or vertical.</td>
5053
<td>
51-
<TableCode>'mediumGrey'</TableCode>
54+
<TableCode>'horizontal'</TableCode>
5255
</td>
5356
</tr>
5457
<tr>
55-
<td>decorative</td>
56-
<td>
57-
<TableCode>boolean</TableCode>
58-
</td>
58+
<td>weight</td>
5959
<td>
60-
Specifies whether the divider serves a purely decorative purpose or functions as a semantic separator for
61-
content. Additionally, it determines whether the divider is accessible to screen readers.
60+
<TableCode>'regular' | 'strong'</TableCode>
6261
</td>
62+
<td>Modifies the thickness of the divider.</td>
6363
<td>
64-
<TableCode>true</TableCode>
64+
<TableCode>'regular'</TableCode>
6565
</td>
6666
</tr>
6767
</tbody>
@@ -87,7 +87,7 @@ const DividerCodePage = () => {
8787
return (
8888
<DxcFlex direction="column" gap="4rem">
8989
<QuickNavContainerLayout>
90-
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
90+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
9191
</QuickNavContainerLayout>
9292
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/divider/code/DividerCodePage.tsx" />
9393
</DxcFlex>

‎apps/website/screens/components/divider/overview/DividerOverviewPage.tsx

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
2+
import DocFooter from "@/common/DocFooter";
3+
import QuickNavContainer from "@/common/QuickNavContainer";
4+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
5+
import Image from "@/common/Image";
6+
import anatomy from "./images/divider_anatomy.png";
7+
import weight from "./images/divider_weight.png";
8+
import color from "./images/divider_color.png";
9+
import orientation from "./images/divider_orientation.png";
10+
11+
const sections = [
12+
{
13+
title: "Introduction",
14+
content: (
15+
<DxcParagraph>
16+
The divider component is a simple yet effective element for visually separating content within an interface. It
17+
helps improve readability and organization by creating clear distinctions between sections or groups of
18+
information. Our divider also has different weights and colors, allowing it to structure different layouts,
19+
enhance hierarchy, and guide users through content seamlessly without adding visual clutter.
20+
</DxcParagraph>
21+
),
22+
},
23+
{
24+
title: "Anatomy",
25+
content: (
26+
<>
27+
<Image src={anatomy} alt="Divider's anatomy" />
28+
<DxcBulletedList type="number">
29+
<DxcBulletedList.Item>
30+
<strong>Divider:</strong> a thin, horizontal or vertical rule that visually separates content sections.
31+
</DxcBulletedList.Item>
32+
</DxcBulletedList>
33+
</>
34+
),
35+
},
36+
{
37+
title: "Configuring a divider",
38+
content: (
39+
<>
40+
<DxcParagraph>
41+
Depending on the context in which it is used, the divider can have different weights, colors, and orientations
42+
to better suit the content it separates.
43+
</DxcParagraph>
44+
</>
45+
),
46+
subSections: [
47+
{
48+
title: "Weight",
49+
content: (
50+
<>
51+
<Image src={weight} alt="Divider's weight" />
52+
<DxcBulletedList>
53+
<DxcBulletedList.Item>
54+
<strong>Regular</strong> (1px of weight): ideal for subtle divisions within the same section,
55+
maintaining a clean structure without being intrusive. It is used in layouts with related content or in
56+
lists where a light separation is needed.
57+
</DxcBulletedList.Item>
58+
<DxcBulletedList.Item>
59+
<strong>Divider</strong> (2px of weight): useful for creating a more noticeable separation between
60+
sections or distinct content groups, reinforcing visual organization. It can be applied to significant
61+
context changes within a page or as a separator for grouped information headers.
62+
</DxcBulletedList.Item>
63+
</DxcBulletedList>
64+
</>
65+
),
66+
},
67+
{
68+
title: "Color",
69+
content: (
70+
<>
71+
<Image src={color} alt="Divider's color" />
72+
<DxcBulletedList>
73+
<DxcBulletedList.Item>
74+
<strong>Light:</strong> best suited for dark backgrounds, providing a subtle yet clear separation
75+
without overwhelming the interface.
76+
</DxcBulletedList.Item>
77+
<DxcBulletedList.Item>
78+
<strong>Medium:</strong> a balanced option that works well in most cases, offering a neutral and
79+
adaptable separation that maintains readability.
80+
</DxcBulletedList.Item>
81+
<DxcBulletedList.Item>
82+
<strong>Dark:</strong> ideal for light backgrounds or when a stronger visual distinction is needed to
83+
emphasize section breaks.
84+
</DxcBulletedList.Item>
85+
</DxcBulletedList>
86+
</>
87+
),
88+
},
89+
{
90+
title: "Orientation",
91+
content: (
92+
<>
93+
<Image src={orientation} alt="Divider's orientation" />
94+
<DxcBulletedList>
95+
<DxcBulletedList.Item>
96+
<strong>Horizontal:</strong> used to separate sections within a page, creating clear distinctions
97+
between content blocks, lists, or form fields. It helps establish a visual flow and hierarchy.
98+
</DxcBulletedList.Item>
99+
<DxcBulletedList.Item>
100+
<strong>Vertical:</strong> useful for dividing content side by side, such as in multi-column layouts,
101+
toolbars, or menus. It helps guide the user's eye and structure information efficiently.
102+
</DxcBulletedList.Item>
103+
</DxcBulletedList>
104+
</>
105+
),
106+
},
107+
],
108+
},
109+
];
110+
111+
const DividerOverviewPage = () => {
112+
return (
113+
<DxcFlex direction="column" gap="4rem">
114+
<QuickNavContainerLayout>
115+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
116+
</QuickNavContainerLayout>
117+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx" />
118+
</DxcFlex>
119+
);
120+
};
121+
122+
export default DividerOverviewPage;

‎apps/website/screens/components/divider/overview/images/divider_anatomy.png

8.05 KB
Loading

‎apps/website/screens/components/divider/overview/images/divider_color.png

10.7 KB
Loading

‎apps/website/screens/components/divider/overview/images/divider_orientation.png

11.5 KB
Loading

‎apps/website/screens/components/divider/overview/images/divider_weight.png

10.2 KB
Loading

‎apps/website/screens/components/divider/specs/DividerSpecsPage.tsx

-49
This file was deleted.

‎apps/website/screens/components/divider/specs/images/divider_colors.png

-6.93 KB
Binary file not shown.

‎apps/website/screens/components/divider/specs/images/divider_orientation.png

-3.35 KB
Binary file not shown.

‎apps/website/screens/components/divider/specs/images/divider_weight.png

-3.41 KB
Binary file not shown.

‎apps/website/screens/components/divider/usage/DividerUsagePage.tsx

-37
This file was deleted.

‎packages/lib/src/divider/Divider.tsx

+18-19
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,14 @@
11
import styled from "styled-components";
2-
import CoreTokens from "../common/coreTokens";
32
import DividerPropsType from "./types";
43

5-
const DxcDivider = ({
6-
orientation = "horizontal",
7-
weight = "regular",
8-
color = "mediumGrey",
9-
decorative = true,
10-
}: DividerPropsType): JSX.Element => (
11-
<StyledDivider
12-
orientation={orientation}
13-
weight={weight}
14-
color={color}
15-
aria-orientation={orientation}
16-
aria-hidden={decorative}
17-
/>
18-
);
19-
204
const StyledDivider = styled.hr<DividerPropsType>`
215
${({ orientation, weight, color }) => `
226
border-color: ${
237
color === "lightGrey"
24-
? CoreTokens.color_grey_200
8+
? "var(--border-color-neutral-lighter)"
259
: color === "mediumGrey"
26-
? CoreTokens.color_grey_400
27-
: CoreTokens.color_grey_700
10+
? "var(--border-color-neutral-medium)"
11+
: "var(--border-color-neutral-strongest)"
2812
};
2913
${orientation === "horizontal" ? "width" : "min-height"}: 100%;
3014
${orientation === "horizontal" ? "height" : "width"}: 0px;
@@ -37,4 +21,19 @@ const StyledDivider = styled.hr<DividerPropsType>`
3721
`}
3822
`;
3923

24+
const DxcDivider = ({
25+
orientation = "horizontal",
26+
weight = "regular",
27+
color = "mediumGrey",
28+
decorative = true,
29+
}: DividerPropsType) => (
30+
<StyledDivider
31+
orientation={orientation}
32+
weight={weight}
33+
color={color}
34+
aria-orientation={orientation}
35+
aria-hidden={decorative}
36+
/>
37+
);
38+
4039
export default DxcDivider;

0 commit comments

Comments
 (0)
Please sign in to comment.