Skip to content
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

Jump to bottom

Migrate jumbo hero pattern from cf.gov, add new 50/50 hero, update hero grids #1299

Merged
merged 17 commits into from
Nov 2, 2021
Merged

Migrate jumbo hero pattern from cf.gov, add new 50/50 hero, update hero grids #1299

merged 17 commits into from
Nov 2, 2021

Conversation

contolini
Copy link
Member

@contolini contolini commented Sep 20, 2021 •
edited
Loading

Moves the jumbo hero pattern from the cf.gov repo to the DS. A second PR removes it from cf.gov.

Also, adds the new 50/50 hero type and migrates our hero layouts from cf-grid to CSS grid.

Additions

  • Jumbo hero pattern on heroes page
  • 50/50 hero pattern on heroes page

Changes

  • Transitions all hero patterns to CSS grid, away from our cf-grid mixins.

Testing

View the heroes page of the PR preview link below. Due to the DS' layout, it's a little squished so you may want to preview it with consumerfinance.gov:

  1. Pull down this branch.
  2. yarn design-system-link
  3. cd to your local root of consumerfinance.gov and run yarn link @cfpb/cfpb-layout && gulp styles
  4. http://localhost:8000/ should show the new 50/50 hero format.
  5. The current hero patterns (i.e. defaut, bleeding, jumbo) should all look the same.

Screenshots

before after
before after

Notes

Todos

Checklist

  • PR has an informative and human-readable title
  • Changes are limited to a single goal (no scope creep)
  • Code can be automatically merged (no conflicts)
  • Code follows the standards laid out in the CFPB development guidelines
  • Passes all existing automated tests
  • Any change in functionality is tested
  • New functions are documented (with a description, list of inputs, and expected output)
  • Placeholder code is flagged / future todos are captured in comments
  • Visually tested in supported browsers and devices (see checklist below 👇)
  • Project documentation has been updated
  • Reviewers requested with the Reviewers tool ➡️

Testing checklist

Browsers

  • Chrome on desktop
  • Firefox
  • Safari on macOS
  • Edge
  • Internet Explorer 9, 10, and 11
  • Safari on iOS
  • Chrome on Android

Accessibility

  • Keyboard friendly
  • Screen reader friendly

Other

  • Is useable without CSS
  • Is useable without JS
  • Flexible from small to large screens
  • No linting errors or warnings
  • JavaScript tests are passing

@netlify
Copy link

netlify bot commented Sep 20, 2021 •
edited
Loading

✔️ Thanks for the improvements! Browse a preview of your changes using the link below.

🔨 Explore the source changes: 918156c

🔍 Inspect the deploy log: https://app.netlify.com/sites/cfpb-design-system/deploys/6181a519763f140007365ea0

😎 Browse the preview: https://deploy-preview-1299--cfpb-design-system.netlify.app/design-system/search

@contolini contolini mentioned this pull request Sep 21, 2021
Merged
19 tasks
anselmbradford
anselmbradford reviewed Sep 22, 2021
View reviewed changes
docs/pages/heroes.md Outdated Show resolved Hide resolved
docs/pages/heroes.md Outdated Show resolved Hide resolved
docs/pages/heroes.md Show resolved Hide resolved
packages/cfpb-layout/src/molecules/heroes.less Outdated Show resolved Hide resolved
packages/cfpb-layout/src/molecules/heroes.less Outdated Show resolved Hide resolved
packages/cfpb-layout/src/molecules/heroes.less Outdated Show resolved Hide resolved
@contolini contolini force-pushed the jumbo-hero branch 2 times, most recently from 87904bb to 99a9c82 Compare October 26, 2021 15:27
contolini and others added 13 commits October 27, 2021 11:47
@contolini
Migrate jumbo hero pattern from cf.gov to DS
3c039e0
@contolini
Lint some thtings
4aba686
@contolini
Remove redundant heading class
b5e71c6 
The element has an `h1` class in the markup so it's not needed in the
stylesheet.
@contolini
Add jumbo hero 50/50 variation
ba49024
@brandon-rusk @contolini
Added Jumbo hero to variations section
b6bc1a2
@brandon-rusk @contolini
Fixed 50/50 variation implementation
ffeaabf
@brandon-rusk @contolini
WIP
3c2f0e4
@brandon-rusk @contolini
Updated descriptions
a7c7617
@brandon-rusk @contolini
Added jumbo hero image
6a5372b
@contolini
Update jumbo hero variation
125c2f2
@contolini
Update hero documentation indentation, headings, comments
ad0c175
@contolini
Consolidate hero variables
3bd9308
@contolini
Remove 50/50 hero's reliance on Jumbo hero styles
b0e984d 
The 50/50 hero used to be a variation of the Jumbo hero, requiring the
element to have both classes (__jumbo and __50-50). It can now stand on
its own and only needs the latter modifier class. Its documentation has
been moved from the "Variations" to the "Types" section.
@contolini contolini changed the title Migrate jumbo hero pattern from cf.gov to design system Migrate jumbo hero pattern from cf.gov, add new 50/50 hero, update hero grids Nov 2, 2021
@anselmbradford anselmbradford added the lerna-changelog/enhancement lerna label. DO NOT MODIFY label Nov 2, 2021
@anselmbradford anselmbradford merged commit 2642459 into main Nov 2, 2021
@anselmbradford anselmbradford deleted the jumbo-hero branch November 2, 2021 21:09
@chosak chosak mentioned this pull request Nov 3, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chosak chosak chosak left review comments

@anselmbradford anselmbradford anselmbradford approved these changes

Assignees
No one assigned
Labels
lerna-changelog/enhancement lerna label. DO NOT MODIFY
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@contolini @chosak @anselmbradford @brandon-rusk