Skip to content

Divider redesign #2160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GomezIvann merged 4 commits into from
Mar 4, 2025
Merged

Divider redesign #2160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6888617
Reimplementation of the Divider component with new CSS variables
Feb 11, 2025
5d3d046
Added documentation with the new structure
Feb 18, 2025
217cf9f
Minor changes from review
Feb 28, 2025
c17da26
Update DividerOverviewPage.tsx
GomezIvann Mar 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions apps/website/pages/components/divider/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<>
<Head>
<title>Divider Code — Halstack Design System</title>
</Head>
<DividerCodePage />
</>
);
};

Code.getLayout = (page: ReactElement) => <DividerPageLayout>{page}</DividerPageLayout>;

export default Code;
8 changes: 3 additions & 5 deletions apps/website/pages/components/divider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -9,13 +9,11 @@ const Index = () => {
<Head>
<title>Divider — Halstack Design System</title>
</Head>
<DividerCodePage></DividerCodePage>
<DividerOverviewPage/>
</>
);
};

Index.getLayout = function getLayout(page: ReactElement) {
return <DividerPageLayout>{page}</DividerPageLayout>;
};
Index.getLayout = (page: ReactElement) => <DividerPageLayout>{page}</DividerPageLayout>;

export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/divider/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/divider/usage.tsx
View file
Open in desktop

This file was deleted.

7 changes: 3 additions & 4 deletions apps/website/screens/components/divider/DividerPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -19,7 +18,7 @@ const DividerPageHeading = ({ children }: { children: ReactNode }) => {
<DxcParagraph>
A divider is a thin line that visually separates groups of content within a specific area of an application.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
40 changes: 20 additions & 20 deletions apps/website/screens/components/divider/code/DividerCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,46 +22,46 @@ const sections = [
</thead>
<tbody>
<tr>
<td>orientation</td>
<td>color</td>
<td>
<TableCode>'horizontal' | 'vertical'</TableCode>
<TableCode>'lightGrey' | 'mediumGrey' | 'darkGrey'</TableCode>
</td>
<td>The divider can be showed in horizontal or vertical.</td>
<td>Modifies the color of the divider.</td>
<td>
<TableCode>'horizontal'</TableCode>
<TableCode>'mediumGrey'</TableCode>
</td>
</tr>
<tr>
<td>weight</td>
<td>decorative</td>
<td>
<TableCode>'regular' | 'strong'</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>Modifies the thickness of the divider.</td>
<td>
<TableCode>'regular'</TableCode>
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.
</td>
<td>
<TableCode>true</TableCode>
</td>
</tr>
<tr>
<td>color</td>
<td>orientation</td>
<td>
<TableCode>'lightGrey' | 'mediumGrey' | 'darkGrey'</TableCode>
<TableCode>'horizontal' | 'vertical'</TableCode>
</td>
<td>Modifies the color of the divider.</td>
<td>The divider can be showed in horizontal or vertical.</td>
<td>
<TableCode>'mediumGrey'</TableCode>
<TableCode>'horizontal'</TableCode>
</td>
</tr>
<tr>
<td>decorative</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>weight</td>
<td>
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.
<TableCode>'regular' | 'strong'</TableCode>
</td>
<td>Modifies the thickness of the divider.</td>
<td>
<TableCode>true</TableCode>
<TableCode>'regular'</TableCode>
</td>
</tr>
</tbody>
Expand All @@ -87,7 +87,7 @@ const DividerCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/divider/code/DividerCodePage.tsx" />
</DxcFlex>
Expand Down
122 changes: 122 additions & 0 deletions apps/website/screens/components/divider/overview/DividerOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: (
<DxcParagraph>
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.
</DxcParagraph>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={anatomy} alt="Divider's anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Divider:</strong> a thin, horizontal or vertical rule that visually separates content sections.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Configuring a divider",
content: (
<>
<DxcParagraph>
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.
</DxcParagraph>
</>
),
subSections: [
{
title: "Weight",
content: (
<>
<Image src={weight} alt="Divider's weight" />
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Regular</strong> (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.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Divider</strong> (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.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Color",
content: (
<>
<Image src={color} alt="Divider's color" />
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Light:</strong> best suited for dark backgrounds, providing a subtle yet clear separation
without overwhelming the interface.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Medium:</strong> a balanced option that works well in most cases, offering a neutral and
adaptable separation that maintains readability.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Dark:</strong> ideal for light backgrounds or when a stronger visual distinction is needed to
emphasize section breaks.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Orientation",
content: (
<>
<Image src={orientation} alt="Divider's orientation" />
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Horizontal:</strong> 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.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Vertical:</strong> 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.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
],
},
];

const DividerOverviewPage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx" />
</DxcFlex>
);
};

export default DividerOverviewPage;
Binary file added apps/website/screens/components/divider/overview/images/divider_anatomy.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/screens/components/divider/overview/images/divider_color.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/screens/components/divider/overview/images/divider_orientation.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/screens/components/divider/overview/images/divider_weight.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 0 additions & 49 deletions apps/website/screens/components/divider/specs/DividerSpecsPage.tsx
View file
Open in desktop

This file was deleted.

Binary file removed apps/website/screens/components/divider/specs/images/divider_colors.png
View file
Open in desktop
Binary file not shown.
Binary file removed apps/website/screens/components/divider/specs/images/divider_orientation.png
View file
Open in desktop
Binary file not shown.
Binary file removed apps/website/screens/components/divider/specs/images/divider_weight.png
View file
Open in desktop
Binary file not shown.
37 changes: 0 additions & 37 deletions apps/website/screens/components/divider/usage/DividerUsagePage.tsx
View file
Open in desktop

This file was deleted.

Loading