Skip to content

Header redesign #2217

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

Header redesign #2217

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
f844a6c
First version of tokens implementation for header
Apr 16, 2025
905cb7a
Several improvements for Header based on feedback
May 2, 2025
e5471c9
Added documentation
May 2, 2025
e740853
Replaced custom close icon with ActionIcon
May 26, 2025
aa7f409
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
May 26, 2025
4d7072f
Moved icon to a separate file
May 29, 2025
21c9671
Merge branch 'master' into Mil4n0r/tokens-header
Jialecl Jun 4, 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/header/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 HeaderPageLayout from "screens/components/header/HeaderPageLayout";
import HeaderCodePage from "screens/components/header/code/HeaderCodePage";

const Code = () => (
<>
<Head>
<title>Header code — Halstack Design System</title>
</Head>
<HeaderCodePage />
</>
);

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

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/header/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 HeaderPageLayout from "screens/components/header/HeaderPageLayout";
import HeaderCodePage from "screens/components/header/code/HeaderCodePage";
import HeaderOverviewPage from "screens/components/header/overview/HeaderOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Header — Halstack Design System</title>
</Head>
<HeaderCodePage></HeaderCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Header — Halstack Design System</title>
</Head>
<HeaderOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

12 changes: 5 additions & 7 deletions apps/website/screens/components/header/HeaderPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,8 @@ import { ReactNode } from "react";

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

return (
Expand All @@ -18,9 +17,8 @@ const HeaderPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
<ComponentHeading name="Header" />
<DxcParagraph>
The header is an important component in the interface, it is the area dedicated for the navigation across
the application and helps users understand what the content of the page is about. They appear at the top of
a page, above the main content.
A horizontal bar located at the top of the application, providing branding, primary navigation, and user
account controls.
</DxcParagraph>
<DxcParagraph>
The header is part of the application layout, so it can only be used inside of it. Please check the{" "}
Expand All @@ -29,7 +27,7 @@ const HeaderPageHeading = ({ children }: { children: ReactNode }) => {
</Link>{" "}
documentation.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
56 changes: 38 additions & 18 deletions apps/website/screens/components/header/code/HeaderCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Link from "next/link";
import Code, { TableCode } from "@/common/Code";
import Code, { ExtendedTableCode, TableCode } from "@/common/Code";

const logoTypeString = `{
href?: string;
src: string;
title?: string;
}`;

const sections = [
{
Expand All @@ -19,16 +25,6 @@ const sections = [
</tr>
</thead>
<tbody>
<tr>
<td>underlined</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>Whether a contrast line should appear at the bottom of the header.</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>content</td>
<td>
Expand All @@ -42,14 +38,25 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>responsiveContent</td>
<td>logo</td>
<td>
<TableCode>{"(closeHandler: () => void) => React.ReactNode"}</TableCode>
<td>
<TableCode>{"Logo"}</TableCode>
<p>
being <Code>Logo</Code> an object with the following properties:
</p>
<ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
</td>
</td>
<td>Logo to be displayed inside the header.</td>
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>
Content shown in responsive version. It receives the close menu handler that can be used to add that
functionality when a element is clicked.
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'</TableCode>
</td>
<td>Size of the bottom margin to be applied to the header.</td>
<td>-</td>
</tr>
<tr>
Expand All @@ -61,11 +68,14 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>responsiveContent</td>
<td>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'</TableCode>
<TableCode>{"(closeHandler: () => void) => React.ReactNode"}</TableCode>
</td>
<td>
Content shown in responsive version. It receives the close menu handler that can be used to add that
functionality when a element is clicked.
</td>
<td>Size of the bottom margin to be applied to the header.</td>
<td>-</td>
</tr>
<tr>
Expand All @@ -78,6 +88,16 @@ const sections = [
<TableCode>0</TableCode>
</td>
</tr>
<tr>
<td>underlined</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>Whether a contrast line should appear at the bottom of the header.</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
</tbody>
</DxcTable>
),
Expand Down
138 changes: 138 additions & 0 deletions apps/website/screens/components/header/overview/HeaderOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
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 anatomy from "./images/header_anatomy.png";
import responsive from "./images/header_responsive.png";
import variants from "./images/header_variants.png";

const sections = [
{
title: "Introduction",
content: (
<DxcParagraph>
The Header serves as the primary navigation and identity element for an application. It includes branding, quick
access to key sections via navigation links, and a user account menu. Its consistent presence reinforces brand
recognition and improves usability by offering easy navigation and access to user-related actions.
</DxcParagraph>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={anatomy} alt="Header's anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Container:</strong> a layout structure that wraps all Header elements, ensuring consistent
alignment, spacing, and maximum width limits. The container helps keep the header properly aligned across
different screen sizes.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Brand Image:</strong> a clear, balanced logo that fits well within the header without overpowering
other elements.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Application Name</strong> <em>(Optional)</em>: a short, recognizable application name placed next to
the logo to reinforce brand identity.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Navigation Links</strong> <em>(Optional)</em>: key links to main sections of the application.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Header Dropdown</strong> <em>(Optional)</em>: a dropdown menu for user-specific actions such as
profile, settings, or logout, triggered by click or keyboard focus.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Divider</strong> <em>(Optional)</em>: horizontal line that visually separates the Header from the
page content below, enhancing layout clarity.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Variants",
content: (
<>
<DxcParagraph>
To maintain consistency with the way variants are structured across components, the Header offers two primary
styles: <strong>default</strong> and <strong>underlined</strong>.
</DxcParagraph>
<DxcBulletedList>
<DxcBulletedList.Item>
The <strong>default</strong> variant features a clean header without a visual separation from the page
content, ideal for minimalistic or immersive layouts.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
The <strong>underlined</strong> variant includes a subtle bottom divider, creating a clear visual boundary
between the header and the rest of the page content, enhancing structure and clarity.
</DxcBulletedList.Item>
</DxcBulletedList>
<Figure caption="Header variants">
<Image src={variants} alt="Header variants" />
</Figure>
</>
),
},
{
title: "Responsive version for mobile and tablet",
content: (
<>
<DxcParagraph>
Since applications are accessed from a variety of devices, including laptops, tablets, and smartphones, it's
essential to design a Header that adapts fluidly to different screen sizes. The responsive Header should
maintain the core structure and visual hierarchy of the desktop version, ensuring a consistent and intuitive
user experience across all devices.
</DxcParagraph>
<Figure caption="Header menu responsive version">
<Image src={responsive} alt="Header menu responsive version" />
</Figure>
</>
),
},
{
title: "Best practices",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Keep the Header minimal and functional:</strong> include only essential elements.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Select the correct variant according to visual needs:</strong> Use the <strong>default</strong>{" "}
variant for simple pages and underlined variant to visually separate the Header from the content when
necessary.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use dropdowns correctly for complex navigation:</strong> Only use Header dropdowns when necessary to
organize multiple links logically without overwhelming the top navigation.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid overcrowding the Header:</strong> Limit the number of top-level navigation links. Group
secondary links inside dropdowns if needed to maintain a clean and user-friendly interface.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Display the application name clearly and concisely:</strong> The application name should be readable,
short, and not overpower the brand logo. It reinforces brand identity and provides immediate context to users.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Design the Header to respond gracefully to smaller screens:</strong> When adapting the Header to
mobile or tablet layouts, restructure the content to preserve both visual clarity and functional hierarchy.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
];

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

export default HeaderOverviewPage;
Binary file added apps/website/screens/components/header/overview/images/header_anatomy.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/screens/components/header/overview/images/header_responsive.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/screens/components/header/overview/images/header_variants.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading