uswds-jekyll 2.2.1 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 99ba6ecdaa6e2222ad5badd4f9995715631a5788
-  data.tar.gz: 0b1d99793cc2a1dd70ec365ff67d38875d973441
+  metadata.gz: f8833f4d71fde3ce27a1a1e93a4668d850fabd94
+  data.tar.gz: 076066966ac5df1f30f5a700947d5934c4fda813
 SHA512:
-  metadata.gz: d4de3616c9c518919782a0ec2f08eb344d2415923e470b0fbc9a786b01b2703fdee887c62bb7b9b5a874f29fdfa266411c0e956d2c6b56c1a38899e164efc1fe
-  data.tar.gz: 06667ae3524bad512cac7b7296dbe8f980f53653e68b40696e210b1a1c21849850cb17bc499635850f6b5934aa056f681cb86476f65e7a2844d9326314bac3c4
+  metadata.gz: 587a658fb06380eb70d10527ef86ad9a6a70883e21dbc00af0285dac43bf1d75ef9c7b0f725525a685c4a2cb90a3bb624835cb3e9b7e6934a7da654e3b554dd8
+  data.tar.gz: b4694ce851e925d33a86260fa3b0dac4684e5c1cc2ac739f5f1dec7255d123049f03e9e99429122e535897cade21643bb697b61b3931e71803daa9374516e278

data/README.md

