bookends 10.0.1 → 10.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98fc82d6d33efc8ea193a256b22b0b0f4c11c2cb1b8315fba2090830e36413f3
-  data.tar.gz: b4d679c1602463975becc849ca12cebfa28982a548dfb416ba04098b745375ba
+  metadata.gz: 6601ae27bcdc3f586ffc920edc776313e1a7135049a33df52d22d9acd27980ca
+  data.tar.gz: '042279ceb99e5ed46d7adeabedaeabf2e3c99cece860dbbc16612be3084f7e29'
 SHA512:
-  metadata.gz: 93cafd71480b9b845aae9d9adf6c9a74ad3d8e022d9ba29d6fecb70208ed0f5c95c60d78c40661821284a69fe61a31fb87e810f450b729fc191e274815b85b5e
-  data.tar.gz: 04e014a85c70270e26e76b0b984e930fdf345ca1a1e20538be80a01cef168b3621e538ac7a2418e2948c7bff2e2cb98c0f7925c1ccbbe8a14e61dc1ab9e468ee
+  metadata.gz: 318b7ce84f031cec5767d1a3314b5f87f5518dc31742520fd49c9f596e8af38e828fd406020f54890a42320dd0415f9c9dd59741bba4c71f8b0750cd92f7b39f
+  data.tar.gz: f5aaffbce20ab4840d00bfd5d66c8c872e42a83f02ccad8688203a6b40a7c00c995631f0631b3ec54afa125850c14400fa07f46ee3e59437fa9c03c99c1446a4

data/app/assets/images/bookends/icons/bullet.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
+  <circle cx="11.5" cy="11.5" r="2.5" fill="#876AAA" fill-rule="evenodd"/>
+</svg>

data/app/assets/javascripts/blog-fetcher.js

@@ -57,7 +57,7 @@ Heroku.BlogFetcher = (function() {
     this.$container.find('.js-blog-link').attr('href', this.storedEntry.link);
     this.$container.find('.js-blog-date').html(this.buildDateAndAuthor());
     blogContent.html(this.storedEntry.contentSnippet);
-    blogContent.find('p').append(' <a href="' + this.storedEntry.link + '">Read More</a>');
+    blogContent.find('p').append(' <a href="' + this.storedEntry.link + '" aria-label="Read ' + this.storedEntry.title + '">Read More</a>');
   };
 
   BlogFetcher.prototype.handleError = function() {

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

@@ -1,4 +1,4 @@
-#header {
+#header, #heroku-footer {
   font-family: $font-main;
   font-size: $font-base;
   font-weight: $font-normal;

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

@@ -9,8 +9,8 @@ $gray: #9B9FA2;
 $gray-light: #CCCDCF;
 $gray-light-2: #E4E4E7;
 $gray-light-3: #F2F2F5;
-$gray-dark: #73787C;
-$gray-dark-2: #383E40;
+$gray-dark: #56595D;
+$gray-dark-2: #323839;
 $black: #111;
 
 //- Mains

data/app/assets/stylesheets/bookends/_cookie-banner.scss

@@ -11,7 +11,7 @@
 }
 
 .heroku-cookie-banner a {
-  color: #4A90E2;
+  color: #1969ca;
 }
 
 .heroku-cookie-banner.heroku-cookie-banner p {
@@ -70,34 +70,6 @@
   .heroku-cookie-banner__dismiss svg {
     height: 16px;
   }
-
-  #heroku-cookie-banner.dark-mode .heroku-cookie-banner__dismiss {
-    border-top-color: rgba(255,255,255,0.1);
-  }
-}
-
-/* Overrides */
-/* Dark mode */
-
-#heroku-cookie-banner.dark-mode .heroku-cookie-banner {
-  background: rgba(0,0,0,0.4);
-  border-bottom: 1px solid rgba(255,255,255,0.1);
-}
-
-#heroku-cookie-banner.dark-mode .heroku-cookie-banner p {
-  color: #fff;
-}
-
-#heroku-cookie-banner.dark-mode .heroku-cookie-banner a {
-  color: #5CA6FC;
-}
-
-#heroku-cookie-banner.dark-mode .heroku-cookie-banner__dismiss {
-  border-left-color: rgba(255,255,255,0.1);
-}
-
-#heroku-cookie-banner.dark-mode .heroku-cookie-banner__dismiss:hover {
-  background-color: #27507F;
 }
 
 /* Overrides */

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

