diff --git a/apps/website/pages/components/heading/code.tsx b/apps/website/pages/components/heading/code.tsx new file mode 100644 index 0000000000..3759f0990a --- /dev/null +++ b/apps/website/pages/components/heading/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import HeadingCodePage from "screens/components/heading/code/HeadingCodePage"; +import HeadingPageLayout from "screens/components/heading/HeadingPageLayout"; + +const Code = () => ( + <> + + Heading code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/heading/index.tsx b/apps/website/pages/components/heading/index.tsx index 044e4eb102..7244380ef2 100644 --- a/apps/website/pages/components/heading/index.tsx +++ b/apps/website/pages/components/heading/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; import HeadingPageLayout from "screens/components/heading/HeadingPageLayout"; -import HeadingCodePage from "screens/components/heading/code/HeadingCodePage"; +import HeadingOverviewPage from "screens/components/heading/overview/HeadingOverviewPage"; -const Index = () => { - return ( - <> - - Heading — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Heading — 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/heading/specifications.tsx b/apps/website/pages/components/heading/specifications.tsx deleted file mode 100644 index 6a83228122..0000000000 --- a/apps/website/pages/components/heading/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import HeadingPageLayout from "screens/components/heading/HeadingPageLayout"; -import HeadingSpecsPage from "screens/components/heading/specs/HeadingSpecsPage"; - -const Specifications = () => { - return ( - <> - - Heading Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/heading/usage.tsx b/apps/website/pages/components/heading/usage.tsx deleted file mode 100644 index 8e643c7929..0000000000 --- a/apps/website/pages/components/heading/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import HeadingPageLayout from "screens/components/heading/HeadingPageLayout"; -import HeadingUsagePage from "screens/components/heading/usage/HeadingUsagePage"; - -const Usage = () => { - return ( - <> - - Heading Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/common/ComponentHeading.tsx b/apps/website/screens/common/ComponentHeading.tsx index 9d744a659a..66587f04d9 100644 --- a/apps/website/screens/common/ComponentHeading.tsx +++ b/apps/website/screens/common/ComponentHeading.tsx @@ -4,6 +4,6 @@ type ComponentHeadingProps = { name: string; }; -const ComponentHeading = ({ name }: ComponentHeadingProps) => ; +const ComponentHeading = ({ name }: ComponentHeadingProps) => ; export default ComponentHeading; diff --git a/apps/website/screens/common/HeadingLink.tsx b/apps/website/screens/common/HeadingLink.tsx index 9434d5cc47..a44d4491ef 100644 --- a/apps/website/screens/common/HeadingLink.tsx +++ b/apps/website/screens/common/HeadingLink.tsx @@ -14,8 +14,8 @@ const linkIcon = ( type HeadingLinkProps = { children: string; - level?: 1 | 2 | 3 | 4 | 5; - as?: "h1" | "h2" | "h3" | "h4" | "h5"; + level?: 1 | 2 | 3 | 4 | 5 | 6; + as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; navSubtitle?: string; }; @@ -32,7 +32,7 @@ const HeadingLink = ({ children, level, as, navSubtitle }: HeadingLinkProps) => {linkIcon} - + ); }; diff --git a/apps/website/screens/components/dialog/code/examples/withContent.ts b/apps/website/screens/components/dialog/code/examples/withContent.ts index 8f42983e2d..912ee676fa 100644 --- a/apps/website/screens/components/dialog/code/examples/withContent.ts +++ b/apps/website/screens/components/dialog/code/examples/withContent.ts @@ -21,7 +21,7 @@ const code = `() => { - + diff --git a/apps/website/screens/components/heading/HeadingPageLayout.tsx b/apps/website/screens/components/heading/HeadingPageLayout.tsx index 1487acdea0..494aa0085c 100644 --- a/apps/website/screens/components/heading/HeadingPageLayout.tsx +++ b/apps/website/screens/components/heading/HeadingPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const HeadingPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/heading" }, - { label: "Usage", path: "/components/heading/usage" }, - { label: "Specifications", path: "/components/heading/specifications" }, + { label: "Overview", path: "/components/heading" }, + { label: "Code", path: "/components/heading/code" }, ]; return ( @@ -17,11 +16,10 @@ const HeadingPageHeading = ({ children }: { children: ReactNode }) => { - Heading component is an essential element that contributes to define a great hierarchy within the - application. It helps to give semantic meaning to the content as well as contributing to define a good - structure for SEO (search engine optimization). The implementation will rely on the use of HTML tags. + A component used to establish clear content hierarchy and structure, ensuring both visual and semantic + clarity across interfaces. - + {children} diff --git a/apps/website/screens/components/heading/code/HeadingCodePage.tsx b/apps/website/screens/components/heading/code/HeadingCodePage.tsx index a40a17a4a8..c11f8e06e1 100644 --- a/apps/website/screens/components/heading/code/HeadingCodePage.tsx +++ b/apps/website/screens/components/heading/code/HeadingCodePage.tsx @@ -23,13 +23,21 @@ const sections = [ + + as + + 'h1' | 'h2' | 'h3' | 'h4'| 'h5' | 'h6' + + Specifies the HTML tag of the heading. + - + level - 1 | 2 | 3 | 4 | 5 + 1 | 2 | 3 | 4 | 5 | 6 - Defines the heading level from 1 to 5. The styles of the heading are applied according to the level. The + Defines the heading level from 1 to 6. The styles of the heading are applied according to the level. The HTML tag of the heading will be the one specified in the as prop. If no as{" "} prop is provided, the tag of the heading is the the one corresponding to the value of the{" "} level prop (for example, level 1 will render an h1 tag). @@ -39,46 +47,40 @@ const sections = [ + margin - - - text - + + 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin + - string + Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' + and 'right' properties in order to specify different margin sizes. - Heading text. - - weight - 'light' | 'normal' | 'bold' + + + text + - Modifies the default weight of the heading. - - - - - as - 'h1' | 'h2' | 'h3' | 'h4'| 'h5' + string - Specifies the HTML tag of the heading. + Heading text. - - margin + weight - - 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin - + 'default' | 'regular' | 'light' + Modifies the weight of the heading. - Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' - and 'right' properties in order to specify different margin sizes. + 'default' - - @@ -96,15 +98,13 @@ const sections = [ }, ]; -const HeadingCodePage = () => { - return ( - - - - - - - ); -}; +const HeadingCodePage = () => ( + + + + + + +); export default HeadingCodePage; diff --git a/apps/website/screens/components/heading/code/examples/basicUsage.ts b/apps/website/screens/components/heading/code/examples/basicUsage.ts index 322d244c3c..00560d848c 100644 --- a/apps/website/screens/components/heading/code/examples/basicUsage.ts +++ b/apps/website/screens/components/heading/code/examples/basicUsage.ts @@ -1,15 +1,23 @@ -import { DxcHeading, DxcInset } from "@dxc-technology/halstack-react"; +import { DxcHeading, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + + + + + + + + ); }`; const scope = { DxcHeading, + DxcFlex, DxcInset, }; diff --git a/apps/website/screens/components/heading/overview/HeadingOverviewPage.tsx b/apps/website/screens/components/heading/overview/HeadingOverviewPage.tsx new file mode 100644 index 0000000000..380724a0a5 --- /dev/null +++ b/apps/website/screens/components/heading/overview/HeadingOverviewPage.tsx @@ -0,0 +1,177 @@ +import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import Code from "@/common/Code"; +import Figure from "@/common/Figure"; +import Image from "@/common/Image"; +import headingSizes from "./images/heading_sizes.png"; +import headingWeights from "./images/heading_weights.png"; +import { DxcLink } from "@dxc-technology/halstack-react"; + +const sections = [ + { + title: "Introduction", + content: ( + + The heading component provides consistent typographic structure for titles and section headers within the UI. It + enforces semantic hierarchy through HTML tags (h1 through h6), supports visual + distinction via styles and weights, and plays a key role in SEO and accessibility. The component is flexible in + use, allowing control over styling and structure without breaking the logical order of information. + + ), + }, + { + title: "Variants", + content: ( + <> + + The Open Sans typeface has 5 different weights, from light to extra-bold but Halstack use three variations, + light, regular and bold (default). The font size goes from 40 pixels for the h1 heading to 12 + pixels for the h6 level. + +
+ Default headings +
+
+ Regular and light headings +
+ + + + Variant + Purpose + + + + + + H1 + + Page title. Used once per page for the main heading. + + + + H2 + + Section title. Defines top-level content sections. + + + + H3 + + Sub-section titles. Used inside sections to separate content. + + + + H4 + + Nested subsections, often in detail-heavy contexts. + + + + H5-H6 + + Minor subsections, used for fine-grained grouping or labels. + + + + + ), + }, + { + title: "Best practices", + content: ( + + + Use headings to define page and section titles: start each page with an h1, + followed by h2-h6 for content hierarchy and structure. + + + Organize subsections with appropriate heading levels: use h3, h4,{" "} + h5, h6 to title content within larger sections for better scannability. + + + Apply headings to group content semantically in UI elements: use headings inside, cards, or + other containers to establish clear structure. + + + Support accessibility and SEO with semantic heading structure: proper use of heading tags + enhances screen reader navigation and search engine indexing. + + + Always use the Heading component for structural content: don't manually style text to look + like a heading. Use the component to maintain consistency and semantics. + + + Maintain proper heading order: avoid skipping levels (e.g., going from h1 to{" "} + h4) unless there's a clear content structure that justifies it. + + + Avoid stacking headings without content: every heading should introduce related content. + Don't chain multiple headings together without context + + + + Use the level prop to set visual style, and as to control the semantic tag: + {" "} + while we recommend following the defined levels and styles to maintain consistency, we understand that certain + interfaces may require customization. Use these props to adapt the component as needed and ensure semantic + meaning and structural clarity are preserved. + + + ), + }, + { + title: "Accessibility", + content: ( + + + Heading components should be in order. That means an Headings-H1 is followed by an{" "} + Headings-H2, an Headings-H2 is followed by a Headings-H2 or{" "} + Headings-H3 and so on. + + + Keep heading tags consistent. Inconsistently implementing headings can create confusion and frustration for + users using assistive technologies. + + + Headings are not interactive elements and therefore have no keyboard or pointer interaction. + + + ), + subSections: [ + { + title: "WCAG 2.1 Related Success Criterion", + content: ( + + + + SC 1.3.1 - Info and relationships: + {" "} + Information, structure, and relationships conveyed through presentation can be programmatically determined + or are available in text. + + + + SC 2.4.6 - Headings and Labels: + {" "} + Headings and labels describe the topic or purpose. + + + ), + }, + ], + }, +]; + +const HeadingOverviewPage = () => ( + + + + + + +); + +export default HeadingOverviewPage; diff --git a/apps/website/screens/components/heading/overview/images/heading_sizes.png b/apps/website/screens/components/heading/overview/images/heading_sizes.png new file mode 100644 index 0000000000..8913d610d2 Binary files /dev/null and b/apps/website/screens/components/heading/overview/images/heading_sizes.png differ diff --git a/apps/website/screens/components/heading/overview/images/heading_weights.png b/apps/website/screens/components/heading/overview/images/heading_weights.png new file mode 100644 index 0000000000..2b60b1c562 Binary files /dev/null and b/apps/website/screens/components/heading/overview/images/heading_weights.png differ diff --git a/apps/website/screens/components/heading/specs/HeadingSpecsPage.tsx b/apps/website/screens/components/heading/specs/HeadingSpecsPage.tsx deleted file mode 100644 index 2a04c46b98..0000000000 --- a/apps/website/screens/components/heading/specs/HeadingSpecsPage.tsx +++ /dev/null @@ -1,385 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcTable, DxcParagraph, DxcLink } from "@dxc-technology/halstack-react"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Code from "@/common/Code"; -import DocFooter from "@/common/DocFooter"; - -const sections = [ - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - - An inherit color from the definition of the application is received, so the component could change his color - based on that parameter. There is no specific color tokens for this component. - - ), - }, - { - title: "Typography", - subSections: [ - { - title: "Headings H1", - content: ( - - - - Property - Value - Core token - - - - - - font-family - - 'Open Sans', sans-serif - - font-family-sans - - - - - font-weight - - 600 - - font-weight-semibold - - - - - font-size - - 40px / 2.5rem - - font-scale-07 - - - - - font-style - - normal - - font-normal - - - - - letter-spacing - - -12.5px / -0.0125em - - font-tracking-tight-01 - - - - - ), - }, - { - title: "Headings H2", - content: ( - - - - Property - Value - Core token - - - - - - font-family - - 'Open Sans', sans-serif - - font-family-sans - - - - - font-weight - - 600 - - font-weight-semibold - - - - - font-size - - 24px / 1.5rem - - font-scale-05 - - - - - font-style - - normal - - font-normal - - - - - letter-spacing - - 0px / 0em - - font-tracking-normal - - - - - ), - }, - { - title: "Headings H3", - content: ( - - - - Property - Value - Core token - - - - - - font-family - - 'Open Sans', sans-serif - - font-family-sans - - - - - font-weight - - 600 - - font-weight-semibold - - - - - font-size - - 20px / 1.25rem - - font-scale-04 - - - - - font-style - - normal - - font-normal - - - - - letter-spacing - - 0px / 0em - - font-tracking-normal - - - - - ), - }, - { - title: "Headings H4", - content: ( - - - - Property - Value - Core token - - - - - - font-family - - 'Open Sans', sans-serif - - font-family-sans - - - - - font-weight - - 600 - - font-weight-semibold - - - - - font-size - - 16px / 1rem - - font-scale-03 - - - - - font-style - - normal - - font-normal - - - - - letter-spacing - - 0px / 0em - - font-tracking-normal - - - - - ), - }, - { - title: "Headings H5", - content: ( - - - - Property - Value - Core token - - - - - - font-family - - 'Open Sans', sans-serif - - font-family-sans - - - - - font-weight - - 600 - - font-weight-semibold - - - - - font-size - - 14px / 0.875rem - - font-scale-02 - - - - - font-style - - normal - - font-normal - - - - - letter-spacing - - 0px / 0em - - font-tracking-normal - - - - - ), - }, - ], - }, - ], - }, - { - title: "Accessibility", - content: ( - - - Heading components should be in order. That means an Headings-H1 is followed by an{" "} - Headings-H2, an Headings-H2 is followed by a Headings-H2 or{" "} - Headings-H3 and so on. - - - Keep heading tags consistent. Inconsistently implementing headings can create confusion and frustration for - users using assistive technologies. - - - Headings are not interactive elements and therefore have no keyboard or pointer interaction. - - - ), - subSections: [ - { - title: "WCAG 2.1 Related Success Criterion", - content: ( - - - SC 1.3.1 -{" "} - - Info and relationships - - - - SC 2.4.6 -{" "} - - Headings and labels - - - - ), - }, - ], - }, -]; - -const HeadingSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default HeadingSpecsPage; diff --git a/apps/website/screens/components/heading/specs/images/header_anatomy.png b/apps/website/screens/components/heading/specs/images/header_anatomy.png deleted file mode 100644 index ea981ee5ee..0000000000 Binary files a/apps/website/screens/components/heading/specs/images/header_anatomy.png and /dev/null differ diff --git a/apps/website/screens/components/heading/specs/images/header_responsive.png b/apps/website/screens/components/heading/specs/images/header_responsive.png deleted file mode 100644 index 8ec1843fca..0000000000 Binary files a/apps/website/screens/components/heading/specs/images/header_responsive.png and /dev/null differ diff --git a/apps/website/screens/components/heading/specs/images/header_specs.png b/apps/website/screens/components/heading/specs/images/header_specs.png deleted file mode 100644 index ce405ace7d..0000000000 Binary files a/apps/website/screens/components/heading/specs/images/header_specs.png and /dev/null differ diff --git a/apps/website/screens/components/heading/usage/HeadingUsagePage.tsx b/apps/website/screens/components/heading/usage/HeadingUsagePage.tsx deleted file mode 100644 index c5736d33d6..0000000000 --- a/apps/website/screens/components/heading/usage/HeadingUsagePage.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import DocFooter from "@/common/DocFooter"; -import Figure from "@/common/Figure"; -import Image from "@/common/Image"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Code from "@/common/Code"; -import headingScale from "./images/heading_scale.png"; - -const sections = [ - { - title: "Usage", - content: ( - <> - - Navigating through the Headings-H1 and Headings-H3 give a user an overview of a page - and how its content is structured. The Headings-H4 and Headings-H5 elements provide - a quick understanding of the details in each section. - - - The Open Sans typeface has 5 different weights, from light to extra-bold but Halstack use three variations, - light, regular and bold. The font size goes from 32 pixels for the <h1> heading to 14 - pixels for the <h5> level. - -
- Heading variations -
- - There are several scenarios where the use of heading is just right when we are talking about the title for a - section, header of a table, a definition of the elements that will appear below the title or an introduction - for a paragraph. - - - ), - subSections: [ - { - title: "Do's", - content: ( - <> - - - Use Heading components from H1 to H5 when creating content - hierarchy in the page. - - - Use headings for page headings and for specific sections of content. - - Use purposeful words to summarize the content that follows. - - - ), - }, - { - title: "Don'ts", - content: ( - - Do not style text to give the visual appearance of headings. - - Avoid "stacking" headings without any body content in between. - - - ), - }, - ], - }, -]; - -const HeadingUsagePage = () => { - return ( - - - - - - - ); -}; - -export default HeadingUsagePage; diff --git a/apps/website/screens/components/heading/usage/images/heading_scale.png b/apps/website/screens/components/heading/usage/images/heading_scale.png deleted file mode 100644 index f8fac37a0a..0000000000 Binary files a/apps/website/screens/components/heading/usage/images/heading_scale.png and /dev/null differ diff --git a/apps/website/screens/overview/component-lifecycle/ComponentLifecyclePage.tsx b/apps/website/screens/overview/component-lifecycle/ComponentLifecyclePage.tsx index faff2a0d4e..755f340756 100644 --- a/apps/website/screens/overview/component-lifecycle/ComponentLifecyclePage.tsx +++ b/apps/website/screens/overview/component-lifecycle/ComponentLifecyclePage.tsx @@ -181,7 +181,7 @@ const ComponentLifecyclePage = () => { - + diff --git a/apps/website/screens/overview/installation/InstallationPage.tsx b/apps/website/screens/overview/installation/InstallationPage.tsx index cb0ba40189..24b2708af1 100644 --- a/apps/website/screens/overview/installation/InstallationPage.tsx +++ b/apps/website/screens/overview/installation/InstallationPage.tsx @@ -101,7 +101,7 @@ export default function Installation() { - + diff --git a/apps/website/screens/overview/introduction/IntroductionPage.tsx b/apps/website/screens/overview/introduction/IntroductionPage.tsx index 93b2694bb4..0413911965 100644 --- a/apps/website/screens/overview/introduction/IntroductionPage.tsx +++ b/apps/website/screens/overview/introduction/IntroductionPage.tsx @@ -212,7 +212,7 @@ const Introduction = () => { - + diff --git a/apps/website/screens/overview/releases/ReleasesPage.tsx b/apps/website/screens/overview/releases/ReleasesPage.tsx index 9af6e78248..20e38005b3 100644 --- a/apps/website/screens/overview/releases/ReleasesPage.tsx +++ b/apps/website/screens/overview/releases/ReleasesPage.tsx @@ -114,7 +114,7 @@ const Releases = ({ releases }: { releases: Release[] }) => ( - + Access all the major releases of the Halstack React library and see the changelog of every version available. diff --git a/apps/website/screens/principles/color/ColorPage.tsx b/apps/website/screens/principles/color/ColorPage.tsx index f1d8b28c07..e7913fa769 100644 --- a/apps/website/screens/principles/color/ColorPage.tsx +++ b/apps/website/screens/principles/color/ColorPage.tsx @@ -812,7 +812,7 @@ const ColorPage = () => { - + diff --git a/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx b/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx index 6faa857a51..630ee3fb95 100644 --- a/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx +++ b/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx @@ -331,7 +331,7 @@ const DataVisualizationPage = () => { - + diff --git a/apps/website/screens/principles/iconography/IconographyPage.tsx b/apps/website/screens/principles/iconography/IconographyPage.tsx index 08a5579ce6..c1d442e740 100644 --- a/apps/website/screens/principles/iconography/IconographyPage.tsx +++ b/apps/website/screens/principles/iconography/IconographyPage.tsx @@ -116,7 +116,7 @@ const IconographyPage = () => { - + diff --git a/apps/website/screens/principles/layout/LayoutPage.tsx b/apps/website/screens/principles/layout/LayoutPage.tsx index 86c32cc708..56f97fb025 100644 --- a/apps/website/screens/principles/layout/LayoutPage.tsx +++ b/apps/website/screens/principles/layout/LayoutPage.tsx @@ -244,7 +244,7 @@ const Layout = () => { - + diff --git a/apps/website/screens/principles/localization/LocalizationPage.tsx b/apps/website/screens/principles/localization/LocalizationPage.tsx index 20c37536e1..b1203a8bf9 100644 --- a/apps/website/screens/principles/localization/LocalizationPage.tsx +++ b/apps/website/screens/principles/localization/LocalizationPage.tsx @@ -630,7 +630,7 @@ const Localization = () => { - + diff --git a/apps/website/screens/principles/spacing/SpacingPage.tsx b/apps/website/screens/principles/spacing/SpacingPage.tsx index e6129fe105..4d0004295b 100644 --- a/apps/website/screens/principles/spacing/SpacingPage.tsx +++ b/apps/website/screens/principles/spacing/SpacingPage.tsx @@ -298,7 +298,7 @@ const Spacing = () => { - + diff --git a/apps/website/screens/principles/themes/ThemesPage.tsx b/apps/website/screens/principles/themes/ThemesPage.tsx index 65e69dae41..1358b352d3 100644 --- a/apps/website/screens/principles/themes/ThemesPage.tsx +++ b/apps/website/screens/principles/themes/ThemesPage.tsx @@ -1539,7 +1539,7 @@ const Themes = () => { - + diff --git a/apps/website/screens/principles/typography/TypographyPageLayout.tsx b/apps/website/screens/principles/typography/TypographyPageLayout.tsx index 12a74eb8b2..5d3871838a 100644 --- a/apps/website/screens/principles/typography/TypographyPageLayout.tsx +++ b/apps/website/screens/principles/typography/TypographyPageLayout.tsx @@ -12,7 +12,7 @@ const TypographyPageHeading = ({ children }: { children: ReactNode }) => { - + This section explains and shows examples of all the typographic variables included in Halstack Design System. diff --git a/apps/website/screens/theme-generator/ImportDialog.tsx b/apps/website/screens/theme-generator/ImportDialog.tsx index 4ba79f3963..8d457733dd 100644 --- a/apps/website/screens/theme-generator/ImportDialog.tsx +++ b/apps/website/screens/theme-generator/ImportDialog.tsx @@ -55,7 +55,7 @@ const ImportDialog = ({ customThemeSchema, setCustomTheme, setDialogVisible }: I return ( - + { - + Halstack Provider is the context provider used for a whole application or an isolated group of components, which defines the custom theme and/or translation labels. diff --git a/packages/lib/src/heading/Heading.accessibility.test.tsx b/packages/lib/src/heading/Heading.accessibility.test.tsx index b4b77d4f38..5781920207 100644 --- a/packages/lib/src/heading/Heading.accessibility.test.tsx +++ b/packages/lib/src/heading/Heading.accessibility.test.tsx @@ -4,9 +4,7 @@ import DxcHeading from "./Heading"; describe("Heading component accessibility tests", () => { it("Should not have basic accessibility issues", async () => { - const { container } = render( - - ); + const { container } = render(); const results = await axe(container); expect(results).toHaveNoViolations(); }); diff --git a/packages/lib/src/heading/Heading.stories.tsx b/packages/lib/src/heading/Heading.stories.tsx index 86b03b1886..5fccf3d3e6 100644 --- a/packages/lib/src/heading/Heading.stories.tsx +++ b/packages/lib/src/heading/Heading.stories.tsx @@ -22,15 +22,17 @@ const Heading = () => ( <DxcHeading text="Heading for sections within the page" level={5} /> + <Title title="Level 6" theme="light" level={4} /> + <DxcHeading text="Heading for sections within the page" level={6} /> </ExampleContainer> <Title title="Weights" theme="light" level={2} /> <ExampleContainer> - <Title title="'light' Weight" theme="light" level={4} /> + <Title title="Default weight" theme="light" level={4} /> + <DxcHeading text="Heading for sections within the page" level={2} weight="default" /> + <Title title="Regular weight" theme="light" level={4} /> + <DxcHeading text="Heading for sections within the page" level={2} weight="regular" /> + <Title title="Light weight" theme="light" level={4} /> <DxcHeading text="Heading for sections within the page" level={2} weight="light" /> - <Title title="'normal' Weight" theme="light" level={4} /> - <DxcHeading text="Heading for sections within the page" level={2} weight="normal" /> - <Title title="'bold' Weight" theme="light" level={4} /> - <DxcHeading text="Heading for sections within the page" level={2} weight="bold" /> </ExampleContainer> <Title title="Margins" theme="light" level={2} /> <ExampleContainer> @@ -48,7 +50,6 @@ const Heading = () => ( <DxcHeading text="Xlarge" margin="xlarge" /> <Title title="Xxlarge" theme="light" level={4} /> <DxcHeading text="Xxlarge" margin="xxlarge" /> - <hr /> </ExampleContainer> </> ); diff --git a/packages/lib/src/heading/Heading.tsx b/packages/lib/src/heading/Heading.tsx index d3832167d0..9f8ed69dd3 100644 --- a/packages/lib/src/heading/Heading.tsx +++ b/packages/lib/src/heading/Heading.tsx @@ -1,145 +1,34 @@ -import styled, { ThemeProvider } from "styled-components"; +import styled from "styled-components"; import { spaces } from "../common/variables"; import HeadingPropsType from "./types"; -import { useContext } from "react"; -import HalstackContext from "../HalstackContext"; - -const DxcHeading = ({ level = 1, text = "", as, weight, margin }: HeadingPropsType): JSX.Element => { - const colorsTheme = useContext(HalstackContext); - - const checkValidAs = () => { - if (as === "h1" || as === "h2" || as === "h3" || as === "h4" || as === "h5") return as; - }; - - return ( - <ThemeProvider theme={colorsTheme.heading}> - <HeadingContainer margin={margin}> - {level === 1 ? ( - <HeadingLevel1 as={checkValidAs()} weight={weight}> - {text} - </HeadingLevel1> - ) : level === 2 ? ( - <HeadingLevel2 as={checkValidAs()} weight={weight}> - {text} - </HeadingLevel2> - ) : level === 3 ? ( - <HeadingLevel3 as={checkValidAs()} weight={weight}> - {text} - </HeadingLevel3> - ) : level === 4 ? ( - <HeadingLevel4 as={checkValidAs()} weight={weight}> - {text} - </HeadingLevel4> - ) : ( - <HeadingLevel5 as={checkValidAs()} weight={weight}> - {text} - </HeadingLevel5> - )} - </HeadingContainer> - </ThemeProvider> - ); -}; +import { getHeadingSize, getHeadingWeight } from "./utils"; const HeadingContainer = styled.div<{ margin: HeadingPropsType["margin"] }>` - margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")}; - margin-top: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""}; - margin-right: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : ""}; - margin-bottom: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""}; - margin-left: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""}; + margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "0px")}; + margin-top: ${({ margin }) => (margin && typeof margin === "object" && margin.top ? spaces[margin.top] : "")}; + margin-right: ${({ margin }) => (margin && typeof margin === "object" && margin.right ? spaces[margin.right] : "")}; + margin-bottom: ${({ margin }) => + margin && typeof margin === "object" && margin.bottom ? spaces[margin.bottom] : ""}; + margin-left: ${({ margin }) => (margin && typeof margin === "object" && margin.left ? spaces[margin.left] : "")}; `; -const HeadingLevel1 = styled.h1<{ weight: HeadingPropsType["weight"] }>` - font-family: ${(props) => props.theme.level1FontFamily}; - font-style: ${(props) => props.theme.level1FontStyle}; - font-size: ${(props) => props.theme.level1FontSize}; - line-height: ${(props) => props.theme.level1LineHeight}; - font-weight: ${(props) => - props.weight === "normal" - ? "400" - : props.weight === "light" - ? "300" - : props.weight === "bold" - ? "600" - : props.theme.level1FontWeight}; - letter-spacing: ${(props) => props.theme.level1LetterSpacing}; - color: ${(props) => props.theme.level1FontColor}; +const Heading = styled.h1<{ + $level: HeadingPropsType["level"]; + $weight: HeadingPropsType["weight"]; +}>` + color: var(--color-fg-neutral-dark); + font-family: var(--font-family-sans); + font-size: ${({ $level }) => getHeadingSize($level)}; + font-weight: ${({ $weight }) => getHeadingWeight($weight)}; margin: 0; `; -const HeadingLevel2 = styled.h2<{ weight: HeadingPropsType["weight"] }>` - font-family: ${(props) => props.theme.level2FontFamily}; - font-style: ${(props) => props.theme.level2FontStyle}; - font-size: ${(props) => props.theme.level2FontSize}; - line-height: ${(props) => props.theme.level2LineHeight}; - font-weight: ${(props) => - props.weight === "normal" - ? "400" - : props.weight === "light" - ? "300" - : props.weight === "bold" - ? "600" - : props.theme.level2FontWeight}; - letter-spacing: ${(props) => props.theme.level2LetterSpacing}; - color: ${(props) => props.theme.level2FontColor}; - margin: 0; -`; - -const HeadingLevel3 = styled.h3<{ weight: HeadingPropsType["weight"] }>` - font-family: ${(props) => props.theme.level3FontFamily}; - font-style: ${(props) => props.theme.level3FontStyle}; - font-size: ${(props) => props.theme.level3FontSize}; - line-height: ${(props) => props.theme.level3LineHeight}; - font-weight: ${(props) => - props.weight === "normal" - ? "400" - : props.weight === "light" - ? "300" - : props.weight === "bold" - ? "600" - : props.theme.level3FontWeight}; - letter-spacing: ${(props) => props.theme.level3LetterSpacing}; - color: ${(props) => props.theme.level3FontColor}; - margin: 0; -`; - -const HeadingLevel4 = styled.h4<{ weight: HeadingPropsType["weight"] }>` - font-family: ${(props) => props.theme.level4FontFamily}; - font-style: ${(props) => props.theme.level4FontStyle}; - font-size: ${(props) => props.theme.level4FontSize}; - line-height: ${(props) => props.theme.level4LineHeight}; - font-weight: ${(props) => - props.weight === "normal" - ? "400" - : props.weight === "light" - ? "300" - : props.weight === "bold" - ? "600" - : props.theme.level4FontWeight}; - letter-spacing: ${(props) => props.theme.level4LetterSpacing}; - color: ${(props) => props.theme.level4FontColor}; - margin: 0; -`; - -const HeadingLevel5 = styled.h5<{ weight: HeadingPropsType["weight"] }>` - font-family: ${(props) => props.theme.level5FontFamily}; - font-style: ${(props) => props.theme.level5FontStyle}; - font-size: ${(props) => props.theme.level5FontSize}; - line-height: ${(props) => props.theme.level5LineHeight}; - font-weight: ${(props) => - props.weight === "normal" - ? "400" - : props.weight === "light" - ? "300" - : props.weight === "bold" - ? "600" - : props.theme.level5FontWeight}; - letter-spacing: ${(props) => props.theme.level5LetterSpacing}; - color: ${(props) => props.theme.level5FontColor}; - margin: 0; -`; - -export default DxcHeading; +export default function DxcHeading({ as, level = 1, margin, text, weight = "default" }: HeadingPropsType) { + return ( + <HeadingContainer margin={margin}> + <Heading as={as ?? `h${level}`} $level={level} $weight={weight}> + {text} + </Heading> + </HeadingContainer> + ); +} diff --git a/packages/lib/src/heading/types.ts b/packages/lib/src/heading/types.ts index bba53bff18..0b37579636 100644 --- a/packages/lib/src/heading/types.ts +++ b/packages/lib/src/heading/types.ts @@ -6,7 +6,7 @@ type Props = { * The html tag of the heading will be the one specified in the 'as' prop. * If 'as' is not specified, the html tag of the heading is the one specified in the 'level' prop. */ - level?: 1 | 2 | 3 | 4 | 5; + level?: 1 | 2 | 3 | 4 | 5 | 6; /** * Heading text. */ @@ -14,11 +14,11 @@ type Props = { /** * Modifies the default weight of the heading. */ - weight?: "light" | "normal" | "bold"; + weight?: "light" | "default" | "regular"; /** * Specifies the HTML tag of the heading. */ - as?: "h1" | "h2" | "h3" | "h4" | "h5"; + as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; /** * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. diff --git a/packages/lib/src/heading/utils.ts b/packages/lib/src/heading/utils.ts new file mode 100644 index 0000000000..046152e97b --- /dev/null +++ b/packages/lib/src/heading/utils.ts @@ -0,0 +1,29 @@ +import HeadingPropsType from "./types"; + +export const getHeadingSize = (level: HeadingPropsType["level"]) => { + switch (level) { + case 1: + return "var(--typography-heading-xxl)"; + case 2: + return "var(--typography-heading-xl)"; + case 3: + return "var(--typography-heading-l)"; + case 4: + return "var(--typography-heading-m)"; + case 5: + return "var(--typography-heading-s)"; + case 6: + return "var(--typography-heading-xs)"; + } +}; + +export const getHeadingWeight = (weight: HeadingPropsType["weight"]) => { + switch (weight) { + case "default": + return "var(--typography-heading-semibold)"; + case "regular": + return "var(--typography-heading-regular)"; + case "light": + return "var(--typography-heading-light)"; + } +}; \ No newline at end of file diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index 19e3f4d1d3..e77e77ffb8 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -59,12 +59,12 @@ const Link = styled.a` } `; -const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { +export default function DxcQuickNav({ links, title }: QuickNavTypes) { const translatedLabels = useContext(HalstackLanguageContext); return ( <QuickNavContainer> - <DxcHeading level={4} text={title || translatedLabels.quickNav.contentTitle} /> + <DxcHeading level={5} text={title ?? translatedLabels.quickNav.contentTitle} /> <ListColumn> {links.map((link) => ( <li key={link.label}> @@ -91,6 +91,4 @@ const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => { </ListColumn> </QuickNavContainer> ); -}; - -export default DxcQuickNav; +}