@@ -1,7 +1,7 @@
-# Jekyll + U.S. Web Design Standards
+# Jekyll + U.S. Web Design System
 
 This is a [Jekyll theme](https://jekyllrb.com/docs/themes/) for the
-[U.S. Web Design Standards](https://standards.usa.gov).
+[U.S. Web Design System](https://designsystem.digital.gov).
 
 ## Table of contents
 1. [Installation](#installation)
@@ -13,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)
@@ -41,12 +42,6 @@ This is a [Jekyll theme](https://jekyllrb.com/docs/themes/) for the
     ```ruby
     gem 'uswds-jekyll'
     ```
-1. Install the `jekyll_pages_api_search` by adding it to your `Gemfile`
-    ```
-    group :jekyll_plugins do
-      gem 'jekyll_pages_api_search'
-    end
-    ```
 
 1. Fetch and update your bundled gems by running:
 
@@ -74,12 +69,7 @@ You will need to restart your Jekyll server to see the effects.
     ```ruby
     gem 'uswds-jekyll', :git => 'https://github.com/18F/uswds-jekyll.git'
     ```
-1. Install the `jekyll_pages_api_search` by adding it to your `Gemfile`:
-    ```
-    group :jekyll_plugins do
-      gem 'jekyll_pages_api_search'
-    end
-    ```
+
 1. Set the `theme` in your site's Jekyll configuration,
    `_config.yml`:
 
@@ -235,11 +225,12 @@ redcarpet:
 
 ### Search
 
-[Jekyll pages api search](https://github.com/18F/jekyll_pages_api_search) is used for search and can be configured in `_config.yml` and `_data/header.yml`.
+[Search.gov](https://search.gov/) is used for search and can be configured in `_config.yml`.
 
-Search uses the [Search results](#search-results) page layout.
+Before configuring your search you will need to create a search.gov account and set up your website
+with search.gov.
 
-**Pro tip:** use [Jekyll front matter defaults](https://jekyllrb.com/docs/configuration/#front-matter-defaults) to hide directories from showing in search results.
+After setting up your site on search.gov you can then add your `site handle` to the `config.yml`.
 
 ### Analytics
 
@@ -261,10 +252,20 @@ 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)
-includes each incorporate the Standards CSS and JS files if the corresponding
+includes each incorporate the USWDS CSS and JS files if the corresponding
 `styles` and `scripts` lists aren't defined in your `_config.yml`. So unless
 you add one or both of those manually, your HTML will include the following:
 
@@ -368,7 +369,7 @@ and layouts.
       - /assets/main.css
     ```
 
-All of the Standards' [SCSS source files](https://github.com/18F/web-design-standards/tree/master/src/stylesheets)
+All of the USWDS [SCSS source files](https://github.com/uswds/uswds/tree/master/src/stylesheets)
 are placed in the [_sass/uswds](_sass/uswds) directory and are available as
 Sass imports via `@import 'uswds/<path>';`. See the [Jekyll docs][Jekyll Sass]
 for more information about its Sass/SCSS support, and configuring its Sass
@@ -419,7 +420,7 @@ your site by placing a file with the same name into your site's
 
 ## Components
 
-For some [Standards components](https://standards.usa.gov/components/),
+For some [USWDS components](https://designsystem.digital.gov/components/),
 there are two different files that control how data is passed to
 the template:
 
@@ -479,7 +480,7 @@ layout: name
 
 ### `layout: default`
 
-This is the bare-bones Standards layout, which does all of the
+This is the bare-bones USWDS layout, which does all of the
 basic page scaffolding then drops the page content into the
 `<main>` element. All of the other layouts "inherit" this one and
 provide other features in the content block.
@@ -492,7 +493,7 @@ the [page layout](_layouts/page.html#L3-L4).
 ### `layout: home`
 
 This layout implements the [home page
-template](https://standards.usa.gov/page-templates/landing/), which
+template](https://designsystem.digital.gov/page-templates/landing/), which
 accommodates the following [front matter]:
 
 ```yml
@@ -533,7 +534,7 @@ page](demo/home.html) for an example of how to structure it.
 ### `layout: page`
 
 This layout implements the [document page
-template](https://standards.usa.gov/page-templates/docs/), and
+template](https://designsystem.digital.gov/page-templates/docs/), and
 accommodates an optional side navigation. Supported [front matter]:
 
 * `sidenav` is a key _into_ `_data/navigation.yml`. See the

data/_includes/components/footer--medium.html

@@ -0,0 +1,100 @@
+{% if footer %}
+<footer class="usa-footer usa-footer-medium" role="contentinfo">
+
+  {% if footer.last_updated %}
+    <div class="usa-grid">
+      <div class="usa-width-one-whole">
+        <p>Last updated: {{ page.last_modified_at | date: '%B %d, %Y at %I:%M %p' }}</p>
+      </div>
+    </div>
+  {% endif %}
+  
+  {% if footer.top %}
+    <div class="usa-grid usa-footer-return-to-top">
+      <a href="{{ footer.top.href | default: '#' }}">{{ footer.top.text | default: 'Return to top' }}</a>
+    </div>
+  {% endif %}
+
+
+
+  {% if footer.links %}
+    {% assign footer_links = site.data.navigation[footer.links] | default: footer.links %}
+    {% assign _sizes = 'whole half third fourth sixth' | split: ' ' %}
+    {% assign _size = footer_links.size | minus: 1 %}
+    {% assign _size = _sizes[_size] | default: 'whole' %}
+  <div class="usa-footer-primary-section">
+    <div class="usa-grid">
+      <nav class="usa-footer-nav">
+        <ul class="usa-unstyled-list">
+          {% for _link in footer_links %}
+          <li class="usa-width-one-{{ _size }} usa-footer-primary-content">
+            <a class="usa-footer-primary-link" href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+              {{ _link.text }}
+            </a>
+          </li>
+          {% endfor %}
+        </ul>
+      </nav>
+    </div>
+  </div>
+  {% endif %}
+
+  {% if footer.logos or footer.heading or footer.contact %}
+  <div class="usa-footer-secondary_section">
+    <div class="usa-grid">
+      <div class="usa-footer-logo usa-width-one-half">
+        {% if footer.logos %}
+          {% for logo in footer.logos -%}
+            {% if logo.url %}
+              <a href="{{ logo.url }}">
+            {% endif %}
+            <img class="usa-footer-logo-img" src="{% if logo.external %}{{ logo.src }}{% else %}{{ logo.src | relative_url }}{% endif %}" alt="{{ logo.alt }}"{% if logo.width %}width="{{ logo.width }}"{% endif %}{% if logo.height %}height="{{ logo.height }}"{% endif %}>
+            {% if logo.url %}
+              </a>
+            {% endif %}
+          {% endfor %}
+        {% endif %}
+
+        {% if footer.heading %}
+        <h3 class="usa-footer-logo-heading">{{ footer.heading }}</h3>
+        {% endif %}
+      </div>
+
+      {% if footer.contact %}
+      <div class="usa-footer-contact-links usa-width-one-half">
+        {% assign social_links = site.data.footer.contact.social_links %}
+        {% if footer.contact.contact_links %}
+          {% for _link in social_links %}
+            <a class="usa-link-{{ _link.type | default: 'generic' }}" href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+              <span>{{ _link.text }}</span>
+            </a>
+          {% endfor %}
+        {% endif %}
+        {% if footer.contact.heading %}
+          <h3 class="usa-footer-contact-heading">{{ footer.contact.heading }}</h3>
+          {% endif %}
+          {% if footer.contact.contact_links %}
+            <address>
+              {% assign contact_links = site.data.footer.contact.contact_links %}
+              {% for _link in contact_links %}
+                <div class="usa-footer-primary-content usa-footer-contact_info">
+                  <p>
+                    <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+                      {{ _link.text }}
+                    </a>
+                  </p>
+                </div>
+              {% endfor %}
+            </address>
+        {% endif %}
+      {% endif %}
+      {% if footer.edit_page %}
+        <small><a href="https://github.com/{{ site.github.organization }}/{{ site.github.repository }}/edit/{{ site.github.default_branch }}/{{ page.path }}" class="usa-sidenav-edit" target="_blank">{{ footer.edit_page.text | default: 'Edit this page' }}</a></small>
+      {% endif %}
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
+</footer>
+{% endif %}

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

@@ -1,6 +1,6 @@
 {% if header %}
 <header class="usa-header usa-header-basic" role="banner">
-  {% include banner.html %}
+
   <div class="usa-nav-container">
     <div class="usa-navbar">
       <button class="usa-menu-btn">Menu</button>
@@ -50,18 +50,20 @@
         {% endif %}
 
         {% assign _secondary = header.secondary %}
-
-
-          {% if _secondary.search %}
-          <div class="usa-search usa-search-small" role="search">
-            <form action="{{ _secondary.search.action | relative_url }}">
-                <label class="usa-sr-only" for="search-field-small">Search small</label>
-                <input id="search-field-small" type="search" name="{{ _secondary.search.query | default: 'search' }}">
-                <button type="submit">
+          {% if site.search_site_handle  %}
+            <form accept-charset="UTF-8" action="https://search.usa.gov/search" id="search_form" method="get" class="usa-search usa-search-small js-search-form">
+              <div style="margin:0;padding:0;display:inline">
+                <input name="utf8" type="hidden" value="&#x2713;" />
+              </div>
+              <input id="affiliate" name="affiliate" type="hidden" value="{{ site.search_site_handle }}" />
+              <div role="search">
+                <label for="query" class="usa-sr-only">Enter Search Term(s):</label>
+                <input autocomplete="off" class="usagov-search-autocomplete" id="query" name="query" type="search" />
+                <button type="submit" name="commit">
                   <span class="usa-sr-only">Search</span>
                 </button>
+              </div>
             </form>
-          </div>
           {% endif %}
         </div>
       </div>

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

@@ -1,6 +1,6 @@
 {% if header %}
 <header class="usa-header usa-header-extended" role="banner">
-  {% include banner.html %}
+
   <div class="usa-navbar">
     <button class="usa-menu-btn">Menu</button>
     <div class="usa-logo" id="logo">
@@ -51,19 +51,23 @@
       {% assign _secondary = header.secondary %}
       {% if _secondary %}
       <div class="usa-nav-secondary">
-        {% if _secondary.search %}
-          <form action="{{ _secondary.search.action | relative_url }}" class="usa-search usa-search-small js-search-form usa-sr-only">
-          <div role="search">
-            <label class="usa-sr-only" for="search-input">Search small</label>
-            <input id="search-input" type="search" name="{{ _secondary.search.query | default: 'search' }}">
-            <button type="submit">
-              <span class="usa-sr-only">Search</span>
-            </button>
-          </div>
-        </form>
+        {% if site.search_site_handle  %}
+          <form accept-charset="UTF-8" action="https://search.usa.gov/search" id="search_form" method="get" class="usa-search usa-search-small js-search-form usa-sr-only">
+            <div style="margin:0;padding:0;display:inline">
+              <input name="utf8" type="hidden" value="&#x2713;" />
+            </div>
+            <input id="affiliate" name="affiliate" type="hidden" value="{{ site.search_site_handle }}" />
+            <div role="search">
+              <label for="query" class="usa-sr-only">Enter Search Term(s):</label>
+              <input autocomplete="off" class="usagov-search-autocomplete" id="query" name="query" type="search" />
+              <button type="submit" name="commit">
+                <span class="usa-sr-only">Search</span>
+              </button>
+            </div>
+          </form>
         {% endif %}
         <ul class="usa-unstyled-list usa-nav-secondary-links">
-          {% if _secondary.search %}
+          {% if site.search_site_handle %}
           <li class="js-search-button-container">
             <button class="usa-header-search-button js-search-button">Search</button>
           </li>

data/_includes/footer.html

@@ -1,2 +1,3 @@
 {% assign footer = site.data.footer %}
-{% include components/footer.html %}
+
+{% include components/footer--medium.html %}

data/_includes/header.html

@@ -1,5 +1,9 @@
 {% assign header = site.data.header %}
 
+{% if header.usa_banner %}
+  {% include components/banner.html %}
+{% endif %}
+
 {% if header.type == 'basic' %}
   {% include components/header--basic.html %}
 {% else %}

data/_includes/scripts.html

@@ -23,8 +23,17 @@
 <script src="{{ _src | replace: _async_marker, '' | relative_url }}"{% if _script.async or _src contains _async_marker %} async{% endif %}></script>
 {% endfor %}{% endfor %}
 
-{% if site.jekyll_pages_api_search and page.layout == 'search-results' %}
-<script>JEKYLL_PAGES_API_SEARCH_BASEURL = '{{ site.baseurl }}';</script>
-<script async src="{{ site.baseurl }}/assets/js/search-bundle.js">
+
+{% if site.search %}
+<script type="text/javascript">
+//<![CDATA[
+      var usasearch_config = { siteHandle:"{{ site.search.site_handle }}" };
+
+      var script = document.createElement("script");
+      script.type = "text/javascript";
+      script.src = "//search.usa.gov/javascripts/remote.loader.js";
+      document.getElementsByTagName("head")[0].appendChild(script);
+
+//]]>
 </script>
 {% endif %}

data/_sass/uswds/components/_header.scss

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

data/_sass/uswds/components/_sidenav.scss

@@ -1,31 +1,8 @@
 
 .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;
-  }
-}

data/_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 $site-margins-mobile;
+    padding: 0.85rem 1rem 0.85rem 1.8rem;
     text-decoration: none;
 
     &:hover {
@@ -207,10 +207,10 @@
     }
 
     &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
-      border-left: $sidenav-current-border-width solid $color-primary;
+      border-left: 0.4rem solid $color-primary;
       color: $color-primary;
       font-weight: $font-bold;
-      padding-left: $site-margins-mobile - $sidenav-current-border-width;
+      padding-left: 1.4rem;
     }
   }
 }

data/_sass/uswds/core/_variables.scss

@@ -128,22 +128,21 @@ $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 !default;
-$focus-spacing:                 3px !default;
-$nav-width:                     951px !default;
-$sidenav-current-border-width:  0.4rem !default; // must be in rem for math
+$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;
 
 // 44 x 44 pixels hit target following Apple iOS Human Interface
 // Guidelines