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

Add v2 release banner #689

Merged
merged 9 commits into from Nov 14, 2018

Conversation

Projects
None yet
2 participants
@saracope
Copy link
Member

saracope commented Nov 6, 2018

Preview

Description

This change adds a news banner to the site in an effort to direct folks to the v2 doc site. It uses the .usa-alert-warning banner with custom text.

*Would like feedback specifically on using the warning banner in this way and the text for this banner @thisisdano

Additional information

screen shot 2018-11-06 at 2 01 53 pm

screen shot 2018-11-06 at 1 54 04 pm

@saracope saracope requested a review from uswds/core Nov 6, 2018

@saracope

This comment has been minimized.

Copy link
Member

saracope commented Nov 9, 2018

Updated this banner, please have a look @thisisdano.
Preview

Changed this to:

  • Only display on the home page
  • Changed banner color from yellow to purple to make it less in your face
  • Removed the icon
  • Stuck it under the nav so as to compete less with the other top-level banner/buttons
  • Updated text and changed docs link to button

screen shot 2018-11-09 at 8 56 50 am

screen shot 2018-11-09 at 9 10 56 am

@thisisdano

This comment has been minimized.

Copy link
Member

thisisdano commented Nov 9, 2018

I like the color, position and overall appearance. I want to tweak the text a bit and make it a little smaller on mobile, but it's close! Specific feedback incoming...

Show resolved Hide resolved _includes/banner-news.html Outdated
Show resolved Hide resolved _includes/banner-news.html Outdated
Show resolved Hide resolved _includes/banner-news.html Outdated
Show resolved Hide resolved css/styleguide.scss

thisisdano and others added some commits Nov 9, 2018

Update _includes/banner-news.html
Co-Authored-By: saracope <sara.cope@gsa.gov>
Update _includes/banner-news.html
Co-Authored-By: saracope <sara.cope@gsa.gov>
Update _includes/banner-news.html
Co-Authored-By: saracope <sara.cope@gsa.gov>

@saracope saracope changed the title Add v2 release banner [WIP-feedback wanted] Add v2 release banner Nov 9, 2018

<div class="site-banner-news" >
<p><strong>USWDS 2.0 is coming soon.</strong>
See what’s new in Version 2.</p>
<a href="https://v2.designsystem.digital.gov" onclick="ga('send', 'event', 'Viewed 2.0 preview', 'Clicked to view 2.0 version from inside site');"><button class="usa-button usa-button-secondary-inverse">Try it now</button></a>

This comment has been minimized.

@thisisdano

thisisdano Nov 13, 2018

Member

Instead of wrapping a button in an a, just give the a element the button classes: usa-button usa-button-secondary-inverse

Suggested change Beta
<a href="https://v2.designsystem.digital.gov" onclick="ga('send', 'event', 'Viewed 2.0 preview', 'Clicked to view 2.0 version from inside site');"><button class="usa-button usa-button-secondary-inverse">Try it now</button></a>
<a href="https://v2.designsystem.digital.gov" onclick="ga('send', 'event', 'Viewed 2.0 preview', 'Clicked to view 2.0 version from inside site');" class="usa-button usa-button-secondary-inverse">Try it now</a>
@thisisdano

This comment has been minimized.

Copy link
Member

thisisdano commented Nov 13, 2018

Couple more things to tighten this up:

  • give site-banner-news 16px of padding all around
  • remove all margin from the p to make the spacing more even
  • text-align:center on the p to center it at mobile
  • give your new a.usa-button 16px margin on the left and right to fix its spacing
  • suggest wrapping See what's new in Version 2 in a span and assigning that span a whitespace: nowrap to prevent bad breaks

Should look something like this:
screen shot 2018-11-13 at 9 14 21 am
screen shot 2018-11-13 at 9 15 08 am

@thisisdano
Copy link
Member

thisisdano left a comment

Updated and approved!

@thisisdano thisisdano merged commit 9305f04 into master Nov 14, 2018

6 checks passed

ci/circleci Your tests passed on CircleCI!
Details
federalist/build The build is complete!
Details
security/snyk - Gemfile.lock (thisisdano) No manifest changes detected
security/snyk - Gemfile.lock (uswds) No manifest changes detected
security/snyk - package.json (thisisdano) No new issues
Details
security/snyk - package.json (uswds) No manifest changes detected

@thisisdano thisisdano deleted the sc_add-v2-news-banner branch Nov 14, 2018

@thisisdano thisisdano referenced this pull request Nov 14, 2018

Merged

2.0.0-beta.4 #2879

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment