Skip to content

Commit ba4b4fd

Browse files
JialeclJialecl
authored
Merge pull request #2326 from dxc-technology/PelayoFelgueroso/footer-reimplementation
New Footer reimplementation
2 parents 7cd5f04 + d2ad3d0 commit ba4b4fd

File tree

13 files changed

+939
-292
lines changed

13 files changed

+939
-292
lines changed

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

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,22 @@ import DocFooter from "@/common/DocFooter";
44
import StatusBadge from "@/common/StatusBadge";
55
import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
66

7+
const bottomLinksTypeString = `{
8+
href: string;
9+
text: string;
10+
}[]`;
11+
712
const logoTypeString = `{
8-
href?: string;
913
src: string;
10-
title?: string;
14+
alt: string;
1115
}`;
1216

17+
const socialLinkTypeString = `{
18+
href: string;
19+
title: string;
20+
logo: string | SVG;
21+
}[]`;
22+
1323
const sections = [
1424
{
1525
title: "Props",
@@ -27,7 +37,7 @@ const sections = [
2737
<tr>
2838
<td>bottomLinks</td>
2939
<td>
30-
<TableCode>{"{ href: string; text: string; }[]"}</TableCode>
40+
<ExtendedTableCode>{bottomLinksTypeString}</ExtendedTableCode>
3141
</td>
3242
<td>
3343
An array of objects representing the links that will be rendered at the bottom part of the footer. Each
@@ -46,9 +56,12 @@ const sections = [
4656
<tr>
4757
<td>children</td>
4858
<td>
49-
<TableCode>React.ReactNode</TableCode>
59+
<TableCode>ReactNode</TableCode>
60+
</td>
61+
<td>
62+
Contains DxcFooter.LeftContent and DxcFooter.RightContent components to customize the left and right
63+
content of the footer respectively.
5064
</td>
51-
<td>The center section of the footer. Can be used to render custom content in this area.</td>
5265
<td>-</td>
5366
</tr>
5467
<tr>
@@ -63,33 +76,33 @@ const sections = [
6376
<td>
6477
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
6578
<StatusBadge status="new" />
66-
logo
79+
leftContent
6780
</DxcFlex>
6881
</td>
6982
<td>
70-
<td>
71-
<TableCode>{"Logo"}</TableCode>
72-
<p>
73-
being <Code>Logo</Code> an object with the following properties:
74-
</p>
75-
<ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
76-
</td>
83+
<TableCode>ReactNode</TableCode>
7784
</td>
78-
<td>Logo to be displayed inside the header.</td>
85+
<td>Content to be displayed on the left side of the footer under the logo.</td>
7986
<td>-</td>
8087
</tr>
8188
<tr>
82-
<td>margin</td>
8389
<td>
84-
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'</TableCode>
90+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
91+
<StatusBadge status="new" />
92+
logo
93+
</DxcFlex>
94+
</td>
95+
<td>
96+
<td>
97+
<ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
98+
</td>
8599
</td>
86-
<td>Size of the top margin to be applied to the footer.</td>
100+
<td>Logo to be displayed inside the footer.</td>
87101
<td>-</td>
88102
</tr>
89103
<tr>
90104
<td>
91105
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
92-
<StatusBadge status="new" />
93106
mode
94107
</DxcFlex>
95108
</td>
@@ -111,12 +124,23 @@ const sections = [
111124
<TableCode>'default'</TableCode>
112125
</td>
113126
</tr>
127+
<tr>
128+
<td>
129+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
130+
<StatusBadge status="new" />
131+
rightContent
132+
</DxcFlex>
133+
</td>
134+
<td>
135+
<TableCode>ReactNode</TableCode>
136+
</td>
137+
<td>Content to be displayed on the right side of the footer before the socialLinks if provided.</td>
138+
<td>-</td>
139+
</tr>
114140
<tr>
115141
<td>socialLinks</td>
116142
<td>
117-
<TableCode>
118-
{`{ href: string; title: string; logo: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); }[]`}
119-
</TableCode>
143+
<ExtendedTableCode>{socialLinkTypeString}</ExtendedTableCode>
120144
</td>
121145
<td>
122146
An array of objects representing the links that will be rendered as icons at the top-right side of the
@@ -148,7 +172,8 @@ const sections = [
148172
<TableCode>number</TableCode>
149173
</td>
150174
<td>
151-
Value of the <Code>tabindex</Code> for all interactive elements, except those inside the custom area.
175+
Value of the <Code>tabindex</Code> for all interactive elements, except those inside the leftContent and
176+
rightContent.
152177
</td>
153178
<td>
154179
<TableCode>0</TableCode>
@@ -158,29 +183,6 @@ const sections = [
158183
</DxcTable>
159184
),
160185
},
161-
{
162-
title: "Examples",
163-
subSections: [
164-
{
165-
title: "Footer in application layout",
166-
content: (
167-
<iframe
168-
src="https://codesandbox.io/embed/rough-https-9oduyh?fontsize=14&hidenavigation=1&theme=dark"
169-
style={{
170-
width: "100%",
171-
minHeight: "500px",
172-
border: "0",
173-
borderRadius: "4px",
174-
overflow: "hidden",
175-
}}
176-
title="Footer and header"
177-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
178-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
179-
/>
180-
),
181-
},
182-
],
183-
},
184186
];
185187

186188
const FooterCodePage = () => {

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

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ const sections = [
3131
<strong>Logo:</strong> Represents the brand identity visually. Positioned on the left side, it helps
3232
reinforce company recognition across all pages.
3333
</DxcBulletedList.Item>
34+
<DxcBulletedList.Item>
35+
<strong>Border:</strong> Marks the upper boundary of the header to visually separate it from the main
36+
content.
37+
</DxcBulletedList.Item>
3438
<DxcBulletedList.Item>
3539
<strong>Social icons:</strong> A set of clickable icons linking to the company's social media platforms
3640
(e.g., LinkedIn, Facebook). Placed on the right side for easy visibility and access.
@@ -43,6 +47,12 @@ const sections = [
4347
<strong>Company links:</strong> A horizontal list of navigational hyperlinks such as Privacy Policy, Terms &
4448
Conditions, etc. Offers users access to important legal or informational resources.
4549
</DxcBulletedList.Item>
50+
<DxcBulletedList.Item>
51+
<strong>Left slot:</strong> Commonly used for short informational paragraphs or contact details.
52+
</DxcBulletedList.Item>
53+
<DxcBulletedList.Item>
54+
<strong>Right slot:</strong> Commonly used for additional links, buttons, forms, or call to action.
55+
</DxcBulletedList.Item>
4656
</DxcBulletedList>
4757
</>
4858
),
@@ -52,21 +62,22 @@ const sections = [
5262
content: (
5363
<>
5464
<DxcParagraph>
55-
To maintain consistency in layout flexibility and brand presentation, the footer offers three primary
56-
variants: <strong>Default</strong>, <strong>With Navigation</strong>, and <strong>Small</strong>.
65+
To maintain consistency in layout flexibility and brand presentation, the footer offers two primary variants:{" "}
66+
<strong>Default</strong> and <strong>Reduced</strong>.
5767
</DxcParagraph>
5868
<DxcBulletedList>
5969
<DxcBulletedList.Item>
6070
<strong>Default:</strong> provides a balanced layout with branding and essential legal links. It offers a
6171
clean, uncluttered appearance suitable for most standard applications.
72+
<DxcBulletedList>
73+
<DxcBulletedList.Item>
74+
Users can add content to the Default view using custom code such as content sections, text, links, and
75+
other components for increased customization based on their specific needs.
76+
</DxcBulletedList.Item>
77+
</DxcBulletedList>
6278
</DxcBulletedList.Item>
6379
<DxcBulletedList.Item>
64-
<strong>With Navigation:</strong> includes additional navigational sections, enabling users to quickly
65-
access key areas of the site. This layout is ideal for content-heavy pages or enterprise-level applications
66-
requiring enhanced footer functionality.
67-
</DxcBulletedList.Item>
68-
<DxcBulletedList.Item>
69-
<strong>Small:</strong> offers a compact version of the footer, typically limited to branding and minimal
80+
<strong>Reduced:</strong> offers a compact version of the footer, typically limited to branding and minimal
7081
legal text. It's best suited for lightweight experiences, login pages, or environments with constrained
7182
vertical space.
7283
</DxcBulletedList.Item>
@@ -87,13 +98,15 @@ const sections = [
8798
<>
8899
<DxcBulletedList>
89100
<DxcBulletedList.Item>
90-
<strong>Dock the footer to the bottom of the page:</strong> the footer should remain fixed at the bottom
91-
edge of the viewport and not scroll with the page content to maintain visibility and separation from dynamic
92-
areas.
101+
<strong>Dock the footer at the bottom of the page:</strong> The footer should appear after the content at
102+
the bottom page at all times. If the page content exceeds the current view and the user needs to scroll to
103+
reach the bottom of the content and see the footer.
93104
</DxcBulletedList.Item>
94105
<DxcBulletedList.Item>
95-
<strong>Ensure full-width alignment:</strong> the footer container should always span the full width of the
96-
screen to create a clean, structured boundary and support responsive behavior across breakpoints.
106+
<strong>Ensure full-width alignment:</strong> By default, the footer spans the entire width of the page
107+
excluding the Sidenav. For cases when the left Sidenav is not used, the footer container should always span
108+
the full width of the screen to create a clean, structured boundary and support responsive behavior across
109+
breakpoints.
97110
</DxcBulletedList.Item>
98111
<DxcBulletedList.Item>
99112
<strong>Display copyright information on the right:</strong> consistently place legal disclaimers or

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

7.5 KB
Loading

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

-40.6 KB
Loading

‎packages/lib/src/footer/Footer.accessibility.test.tsx‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ import { render } from "@testing-library/react";
22
import { axe, formatRules } from "../../test/accessibility/axe-helper";
33
import DxcFooter from "./Footer";
44
import rules from "../../test/accessibility/rules/specific/footer/disabledRules";
5+
import { vi } from "vitest";
6+
7+
global.ResizeObserver = vi.fn().mockImplementation(() => ({
8+
observe: vi.fn(),
9+
unobserve: vi.fn(),
10+
disconnect: vi.fn(),
11+
}));
512

613
const disabledRules = {
714
rules: formatRules(rules),
@@ -90,22 +97,31 @@ const bottom = [
9097
describe("Footer component accessibility tests", () => {
9198
it("Should not have basic accessibility issues", async () => {
9299
const { container } = render(
93-
<DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom} margin="small" mode="default">
94-
<div>
95-
<a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
96-
</div>
97-
</DxcFooter>
100+
<DxcFooter
101+
copyright="Copyright"
102+
socialLinks={social}
103+
bottomLinks={bottom}
104+
mode="default"
105+
leftContent={
106+
<>
107+
<div>
108+
<a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
109+
</div>
110+
</>
111+
}
112+
rightContent={
113+
<div>
114+
<a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
115+
</div>
116+
}
117+
/>
98118
);
99119
const results = await axe(container, disabledRules);
100120
expect(results.violations).toHaveLength(0);
101121
});
102122
it("Should not have basic accessibility issues for reduced mode", async () => {
103123
const { container } = render(
104-
<DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom} margin="small" mode="reduced">
105-
<div>
106-
<a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
107-
</div>
108-
</DxcFooter>
124+
<DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom} mode="reduced" />
109125
);
110126
const results = await axe(container, disabledRules);
111127
expect(results.violations).toHaveLength(0);

0 commit comments

Comments
 (0)