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.

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
Merged

Add v2 release banner #689

merged 9 commits into from Nov 14, 2018

Conversation

saracope
Copy link
Contributor

@saracope 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 a team November 6, 2018 19:28
@saracope
Copy link
Contributor Author

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
Copy link
Member

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...

_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 Show resolved Hide resolved
thisisdano and others added 4 commits November 9, 2018 13:23
Co-Authored-By: saracope <sara.cope@gsa.gov>
Co-Authored-By: saracope <sara.cope@gsa.gov>
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>
Copy link
Member

Choose a reason for hiding this comment

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

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

Suggested change
<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
Copy link
Member

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

Copy link
Member

@thisisdano thisisdano left a comment

Choose a reason for hiding this comment

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

Updated and approved!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants