Skip to content

Commit 420107c

Browse files
JialeclJialecl
authored
Merge pull request #2216 from dxc-technology/Mil4n0r/tokens-footer
Footer redesign
2 parents dd6acd7 + e244403 commit 420107c

File tree

17 files changed

+391
-796
lines changed

17 files changed

+391
-796
lines changed

‎apps/website/pages/components/footer/code.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import FooterPageLayout from "screens/components/footer/FooterPageLayout";
4+
import FooterCodePage from "screens/components/footer/code/FooterCodePage";
5+
6+
const Code = () => (
7+
<>
8+
<Head>
9+
<title>Footer code — Halstack Design System</title>
10+
</Head>
11+
<FooterCodePage />
12+
</>
13+
);
14+
15+
Code.getLayout = (page: ReactElement) => <FooterPageLayout>{page}</FooterPageLayout>;
16+
17+
export default Code;

‎apps/website/pages/components/footer/index.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
33
import FooterPageLayout from "screens/components/footer/FooterPageLayout";
4-
import FooterCodePage from "screens/components/footer/code/FooterCodePage";
4+
import FooterOverviewPage from "screens/components/footer/overview/FooterOverviewPage";
55

6-
const Index = () => {
7-
return (
8-
<>
9-
<Head>
10-
<title>Footer — Halstack Design System</title>
11-
</Head>
12-
<FooterCodePage></FooterCodePage>
13-
</>
14-
);
15-
};
6+
const Index = () => (
7+
<>
8+
<Head>
9+
<title>Footer — Halstack Design System</title>
10+
</Head>
11+
<FooterOverviewPage />
12+
</>
13+
);
1614

17-
Index.getLayout = function getLayout(page: ReactElement) {
18-
return <FooterPageLayout>{page}</FooterPageLayout>;
19-
};
15+
Index.getLayout = (page: ReactElement) => <FooterPageLayout>{page}</FooterPageLayout>;
2016

2117
export default Index;

‎apps/website/pages/components/footer/specifications.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/pages/components/footer/usage.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/screens/components/footer/FooterPageLayout.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ import { ReactNode } from "react";
77