@@ -235,7 +235,7 @@
         margin: 5px;
         width: $input-height;
         height: ($input-height - 10);
-        border: 0;
+        border: 1px solid transparent; // accessibility for high contrast mode in windows
         background-color: $color-purple;
         border-radius: 3px;
         text-transform: uppercase;

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

@@ -38,6 +38,31 @@
   position: relative;
 }
 
+a.visuallyhidden.skip-link:focus {
+  // undo .visuallyhidden
+  width: auto;
+  height: auto;
+  overflow: auto;
+  margin: 0;
+  clip: auto;
+
+  top: 10px;
+  z-index: 1000;
+  
+  // styling for link
+  transition: all .3s;
+  background: white;
+  color: $purple;
+  font-weight: bold;
+
+  border: 2px solid $purple;
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+
+  padding: 10px 30px;
+}
+
 #navigation {
   $padding-nav: 20px;
   $padding-nav-inner: 7px;
@@ -66,7 +91,7 @@
   li {
     float: left;
     margin: 0;
-    padding: 0 10px;
+    padding: 0 6px;
     line-height: 1.4;
 
     @media screen and (max-width: $desktop) {
@@ -83,7 +108,7 @@
 
     > a {
       display: inline-block;
-      padding: 4px 0;
+      padding: 4px 0 8px 0;
       text-decoration: none;
       color: fade-out($color-link, .4);
 
@@ -117,7 +142,7 @@
         top: -1px;
         width: 10px; 
         height: 6px;
-        margin-left: 5px;
+        margin-left: 3px;
         background-image: asset-url('nav-dropdown-caret.svg');
         background-repeat: no-repeat;
         opacity: .5;
@@ -154,7 +179,6 @@
       > .dropdown {
         visibility: visible;
         opacity: 1;
-        margin-top: 3px;
         transition-delay: 0s;
       }
     }
@@ -209,6 +233,10 @@
       min-width: 230px;
     }
 
+    &.wider {
+      min-width: 320px;
+    }
+
     @media screen and (min-width: $bp-lg + 1) {
       position: absolute;
       background: $white;
@@ -265,6 +293,9 @@
         top: -2px;
       }
 
+      &.bullet:before {
+        background-image: asset-url('bookends/icons/bullet.svg');
+      }
       &.elements:before {
         background-image: asset-url('bookends/icons/elements-information.svg');
       }
@@ -328,6 +359,24 @@
       }
     }
 
