Skip to content

Paragraph redesign #2240

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
Jialecl merged 4 commits into from
Jun 11, 2025
Merged

Paragraph redesign #2240

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
1e4171e
Added implementation for paragraph with tokens
Jun 10, 2025
c873b33
Added documentation for paragraph with tokens
Jun 10, 2025
e73e32f
Fixed typo
Jun 11, 2025
fd526f3
Merge branch 'master' into Mil4n0r/tokens-paragraph
Jialecl Jun 11, 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
16 changes: 16 additions & 0 deletions apps/website/pages/components/paragraph/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import Head from "next/head";
import type { ReactElement } from "react";
import ParagraphPageLayout from "screens/components/paragraph/ParagraphPageLayout";
import ParagraphCodePage from "screens/components/paragraph/code/ParagraphCodePage";
const Code = () => (
<>
<Head>
<title>Paragraph code — Halstack Design System</title>
</Head>
<ParagraphCodePage />
</>
);

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

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/paragraph/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import ParagraphPageLayout from "screens/components/paragraph/ParagraphPageLayout";
import ParagraphCodePage from "screens/components/paragraph/code/ParagraphCodePage";
import ParagraphOverviewPage from "screens/components/paragraph/overview/ParagraphOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Paragraph — Halstack Design System</title>
</Head>
<ParagraphCodePage />
</>
);
};
const Index = () => (
<>
<Head>
<title>Paragraph — Halstack Design System</title>
</Head>
<ParagraphOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

11 changes: 6 additions & 5 deletions apps/website/screens/components/paragraph/ParagraphPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,19 @@ import { ReactNode } from "react";

const ParagraphPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/paragraph" },
{ label: "Usage", path: "/components/paragraph/usage" },
{ label: "Specifications", path: "/components/paragraph/specifications" },
{ label: "Overview", path: "/components/paragraph" },
{ label: "Code", path: "/components/paragraph/code" },
];

return (
<DxcFlex direction="column" gap="var(--spacing-gap-xxl)">
<PageHeading>
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
<ComponentHeading name="Paragraph" />
<DxcParagraph>Paragraph is a block of text.</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<DxcParagraph>
A text container component designed for displaying blocks of body content in a consistent, readable format.
</DxcParagraph>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
18 changes: 8 additions & 10 deletions apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,13 @@ const sections = [
},
];

const ParagraphCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx" />
</DxcFlex>
);
};
const ParagraphCodePage = () => (
<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/paragraph/code/ParagraphCodePage.tsx" />
</DxcFlex>
);

export default ParagraphCodePage;
90 changes: 90 additions & 0 deletions apps/website/screens/components/paragraph/overview/ParagraphOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import { DxcFlex, DxcBulletedList, DxcParagraph } from "@dxc-technology/halstack-react";

const sections = [
{
title: "Introduction",
content: (
<>
<DxcParagraph>
The Paragraph component is used to present text content in well-structured, readable blocks across the UI.
</DxcParagraph>
<DxcParagraph>
It is designed to render blocks of text with predefined typography styles, including consistent{" "}
<strong>font-size</strong>, <strong>font-weight</strong> and <strong>color</strong>. It displays content as
text blocks separated by line breaks and follows the visual language of the design system.
</DxcParagraph>
<DxcParagraph>
However, by default, it <strong>does not add spacing between itself and other elements</strong> — for managing
layout and spacing between Paragraphs or other components, use it in combination with layout components like{" "}
<Code>DxcFlex</Code>.
</DxcParagraph>
</>
),
},
{
title: "Usage",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Ideal for body content such as descriptions, instructions, explanations, or legal text.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Automatically handles line height and text alignment but relies on layout components for external spacing.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Use Paragraphs to group related sentences and divide longer content into manageable, readable chunks.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Avoid using Paragraph as a layout or structural element—it is intended strictly for text content.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Best practices",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Use Paragraph for blocks of text only:</strong> This component is designed to present readable text
content. Avoid using it for non-text elements like buttons or images.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Keep paragraphs short and scannable:</strong> Dense blocks of text can be intimidating and hard to
scan. Break content into shorter sections whenever possible. Break content into smaller paragraphs to make it
easier for users to read and for screen readers to navigate.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Don't nest paragraphs inside each other:</strong> Paragraph tags (&lt;p&gt;) cannot be nested in valid
HTML. Instead, use separate Paragraph components for each block of text.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use layout components for spacing:</strong> Paragraph does not include spacing between itself and
surrounding elements. Use layout wrappers like DxcFlex to manage spacing between components.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Support accessibility:</strong> Clear separation of paragraphs and appropriate structure improves
screen reader support and makes content easier to digest for all users.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Ensure visual and semantic clarity:</strong> Paragraphs should support the overall information
hierarchy. Use headings for titles and Paragraphs for descriptive or supporting text.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
];

const ParagraphOverviewPage = () => (
<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/paragraph/overview/ParagraphOverviewPage.tsx" />
</DxcFlex>
);

export default ParagraphOverviewPage;
71 changes: 0 additions & 71 deletions apps/website/screens/components/paragraph/specs/ParagraphSpecsPage.tsx
View file
Open in desktop

This file was deleted.

68 changes: 0 additions & 68 deletions apps/website/screens/components/paragraph/usage/ParagraphUsagePage.tsx
View file
Open in desktop

This file was deleted.

Loading