88
const FooterPageHeading = ({ children }: { children: ReactNode }) => {
99
const tabs = [
10-
{ label: "Code", path: "/components/footer" },
11-
{ label: "Usage", path: "/components/footer/usage" },
12-
{ label: "Specifications", path: "/components/footer/specifications" },
10+
{ label: "Overview", path: "/components/footer" },
11+
{ label: "Code", path: "/components/footer/code" },
1312
];
1413

1514
return (
@@ -18,11 +17,8 @@ const FooterPageHeading = ({ children }: { children: ReactNode }) => {
1817
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
1918
<ComponentHeading name="Footer" />
2019
<DxcParagraph>
21-
Footers are a secondary element in a web page because they usually appear at the bottom and it is the last
22-
thing that the user interacts with. But the presence of the footer must be designed in every application and
23-
be part of it (consumer or back-office) as it is a key layout element to the overall experience. It is a
24-
choice of the designer to either leave the footer visible by default or push it down, depending on the use
25-
case.
20+
The footer is a UI component placed at the bottom of the page, providing informational context, secondary
21+
navigation, and legal or support links.
2622
</DxcParagraph>
2723
<DxcParagraph>
2824
The footer is part of the application layout, so it can only be used inside of it. Please check the{" "}
@@ -31,7 +27,7 @@ const FooterPageHeading = ({ children }: { children: ReactNode }) => {
3127
</Link>{" "}
3228
documentation.
3329
</DxcParagraph>
34-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
30+
<TabsPageHeading tabs={tabs} />
3531
</DxcFlex>
3632
</PageHeading>
3733
{children}

‎apps/website/screens/components/footer/code/FooterCodePage.tsx‎

Lines changed: 69 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@ import QuickNavContainer from "@/common/QuickNavContainer";
33
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
44
import DocFooter from "@/common/DocFooter";
55
import StatusBadge from "@/common/StatusBadge";
6-
import Code, { TableCode } from "@/common/Code";
6+
import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
7+
8+
const logoTypeString = `{
9+
href?: string;
10+
src: string;
11+
title?: string;
12+
}`;
713

814
const sections = [
915
{
@@ -19,6 +25,68 @@ const sections = [
1925
</tr>
2026
</thead>
2127
<tbody>
28+
<tr>
29+
<td>bottomLinks</td>
30+
<td>
31+
<TableCode>{"{ href: string; text: string; }[]"}</TableCode>
32+
</td>
33+
<td>
34+
An array of objects representing the links that will be rendered at the bottom part of the footer. Each
35+
object has the following properties:
36+
<ul>
37+
<li>
38+
<b>text</b>: Text for the link.
39+
</li>
40+
<li>
41+
<b>href</b>: URL of the page the link goes to.
42+
</li>
43+
</ul>
44+
</td>
45+
<td>-</td>
46+
</tr>
47+
<tr>
48+
<td>children</td>
49+
<td>
50+
<TableCode>React.ReactNode</TableCode>
51+
</td>
52+
<td>The center section of the footer. Can be used to render custom content in this area.</td>
53+
<td>-</td>
54+
</tr>
55+
<tr>
56+
<td>copyright</td>
57+
<td>
58+
<TableCode>string</TableCode>
59+
</td>
60+
<td>The text that will be displayed as copyright disclaimer.</td>
61+
<td>-</td>
62+
</tr>
63+
<tr>
64+
<td>
65+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
66+
<StatusBadge status="new" />
67+
logo
68+
</DxcFlex>
69+
</td>
70+
<td>
71+
<td>
72+
<TableCode>{"Logo"}</TableCode>
73+
<p>
74+
being <Code>Logo</Code> an object with the following properties:
75+
</p>
76+
<ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
77+
</td>
78+
</td>
79+
<td>Logo to be displayed inside the header.</td>
80+
<td>-</td>
81+
</tr>
82+
<tr>
83+
<td>margin</td>
84+
<td>
85+
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'</TableCode>
86+
</td>
87+
<td>Size of the top margin to be applied to the footer.</td>
88+
<td>-</td>
89+
</tr>
2290
<tr>
2391
<td>
2492
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
@@ -75,49 +143,6 @@ const sections = [
75143
</td>
76144
<td>-</td>
77145
</tr>
78-
<tr>
79-
<td>bottomLinks</td>
80-
<td>
81-
<TableCode>{"{ href: string; text: string; }[]"}</TableCode>
82-
</td>
83-
<td>
84-
An array of objects representing the links that will be rendered at the bottom part of the footer. Each
85-
object has the following properties:
86-
<ul>
87-
<li>
88-
<b>text</b>: Text for the link.
89-
</li>
90-
<li>
91-
<b>href</b>: URL of the page the link goes to.
92-
</li>
93-
</ul>
94-
</td>
95-
<td>-</td>
96-
</tr>
97-
<tr>
98-
<td>copyright</td>
99-
<td>
100-
<TableCode>string</TableCode>
101-
</td>
102-
<td>The text that will be displayed as copyright disclaimer.</td>
103-
<td>-</td>
104-
</tr>
105-
<tr>
106-
<td>children</td>
107-
<td>
108-
<TableCode>React.ReactNode</TableCode>
109-
</td>
110-
<td>The center section of the footer. Can be used to render custom content in this area.</td>
111-
<td>-</td>
112-
</tr>
113-
<tr>
114-
<td>margin</td>
115-
<td>
116-
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'</TableCode>
117-
</td>
118-
<td>Size of the top margin to be applied to the footer.</td>
119-
<td>-</td>
120-
</tr>
121146
<tr>
122147
<td>tabIndex</td>
123148
<td>

‎apps/website/screens/components/footer/overview/FooterOverviewPage.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
2+
import DocFooter from "@/common/DocFooter";
3+
import QuickNavContainer from "@/common/QuickNavContainer";
4+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
5+
import anatomy from "./images/footer_anatomy.png";
6+
import variants from "./images/footer_variants.png";
7+
import Image from "@/common/Image";
8+
import Figure from "@/common/Figure";
9+
10+
const sections = [
11+
{
12+
title: "Introduction",
13+
content: (
14+
<DxcParagraph>
15+
The footer is used as the final section of a page to display utility elements such as legal disclaimers,
16+
secondary links, copyright information, or the brand logo. Its purpose is to reinforce brand identity and
17+
provide consistent access across digital experiences without disrupting the main user flow.
18+
</DxcParagraph>
19+
),
20+
},
21+
{
22+
title: "Anatomy",
23+
content: (
24+
<>
25+
<Image src={anatomy} alt="Footer's anatomy" />
26+
<DxcBulletedList type="number">
27+
<DxcBulletedList.Item>
28+
<strong>Container:</strong> The outer wrapper that defines the overall layout, padding, and alignment of all
29+
footer content. Ensures consistency across screen sizes.
30+
</DxcBulletedList.Item>
31+
<DxcBulletedList.Item>
32+
<strong>Logo:</strong> Represents the brand identity visually. Positioned on the left side, it helps
33+
reinforce company recognition across all pages.
34+
</DxcBulletedList.Item>
35+
<DxcBulletedList.Item>
36+
<strong>Social icons:</strong> A set of clickable icons linking to the company’s social media platforms
37+
(e.g., LinkedIn, Facebook). Placed on the right side for easy visibility and access.
38+
</DxcBulletedList.Item>
39+
<DxcBulletedList.Item>
40+
<strong>Copyright:</strong> Text displaying legal ownership of the content. Ensures users know the site is
41+
officially owned.
42+
</DxcBulletedList.Item>
43+
<DxcBulletedList.Item>
44+
<strong>Company links:</strong> A horizontal list of navigational hyperlinks such as Privacy Policy, Terms &
45+
Conditions, etc. Offers users access to important legal or informational resources.
46+
</DxcBulletedList.Item>
47+
</DxcBulletedList>
48+
</>
49+
),
50+
},
51+
{
52+
title: "Variants",
53+
content: (
54+
<>
55+
<DxcParagraph>
56+
To maintain consistency in layout flexibility and brand presentation, the footer offers three primary
57+
variants: <strong>Default</strong>, <strong>With Navigation</strong>, and <strong>Small</strong>.
58+
</DxcParagraph>
59+
<DxcBulletedList>
60+
<DxcBulletedList.Item>
61+
<strong>Default:</strong> provides a balanced layout with branding and essential legal links. It offers a
62+
clean, uncluttered appearance suitable for most standard applications.
63+
</DxcBulletedList.Item>
64+
<DxcBulletedList.Item>
65+
<strong>With Navigation:</strong> includes additional navigational sections, enabling users to quickly
66+
access key areas of the site. This layout is ideal for content-heavy pages or enterprise-level applications
67+
requiring enhanced footer functionality.
68+
</DxcBulletedList.Item>
69+
<DxcBulletedList.Item>
70+
<strong>Small:</strong> offers a compact version of the footer, typically limited to branding and minimal
71+
legal text. It's best suited for lightweight experiences, login pages, or environments with constrained
72+
vertical space.
73+
</DxcBulletedList.Item>
74+
</DxcBulletedList>
75+
<Figure caption="Footer variants">
76+
<Image src={variants} alt="Application layout design specifications" />
77+
</Figure>
78+
<DxcParagraph>
79+
Choosing between these variants helps tailor the footer to a wide range of contexts, whether prioritizing
80+
simplicity, providing extended navigation, or optimizing for space efficiency.
81+
</DxcParagraph>
82+
</>
83+
),
84+
},
85+
{
86+
title: "Best practices",
87+
content: (
88+
<>
89+
<DxcBulletedList>
90+
<DxcBulletedList.Item>
91+
<strong>Dock the footer to the bottom of the page:</strong> the footer should remain fixed at the bottom
92+
edge of the viewport and not scroll with the page content to maintain visibility and separation from dynamic
93+
areas.
94+
</DxcBulletedList.Item>
95+
<DxcBulletedList.Item>
96+
<strong>Ensure full-width alignment:</strong> the footer container should always span the full width of the
97+
screen to create a clean, structured boundary and support responsive behavior across breakpoints.
98+
</DxcBulletedList.Item>
99+
<DxcBulletedList.Item>
100+
<strong>Display copyright information on the right:</strong> consistently place legal disclaimers or
101+
copyright text aligned to the right edge of the footer to support predictable user expectations.
102+
</DxcBulletedList.Item>
103+
<DxcBulletedList.Item>
104+
<strong>Use a simplified or alternate logo:</strong> consider using a smaller or alternative version of the
105+
brand logo (isotype, imagotype, or monochrome variant) rather than duplicating the main header image to
106+
reduce visual redundancy.
107+
</DxcBulletedList.Item>
108+
<DxcBulletedList.Item>
109+
<strong>Limit the number of links:</strong> include only the most essential company links (e.g., Terms,
110+
Privacy, Accessibility) to avoid overwhelming users with excessive options.
111+
</DxcBulletedList.Item>
112+
<DxcBulletedList.Item>
113+
<strong>Select the most appropriate variant for context:</strong> choose the footer variant that best fits
114+
the content density and user goals of the page.
115+
</DxcBulletedList.Item>
116+
</DxcBulletedList>
117+
</>
118+
),
119+
},
120+
];
121+
122+
const FooterOverviewPage = () => (
123+
<DxcFlex direction="column" gap="4rem">
124+
<QuickNavContainerLayout>
125+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
126+
</QuickNavContainerLayout>
127+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx" />
128+
</DxcFlex>
129+
);
130+
131+
export default FooterOverviewPage;

‎apps/website/screens/components/footer/overview/images/footer_anatomy.png‎

36.3 KB
Loading

‎apps/website/screens/components/footer/overview/images/footer_variants.png‎

77 KB
Loading

0 commit comments

Comments
 (0)