bookends 10.0.0 → 10.0.5

data/app/assets/stylesheets/bookends/bookends.scss

@@ -13,3 +13,4 @@
 @import 'search-page';
 @import 'footer';
 @import 'cookie-banner';
+@import 'helpers';

data/app/helpers/bookends/application_helper.rb

@@ -67,6 +67,24 @@ module Bookends
       "#{gravatar_url}/#{hashed_email}?s=#{size}&d=#{default_avatar_url}"
     end
 
+    def link_to_new_window(text, link, options = {})
+      words = text.split(' ')
+      link_to(
+        link, {
+          aria: { label: "#{text} (Opens in new window)" },
+          target: '_blank'
+        }.merge!(options)
+      ) do
+        concat(words[0..-2].join(' '))
+        if words.length > 1
+          concat(' ')
+        end
+        concat(content_tag(:span, class: 'new-window-icon') do
+          words[-1]
+        end)
+      end
+    end
+
     private
 
     def glostick_user

data/app/views/bookends/_footer.html.erb

@@ -1,4 +1,4 @@
-<footer id="heroku-footer">
+<footer id="heroku-footer" role="contentinfo">
   <div class="wrapper">
     <div class="col heroku-footer-links">
       <nav class="col">
@@ -56,41 +56,42 @@
       <form id="bookends-newsletter" accept-charset="UTF-8" action="<%= Bookends::Config.host_www %>/newsletter_signups" method="post">
         <input name="utf8" type="hidden" value="✓">
         <input type="text" name="website" id="bookends-website" placeholder="do not fill this in" tabindex="-1">
-        <input type="email" name="newsletter_signup[email]" id="newsletter_signup_email" placeholder="Your email address" required="required">
+        <label for="newsletter_signup[email]">Your email address:</label>
+        <input type="email" name="newsletter_signup[email]" id="newsletter_signup_email" required="required" aria-required="true">
         <input type="submit" name="commit" value="Go">
         <p id="bookends-newsletter-result" class="hide"></p>
       </form>
       <ul class="social-list">
         <li class="has-dropdown">
-          <a class="heroku-footer-icon-rss" href="<%= Bookends::Config.host_blog %>/feed" target="_blank"> RSS</a>
+          <a class="heroku-footer-icon-rss" href="<%= Bookends::Config.host_blog %>/feed" target="_blank" aria-label="Opens in new window"> RSS</a>
           <div class="dropdown">
             <ul>
-              <li><a href="<%= Bookends::Config.host_blog %>/feed" target="_blank"><span class="heroku-footer-icon-rss"></span>Heroku Blog</a></li>
-              <li><a href="<%= Bookends::Config.host_blog %>/news/feed" target="_blank"><span class="heroku-footer-icon-rss"></span>Heroku News Blog</a></li>
-              <li><a href="<%= Bookends::Config.host_blog %>/engineering/feed" target="_blank"><span class="heroku-footer-icon-rss"></span>Heroku Engineering Blog</a></li>
-              <li><a href="http://feeds.feedburner.com/herokudevcenterarticles" target="_blank"><span class="heroku-footer-icon-rss"></span>Dev Center Articles</a></li>
-              <li><a href="http://feeds.feedburner.com/herokuchangelog" target="_blank"><span class="heroku-footer-icon-rss"></span>Dev Center Changelog</a></li>
-              <li><a href="http://feeds.feedburner.com/herokustatus" target="_blank"><span class="heroku-footer-icon-rss"></span>Heroku Status</a></li>
+              <li><a href="<%= Bookends::Config.host_blog %>/feed" target="_blank" aria-label="Opens in new window"><span class="heroku-footer-icon-rss"></span>Heroku Blog</a></li>
+              <li><a href="<%= Bookends::Config.host_blog %>/news/feed" target="_blank" aria-label="Opens in new window"><span class="heroku-footer-icon-rss"></span>Heroku News Blog</a></li>
+              <li><a href="<%= Bookends::Config.host_blog %>/engineering/feed" target="_blank" aria-label="Opens in new window"><span class="heroku-footer-icon-rss"></span>Heroku Engineering Blog</a></li>
+              <li><a href="http://feeds.feedburner.com/herokudevcenterarticles" target="_blank" aria-label="Opens in new window"><span class="heroku-footer-icon-rss"></span>Dev Center Articles</a></li>
+              <li><a href="http://feeds.feedburner.com/herokuchangelog" target="_blank" aria-label="Opens in new window"><span class="heroku-footer-icon-rss"></span>Dev Center Changelog</a></li>
+              <li><a href="http://feeds.feedburner.com/herokustatus" target="_blank" aria-label="Opens in new window"><span class="heroku-footer-icon-rss"></span>Heroku Status</a></li>
             </ul>
           </div>
         </li>
