uswds-jekyll 2.0.1 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9ce13f7aee1894d2116e27d8fa978039abcc020d
-  data.tar.gz: 53f3017cee4c8007cb42db39ed22de9f3302df40
+  metadata.gz: d3d4aa52f913bd4a0b760324b43996840285c53f
+  data.tar.gz: 450957c0f9fef3d03461a5f6b213f60f0e8bd15f
 SHA512:
-  metadata.gz: 5f0bcb8fe1a0dcd1539ac2e69f4822fbcfaa7702312ec52ffd3c31f8c2bf07beeea112a165ae8d6c72f8b65149042b7cda68f0059dae783a29d24bee7d58ad34
-  data.tar.gz: 71e8f7c44997742dce26b905ce1c957c71cbff4ce1a57534f444389557b5bb55c03032beb8578da9a8d3cc931d1c96d37fd97f74cf6bebeca718c19ebf4c4205
+  metadata.gz: 2382fd40f45a68957133865e9ba04fd6b342c2e9d24565db605d795c2f245857220d9f4ee5af881eaca0553352dc29be27cfc09009f4fb4bd5a47eb4db3c1aea
+  data.tar.gz: 1a5e9d69080abca26e89c7358cafa2836f8978684f741e808e78f8b6ba410016c960a5a3de04f37f688d1bd6bc6c7a2a3f6a55c8bc73bcd50ea2935480dced67

data/README.md

