Merge branch 'master' into sw-search-gov

Gemfile

@@ -1,2 +1,6 @@
 source "https://rubygems.org"
 gemspec :name => 'uswds-jekyll'
+
+group :jekyll_plugins do
+  gem 'jekyll-last-modified-at'
+end

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    uswds-jekyll (2.1.0)
+    uswds-jekyll (2.2.1)
       jekyll (~> 3.4)
 
 GEM
@@ -33,6 +33,9 @@ GEM
       pathutil (~> 0.9)
       rouge (>= 1.7, < 4)
       safe_yaml (~> 1.0)
+    jekyll-last-modified-at (1.0.1)
+      jekyll (~> 3.3)
+      posix-spawn (~> 0.3.9)
     jekyll-sass-converter (1.5.1)
       sass (~> 3.4)
     jekyll-watch (2.0.0)
@@ -46,6 +49,7 @@ GEM
     mercenary (0.3.6)
     pathutil (0.16.1)
       forwardable-extended (~> 2.6)
+    posix-spawn (0.3.13)
     public_suffix (3.0.1)
     rake (12.3.0)
     rb-fsevent (0.10.2)
@@ -65,6 +69,7 @@ PLATFORMS
 
 DEPENDENCIES
   bundler
+  jekyll-last-modified-at
   rake
   uswds-jekyll!
 

README.md

