Update design kit links and other assorted fixes #3041
Conversation
thisisdano
left a comment
thisisdano
left a comment
There was a problem hiding this comment.
Added code comments
| gem 'rspec-core' | ||
| gem 'rspec-expectations' | ||
|
|
||
| gem "webrick", "~> 1.7" |
There was a problem hiding this comment.
This does not do anything
There was a problem hiding this comment.
Confirming, this didn't affect anything for me locally.
There was a problem hiding this comment.
I have a hunch this was necessary at some point (having been looking at old blog posts of people trying to get jekyll working over the years) but i guess not anymore. Ty for your service, webrick.
| <svg class="usa-icon" aria-hidden="true" focusable="false" role="img"> | ||
| <use href="{{ site.baseurl }}/assets/img/sprite.svg#file_download"></use> | ||
| </svg> |
There was a problem hiding this comment.
Adds download icon
| <svg class="usa-icon" aria-hidden="true" focusable="false" role="img"> | ||
| <use href="{{ site.baseurl }}/assets/img/sprite.svg#file_download"></use> | ||
| </svg> |
There was a problem hiding this comment.
Adds download icon
| <svg class="usa-icon" aria-hidden="true" focusable="false" role="img"> | ||
| <use href="{{ site.baseurl }}/assets/img/sprite.svg#file_download"></use> | ||
| </svg> |
There was a problem hiding this comment.
Adds download icon
| href="https://github.com/uswds/uswds-for-designers/releases/download/v3.0.0/uswds-for-designers-v3.0.0.zip" | ||
| onclick="ga('send', 'event', 'Downloaded design files', 'Clicked download design files button inside site');"> |
There was a problem hiding this comment.
This will work once we publish uswds-for-designers. I've collected everything into a single link. The previous iteration had two links that led to the same file only to collect an analytics event. This type of information isn't worth the UX hit
| letter-spacing: letter-spacing(1); | ||
| margin-bottom: units(1); | ||
| margin-top: 0; | ||
| text-transform: uppercase; |
There was a problem hiding this comment.
Added to remove the need for the typeset-h6 mixin that I'll actually remove in the followup PR to this one
| .link-download-subtext { | ||
| margin-left: units(3); | ||
| } | ||
|
|
||
| &::before { | ||
| @include u-square(1.5); | ||
| background: url("#{$image-path}/icon-download.png") no-repeat 0 0; | ||
| background: url("#{$image-path}/icon-download.svg") no-repeat 0 0; | ||
| background-size: 100%; | ||
| content: ""; | ||
| display: inline-block; | ||
| margin-bottom: 0; | ||
| margin-right: units(1.5); | ||
| .link__group-download { | ||
| .link-download { | ||
| @include u-measure(5); | ||
| align-items: center; | ||
| background-color: color("blue-warm-5"); | ||
| border-radius: radius("md"); | ||
| display: flex; | ||
| padding: units(2); | ||
| } | ||
| } | ||
|
|
||
| .link-download-subtext { | ||
| margin-left: units(3); | ||
| .usa-icon { | ||
| height: units(3); | ||
| margin-right: units(1); | ||
| width: units(3); | ||
| } |
There was a problem hiding this comment.
Use a more appealing download link style
|
|
||
| .usa-accordion__heading { | ||
| @include typeset("lang", $theme-body-font-size, 1); | ||
| } |
There was a problem hiding this comment.
Use Public Sans in our docs accordions
There was a problem hiding this comment.
issue: This affects the accordion preview too.
| .site-banner { | ||
| $banner-context: "Banner"; | ||
| $site-banner-background-color: "ink"; |
There was a problem hiding this comment.
This whole section is 90% redundant
There was a problem hiding this comment.
@thisisdano glad to see these styles removed. This work closes #1962.
I went ahead and closed the previous PR #2743.
|
|
||
| .usa-alert.site-alert { | ||
| .usa-alert__body { | ||
| @include typeset("lang"); | ||
| } | ||
|
|
||
| .usa-alert__heading { | ||
| @include typeset("lang", "lg", 1); | ||
| } | ||
| } |
There was a problem hiding this comment.
Use Public Sans in our UX alerts
There was a problem hiding this comment.
issue: On File Input the first alert is public sans, but the one in guidance is still source sans pro.
There was a typo in the release ZIP, unfortunately
mejiaj
left a comment
mejiaj
left a comment
There was a problem hiding this comment.
LGTM, issues resolved. Thanks!
amyleadem
left a comment
amyleadem
left a comment
There was a problem hiding this comment.
Looking pretty good! I've added a few comments below with some change requests.
Confirmed the following in Safari, Firefox, and Chromium at mobile and desktop widths:
- Confirm the download links work as expected on the Getting started for Designers page
- Note, the “USWDS design kit for Figma” link still points to the Truss implementation. I’ve added a comment below asking if we want to update that
- Confirm that the updated link styles on the Getting started for Designers pageare consistent across screen widths and matches site styles
- Review outer margin alignment of all page elements to
widescreen- Noting that there is a slight misalignment in the left margin for the usa-nav at desktop widths
- Noting that there is a slight misalignment in the left margin for the usa-nav at desktop widths
- Check that banner displays as expected
- Check that the blue-header accordions use Public Sans
- Check that UX info alerts use Public Sans
- Check that the a11y notes on component pages use Public Sans
- On any page, at desktop width, check that the search bar and buttons in the nav are properly vertically centered in the dark blue bar, and are aligned with other elements on the right margin.
- Check that
webrickis gone from the Gemfile - Check that it does not affect Jekyll build
- Confirm all changelogs are present and accurate
- Note: We need a changelog on the “Getting started for designers” page about the link and content updates there.
pages/documentation/getting-started-designers/designers/overview.md
Outdated
Show resolved
Hide resolved
pages/documentation/getting-started-designers/designers/overview.md
Outdated
Show resolved
Hide resolved
Co-authored-by: Amy Leadem <93996430+amyleadem@users.noreply.github.com>
|
Thanks @amyleadem — added the copy changes, working on the other issues now |
|
@amyleadem This is now ready for re-review |
amyleadem
left a comment
amyleadem
left a comment
There was a problem hiding this comment.
Found just one small regression in the mobile nav, documented in the comment below. Other than that, looking good!
css/custom-styles/_site-header.scss
Outdated
|
|
||
| .site-nav__inner { | ||
| min-height: units($site-inner-nav-height); | ||
| padding-left: units(2); |
There was a problem hiding this comment.
issue: I noticed a regression in the mobile nav related to this update:
We'll need to target the desktop display only for this padding.
|
OK, fixed! |
|
I fixed a few more Public Sans issues while I was at it: Accordions in migrations docsold: new: Various alertsold: new: Demo buttonsold: new: What's new cardsold: new: Security releasesold: new: |
heymatthenry
left a comment
heymatthenry
left a comment
There was a problem hiding this comment.
I know this was a journey, @thisisdano. Congrats on reaching the farther shore.
Adds links and references to the USWDS design kit for Figma and fixes a few lingering issues.
Adds links to USWDS design kit for Figma
How to check: Review the links on the Getting started for Designers page →
Improves link formatting on Designers page
How to check: Review the links on the Getting started for Designers page →
Aligns outer margin of all page elements to
widescreenHow to check: On all pages, the banner, header, and main text section should all be centered on the screen, aligning with the identifier and the footer. See, for example, the homepage →
Removes extraneous banner styles
How to check: Check that banner displays as expected. Look at all the code cut from custom styles.
Use Public Sans for documentation accordions
How to check: Check that the blue-header accordions on a page like Accordion use Public Sans.
Use Public Sans for UX alerts
How to check: Check that UX info alerts, like the one on File Input, use Public Sans
Properly center secondary nav at desktop width
How to check: On any page, at desktop width, check that the searh bar and buttons in the nav are properly vertically centered in the dark blue bar, and are aligned with other elements on the right margin.
Remove extraneous
webrickgem from GemfileHow to check: Check that
webrickis gone from the Gemfile at that it has effect on building with Jekyll.