+    .new-window-icon {
+      padding-right: 25px;
+      display: inline-block;
+      position: relative;
+  
+      &:after {
+        display: inline-block;
+        width: 18px;
+        height: 12px;
+        content: '';
+        margin-top: 2px;
+        position: absolute;
+        right: 0;        
+        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjdweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMjcgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMC42OTQxMzkpIj4KICAgICAgICAgICAgPHBhdGggZD0iTTIuNjU2MjkwMTYsMTAuNTE4MTA2MSBMMTcuOTk1MDA5NSwxMC41MTgxMDYxIEMxOC4yNjc0NzQ2LDEwLjUxODEwNjEgMTguNDgwMDQ5MiwxMC4zMDA5MzA3IDE4LjQ4MDA0OTIsMTAuMDMzMDMxNCBMMTguNDgwMDQ5Miw3LjU2MDQyNDI4IEMxOC40ODAwNDkyLDcuMDAwNjQ0NjUgMTguODI5NTczOCw2LjgzNjgwMjU0IDE5LjI2MDczNDEsNy4xNzU1NzEzOSBMMjQuNjIyMjQxNywxMS4zODgxODQ1IEMyNS4wNTAxMDI1LDExLjcyNDM2MDggMjUuMDUzNDAyMSwxMi4yNzYyMDYyIDI0LjYyMjI0MTcsMTIuNjE0OTc1IEwxOS4yNjA3MzQxLDE2LjgyNzU4ODIgQzE4LjgzMjg3MzQsMTcuMTYzNzY0NSAxOC40ODAwNDkyLDE2Ljk5NDA1MjUgMTguNDgwMDQ5MiwxNi40NDI3MzUzIEwxOC40ODAwNDkyLDEzLjk3MDEyODIgQzE4LjQ4MDA0OTIsMTMuNjk3NzQxNSAxOC4yNjI4ODk1LDEzLjQ4NTA1MzUgMTcuOTk1MDA5NSwxMy40ODUwNTM1IEwyLjY1NjI5MDE2LDEzLjQ4NTA1MzUgQzIuMTE3MDQ2MiwxMy40ODUwNTM1IDEuNjY3MzQ3MDMsMTMuMDQyNzMzIDEuNjY3MzQ3MDMsMTIuNDk3MTAzIEwxLjY2NzM0NzAzLDExLjUwNjA1NjYgQzEuNjY3MzQ3MDMsMTAuOTU1ODg5NCAyLjExMDExMTk1LDEwLjUxODEwNjEgMi42NTYyOTAxNiwxMC41MTgxMDYxIFoiIGlkPSJhcnJvdy1yaWdodCIgZmlsbD0iIzc5NTg5RiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuMzA1ODYxLCAxMi4wMDAwMDApIHJvdGF0ZSgtNDUuMDAwMDAwKSB0cmFuc2xhdGUoLTEzLjMwNTg2MSwgLTEyLjAwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMC4wOTkyNTU1LDcuMzA1ODYxNDQgTDIsNy4zMDU4NjE0NCBDMC44OTU0MzA1LDcuMzA1ODYxNDQgMCw4LjIwMTI5MTk0IDAsOS4zMDU4NjE0NCBMMCwyMS44MDU4NjE0IEMwLDIyLjkxMDQzMDkgMC44OTU0MzA1LDIzLjgwNTg2MTQgMiwyMy44MDU4NjE0IEwxNiwyMy44MDU4NjE0IEMxNy4xMDQ1Njk1LDIzLjgwNTg2MTQgMTgsMjIuOTEwNDMwOSAxOCwyMS44MDU4NjE0IEwxOCwxNS4yMTU0MDczIEwxOCwxNS4yMTU0MDczIiBpZD0iUmVjdGFuZ2xlLTIiIHN0cm9rZT0iIzc5NTg5RiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==') no-repeat;
+        background-size: contain;
+      }
+    }
+
     p a {
       color: #222;
     }
@@ -447,6 +496,25 @@
         font-size: $font-sm;
         padding-left: 1.5em;
         padding-right: 1.5em;
+        display: inline-block;
+
+        &.btn-sm {
+          padding: 5px 16px;
+          font-size: 12px;
+        }
+        &.btn-default {
+          color: #79589F;
+          background: none;
+          box-shadow: inset 0 0 0 1px rgba(121,88,159,0.6);
+        }
+
+        &.btn {
+          border-radius: 3px;
+          border: none;
+          text-align: center;
+          position: relative;
+          cursor: pointer;
+        }
       }
     }
 
@@ -482,6 +550,12 @@
   .main-nav {
     float: left;
     margin: 7px 0 0 15px;
+
+    @media screen and (max-width: $desktop) {
+      > li + li {
+        margin-top: 20px;
+      }
+    }
   }
 
   @media screen and (max-width: $desktop) {
@@ -541,8 +615,6 @@
     }
   }
 
