Skip to content

Heading redesign #2214

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
Mil4n0r merged 7 commits into from
Apr 23, 2025
Merged

Heading redesign #2214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2788608
Heading component redesign
GomezIvann Apr 16, 2025
1261776
Heading doc updates
GomezIvann Apr 16, 2025
2d390d0
Heading doc updates
GomezIvann Apr 16, 2025
42a7e5b
Removing old specifications from heading
GomezIvann Apr 22, 2025
2f4e4f6
Heading component updates
GomezIvann Apr 22, 2025
be62cd3
Doc updates
GomezIvann Apr 22, 2025
2c4928c
Removing — from docs
GomezIvann Apr 23, 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
17 changes: 17 additions & 0 deletions apps/website/pages/components/heading/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => (
<>
<Head>
<title>Heading code — Halstack Design System</title>
</Head>
<HeadingCodePage />
</>
);

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

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/heading/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 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 (
<>
<Head>
<title>Heading — Halstack Design System</title>
</Head>
<HeadingCodePage></HeadingCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Heading — Halstack Design System</title>
</Head>
<HeadingOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

2 changes: 1 addition & 1 deletion apps/website/screens/common/ComponentHeading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ type ComponentHeadingProps = {
name: string;
};

const ComponentHeading = ({ name }: ComponentHeadingProps) => <DxcHeading level={1} text={name} weight="bold" />;
const ComponentHeading = ({ name }: ComponentHeadingProps) => <DxcHeading level={1} text={name} />;

export default ComponentHeading;
6 changes: 3 additions & 3 deletions apps/website/screens/common/HeadingLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand All @@ -32,7 +32,7 @@ const HeadingLink = ({ children, level, as, navSubtitle }: HeadingLinkProps) =>
{linkIcon}
</HeadingAnchor>
</DxcBleed>
<DxcHeading weight="bold" text={children} level={level} as={as} />
<DxcHeading text={children} level={level} as={as} />
</HeadingLinkContainer>
);
};
Expand Down
2 changes: 1 addition & 1 deletion apps/website/screens/components/dialog/code/examples/withContent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const code = `() => {
<DxcDialog onCloseClick={handleClick}>
<DxcInset space="1.5rem">
<DxcGrid gap="2rem">
<DxcHeading level={2} text="Delivery address" weight="normal" />
<DxcHeading level={2} text="Delivery address" weight="regular" />
<DxcGrid templateColumns={["1fr", "1fr"]} templateColumns={["1fr", "1fr"]} gap="var(--spacing-gap-ml)">
<DxcTextInput label="Street" size="fillParent" />
<DxcTextInput label="City" size="fillParent" />
Expand Down
12 changes: 5 additions & 7 deletions apps/website/screens/components/heading/HeadingPageLayout.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 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 (
Expand All @@ -17,11 +16,10 @@ const HeadingPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Heading" />
<DxcParagraph>
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.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
68 changes: 34 additions & 34 deletions apps/website/screens/components/heading/code/HeadingCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,21 @@ const sections = [
</tr>
</thead>
<tbody>
<tr>
<td>as</td>
<td>
<TableCode>'h1' | 'h2' | 'h3' | 'h4'| 'h5' | 'h6'</TableCode>
</td>
<td>Specifies the HTML tag of the heading.</td>
<td>-</td>
</tr>
<tr>
<td>level</td>
<td>
<TableCode>1 | 2 | 3 | 4 | 5</TableCode>
<TableCode>1 | 2 | 3 | 4 | 5 | 6</TableCode>
</td>
<td>
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 <Code>as</Code> prop. If no <Code>as</Code>{" "}
prop is provided, the tag of the heading is the the one corresponding to the value of the{" "}
<Code>level</Code> prop (for example, level 1 will render an <Code>h1</Code> tag).
Expand All @@ -39,46 +47,40 @@ const sections = [
</td>
</tr>
<tr>
<td>margin</td>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
text
</DxcFlex>
<TableCode>
'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
</TableCode>
</td>
<td>
<TableCode>string</TableCode>
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.
</td>
<td>Heading text.</td>
<td>-</td>
</tr>
<tr>
<td>weight</td>
<td>
<TableCode>'light' | 'normal' | 'bold'</TableCode>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
text
</DxcFlex>
</td>
<td>Modifies the default weight of the heading.</td>
<td>-</td>
</tr>
<tr>
<td>as</td>
<td>
<TableCode>'h1' | 'h2' | 'h3' | 'h4'| 'h5'</TableCode>
<TableCode>string</TableCode>
</td>
<td>Specifies the HTML tag of the heading.</td>
<td>Heading text.</td>
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>weight</td>
<td>
<TableCode>
'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
</TableCode>
<TableCode>'default' | 'regular' | 'light'</TableCode>
</td>
<td>Modifies the weight of the heading.</td>
<td>
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.
<TableCode>'default'</TableCode>
</td>
<td>-</td>
</tr>
</tbody>
</DxcTable>
Expand All @@ -96,15 +98,13 @@ const sections = [
},
];

const HeadingCodePage = () => {
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/heading/code/HeadingCodePage.tsx" />
</DxcFlex>
);
};
const HeadingCodePage = () => (
<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/heading/code/HeadingCodePage.tsx" />
</DxcFlex>
);

export default HeadingCodePage;
12 changes: 10 additions & 2 deletions apps/website/screens/components/heading/code/examples/basicUsage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
import { DxcHeading, DxcInset } from "@dxc-technology/halstack-react";
import { DxcHeading, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";

const code = `() => {
return (
<DxcInset space="2rem">
<DxcHeading level={2} text="Introduction" />
<DxcFlex gap="var(--spacing-gap-l)" direction="column">
<DxcHeading level={1} text="Introduction" />
<DxcHeading level={2} text="Use case" />
<DxcHeading level={3} text="Default" />
<DxcHeading level={4} text="Best practices" />
<DxcHeading level={5} text="Example" />
<DxcHeading level={6} text="Code" />
</DxcFlex>
</DxcInset>
);
}`;

const scope = {
DxcHeading,
DxcFlex,
DxcInset,
};

Expand Down
Loading