Skip to content

Conversation

@stephaniehobson
Copy link
Contributor

@stephaniehobson stephaniehobson commented May 13, 2025

Description

  • Grey headers
  • Horizontal line on mobile
  • Larger font for legal
  • Terms are a vertical list at smallest screen size
  • Tweaks to spacing

  • I have documented this change in the design system.
  • I have recorded this change in CHANGELOG.md.

Issue

Fix #1061
Fix #1063

Testing

http://localhost:3000/components/detail/footer
http://localhost:3000/components/detail/example-basic

https://colourcontrast.cc/?background=000000&foreground=bfbfc9

Before and after:

before after

- Grey headers
- Horiztonal line on mobile
- Larger font for legal
- Terms are a vertical list at smallest screen size
- Tweaks to spacing
@stephaniehobson stephaniehobson added Review: XS Code review time: 30 mins or less Needs:Review 👋 Ready for Developer Review labels May 13, 2025
@maureenlholland maureenlholland self-assigned this May 14, 2025
Copy link
Collaborator

@maureenlholland maureenlholland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checked across breakpoints & with/without JS. LGTM! r+wc 🦶

1 request for comment clarification & 1 question around link hover styles


## Migration Tips

* Un-customized implementations of the footer will not break. If you have made customizations review it at all breakpoints.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

clear: both;
color: $color-white;
margin: 0;
padding-top: $spacing-lg;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹

a:visited {
color: $color-light-gray-50;

&:hover,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

non-blocking: is the hover/active/focus text-decoration rule necessary here? It seems to already be covered by default link styles

// Footer secondary contains language selector, social icons, legal, and license

.mzp-c-footer-secondary {
@include text-body-xs;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

Co-authored-by: maureenlholland <19650432+maureenlholland@users.noreply.github.com>
@stephaniehobson stephaniehobson merged commit 97b5fbd into main May 14, 2025
1 check passed
@stephaniehobson stephaniehobson deleted the footer branch May 14, 2025 18:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs:Review 👋 Ready for Developer Review Review: XS Code review time: 30 mins or less

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Component Change Request: Footer Line in footer not visible on smaller screens.

3 participants