-
-
   .nav-wrapper {
     @media screen and (max-width: $desktop) {
       display: none;
@@ -558,7 +630,7 @@
 
       display: block;
       position: fixed;
-      z-index: 11;
+      z-index: 101;
       left: 0;
       top: 0;
       width: 100%;
@@ -580,7 +652,7 @@
 
     #logo {
       position: fixed;
-      z-index: 12;
+      z-index: 102;
       top: 20px;
       left: 20px;
 
@@ -666,20 +738,24 @@
         }
 
         .more-title {
-          color: #926BC6;
-          border-bottom: 1px solid $purple;
+          color: #9277AF;
+          border-bottom: 1px solid #9277AF;
         }
 
         .btn-default {
           background: transparent;
           color: $white;
-          box-shadow: inset 0 0 0 1px rgba(121,88,159,0.6);
+          box-shadow: inset 0 0 0 1px $white;
           border-radius: 3px;
           padding: 5px 16px;
           margin: 5px 0;
           display: inline-block;
         }
 
+        .btn-inline {
+          color: $white;
+        }
+
         .more-blog {
 
           h3,
@@ -787,7 +863,7 @@
     position: absolute;
     top: 32px;
     right: 23px;
-    z-index: 12;
+    z-index: 102;
     @include hide-text;
     width: 30px;
     height: 22px;
@@ -849,7 +925,6 @@
         padding: 7px $search-icon-size*2 7px 10px !important;
         background: fade-out($white, .9) !important;
         color: $white;
-        color: fade-out($white, .5);
         font-size: 13px !important;
         line-height: 1.35;
         font-weight: $font-light;
@@ -857,7 +932,7 @@
         -webkit-font-smoothing: subpixel-antialiased;
 
         &::placeholder {
-          color: fade-out(#fff, .5);
+          color: $white;
         }
 
         @media screen and (max-width: $mobile-landscape) {
@@ -873,7 +948,7 @@
           color: #222;
 
           &::placeholder {
-            color: #aaa;
+            color: #383E40;
           }
 
           @media  screen and (min-width: 1110px) {
@@ -912,7 +987,7 @@
       width: 100%;
       font-size: 14px;
       padding: 7px $search-icon-size*2 7px 10px;
-      border: none;
+      border: 1px solid transparent; // accessibility for high contrast mode in windows
       border-radius: $border-radius;
       box-sizing: border-box;
 
@@ -943,6 +1018,7 @@
     left: 0;
     transform: rotate(0deg);
     transition: .15s ease-in-out;
+    border: 1px solid transparent; // accessibility for high contrast mode in windows
 
     &:nth-child(1) {
       top: 0px;
@@ -1046,7 +1122,7 @@
   }
 
   h2, h3, h4, h5 {
-    color: $purple-light;
+    color: lighten($purple, 32%);
 
     &.white {
       color: $white;

data/app/assets/stylesheets/bookends/_search-page.scss

@@ -72,14 +72,14 @@ $search-icon-size: 14px;
     border-radius: $border-radius;
     box-shadow: 0 0 25px fade-out($purple, 1);
     font-size: 22px;
-    color: #777;
+    color: $gray-dark;
     transition: all .15s linear;
     width: 100%;
 
     &:focus{
       border-color: fade-out($purple, .1);
       box-shadow: 0 0 25px fade-out($purple, .8);
-      color: #222;
+      color: $gray-dark-2;
 
       & + .search-icon {
         opacity: 1;
@@ -127,7 +127,7 @@ $search-icon-size: 14px;
     line-height: 1.2;
     font-size: 13px;
     font-weight: $font-light;
-    color: #999;
+    color: $gray-dark;
 
     &:hover, &:focus {
       color: $purple;
@@ -208,7 +208,6 @@ $search-icon-size: 14px;
     margin-bottom: 0;
 
     a:link, a:visited {
-      color: #aaa;
       text-decoration: none;
 
       &:focus {

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

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

@@ -1,8 +1,10 @@
 <div id="heroku-cookie-banner"></div>
 
-<a class="visuallyhidden" href="#skip-link">Skip Navigation</a>
+<!--googleoff: anchor-->
+<a class="visuallyhidden skip-link" href="#skip-link">Skip Navigation</a>
+<!--googleon: anchor-->
 
-<header id="header" data-uuid="<%= glostick_user_id %>">
+<header id="header" data-uuid="<%= glostick_user_id %>" role="banner">
   <nav id="navigation" role="navigation">
     <span class="mobile-nav" aria-hidden="true">
       Show nav
@@ -69,6 +71,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">
@@ -125,7 +149,7 @@
 
         <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>