bookends 10.0.1 → 10.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98fc82d6d33efc8ea193a256b22b0b0f4c11c2cb1b8315fba2090830e36413f3
-  data.tar.gz: b4d679c1602463975becc849ca12cebfa28982a548dfb416ba04098b745375ba
+  metadata.gz: 97e5630ab976a2deab2940e3547f601e1d9f12f5e974ae9ae8c61d7d2d031c1b
+  data.tar.gz: fb5079c5af587198ab808bfbe97a563c0fe08e584a1f9c014d5c6453edcda07c
 SHA512:
-  metadata.gz: 93cafd71480b9b845aae9d9adf6c9a74ad3d8e022d9ba29d6fecb70208ed0f5c95c60d78c40661821284a69fe61a31fb87e810f450b729fc191e274815b85b5e
-  data.tar.gz: 04e014a85c70270e26e76b0b984e930fdf345ca1a1e20538be80a01cef168b3621e538ac7a2418e2948c7bff2e2cb98c0f7925c1ccbbe8a14e61dc1ab9e468ee
+  metadata.gz: 13961a367fc974f5e5739063ae64c587ac115c9ed919cc1ef52a70500e4d4656ed5df1e56b62526d41f6d947f0b7495316e71cc40bc31ae9b2e73baa78b6f193
+  data.tar.gz: 3dffc42488e22bd06a8cacea9984c8fdeae536ca5a995f42bc71818a881680340bc1c4d9288bcb76ec284e5f047bce5944828f993181dda7f12cfb474fc1696e

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/_header.scss

@@ -66,7 +66,7 @@
   li {
     float: left;
     margin: 0;
-    padding: 0 10px;
+    padding: 0 6px;
     line-height: 1.4;
 
     @media screen and (max-width: $desktop) {
@@ -117,7 +117,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;
@@ -209,6 +209,10 @@
       min-width: 230px;
     }
 
+    &.wider {
+      min-width: 320px;
+    }
+
     @media screen and (min-width: $bp-lg + 1) {
       position: absolute;
       background: $white;
@@ -265,6 +269,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 +335,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 +472,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 +526,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) {
@@ -666,20 +716,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,
@@ -849,7 +903,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 +910,7 @@
         -webkit-font-smoothing: subpixel-antialiased;
 
         &::placeholder {
-          color: fade-out(#fff, .5);
+          color: $white;
         }
 
         @media screen and (max-width: $mobile-landscape) {
@@ -873,7 +926,7 @@
           color: #222;
 
           &::placeholder {
-            color: #aaa;
+            color: #383E40;
           }
 
           @media  screen and (min-width: 1110px) {

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,22 @@ 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(' '))
+        concat(' ')
+        concat(content_tag(:span, class: 'new-window-icon') do
+          words[-1]
+        end)
+      end
+    end
+
     private
 
     def glostick_user

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

@@ -69,6 +69,21 @@
           <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">
+                <li><%= link_to_new_window('Leading Through Change with Data', 'https://www.tableau.com/leading-through-change/?utm_medium=Referral&utm_source=Heroku&placement=homepage', 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/?utm_medium=Referral&utm_source=Heroku&placement=homepage', 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/?utm_medium=Referral&utm_source=Heroku&placement=homepage', 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/?utm_medium=Referral&utm_source=Heroku&placement=homepage', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('COVID-19 Data Hub', 'https://www.tableau.com/covid-19-coronavirus-data-resources/?utm_medium=Referral&utm_source=Heroku&placement=homepage', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('B-Well Together', 'https://www.salesforce.com/eu/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/eu/resources/leading-through-change/?d=cta-glob-nav-6', class: 'bookends-icon bullet') %></li>
+                <li><%= link_to_new_window('Salesforce Care', 'https://www.salesforce.com/eu/solutions/covid-19-response/overview?d=cta-glob-nav-7', class: 'bookends-icon bullet') %></li>
+              </ul>
+            </li>
+          <% end %>
           <li class="has-dropdown">
             <a class="nav-more" href="#">More</a>
             <div class="dropdown more">

data/lib/bookends/version.rb

@@ -1,3 +1,3 @@
 module Bookends
-  VERSION = '10.0.1'.freeze
+  VERSION = '10.0.2'.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;
+}