Skip to content

Commit 648c007

Browse files
JialeclJialecl
authored
Merge pull request #2240 from dxc-technology/Mil4n0r/tokens-paragraph
Paragraph redesign
2 parents c2da493 + fd526f3 commit 648c007

10 files changed

Lines changed: 141 additions & 229 deletions

File tree

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import ParagraphPageLayout from "screens/components/paragraph/ParagraphPageLayout";
4+
import ParagraphCodePage from "screens/components/paragraph/code/ParagraphCodePage";
5+
const Code = () => (
6+
<>
7+
<Head>
8+
<title>Paragraph code — Halstack Design System</title>
9+
</Head>
10+
<ParagraphCodePage />
11+
</>
12+
);
13+
14+
Code.getLayout = (page: ReactElement) => <ParagraphPageLayout>{page}</ParagraphPageLayout>;
15+
16+
export default Code;

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
33
import ParagraphPageLayout from "screens/components/paragraph/ParagraphPageLayout";
4-
import ParagraphCodePage from "screens/components/paragraph/code/ParagraphCodePage";
4+
import ParagraphOverviewPage from "screens/components/paragraph/overview/ParagraphOverviewPage";
55

6-
const Index = () => {
7-
return (
8-
<>
9-
<Head>
10-
<title>Paragraph — Halstack Design System</title>
11-
</Head>
12-
<ParagraphCodePage />
13-
</>
14-
);
15-
};
6+
const Index = () => (
7+
<>
8+
<Head>
9+
<title>Paragraph — Halstack Design System</title>
10+
</Head>
11+
<ParagraphOverviewPage />
12+
</>
13+
);
1614

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

2117
export default Index;

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

Lines changed: 0 additions & 21 deletions
This file was deleted.

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

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎apps/website/screens/components/paragraph/ParagraphPageLayout.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,19 @@ import { ReactNode } from "react";
66

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

1413
return (
1514
<DxcFlex direction="column" gap="var(--spacing-gap-xxl)">
1615
<PageHeading>
1716
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
1817
<ComponentHeading name="Paragraph" />
19-
<DxcParagraph>Paragraph is a block of text.</DxcParagraph>
20-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
18+
<DxcParagraph>
19+
A text container component designed for displaying blocks of body content in a consistent, readable format.
20+
</DxcParagraph>
21+
<TabsPageHeading tabs={tabs} />
2122
</DxcFlex>
2223
</PageHeading>
2324
{children}

‎apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,13 @@ const sections = [
5050
},
5151
];
5252

53-
const ParagraphCodePage = () => {
54-
return (
55-
<DxcFlex direction="column" gap="4rem">
56-
<QuickNavContainerLayout>
57-
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
58-
</QuickNavContainerLayout>
59-
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx" />
60-
</DxcFlex>
61-
);
62-
};
53+
const ParagraphCodePage = () => (
54+
<DxcFlex direction="column" gap="4rem">
55+
<QuickNavContainerLayout>
56+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
57+
</QuickNavContainerLayout>
58+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx" />
59+
</DxcFlex>
60+
);
6361

6462
export default ParagraphCodePage;

‎apps/website/screens/components/paragraph/overview/ParagraphOverviewPage.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import Code from "@/common/Code";
2+
import DocFooter from "@/common/DocFooter";
3+
import QuickNavContainer from "@/common/QuickNavContainer";
4+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
5+
import { DxcFlex, DxcBulletedList, DxcParagraph } from "@dxc-technology/halstack-react";
6+
7+
const sections = [
8+
{
9+
title: "Introduction",
10+
content: (
11+
<>
12+
<DxcParagraph>
13+
The Paragraph component is used to present text content in well-structured, readable blocks across the UI.
14+
</DxcParagraph>
15+
<DxcParagraph>
16+
It is designed to render blocks of text with predefined typography styles, including consistent{" "}
17+
<strong>font-size</strong>, <strong>font-weight</strong> and <strong>color</strong>. It displays content as
18+
text blocks separated by line breaks and follows the visual language of the design system.
19+
</DxcParagraph>
20+
<DxcParagraph>
21+
However, by default, it <strong>does not add spacing between itself and other elements</strong> — for managing
22+
layout and spacing between Paragraphs or other components, use it in combination with layout components like{" "}
23+
<Code>DxcFlex</Code>.
24+
</DxcParagraph>
25+
</>
26+
),
27+
},
28+
{
29+
title: "Usage",
30+
content: (
31+
<DxcBulletedList>
32+
<DxcBulletedList.Item>
33+
Ideal for body content such as descriptions, instructions, explanations, or legal text.
34+
</DxcBulletedList.Item>
35+
<DxcBulletedList.Item>
36+
Automatically handles line height and text alignment but relies on layout components for external spacing.
37+
</DxcBulletedList.Item>
38+
<DxcBulletedList.Item>
39+
Use Paragraphs to group related sentences and divide longer content into manageable, readable chunks.
40+
</DxcBulletedList.Item>
41+
<DxcBulletedList.Item>
42+
Avoid using Paragraph as a layout or structural element—it is intended strictly for text content.
43+
</DxcBulletedList.Item>
44+
</DxcBulletedList>
45+
),
46+
},
47+
{
48+
title: "Best practices",
49+
content: (
50+
<DxcBulletedList>
51+
<DxcBulletedList.Item>
52+
<strong>Use Paragraph for blocks of text only:</strong> This component is designed to present readable text
53+
content. Avoid using it for non-text elements like buttons or images.
54+
</DxcBulletedList.Item>
55+
<DxcBulletedList.Item>
56+
<strong>Keep paragraphs short and scannable:</strong> Dense blocks of text can be intimidating and hard to
57+
scan. Break content into shorter sections whenever possible. Break content into smaller paragraphs to make it
58+
easier for users to read and for screen readers to navigate.
59+
</DxcBulletedList.Item>
60+
<DxcBulletedList.Item>
61+
<strong>Don't nest paragraphs inside each other:</strong> Paragraph tags (&lt;p&gt;) cannot be nested in valid
62+
HTML. Instead, use separate Paragraph components for each block of text.
63+
</DxcBulletedList.Item>
64+
<DxcBulletedList.Item>
65+
<strong>Use layout components for spacing:</strong> Paragraph does not include spacing between itself and
66+
surrounding elements. Use layout wrappers like DxcFlex to manage spacing between components.
67+
</DxcBulletedList.Item>
68+
<DxcBulletedList.Item>
69+
<strong>Support accessibility:</strong> Clear separation of paragraphs and appropriate structure improves
70+
screen reader support and makes content easier to digest for all users.
71+
</DxcBulletedList.Item>
72+
<DxcBulletedList.Item>
73+
<strong>Ensure visual and semantic clarity:</strong> Paragraphs should support the overall information
74+
hierarchy. Use headings for titles and Paragraphs for descriptive or supporting text.
75+
</DxcBulletedList.Item>
76+
</DxcBulletedList>
77+
),
78+
},
79+
];
80+
81+
const ParagraphOverviewPage = () => (
82+
<DxcFlex direction="column" gap="4rem">
83+
<QuickNavContainerLayout>
84+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
85+
</QuickNavContainerLayout>
86+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/paragraph/overview/ParagraphOverviewPage.tsx" />
87+
</DxcFlex>
88+
);
89+
90+
export default ParagraphOverviewPage;

‎apps/website/screens/components/paragraph/specs/ParagraphSpecsPage.tsx‎

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎apps/website/screens/components/paragraph/usage/ParagraphUsagePage.tsx‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

0 commit comments

Comments
 (0)