-        <li><a class="heroku-footer-icon-podcasts" href="<%= Bookends::Config.host_www %>/podcasts" target="_blank" title="Heroku Podcasts">Podcasts</a></li>
+        <li><a class="heroku-footer-icon-podcasts" href="<%= Bookends::Config.host_www %>/podcasts" target="_blank" aria-label="Opens in new window" title="Heroku Podcasts">Podcasts</a></li>
         <li class="has-dropdown">
-          <a class="heroku-footer-icon-twitter" href="https://twitter.com/heroku" target="_blank"> Twitter</a>
+          <a class="heroku-footer-icon-twitter" href="https://twitter.com/heroku" target="_blank" aria-label="Opens in new window"> Twitter</a>
           <div class="dropdown">
             <ul>
-              <li><a href="https://twitter.com/heroku" target="_blank"><span class="heroku-footer-icon-twitter"></span>Heroku</a></li>
-              <li><a href="https://twitter.com/herokudevcenter" target="_blank"><span class="heroku-footer-icon-twitter"></span>Dev Center Articles</a></li>
-              <li><a href="https://twitter.com/herokuchangelog" target="_blank"><span class="heroku-footer-icon-twitter"></span>Dev Center Changelog</a></li>
-              <li><a href="https://twitter.com/herokustatus" target="_blank"><span class="heroku-footer-icon-twitter"></span>Heroku Status</a></li>
+              <li><a href="https://twitter.com/heroku" target="_blank" aria-label="Opens in new window"><span class="heroku-footer-icon-twitter"></span>Heroku</a></li>
+              <li><a href="https://twitter.com/herokudevcenter" target="_blank" aria-label="Opens in new window"><span class="heroku-footer-icon-twitter"></span>Dev Center Articles</a></li>
+              <li><a href="https://twitter.com/herokuchangelog" target="_blank" aria-label="Opens in new window"><span class="heroku-footer-icon-twitter"></span>Dev Center Changelog</a></li>
+              <li><a href="https://twitter.com/herokustatus" target="_blank" aria-label="Opens in new window"><span class="heroku-footer-icon-twitter"></span>Heroku Status</a></li>
             </ul>
           </div>
         </li>
-        <li><a class="heroku-footer-icon-facebook" href="https://facebook.com/heroku" target="_blank" title="Heroku's Facebook">Facebook</a></li>
-        <li><a class="heroku-footer-icon-instagram" href="https://instagram.com/heroku" target="_blank" title="Heroku's Instagram">Instagram</a></li>
-        <li><a class="heroku-footer-icon-github" href="https://github.com/heroku" target="_blank" title="Heroku's GitHub">GitHub</a></li>
-        <li><a class="heroku-footer-icon-linkedin" href="https://www.linkedin.com/company/heroku" target="_blank" title="Heroku's LinkedIn">LinkedIn</a></li>
-        <li><a class="heroku-footer-icon-youtube" href="https://www.youtube.com/c/HerokuOfficial" target="_blank" title="Heroku's YouTube">YouTube</a></li>
+        <li><a class="heroku-footer-icon-facebook" href="https://facebook.com/heroku" target="_blank" aria-label="Opens in new window" title="Heroku's Facebook">Facebook</a></li>
+        <li><a class="heroku-footer-icon-instagram" href="https://instagram.com/heroku" target="_blank" aria-label="Opens in new window" title="Heroku's Instagram">Instagram</a></li>
+        <li><a class="heroku-footer-icon-github" href="https://github.com/heroku" target="_blank" aria-label="Opens in new window" title="Heroku's GitHub">GitHub</a></li>
+        <li><a class="heroku-footer-icon-linkedin" href="https://www.linkedin.com/company/heroku" target="_blank" aria-label="Opens in new window" title="Heroku's LinkedIn">LinkedIn</a></li>
+        <li><a class="heroku-footer-icon-youtube" href="https://www.youtube.com/c/HerokuOfficial" target="_blank" aria-label="Opens in new window" title="Heroku's YouTube">YouTube</a></li>
       </ul>
       <% if ENV['BOOKENDS_JP_LINK'] == 'true' %>
         <div class="language-select">

data/app/views/bookends/_header.html.erb

@@ -1,6 +1,8 @@
 <div id="heroku-cookie-banner"></div>
 
-<header id="header" data-uuid="<%= glostick_user_id %>">
+<a class="visuallyhidden" href="#skip-link">Skip Navigation</a>
+
+<header id="header" data-uuid="<%= glostick_user_id %>" role="banner">
   <nav id="navigation" role="navigation">
     <span class="mobile-nav" aria-hidden="true">
       Show nav