@@ -1,6 +1,3 @@
----
----
-
 # Jekyll + U.S. Web Design Standards
 
 This is a [Jekyll theme](https://jekyllrb.com/docs/themes/) for the
@@ -16,6 +13,7 @@ This is a [Jekyll theme](https://jekyllrb.com/docs/themes/) for the
     - [Page subnavigation](#page-subnavigation)
     - [Search](#search)
     - [Analytics](#analytics)
+    - [Last modified date](#last-modified-date)
 1. [Assets](#assets)
     - [Stylesheets](#stylesheets)
     - [Scripts](#scripts)
@@ -78,13 +76,6 @@ You will need to restart your Jekyll server to see the effects.
     ```yml
     theme: uswds-jekyll
     ```
-1. Update the layouts used on the following pages to use [uswds-jekyll layouts](https://github.com/18F/uswds-jekyll/tree/master/_layouts)
-    ```
-    404.html
-    index.md
-    about.md
-    posts/2017-08-07-welcome-to-jekyll.markdown
-    ```
 1. Fetch and update your bundled gems by running:
 
     ```sh
@@ -261,6 +252,16 @@ You can add DAP to your site by uncommenting the `dap_agency` line and, if need
 # dap_agency: GSA
 ```
 
+### Last modified date
+
+You can show the last date a page was last modified by uncommenting this line from the `footer.yml` data file. 
+This will add the date right before the footer component and uses the `last-modified.html` include.
+
+```yml
+# Used to show the "Last updated" date and time;
+# last_updated: true
+```
+
 ## Assets
 
 The [stylesheet](_includes/styles.html) and [script](_includes/scripts.html)
@@ -307,7 +308,7 @@ layout or page's [front matter] YAML in the following form:
 ```yml
 scripts:
   - /path/to/script.js
-  - href: /path/to/script.js
+  - src: /path/to/script.js
     async: true # optional
 ```
 

_config.yml

@@ -6,12 +6,15 @@ title: This is the site title
 # Configuration for DAP, add your agency ID here:
 # dap_agency: GSA
 
+# Uncomment to enable AnchorJS functionality on docs layout.
+# See https://github.com/bryanbraun/anchorjs for more information.
+# anchor_js_targets: [h1, h2, h3, h4, h5, h6]
+
 
 # To enable search, uncomment the search section
 # You will need to setup a search account with search.gov
 # https://search.usa.gov/signup
-
 # site_handle - is from search.gov
 
-search:
-  site_handle: site-handle-here
+#search:
+# site_handle: site-handle-here

_data/footer.yml

@@ -1,6 +1,13 @@
-# Whether to show the "Return to top" link; can also be
+# This is the configuration for the site footer.
+
+# Used to show the "Return to top" link; can also be
 # configured as an object with 'text' and 'href' properties.
-top: true
+top:
+  text: Return to top
+  href: '#'
+
+# Used to show the "Last updated" date and time;
+# last_updated: true
 
 # Which links to show at the top of the footer.
 # This can key into _data/navigation.yml or a list of link objects

_includes/components/footer.html

@@ -1,4 +1,9 @@
 {% if footer %}
+
+{% if footer.last_updated %}
+  {% include last-modified.html %}
+{% endif %}
+
 <footer class="usa-footer usa-footer-medium" role="contentinfo">
 
   {% if footer.top %}

_includes/last-modified.html

@@ -0,0 +1,3 @@
+<div class="usa-grid">
+  Last updated: {{ page.last_modified_at | date: '%B %d, %Y at %I:%M %p' }}
+</div>

_includes/scripts.html

@@ -5,6 +5,13 @@
   {% assign _uswds_js = '/assets/uswds/js/uswds.min.js' | append: '?' | append: _async_marker %}
   {% assign _site_scripts = '' | split: ''
     | push: _uswds_js %}
+    {% if site.anchor_js_targets %}
+      {% assign _anchor_js = '/assets/js/vendor/anchor.min.js' %}
+      {% assign _main_js = '/assets/js/main.js' %}
+      {% assign _site_scripts = _site_scripts
+        | push: _anchor_js
+        | push: _main_js %}
+    {% endif %}
 {% endunless %}
 {% assign _scripts = _scripts
   | push: _site_scripts
@@ -16,6 +23,7 @@
 <script src="{{ _src | replace: _async_marker, '' | relative_url }}"{% if _script.async or _src contains _async_marker %} async{% endif %}></script>
 {% endfor %}{% endfor %}
 
+
 {% if site.search %}
 <script type="text/javascript">
 //<![CDATA[

_includes/subnav.html

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

_layouts/default.html

@@ -5,6 +5,9 @@
   <head>
     {% include meta.html %}
     {% include styles.html %}
+    {% if site.google_analytics_ua or site.dap_agency %}
+      {% include analytics.html %}
+    {% endif %}
   </head>
   <body class="{{ layout.class }} {{ page.class }}">
 
@@ -16,9 +19,6 @@
     </main>
 
     {% include footer.html %}
-    {% if site.google_analytics_ua or site.dap_agency %}
-      {% include analytics.html %}
-    {% endif %}
     {% include scripts.html %}
   </body>
 </html>

_sass/uswds/components/_header.scss

@@ -102,7 +102,7 @@ $z-index-nav:     9000;
   @include position(fixed, 0);
   background: $color-black;
   opacity: 0;
-  transition: all 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
   visibility: hidden;
   z-index: $z-index-overlay;
 

_sass/uswds/components/_sidenav.scss

@@ -1,8 +1,31 @@
 
 .usa-sidenav-list {
   @include usa-sidenav-list;
+  border-bottom: 1px solid;
+  border-top: 1px solid;
+
+  @include media($large-screen) {
+    border-bottom: none;
+    border-top: none;
+  }
+
+  .usa-grid & {
+    @include margin(null (-$site-margins-mobile) null (-$site-margins-mobile));
+
+    @include media($medium-screen) {
+      @include margin(null 0);
+    }
+  }
 }
 
 .usa-sidenav-sub_list {
   @include usa-sidenav-sublist;
 }
+
+.usa-layout-docs-sidenav {
+  padding-top: 2.4rem;
+
+  @include media($large-screen) {
+    padding-top: 0;
+  }
+}

_sass/uswds/core/_utilities.scss

@@ -191,7 +191,7 @@
     display: block;
     font-family: $font-sans;
     line-height: 1.3;
-    padding: 0.85rem 1rem 0.85rem 1.8rem;
+    padding: 0.85rem 1rem 0.85rem $site-margins-mobile;
     text-decoration: none;
 
     &:hover {
@@ -207,10 +207,10 @@
     }
 
     &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
-      border-left: 0.4rem solid $color-primary;
+      border-left: $sidenav-current-border-width solid $color-primary;
       color: $color-primary;
       font-weight: $font-bold;
-      padding-left: 1.4rem;
+      padding-left: $site-margins-mobile - $sidenav-current-border-width;
     }
   }
 }

_sass/uswds/core/_variables.scss

@@ -128,21 +128,22 @@ $image-path:  '../img' !default;
 $asset-pipeline:      false !default;
 
 // Magic Numbers
-$text-max-width:          66ch !default; // 66 characters per line
-$lead-max-width:          77rem !default;
-$site-max-width:          1040px !default;
-$site-margins:            3rem !default;
-$site-margins-mobile:     1.5rem !default;
-$article-max-width:       600px !default;
-$input-max-width:         46rem !default;
-$label-border-radius:     2px !default;
-$checkbox-border-radius:  2px !default;
-$border-radius:           3px !default;
-$button-border-radius:    5px !default;
-$box-shadow:              0 0 2px $color-shadow !default;
-$focus-outline:           2px dotted $color-gray-light;
-$focus-spacing:           3px;
-$nav-width:               951px !default;
+$text-max-width:                66ch !default; // 66 characters per line
+$lead-max-width:                77rem !default;
+$site-max-width:                1040px !default;
+$site-margins:                  3rem !default;
+$site-margins-mobile:           1.5rem !default;
+$article-max-width:             600px !default;
+$input-max-width:               46rem !default;
+$label-border-radius:           2px !default;
+$checkbox-border-radius:        2px !default;
+$border-radius:                 3px !default;
+$button-border-radius:          5px !default;
+$box-shadow:                    0 0 2px $color-shadow !default;
+$focus-outline:                 2px dotted $color-gray-light !default;
+$focus-spacing:                 3px !default;
+$nav-width:                     951px !default;
+$sidenav-current-border-width:  0.4rem !default; // must be in rem for math
 
 // 44 x 44 pixels hit target following Apple iOS Human Interface
 // Guidelines

_sass/uswds/elements/_inputs.scss

@@ -112,7 +112,9 @@ select {
   appearance: none;
   background-color: $color-white;
   background-image: url('#{$image-path}/arrow-both.png');
-  background-image: url('#{$image-path}/arrow-both.svg');
+  // Ensure browsers that don't support SVG in background-image (IE 11 and below) fall back to PNG. 
+  // See https://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/
+  background-image: none, url('#{$image-path}/arrow-both.svg'), url('#{$image-path}/arrow-both.png');
   background-position: right 1.3rem center;
   background-repeat: no-repeat;
   background-size: 1rem;

assets/js/main.js

@@ -0,0 +1,14 @@
+---
+---
+
+{%- if site.anchor_js_targets -%}
+  {%- assign _anchor_js_targets = site.anchor_js_targets -%}
+  {%- assign _prepended_targets = '' | split: '' -%}
+  {%- for _target in _anchor_js_targets -%}
+    {%- assign _prepended_target = _target | prepend: '.usa-layout-docs ' -%}
+    {%- assign _prepended_targets = _prepended_targets | push: _prepended_target -%}
+  {%- endfor -%}
+
+// Adding anchor links to headers on docs layouts only
+anchors.add('{{ _prepended_targets | join: ', ' }}');
+{%- endif -%}