diff --git a/apps/website/pages/components/paragraph/code.tsx b/apps/website/pages/components/paragraph/code.tsx new file mode 100644 index 0000000000..a03ae94ebf --- /dev/null +++ b/apps/website/pages/components/paragraph/code.tsx @@ -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 = () => ( + <> + + Paragraph code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/paragraph/index.tsx b/apps/website/pages/components/paragraph/index.tsx index c366b10290..dce0943109 100644 --- a/apps/website/pages/components/paragraph/index.tsx +++ b/apps/website/pages/components/paragraph/index.tsx @@ -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 ( - <> - - Paragraph — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Paragraph — 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/paragraph/specifications.tsx b/apps/website/pages/components/paragraph/specifications.tsx deleted file mode 100644 index bc3fa948f3..0000000000 --- a/apps/website/pages/components/paragraph/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import ParagraphPageLayout from "screens/components/paragraph/ParagraphPageLayout"; -import ParagraphSpecsPage from "screens/components/paragraph/specs/ParagraphSpecsPage"; - -const Specifications = () => { - return ( - <> - - Paragraph Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/paragraph/usage.tsx b/apps/website/pages/components/paragraph/usage.tsx deleted file mode 100644 index 939131e905..0000000000 --- a/apps/website/pages/components/paragraph/usage.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import ParagraphPageLayout from "screens/components/paragraph/ParagraphPageLayout"; -import ParagraphUsagePage from "screens/components/paragraph/usage/ParagraphUsagePage"; -const Usage = () => { - return ( - <> - - Paragraph Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx b/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx index 47e971542d..47f1eea0e4 100644 --- a/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx +++ b/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx @@ -6,9 +6,8 @@ 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 ( @@ -16,8 +15,10 @@ const ParagraphPageHeading = ({ children }: { children: ReactNode }) => { - Paragraph is a block of text. - + + A text container component designed for displaying blocks of body content in a consistent, readable format. + + {children} diff --git a/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx b/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx index c1b78bbaf7..c957dbc4c0 100644 --- a/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx +++ b/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx @@ -50,15 +50,13 @@ const sections = [ }, ]; -const ParagraphCodePage = () => { - return ( - - - - - - - ); -}; +const ParagraphCodePage = () => ( + + + + + + +); export default ParagraphCodePage; diff --git a/apps/website/screens/components/paragraph/overview/ParagraphOverviewPage.tsx b/apps/website/screens/components/paragraph/overview/ParagraphOverviewPage.tsx new file mode 100644 index 0000000000..92e0547237 --- /dev/null +++ b/apps/website/screens/components/paragraph/overview/ParagraphOverviewPage.tsx @@ -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: ( + <> + + The Paragraph component is used to present text content in well-structured, readable blocks across the UI. + + + It is designed to render blocks of text with predefined typography styles, including consistent{" "} + font-size, font-weight and color. It displays content as + text blocks separated by line breaks and follows the visual language of the design system. + + + However, by default, it does not add spacing between itself and other elements — for managing + layout and spacing between Paragraphs or other components, use it in combination with layout components like{" "} + DxcFlex. + + + ), + }, + { + title: "Usage", + content: ( + + + Ideal for body content such as descriptions, instructions, explanations, or legal text. + + + Automatically handles line height and text alignment but relies on layout components for external spacing. + + + Use Paragraphs to group related sentences and divide longer content into manageable, readable chunks. + + + Avoid using Paragraph as a layout or structural element—it is intended strictly for text content. + + + ), + }, + { + title: "Best practices", + content: ( + + + Use Paragraph for blocks of text only: This component is designed to present readable text + content. Avoid using it for non-text elements like buttons or images. + + + Keep paragraphs short and scannable: 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. + + + Don't nest paragraphs inside each other: Paragraph tags (<p>) cannot be nested in valid + HTML. Instead, use separate Paragraph components for each block of text. + + + Use layout components for spacing: Paragraph does not include spacing between itself and + surrounding elements. Use layout wrappers like DxcFlex to manage spacing between components. + + + Support accessibility: Clear separation of paragraphs and appropriate structure improves + screen reader support and makes content easier to digest for all users. + + + Ensure visual and semantic clarity: Paragraphs should support the overall information + hierarchy. Use headings for titles and Paragraphs for descriptive or supporting text. + + + ), + }, +]; + +const ParagraphOverviewPage = () => ( + + + + + + +); + +export default ParagraphOverviewPage; diff --git a/apps/website/screens/components/paragraph/specs/ParagraphSpecsPage.tsx b/apps/website/screens/components/paragraph/specs/ParagraphSpecsPage.tsx deleted file mode 100644 index 051a30f404..0000000000 --- a/apps/website/screens/components/paragraph/specs/ParagraphSpecsPage.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import Code from "@/common/Code"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; - -const sections = [ - { - title: "Design tokens", - subSections: [ - { - title: "Typography", - content: ( - <> - - - Component token - Element - Core token - Value - - - - fontSize - - Paragraph - - font-scale-03 - - 1rem - - - - fontWeight - - Paragraph - - font-scale-03 - - 400 - - - - fontColor - - Paragraph - - color-black - - #000000 - - - - ), - }, - ], - }, -]; - -const ParagraphSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default ParagraphSpecsPage; diff --git a/apps/website/screens/components/paragraph/usage/ParagraphUsagePage.tsx b/apps/website/screens/components/paragraph/usage/ParagraphUsagePage.tsx deleted file mode 100644 index fce8ab12b9..0000000000 --- a/apps/website/screens/components/paragraph/usage/ParagraphUsagePage.tsx +++ /dev/null @@ -1,68 +0,0 @@ -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: "Usage", - content: ( - <> - - Paragraphs display blocks of text separated by a line break with some configuration in terms of font-size, - font-weight and color. It does not add any spacing with respect to any other element and should be used to - structure text blocks only. - - - To space different paragraphs from each other or a paragraph with other elements we must include them in a - DxcFlex. - - - ), - subSections: [ - { - title: "Do's", - content: ( - <> - - Use paragraphs for text blocks. - - Break text into paragraphs to help screen readers provide shortcuts to the user. - - - Split content into small paragraphs to make it easier to read. - - - - ), - }, - { - title: "Don'ts", - content: ( - - - Use paragraphs that are too long and make it difficult to find information within the text. - - Nest paragraphs inside each other. - - Use paragraph for anything other than text. Paragraphs are for text blocks and not for any other thing. - - - ), - }, - ], - }, -]; - -const ParagraphUsagePage = () => { - return ( - - - - - - - ); -}; - -export default ParagraphUsagePage; diff --git a/packages/lib/src/paragraph/Paragraph.tsx b/packages/lib/src/paragraph/Paragraph.tsx index b031ad46cf..180b6eddaf 100644 --- a/packages/lib/src/paragraph/Paragraph.tsx +++ b/packages/lib/src/paragraph/Paragraph.tsx @@ -1,29 +1,20 @@ -import { ReactNode, useContext } from "react"; -import styled, { ThemeProvider } from "styled-components"; -import HalstackContext from "../HalstackContext"; +import { ReactNode } from "react"; +import styled from "styled-components"; const Paragraph = styled.p` - display: ${(props) => props.theme.display}; - font-family: "Open Sans", sans-serif; - font-size: ${(props) => props.theme.fontSize}; - font-style: "normal"; - font-weight: ${(props) => props.theme.fontWeight}; - letter-spacing: 0em; - line-height: 1.5em; + display: "block"; + font-family: var(--typography-font-family); + font-size: var(--typography-body-m); + font-weight: var(--typography-body-regular); + letter-spacing: var(--spacing-gap-none); + line-height: var(--height-s); text-align: "left"; - color: ${(props) => props.theme.fontColor}; + color: var(--color-fg-neutral-dark); text-decoration: none; text-overflow: unset; - white-space: normal; - margin: 0; + margin: var(--spacing-padding-none); `; export default function DxcParagraph({ children }: { children: ReactNode }) { - const colorsTheme = useContext(HalstackContext); - - return ( - - {children} - - ); + return {children}; }