@@ -67,6 +69,28 @@
           <li><a id="pricing-head" href="<%= Bookends::Config.host_www %>/pricing">Pricing</a></li>
           <li><a id="doc-head" href="<%= Bookends::Config.host_dev_center %>">Documentation</a></li>
           <li><a href="<%= Bookends::Config.host_www %>/support">Support</a></li>
+          <% if ENV['COVID_HEADER_MENU_ENABLED'] == 'true' %>
+            <li class="has-dropdown">
+              <a class="" href="#">COVID-19</a>
+              <ul class="dropdown wider">
+                <% if ENV['WORK_COM_IN_COVID_HEADER'] == 'true' %>
+                  <li><%= link_to_new_window('Work.com', 'https://www.salesforce.com/work', class: 'bookends-icon bullet') %></li>
+                <% end %>
+                <li><%= link_to_new_window('Leading Through Change with Data', 'https://www.tableau.com/leading-through-change?placement=homepage&utm_medium=Referral&utm_source=Salesforce', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('COVID-19 Data Hub', 'https://www.tableau.com/covid-19-coronavirus-data-resources?placement=homepage&utm_medium=Referral&utm_source=Salesforce', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('COVID-19 Global Daily Tracker', 'https://www.tableau.com/covid-19-coronavirus-data-resources/global-tracker?placement=homepage&utm_medium=Referral&utm_source=Salesforce', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('Global Economy Data Track', 'https://www.tableau.com/covid-19-coronavirus-data-resources/economy-data-track?placement=homepage&utm_medium=Referral&utm_source=Salesforce', class: 'bookends-icon bullet') %></li>                
+                <li><%= link_to_new_window('Government Data Track', 'https://www.tableau.com/covid-19-coronavirus-data-resources/government-data-track?placement=homepage&utm_medium=Referral&utm_source=Salesforce', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('Healthcare Data Track', 'https://www.tableau.com/covid-19-coronavirus-data-resources/healthcare-data-track?placement=homepage&utm_medium=Referral&utm_source=Salesforce', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('B-Well Together', 'https://www.salesforce.com/resources/videos/be-well/?d=cta-glob-nav-5', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('Leading Through Change', 'https://www.salesforce.com/resources/leading-through-change/#!page=1', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('Salesforce Care', 'https://www.salesforce.com/solutions/covid-19-response/overview/?d=cta-glob-nav-7', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('Trailhead Resources', 'https://trailhead.salesforce.com/users/strailhead/trailmixes/trailhead-resources-during-covid-19?utm_source=salesforce_properties&utm_medium=global_nav&utm_campaign=covid19&utm_content=covid_resources_trailmix', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('AppExchange Resources', 'https://appexchange.salesforce.com/mktcollections/curated/c19response?d=cta-nav-external', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('MuleSoft Resources', 'https://www.mulesoft.com/resources/covid-19', class: 'bookends-icon bullet') %></li>
+              </ul>
+            </li>
+          <% end %>
           <li class="has-dropdown">
             <a class="nav-more" href="#">More</a>
             <div class="dropdown more">
@@ -123,9 +147,10 @@
 
         <ul class="tool-nav">
           <% unless current_page?('/search') || search_disabled? %>
-            <li>
+            <li role="search">
               <form action="<%= relative_search_path %>" class="site-search" id="site-search" method="get">
                 <div class="search-input gsc-input">
+                  <label for="search" class="visuallyhidden">Search: </label>
                   <%= header_search_input %>
                   <%= tag 'button', type: 'submit', value: 'Submit search', class: 'search-submit' %>
                 </div>
@@ -194,3 +219,5 @@
     </section>
   <% end %>
 </header>
+
+<span id="skip-link"></span>

data/lib/bookends/version.rb

@@ -1,3 +1,3 @@
 module Bookends
-  VERSION = '10.0.0'.freeze
+  VERSION = '10.0.5'.freeze
 end

data/spec/test_app/app/assets/config/manifest.js

@@ -0,0 +1,2 @@
+//= link application.css
+//= link application.js

data/spec/test_app/app/assets/stylesheets/application.scss

@@ -1 +1,14 @@
+@import './normalize';
 @import 'bookends/bookends';
+
+*, *:after, *:before {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: BentonSans;
+}
+
+a {
+  text-decoration: none;
+}

data/spec/test_app/app/assets/stylesheets/normalize.scss

@@ -0,0 +1,357 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+  min-height: 100%;
+  font-family: "BentonSans", "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  background: #fff;
+  color: #3F3F44;
+  -webkit-font-smoothing: antialiased;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}