@@ -15,6 +15,7 @@ This is a [Jekyll theme](https://jekyllrb.com/docs/themes/) for the
     - [Navigation](#navigation)
     - [Page subnavigation](#page-subnavigation)
     - [Search](#search)
+    - [Analytics](#analytics)
 1. [Assets](#assets)
     - [Stylesheets](#stylesheets)
     - [Scripts](#scripts)
@@ -101,10 +102,8 @@ You will need to restart your Jekyll server to see the effects.
 To develop this theme and/or test it locally:
 
 1. Clone this repo
-
 1. Run Jekyll (`jekyll serve`) in the local clone of this repo;
    **or**
-
 1. Create a new Jekyll project, follow the
    [installation](#installation) instructions, then change your
    `Gemfile` to point at the local clone of this repo:
@@ -112,6 +111,13 @@ To develop this theme and/or test it locally:
     ```ruby
     gem 'uswds-jekyll', :path => '../path/to/uswds-jekyll'
     ```
+### Publish to Rubygems
+1. Update `spec.version = "NUMBER HERE"` in the uswds-jekyll.gemspec file to the version you want to publish
+1. Run `bundle install`
+1. Add a PR for the update and get it merged
+1. Run `bundle exec rake release`
+1. Add a GitHub release to the releases page with the same version number
+1. You should see the latest version here https://rubygems.org/gems/uswds-jekyll
 
 ### Versioning
 
@@ -119,7 +125,6 @@ To reference a specific version of this plugin:
 
 1. Visit the [releases page](https://github.com/18F/uswds-jekyll/releases) and
    decide which version you want to use.
-
 1. Specify the version in your `Gemfile`.
 
     ```ruby
@@ -240,6 +245,26 @@ Search uses the [Search results](#search-results) page layout.
 
 **Pro tip:** use [Jekyll front matter defaults](https://jekyllrb.com/docs/configuration/#front-matter-defaults) to hide directories from showing in search results.
 
+### Analytics
+
+#### Google Analytics
+
+You can add Google Analytics to your site by uncommenting the `google_analytics_ua` line and replacing `UA-????????-??` with your Google analytics UA code.
+
+```
+# Configuration for Google Analytics, add your UA code here:
+# google_analytics_ua: UA-????????-??
+```
+
+#### Digital Analytics Program (DAP)
+
+You can add DAP to your site by uncommenting the `dap_agency` line and, if need be, replacing `GSA` with the appropriate agency key. For more information visit <https://www.digitalgov.gov/services/dap/>
+
+```
+# Configuration for DAP, add your agency ID here:
+# dap_agency: GSA
+```
+
 ## Assets
 
 The [stylesheet](_includes/styles.html) and [script](_includes/scripts.html)

data/_includes/analytics.html

@@ -0,0 +1,20 @@
+{% if site.google_analytics_ua %}
+<!-- Google Analytics -->
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  ga('create', '{{ site.google_analytics_ua }}', 'auto');
+
+  // anonymize user IPs (chops off the last IP triplet)
+  ga('set', 'anonymizeIp', true);
+  ga('set', 'forceSSL', true);
+  ga('send', 'pageview');
+</script>
+{% endif %}
+
+{% if site.dap_agency %}
+<!-- Digital Analytics Program roll-up, see https://analytics.usa.gov for data -->
+<script id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency={{ site.dap_agency }}"></script>
+{% endif %}

data/_includes/components/header--basic.html

@@ -35,12 +35,12 @@
             <ul id="{{ _section_id }}" class="usa-nav-submenu">
               {% for _link in section_links %}
               <li>
-                <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a>
+                <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a>
               </li>
               {% endfor %}
             </ul>
             {% else %}
-            <a class="usa-nav-link{% if _section.href == page.permalink %} usa-current{% endif %}" href="{% if _section.external == true %}{{ _section.href }}{% else %}{{ _section.href | relative_url }}{% endif %}">
+            <a class="usa-nav-link{% if _section.href == page.permalink %} usa-current{% endif %}" href="{% if _section.external %}{{ _section.href }}{% else %}{{ _section.href | relative_url }}{% endif %}">
               <span>{{ _section.text }}</span>
             </a>
             {% endif %}

data/_includes/components/header--extended.html

@@ -34,12 +34,12 @@
           <ul id="{{ _section_id }}" class="usa-nav-submenu">
             {% for _link in section_links %}
             <li>
-              <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a>
+              <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a>
             </li>
             {% endfor %}
           </ul>
           {% else %}
-          <a class="usa-nav-link{% if _section.href == page.permalink %} usa-current{% endif %}" href="{% if _section.external == true %}{{ _section.href }}{% else %}{{ _section.href | relative_url }}{% endif %}">
+          <a class="usa-nav-link{% if _section.href == page.permalink %} usa-current{% endif %}" href="{% if _section.external %}{{ _section.href }}{% else %}{{ _section.href | relative_url }}{% endif %}">
             <span>{{ _section.text }}</span>
           </a>
           {% endif %}
@@ -71,7 +71,7 @@
           {% assign secondary_links = site.data.navigation[_secondary.links] | default: _secondary.links %}
           {% for _link in secondary_links %}
           <li>
-            <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a>
+            <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a>
           </li>
           {% endfor %}
         </ul>

data/_includes/components/hero.html

@@ -21,7 +21,7 @@
       {{ hero.content | markdownify }}
 
       {% if hero.button %}
-      <a class="usa-button usa-button-big usa-button-secondary"
+      <a class="usa-button"
         href="{{ hero.button.href | relative_url }}">
         {{ hero.button.text }}
       </a>

data/_includes/subnav.html

@@ -1,5 +1,5 @@
 {% for link in include.links %}
   <li>
-    <a href="{% if link.external == true %}{{ link.href }}{% else %}{{ link.href | relative_url }}{% endif %}">{{ link.text }}</a>
+    <a href="{% if link.external == true %}{{ link.href }}{% else %}{{ link.href }}{% endif %}">{{ link.text }}</a>
   </li>
 {% endfor %}

data/_layouts/default.html

@@ -16,6 +16,9 @@
     </main>
 
     {% include footer.html %}
+    {% if site.google_analytics_ua or site.dap_agency %}
+      {% include analytics.html %}
+    {% endif %}
     {% include scripts.html %}
   </body>
 </html>

data/_sass/uswds/components/_accordions.scss

@@ -4,6 +4,10 @@ $accordion-border: 3px solid $color-gray-lightest;
 
 // Accordion Styles
 
+$icon-size: $spacing-md-small;
+$h-padding: $spacing-medium;
+$v-padding: $spacing-md-small;
+
 @mixin accordion-list-styles {
   @include unstyled-list;
   color: $color-base;
@@ -16,7 +20,7 @@ $accordion-border: 3px solid $color-gray-lightest;
   background-color: $color-gray-lightest;
   font-family: $font-sans;
   list-style: none;
-  margin-bottom: 6px;
+  margin-bottom: $spacing-x-small;
   width: 100%;
 }
 
@@ -26,22 +30,18 @@ $accordion-border: 3px solid $color-gray-lightest;
   background-color: $color-gray-lightest;
   background-image: url('#{$image-path}/minus.png');
   background-image: url('#{$image-path}/minus.svg');
-  background-position: right 3rem center;
+  background-position: right $h-padding center;
   background-repeat: no-repeat;
-  background-size: 13px;
+  background-size: $icon-size;
   color: $color-base;
   cursor: pointer;
   display: inline-block;
   font-family: $font-sans;
   font-weight: $font-bold;
   margin: 0;
-  padding: 1.5rem 5.5rem 1.5rem 3rem;
+  padding: $v-padding ($h-padding * 2 + $icon-size) $v-padding $h-padding;
   width: 100%;
 
-  &:focus {
-    box-shadow: $focus-shadow;
-  }
-
   &:hover {
     background-color: $color-gray-lighter;
     color: $color-base;
@@ -62,7 +62,7 @@ $accordion-border: 3px solid $color-gray-lightest;
   background-image: url('#{$image-path}/plus.png');
   background-image: url('#{$image-path}/plus.svg');
   background-repeat: no-repeat;
-  background-size: 1.3rem;
+  background-size: $icon-size;
 }
 
 @mixin accordion-nested-list {
@@ -84,7 +84,7 @@ $accordion-border: 3px solid $color-gray-lightest;
 
   + .usa-accordion,
   + .usa-accordion-bordered {
-    margin-top: 1rem;
+    margin-top: $spacing-small;
   }
 
   // TODO deprecated ruleset based on old accordion.
@@ -124,7 +124,7 @@ $accordion-border: 3px solid $color-gray-lightest;
 .usa-accordion-content {
   background-color: $color-white;
   overflow: auto;
-  padding: 3rem;
+  padding: $spacing-md-small $spacing-medium;
 
   > *:first-child {
     margin-top: 0;

data/_sass/uswds/components/_alerts.scss

@@ -1,5 +1,6 @@
 // Alert variables ---------- //
 $usa-custom-alerts: () !default;
+$usa-custom-alerts-bar: () !default;
 
 $usa-alerts: (
   success: $color-green-lightest,
@@ -8,18 +9,40 @@ $usa-alerts: (
   info: $color-primary-alt-lightest
 );
 
+$usa-alerts-bar: (
+  success: $color-green,
+  warning: $color-gold,
+  error: $color-secondary,
+  info: $color-primary-alt
+);
+
 $alerts: map-merge($usa-alerts, $usa-custom-alerts);
+$alerts-bar: map-merge($usa-alerts-bar, $usa-custom-alerts-bar);
+
+$h-padding: $spacing-medium;
+$bar-size: $spacing-small;
+$left-padding: $h-padding + $bar-size;
+$icon-size: 3rem;
 
 .usa-alert {
   background-color: $color-gray-lightest;
-  background-position: 1rem 2rem;
+  background-position: $h-padding $h-padding;
   background-repeat: no-repeat;
-  background-size: 4rem;
-  margin-top: 1.5em;
-  padding: 1em;
-
-  @include media($medium-screen) {
-    background-size: 5.2rem;
+  background-size: 5.2rem; // TODO abrituary number based on svg size maybe?
+  padding-bottom: $h-padding * 0.7;
+  padding-left: $left-padding;
+  padding-right: $h-padding;
+  padding-top: $h-padding;
+  position: relative;
+
+  &::before {
+    background-color: darken($color-gray-lightest, 40%);
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: $bar-size;
   }
 
   a {
@@ -33,41 +56,36 @@ $alerts: map-merge($usa-alerts, $usa-custom-alerts);
 
   ul {
     margin-bottom: 0;
-    margin-top: 1em;
-    padding-left: 1em;
+    margin-top: $spacing-small;
+    padding-left: $spacing-small;
+  }
+}
+
+.usa-alert-slim {
+  background-position: $h-padding $spacing-small;
+  padding-bottom: $spacing-small;
+  padding-top: $spacing-small;
+
+  .usa-alert-text:only-child {
+    margin-bottom: $spacing-x-small;
+    padding-top: $spacing-x-small;
   }
 }
 
 .usa-alert-icon {
   display: table-cell;
-  padding-right: 1rem;
+  padding-right: $spacing-small;
 }
 
 .usa-alert-body {
   display: table-cell;
-  padding-left: 3.5rem;
+  padding-left: $icon-size + $h-padding;
   vertical-align: top;
-
-  @include media($medium-screen) {
-    padding-left: 5rem;
-  }
-
-  p:first-child {
-    margin-top: 0.8rem;
-  }
-
-  p:last-child {
-    margin-bottom: 0.8rem;
-  }
 }
 
 .usa-alert-heading {
-  margin-bottom: .3rem;
   margin-top: 0;
-
-  @include media($medium-screen) {
-    margin-top: .3rem;
-  }
+  margin-bottom: 0;
 }
 
 .usa-alert-text {
@@ -76,11 +94,20 @@ $alerts: map-merge($usa-alerts, $usa-custom-alerts);
   margin-top: 0;
 }
 
+.usa-alert-text:only-child {
+  margin-bottom: $spacing-small;
+  padding-top: $spacing-x-small;
+}
+
 @each $name, $bgcolor in $alerts {
   .usa-alert-#{$name} {
     background-color: $bgcolor;
     background-image: url('#{$image-path}/alerts/#{$name}.png');
     background-image: url('#{$image-path}/alerts/#{$name}.svg');
+
+    &::before {
+      background-color: map-get($alerts-bar, $name);
+    }
   }
 }
 
@@ -90,5 +117,9 @@ $alerts: map-merge($usa-alerts, $usa-custom-alerts);
 
 .usa-alert-paragraph {
   width: $text-max-width;
-  padding: 1em 3em 1em 1em;
+}
+
+// Deprecated
+.usa-alert {
+  margin-top: 1.5em; // TODO deprecate
 }

data/_sass/uswds/components/_footer.scss

@@ -8,8 +8,8 @@
     display: block;
     font-weight: $font-bold;
     margin-top: 0;
-    padding-bottom: 2rem;
-    padding-top: 2rem;
+    padding-bottom: $spacing-medium;
+    padding-top: $spacing-medium;
     text-decoration: none;
 
     @include media($medium-screen) {
@@ -21,21 +21,37 @@
     }
   }
 
+  .usa-footer-primary-link ~ li a,
+  .usa-footer-secondary-link {
+    text-decoration: none;
+  }
+}
+
+.usa-footer-contact_info {
+  display: inline-block;
+
   a {
-    font-weight: normal;
+    color: $color-base;
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: underline;
   }
 }
 
 .usa-footer-return-to-top {
-  padding-bottom: 2rem;
-  padding-top: 2rem;
+  color: $color-primary;
+  padding-bottom: $spacing-medium;
+  padding-top: $spacing-medium;
+  text-decoration: underline;
 }
 
 .usa-footer-primary-section {
   background-color: $color-gray-lightest;
 
   .usa-footer-primary-content {
-    padding-left: 2.5rem;
+    padding-left: 1.5rem;
     padding-right: 2.5rem;
 
     @include media($medium-screen) {
@@ -61,17 +77,51 @@
 }
 
 .usa-footer-medium {
-  .usa-footer-primary-section {
-    padding: 0;
+  .usa-footer-contact_info {
+    p {
+      margin: 0 $spacing-small 0 0;
+
+      @include media($medium-screen) {
+        margin: 0 0 0 $spacing-small;
+      }
+    }
+  }
+
+  .usa-footer-contact-heading {
+    margin-top: 0;
 
     @include media($medium-screen) {
-      padding-bottom: 1rem;
-      padding-top: 1rem;
+      margin-top: $spacing-x-small;
+      margin-bottom: $spacing-x-small;
+    }
+  }
+
+  .usa-footer-logo {
+    padding: $spacing-small 0;
+
+    @include media($medium-screen) {
+      padding: $spacing-medium 0;
+    }
+  }
+
+  .usa-footer-primary-link {
+    padding-bottom: $spacing-md-small;
+    padding-top: $spacing-md-small;
+  }
+
+  .usa-footer-primary-section {
+    > .usa-grid {
+      padding: 0;
+
+      @include media($medium-screen) {
+        padding-left: $spacing-large;
+        padding-right: $spacing-large;
+      }
     }
 
     .usa-footer-primary-content {
       @include media($large-screen) {
-        margin-right: 6%;
+        margin-right: 5%;
         width: inherit;
       }
 
@@ -98,7 +148,7 @@
 
     .usa-footer-primary-content {
       @include media($large-screen) {
-        margin-right: 9%;
+        margin-right: 5%;
         width: inherit;
       }
 
@@ -110,12 +160,24 @@
     }
   }
 
+  .usa-footer-primary-link {
+    padding-bottom: $spacing-md-small;
+    padding-top: $spacing-md-small;
+  }
+
   .usa-footer-primary-section {
-    padding-bottom: 2rem;
+    > .usa-grid {
+      padding: 0;
+
+      @include media($medium-screen) {
+        padding-left: $spacing-large;
+        padding-right: $spacing-large;
+      }
+    }
 
     @include media($medium-screen) {
-      padding-bottom: 1rem;
-      padding-top: 1rem;
+      padding-bottom: 0;
+      padding-top: 0;
 
       .usa-grid-full {
         align-items: center;
@@ -131,7 +193,7 @@
     }
 
     @include media($medium-screen) {
-      @include padding (2rem null);
+      @include padding ($spacing-md-small null);
     }
 
     @include media($medium-screen) {
@@ -148,14 +210,14 @@
 ul.usa-footer-primary-content,
 li.usa-footer-primary-content,
 li.usa-footer-primary-content {
-  border-top: 1px solid $color-base;
+  border-top: 1px solid $color-gray-light;
 
   @include media($medium-screen) {
     border: none;
   }
 
   &:last-child {
-    border-bottom: 1px solid $color-base;
+    border-bottom: 1px solid $color-gray-light;
 
     @include media($medium-screen) {
       border-bottom: none;
@@ -165,9 +227,9 @@ li.usa-footer-primary-content {
 /* stylelint-enable */
 
 .usa-sign_up-block {
-  padding-bottom: 2rem;
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
+  padding-bottom: 4.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 
   @include media($medium-screen) {
     float: right;
@@ -191,8 +253,8 @@ li.usa-footer-primary-content {
 
 .usa-footer-secondary_section {
   background-color: $color-gray-lighter;
-  padding-bottom: 3rem;
-  padding-top: 3rem;
+  padding-bottom: $spacing-medium;
+  padding-top: $spacing-medium;
 
   a {
     color: $color-base;
@@ -201,7 +263,8 @@ li.usa-footer-primary-content {
 
 .usa-footer-big-secondary-section {
   @include media($medium-screen) {
-    padding-top: 5rem;
+    padding-top: $spacing-medium;
+    padding-bottom: $spacing-medium;
   }
 }
 
@@ -218,30 +281,84 @@ li.usa-footer-primary-content {
 }
 
 .usa-footer-big {
+  .usa-footer-contact_info {
+    display: block;
+
+    p {
+      margin: 0 $spacing-small 0 0;
+
+      @include media($medium-screen) {
+        margin: $spacing-x-small 0 0 $spacing-small;
+      }
+    }
+  }
+
+  .usa-footer-contact-links {
+    @include media($medium-screen) {
+      padding-top: $spacing-medium;
+    }
+  }
+
+  .usa-footer-logo {
+    padding: $spacing-small 0;
+
+    @include media($medium-screen) {
+      padding: $spacing-medium 0;
+    }
+  }
+
   .usa-footer-primary-section {
     @include media($medium-screen) {
       padding-bottom: 4rem;
       padding-top: 3rem;
     }
+
+    > .usa-grid {
+      padding: 0;
+
+      @include media($medium-screen) {
+        padding-left: $spacing-large;
+        padding-right: $spacing-large;
+      }
+    }
+
+    .usa-footer-primary-content {
+      padding-left: 0;
+      padding-right: 0;
+
+      li {
+        margin-left: $spacing-md-small;
+
+        @include media($medium-screen) {
+          margin-left: 0;
+        }
+      }
+
+      .usa-footer-primary-link {
+        margin-left: 0;
+      }
+    }
   }
 
   ul {
-    padding-bottom: 2.5rem;
+    padding-bottom: 2.4rem;
 
     @include media($medium-screen) {
       padding-bottom: 0;
     }
 
     &:last-child {
-      border-bottom: 1px solid $color-base;
+      border-bottom: 1px solid $color-gray-light;
 
       @include media($medium-screen) {
         border-bottom: none;
       }
     }
 
-    li {
-      line-height: 2em;
+    li:not(.usa-footer-primary-link) {
+      line-height: $heading-line-height;
+      padding-bottom: 0.35em;
+      padding-top: 0.35em;
     }
 
     .usa-footer-primary-link {
@@ -300,33 +417,52 @@ li.usa-footer-primary-content {
 }
 
 .usa-footer-logo-img {
-  max-width: 14rem;
+  max-width: 8rem;
+
+  @include media($medium-screen) {
+    float: left;
+  }
+}
+
+.usa-footer-big-logo-img {
+  max-width: 10rem;
 }
 
 .usa-footer-slim-logo-img {
   float: left;
-  max-width: 10rem;
+  max-width: 5rem;
 }
 
 .usa-footer-logo-heading {
-  margin-top: 2rem;
+  display: block;
+  margin-top: $spacing-small;
+
+  @include media($medium-screen) {
+    display: inline-block;
+    margin-top: $spacing-large;
+    padding-left: $spacing-md-small;
+  }
 }
 
-.usa-footer-contact-heading {
-  margin-top: 0;
+.usa-footer-big-logo-heading {
+  margin-top: $spacing-md-small;
 
   @include media($medium-screen) {
-    margin-top: 1rem;
+    margin-top: $spacing-medium;
   }
 }
 
 .usa-footer-slim-logo-heading {
-  display: block;
-  padding-top: 1rem;
+  display: inline-block;
+  margin-top: $spacing-md-small;
+  padding-left: $spacing-md-small;
+}
+
+.usa-footer-contact-heading {
+  margin-top: 0;
 
   @include media($medium-screen) {
-    display: inline-block;
-    padding-left: 1em;
+    margin-top: 1rem;
   }
 }
 
@@ -348,8 +484,8 @@ li.usa-footer-primary-content {
   width: $hit-area;
 
   @include media($medium-screen) {
-    @include margin(0 0 0 1rem);
-    left: 1.2rem;
+    @include margin(0 0 0 $spacing-x-small);
+    left: $spacing-md-small;
   }
 
   span {