-
Notifications
You must be signed in to change notification settings - Fork 17
Footer redesign #2216
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.
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
Merged
Footer redesign #2216
Changes from all commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
23ec824
Updated most of the styles according to tokens
5379d3d
Fixed footer API to allow logos
4601caa
Added documentation
73dcd77
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
b4a8c9d
Merge branch 'master' into Mil4n0r/tokens-footer
Jialecl 02777e2
Replaced paddings with margins
6d86842
Merge branch 'Mil4n0r/tokens-footer' of github.com:dxc-technology/hal…
ec9c885
Fixed typos
0ca5576
Added color to children container
81dec4b
Added DxcLink to Footer stories
7121d5c
Fixed container padding for responsive content
e244403
Added logo to props in doc
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 FooterPageLayout from "screens/components/footer/FooterPageLayout"; | ||
| import FooterCodePage from "screens/components/footer/code/FooterCodePage"; | ||
|
|
||
| const Code = () => ( | ||
| <> | ||
| <Head> | ||
| <title>Footer code — Halstack Design System</title> | ||
| </Head> | ||
| <FooterCodePage /> | ||
| </> | ||
| ); | ||
|
|
||
| Code.getLayout = (page: ReactElement) => <FooterPageLayout>{page}</FooterPageLayout>; | ||
|
|
||
| export default Code; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 FooterPageLayout from "screens/components/footer/FooterPageLayout"; | ||
| import FooterCodePage from "screens/components/footer/code/FooterCodePage"; | ||
| import FooterOverviewPage from "screens/components/footer/overview/FooterOverviewPage"; | ||
|
|
||
| const Index = () => { | ||
| return ( | ||
| <> | ||
| <Head> | ||
| <title>Footer — Halstack Design System</title> | ||
| </Head> | ||
| <FooterCodePage></FooterCodePage> | ||
| </> | ||
| ); | ||
| }; | ||
| const Index = () => ( | ||
| <> | ||
| <Head> | ||
| <title>Footer — Halstack Design System</title> | ||
| </Head> | ||
| <FooterOverviewPage /> | ||
| </> | ||
| ); | ||
|
|
||
| Index.getLayout = function getLayout(page: ReactElement) { | ||
| return <FooterPageLayout>{page}</FooterPageLayout>; | ||
| }; | ||
| Index.getLayout = (page: ReactElement) => <FooterPageLayout>{page}</FooterPageLayout>; | ||
|
|
||
| export default Index; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
131 changes: 131 additions & 0 deletions
131
apps/website/screens/components/footer/overview/FooterOverviewPage.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; | ||
| import DocFooter from "@/common/DocFooter"; | ||
| import QuickNavContainer from "@/common/QuickNavContainer"; | ||
| import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; | ||
| import anatomy from "./images/footer_anatomy.png"; | ||
| import variants from "./images/footer_variants.png"; | ||
| import Image from "@/common/Image"; | ||
| import Figure from "@/common/Figure"; | ||
|
|
||
| const sections = [ | ||
| { | ||
| title: "Introduction", | ||
| content: ( | ||
| <DxcParagraph> | ||
| The footer is used as the final section of a page to display utility elements such as legal disclaimers, | ||
| secondary links, copyright information, or the brand logo. Its purpose is to reinforce brand identity and | ||
| provide consistent access across digital experiences without disrupting the main user flow. | ||
| </DxcParagraph> | ||
| ), | ||
| }, | ||
| { | ||
| title: "Anatomy", | ||
| content: ( | ||
| <> | ||
| <Image src={anatomy} alt="Footer's anatomy" /> | ||
| <DxcBulletedList type="number"> | ||
| <DxcBulletedList.Item> | ||
| <strong>Container:</strong> The outer wrapper that defines the overall layout, padding, and alignment of all | ||
| footer content. Ensures consistency across screen sizes. | ||
| </DxcBulletedList.Item> | ||
| <DxcBulletedList.Item> | ||
| <strong>Logo:</strong> Represents the brand identity visually. Positioned on the left side, it helps | ||
| reinforce company recognition across all pages. | ||
| </DxcBulletedList.Item> | ||
| <DxcBulletedList.Item> | ||
| <strong>Social icons:</strong> A set of clickable icons linking to the company’s social media platforms | ||
| (e.g., LinkedIn, Facebook). Placed on the right side for easy visibility and access. | ||
| </DxcBulletedList.Item> | ||
| <DxcBulletedList.Item> | ||
| <strong>Copyright:</strong> Text displaying legal ownership of the content. Ensures users know the site is | ||
| officially owned. | ||
| </DxcBulletedList.Item> | ||
| <DxcBulletedList.Item> | ||
| <strong>Company links:</strong> A horizontal list of navigational hyperlinks such as Privacy Policy, Terms & | ||
| Conditions, etc. Offers users access to important legal or informational resources. | ||
| </DxcBulletedList.Item> | ||
| </DxcBulletedList> | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| title: "Variants", | ||
| content: ( | ||
| <> | ||
| <DxcParagraph> | ||
| To maintain consistency in layout flexibility and brand presentation, the footer offers three primary | ||
| variants: <strong>Default</strong>, <strong>With Navigation</strong>, and <strong>Small</strong>. | ||
| </DxcParagraph> | ||
| <DxcBulletedList> | ||
| <DxcBulletedList.Item> | ||
| <strong>Default:</strong> provides a balanced layout with branding and essential legal links. It offers a | ||
| clean, uncluttered appearance suitable for most standard applications. | ||
| </DxcBulletedList.Item> | ||
| <DxcBulletedList.Item> | ||
| <strong>With Navigation:</strong> includes additional navigational sections, enabling users to quickly | ||
| access key areas of the site. This layout is ideal for content-heavy pages or enterprise-level applications | ||
| requiring enhanced footer functionality. | ||
| </DxcBulletedList.Item> | ||
| <DxcBulletedList.Item> | ||
| <strong>Small:</strong> offers a compact version of the footer, typically limited to branding and minimal | ||
| legal text. It's best suited for lightweight experiences, login pages, or environments with constrained | ||
| vertical space. | ||
| </DxcBulletedList.Item> | ||
| </DxcBulletedList> | ||
| <Figure caption="Footer variants"> | ||
| <Image src={variants} alt="Application layout design specifications" /> | ||
| </Figure> | ||
| <DxcParagraph> | ||
| Choosing between these variants helps tailor the footer to a wide range of contexts, whether prioritizing | ||
| simplicity, providing extended navigation, or optimizing for space efficiency. | ||
| </DxcParagraph> | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| title: "Best practices", | ||
| content: ( | ||
| <> | ||
| <DxcBulletedList> | ||
| <DxcBulletedList.Item> | ||
| <strong>Dock the footer to the bottom of the page:</strong> the footer should remain fixed at the bottom | ||
| edge of the viewport and not scroll with the page content to maintain visibility and separation from dynamic | ||
| areas. | ||
| </DxcBulletedList.Item> | ||
| <DxcBulletedList.Item> | ||
| <strong>Ensure full-width alignment:</strong> the footer container should always span the full width of the | ||
| screen to create a clean, structured boundary and support responsive behavior across breakpoints. | ||
| </DxcBulletedList.Item> | ||
| <DxcBulletedList.Item> | ||
| <strong>Display copyright information on the right:</strong> consistently place legal disclaimers or | ||
| copyright text aligned to the right edge of the footer to support predictable user expectations. | ||
| </DxcBulletedList.Item> | ||
| <DxcBulletedList.Item> | ||
| <strong>Use a simplified or alternate logo:</strong> consider using a smaller or alternative version of the | ||
| brand logo (isotype, imagotype, or monochrome variant) rather than duplicating the main header image to | ||
| reduce visual redundancy. | ||
| </DxcBulletedList.Item> | ||
| <DxcBulletedList.Item> | ||
| <strong>Limit the number of links:</strong> include only the most essential company links (e.g., Terms, | ||
| Privacy, Accessibility) to avoid overwhelming users with excessive options. | ||
| </DxcBulletedList.Item> | ||
| <DxcBulletedList.Item> | ||
| <strong>Select the most appropriate variant for context:</strong> choose the footer variant that best fits | ||
| the content density and user goals of the page. | ||
| </DxcBulletedList.Item> | ||
| </DxcBulletedList> | ||
| </> | ||
| ), | ||
| }, | ||
| ]; | ||
|
|
||
| const FooterOverviewPage = () => ( | ||
| <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/footer/overview/FooterOverviewPage.tsx" /> | ||
| </DxcFlex> | ||
| ); | ||
|
|
||
| export default FooterOverviewPage; | ||
Binary file added
BIN
+36.3 KB
apps/website/screens/components/footer/overview/images/footer_anatomy.png
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
BIN
+77 KB
apps/website/screens/components/footer/overview/images/footer_variants.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.