uswds-jekyll 5.4.0 → 5.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d031cfbe163942532cb33aa9102c51309c3fa957ba006c3e3683ae23fdc78e1b
-  data.tar.gz: 261d98f68bf1354408c556623df791ba577ef2ccd987b32b180c2a877d543565
+  metadata.gz: b81c818c8c36ee6ff284b72f88f16291df81c96d6acfca4ad6f2d80fccc5514b
+  data.tar.gz: d2e7d9a759d955280cb663c91f31d6bec81974bf4be8f8c439ddd33c08cf388d
 SHA512:
-  metadata.gz: c81d1c591e147b094895554f9584a7881924c6085cfd3bc14ab6400ff2fee9eeb3ae54d7e0c9da38ece07558c863cc0fcbbcd8e0027c9d9eb1a0dc23fa9368b9
-  data.tar.gz: b6e9405a3d6e5c0569e4bb8e6d1f844672d216c3f64285c14ec6f454d94a743f69d9a32625066bfda46d465d292b7827baaf18b00a9e45097bee6a0b6711b458
+  metadata.gz: 04f7672fc8b239d8c16c78993fed2ea252807114b9e26e6724d1a1ff9fd9a7531ea333cef72ce9c49af4f4b7433437905eb72c413d31d8b4ecbcce9deb4b2359
+  data.tar.gz: cbbc6dab8db13fe5ece8df80f40a5971a34f4498cb2b5a77399757c93d250e7fcbac62148d3ded35e813b9611019ff898dfc38b4013f6b0d3c0eb524da4ceff0

data/README.md

@@ -1,3 +1,5 @@
+**This repository is in maintenance mode and only accepting fixes. The Tech Portfolio and TTS Digital Council are working on a strategy for TTS microsites which will inform the future of this theme. [Open an issue to provide any feedback](https://github.com/18F/uswds-jekyll/issues/new).**
+
 # Jekyll + U.S. Web Design System
 
 This is a [Jekyll theme](https://jekyllrb.com/docs/themes/) for the
@@ -19,6 +21,7 @@ This is a [Jekyll theme](https://jekyllrb.com/docs/themes/) for the
    - [Search](#search)
    - [Analytics](#analytics)
    - [Last modified date](#last-modified-date)
+   - [Edit page](#edit-page)
    - [Anchor JS](#anchor-js)
    - [Private Eye JS](#private-eye-js)
 1. [Assets](#assets)
@@ -29,7 +32,7 @@ This is a [Jekyll theme](https://jekyllrb.com/docs/themes/) for the
    - [Overriding includes and layouts](#overriding-includes-and-layouts)
 1. [Components](#components)
    - [Header](#header)
-   - [Footer](#footer)
+   - [Identifier](#identifier)
 1. [Layouts](#layouts)
    - [Default](#layout-default)
    - [Page](#layout-page)
@@ -103,7 +106,7 @@ To reference a specific version of this theme:
 
 ## Configuration
 
-Configuration of common elements ([header](#header), [footer](#footer), [navigation](#navigation), etc.) happens in your project's [data files](https://jekyllrb.com/docs/datafiles/). See this project's [data directory](_data) for reference configurations of each component.
+Configuration of common elements ([header](#header), [identifier](#identifier), [navigation](#navigation), etc.) happens in your project's [data files](https://jekyllrb.com/docs/datafiles/). See this project's [data directory](_data) for reference configurations of each component.
 
 The [default layout](#layout-default) also provides a mechanism for automatically including [stylesheets](#stylesheets) and [scripts](#scripts) on a site-wide, layout-wide, and per-page basis. See [asset load order](#asset-load-order) for more information.
 
@@ -143,7 +146,7 @@ primary:
     links: <links>
 ```
 
-This scheme allows you to define navigational elements that can be shared by different components, such as the [header](#header) and [footer](#footer). See the documentation for those components for more info.
+This scheme allows you to define navigational elements that can be shared by different components, such as the [header](#header) and [sidenav](#Page-subnavigation). See the documentation for those components for more info.
 
 ### Page title
 
@@ -174,7 +177,7 @@ subnav:
 ## Section two
 ```
 
-As with the [header](#header) and [footer](#footer), the `sidenav` field may either reference a common [navigation list](#navigation) from `_data/navigation.yml` (recommended) or be a literal list of links.
+As with the [header](#header), the `sidenav` field may either reference a common [navigation list](#navigation) from `_data/navigation.yml` (recommended) or be a literal list of links.
 
 The `subnav` field should be used to link to sections _within_ the current page, because links to other pages will cause the linking page's side navigation to collapse when visited.
 
@@ -292,10 +295,12 @@ To add a user feedback form, create a new survey through [Touchpoints](https://t
 
 To show the last date a page was last modified by:
 
-1. Add this line to the `footer.yml` data file:
+1. Add these lines to the `edit-page.yml` data file:
 
     ```yml
-    last_updated: true
+    last_modified:
+      display_date: true
+      date_format: '%B %d, %Y'
     ```
 
 1. Add the following to your `Gemfile`:
@@ -306,7 +311,17 @@ To show the last date a page was last modified by:
     end
     ```
 
-This will add the date right before the footer component.
+This will add the date right before the identifier component.
+
+### Edit page
+To add a link which will allow visitors to submit edits to the current page via GitHub, add the following lines to to the `edit-page.yml` data file:
+
+```yml
+edit_page:
+  display_link: true
+  text: "Edit this page"
+```
+This will add the edit link right before the identifier component.
 
 ### Anchor JS
 
@@ -424,12 +439,10 @@ The [header.html include](_includes/header.html) sets the `header` template vari
 
 See this repo's [header.yml](_data/header.yml) for more info.
 
-### Footer
-
-The [footer.html include](_includes/footer.html) sets the `footer` template variable to `site.data.footer`, the value of which is set in your Jekyll project's `_data/footer.yml` file. Then it includes [components/footer.html](_includes/components/footer.html) to
-render the footer's markup.
+### Identifier
 
-See this repo's [footer.yml](_data/footer.yml) for more info.
+The [components/identifier.html include](_includes/components/identifier.html) sets the `identifier` template variable to `site.data.identifier`, the value of which is set in your Jekyll project's `_data/identifier.yml` file.
+See this repo's [identifier.yml](_data/identifier.yml) for more info.
 
 ## Layouts
 
@@ -546,9 +559,6 @@ See [this example pull request](https://github.com/18F/before-you-ship/pull/458)
    --> header.yml
    type: [basic | basic-mega | extended | extended-mega]
 
-   --> footer.yml
-   type: [slim | default | big]
-
    --> theme.yml (examples)
    colors:
      usa-banner:
@@ -590,41 +600,62 @@ See [this example pull request](https://github.com/18F/before-you-ship/pull/458)
        side-nav-link-hover: 'primary-dark'
        side-nav-link-hover-bg: 'base-lightest'
        side-nav-link-current: 'primary-dark'
-     footer:
-       primary-footer-bg: 'base-lightest'
-       primary-footer-link: 'ink'
-       footer-bg: 'base-lighter'
-       footer-text: 'ink'
-       footer-link: 'ink'
-       footer-social-link: 'black-transparent-10'
 
    ```
 
 1. Check that css is referencing `uswds-theme.css`
 
+
 ## Development
 
-To develop this theme and/or test it locally:
+This section explains how to develop this theme and/or test it locally.
 
-1. Clone this repo
 
-1. Check the version of USWDS in `package.json` — update to the newest version if necessary, and sync its new files to the theme.
+### Requirements
 
-   > `rake update`
+- [Ruby](https://www.ruby-lang.org/)
+- [Bundler](https://bundler.io/) 2.x
+- [Node.js](https://nodejs.org/)
 
-1. Start Jekyll to preview the effects of your changes. This will build the Jekyll site, watch the Sass files, and recompile the Sass when there are changes.
 
-   > `npm start`
+### Setup
 
-   **or**
+Install the Node.js dependencies.
 
-   Create a new Jekyll project, follow the
-   [installation](#installation) instructions, then change your
-   `Gemfile` to point at the local clone of this repo:
+    $ npm install
 
-   ```ruby
-   gem 'uswds-jekyll', :path => '../path/to/uswds-jekyll'
-   ```
+Install Ruby dependencies.
+
+    $ npm run setup-jekyll
+
+Start the application. This allows you to preview the effects of your changes.
+Jekyll will build the site, watch the Sass files, and rebuild when there are
+changes.
+
+    $ npm start
+
+Open your web browser to [localhost:4000](http://localhost:4000/).
+
+
+### To update USWDS
+
+When new version of USWDS is released, you should pull in the latest assets.
+
+    $ rake update
+
+Review and commit the assets.
+
+
+### Working with a Jekyll site
+
+If you want to test an existing Jekyll site that uses uswds-jekyll, you can link
+the gem to your local uswds-jekyll repo.
+
+In your Jekyll site, change your `Gemfile` to point at the local clone of this repo.
+
+```ruby
+gem 'uswds-jekyll', :path => '../path/to/uswds-jekyll'
+```
 
 ### Publish to Rubygems
 

data/_includes/components/banner.html

@@ -16,6 +16,11 @@
       </div>
     </header>
     <div class="usa-banner__content usa-accordion__content" id="gov-banner">
+      <script type="text/javascript">
+        // Hide the gov banner immediately rather than waiting for external JS
+        // sources to load and execute.
+        document.getElementById("gov-banner").setAttribute("hidden", "");
+      </script>
       <div class="grid-row grid-gap-lg">
         <div class="usa-banner__guidance tablet:grid-col-6">
           <img class="usa-banner__icon usa-media-block__img" src="{{ site.baseurl }}/assets/uswds/img/icon-dot-gov.svg" role="img" alt="Dot gov">

data/_includes/components/edit-page.html

@@ -0,0 +1,24 @@
+{% assign options = site.data.edit-page %}
+
+{% if options.edit_page.display_link or (options.last_modified.display_date and page.last_modified_at) %}
+<div class="grid-container grid-container-desktop">
+  <div class="grid-row tablet-lg:grid-gap-2 edit-page">
+    <div class="grid-col-12 tablet:grid-col-6 edit-page__link">
+      <p>
+        {% if options.edit_page %}
+        <span>
+          {% include components/github-edit.html footer=identifier path=page.path %}
+        </span>
+        {% endif %}
+      </p>
+    </div>
+    <div class="grid-col-12 tablet:grid-col-6 edit-page__date">
+      <p>
+        {% if options.last_modified and page.last_modified_at %}
+        <span><small>Last updated: {{ page.last_modified_at | date: options.last_modified.date_format }}</small></span>
+        {% endif %}
+      </p>
+    </div>
+  </div>
+</div>
+{% endif %}

data/_includes/components/identifier.html

@@ -0,0 +1,122 @@
+{% assign user = site.data.identifier %}
+{% assign static = site.data.static.identifier %}
+<div class="usa-identifier">
+  <section
+    class="usa-identifier__section usa-identifier__section--masthead"
+    aria-label="{{ static.masthead.label.content[user.lang] }}">
+    <div class="usa-identifier__container">
+      {%- if user.masthead.parent.logo -%}
+      <div class="usa-identifier__logos">
+        <a href="{{ user.masthead.parent.url[user.lang] }}" class="usa-identifier__logo">
+          <img
+            class="usa-identifier__logo-img"
+            {% if user.masthead.parent.logo == "default" %}
+            src="{{ site.baseurl }}/assets/uswds/img/circle-gray-20.svg"
+            {% else %}
+            src="{{ site.baseurl }}/{{ user.masthead.parent.logo }}"
+            {% endif %}
+            {% if user.lang == "en" %}
+            alt="{{ user.masthead.parent.name[user.lang] }} logo"
+            {% else if user.lang == "es" %}
+            alt="Logo de la {{ user.masthead.parent.name[user.lang] }}"
+            {% endif %}
+            role="img">
+        </a>
+        {%- if user.masthead.agency.logo %}
+        <a href="javascript:void(0);" class="usa-identifier__logo">
+          <img
+            class="usa-identifier__logo-img"
+            {% if user.masthead.agency.logo == "default" %}
+            src="{{ site.baseurl }}/assets/uswds/img/circle-gray-20.svg"
+            {% else %}
+            src="{{ site.baseurl }}/{{ user.masthead.agency.logo }}"
+            {% endif %}
+            {% if user.lang == "en" %}
+            alt="{{ user.masthead.agency.name[user.lang] }} logo"
+            {% else if user.lang == "es" %}
+            alt="Logo de la {{ user.masthead.agency.name[user.lang] }}"
+            {% endif %}
+            role="img">
+        </a>
+        {%- endif -%}
+      </div>
+      {%- endif -%}
+      <div class="usa-identifier__identity" aria-label="{{ static.masthead.description.label.content[user.lang] }}">
+        <p class="usa-identifier__identity-domain">{{ user.domain }}</p>
+        <p class="usa-identifier__identity-disclaimer">
+          {{- static.masthead.text.content[user.lang] }} <a href="{{ user.masthead.parent.url[user.lang] }}">{{ user.masthead.parent.name[user.lang] }}</a>
+          {%- if user.masthead.agency.url[user.lang] %}
+          {%- if user.lang == "en" %} and
+          {%- else if user.lang == "es" %} y
+          {%- endif -%}
+          {% if user.masthead.agency.name[user.lang] %}
+          {%- if user.lang == "en" %} the
+          {%- endif %}
+          {%- endif %} <a href="{{ user.masthead.agency.url[user.lang] }}">
+          {%- if user.masthead.agency.name[user.lang] -%}
+          {{- user.masthead.agency.name[user.lang] }}
+          {%- else -%}
+          {{ user.masthead.agency.shortname }}
+          {%- endif -%}
+          </a>
+          {%- endif -%}
+          {%- if user.masthead.taxpayer_disclaimer.display -%}
+          . {{ static.masthead.taxpayer_disclaimer.content[user.lang] }}
+          {%- endif -%}
+        </p>
+      </div>
+    </div>
+  </section>
+  <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="{{ static.required_links.label.content[user.lang] }}">
+    <div class="usa-identifier__container">
+      <ul class="usa-identifier__required-links-list">
+        <li class="usa-identifier__required-links-item">
+          <a href="{{ user.required_links.links.about.url[user.lang] }}" class="usa-identifier__required-link">
+            {{- static.required_links.links.about.content[user.lang] }} {{ user.masthead.parent.shortname -}}
+          </a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="{{ user.required_links.links.accessibility.url[user.lang] }}"
+            class="usa-identifier__required-link">
+            {{- static.required_links.links.accessibility.content[user.lang] -}}
+          </a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="{{ user.required_links.links.foia.url[user.lang] }}"
+            class="usa-identifier__required-link usa-link">
+            {{- static.required_links.links.foia.content[user.lang] -}}
+          </a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="{{ user.required_links.links.no_fear.url[user.lang] }}"
+            class="usa-identifier__required-link usa-link">
+            {{- static.required_links.links.no_fear.content[user.lang] -}}
+          </a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="{{ user.required_links.links.oig.url[user.lang] }}" class="usa-identifier__required-link usa-link">
+            {{- static.required_links.links.oig.content[user.lang] -}}
+          </a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="{{ user.required_links.links.performance.url[user.lang] }}" class="usa-identifier__required-link usa-link">
+            {{- static.required_links.links.performance.content[user.lang] -}}
+          </a>
+        </li>
+        <li class="usa-identifier__required-links-item">
+          <a href="{{ user.required_links.links.privacy.url[user.lang] }}" class="usa-identifier__required-link usa-link">
+            {{- static.required_links.links.privacy.content[user.lang] -}}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  {% if user.usagov.display -%}
+  <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="{{ static.usagov.label.content[user.lang] }}">
+    <div class="usa-identifier__container">
+      <div class="usa-identifier__usagov-description">{{ static.usagov.description.content[user.lang] }}</div>
+      <a href="{{ user.usagov.link.url[user.lang] }}" class="usa-link">{{ static.usagov.link.content[user.lang] }}</a>
+    </div>
+  </section>
+  {% endif -%}
+</div>

data/_includes/footer.html

@@ -1,9 +1,4 @@
-{% assign footer = site.data.footer %}
-
-{% if footer.type == 'slim' %}
-  {% include components/footer--slim.html %}
-{% elsif footer.type == 'default' or footer.type == 'medium' %}
-  {% include components/footer--default.html %}
-{% elsif footer.type == 'big' %}
-  {% include components/footer--big.html %}
-{% endif %}
+<footer>
+{% include components/edit-page.html %}
+{% include components/identifier.html %}
+</footer>

data/_includes/scripts.html

@@ -40,7 +40,7 @@
 
       var script = document.createElement("script");
       script.type = "text/javascript";
-      script.src = "//search.usa.gov/javascripts/remote.loader.js";
+      script.src = "https://search.usa.gov/javascripts/remote.loader.js";
       document.getElementsByTagName("head")[0].appendChild(script);
 
 //]]>
@@ -49,17 +49,5 @@
 
 
 {% if site.touchpoints_form_id %}
-<script type="text/javascript">
-//<![CDATA[
-      var touchpoints_config = { siteHandle:"{{ site.touchpoints_form_id }}" };
-
-      var script = document.createElement("script");
-      script.type = "text/javascript";
-      script.src = `https://touchpoints.app.cloud.gov/touchpoints/${touchpoints_config.siteHandle}/js`;
-      script.async = true;
-      document.getElementsByTagName("head")[0].appendChild(script);
-
-//]]>
-</script>
-
+<script src="https://touchpoints.app.cloud.gov/touchpoints/{{ site.touchpoints_form_id }}.js" async></script>
 {% endif %}

data/_sass/uswds/components/_all.scss

@@ -1,5 +1,6 @@
 @import "alt-color-section";
 @import "card";
+@import "edit-page";
 @import "footer";
 @import "header";
 @import "hero";

data/_sass/uswds/components/_edit-page.scss

@@ -0,0 +1,8 @@
+.edit-page p {
+  @include u-font ('sans', 'md');
+}
+.edit-page__date p {
+  @include at-media("tablet") {
+    text-align: right;
+  }
+}

data/_sass/uswds/components/_footer.scss

@@ -1,32 +1,4 @@
-.usa-footer__primary-section {
-  @if variable-exists(primary-footer-bg) {
-    background-color: color($primary-footer-bg);
-  }
-
-  .usa-footer__primary-link {
-    @if variable-exists(primary-footer-link) {
-      color: color($primary-footer-link);
-    }
-  }
-}
-
-.usa-footer__secondary-section {
-  @if variable-exists(footer-bg) {
-    background-color: color($footer-bg);
-  }
-  @if variable-exists(footer-text) {
-    color: color($footer-text);
-  }
-
-  a {
-    @if variable-exists(footer-link) {
-      color: color($footer-link);
-    }
-  }
-
-  .usa-social-link {
-    @if variable-exists(footer-social-link) {
-      background-color: color($footer-social-link);
-    }
-  }
+footer {
+  margin-top: auto;
+  order: 10;
 }

data/_sass/uswds/custom/_uswds-theme-custom-styles.scss

@@ -45,3 +45,12 @@ i.e.
   width: 100%;
   overflow: hidden;
 }
+
+//Settings for pushing footer to the bottom
+@include at-media("desktop") {
+  body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+}

data/assets/js/private_eye_conf.js

@@ -4,6 +4,7 @@ document.addEventListener('DOMContentLoaded', function() {
       defaultMessage: "This link is private to TTS.",
       ignoreUrls: [
         '18f.slack.com',
+        'airtable.com',
         'anywhere.gsa.gov',
         'bookit.gsa.gov',
         'calendar.gsa.gov',
@@ -36,4 +37,4 @@ document.addEventListener('DOMContentLoaded', function() {
         'tock.18f.gov'
       ]
     });
-  }, false );
+  }, false );

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: uswds-jekyll
 version: !ruby/object:Gem::Version
-  version: 5.4.0
+  version: 5.5.0
 platform: ruby
 authors:
 - Shawn Allen
@@ -9,10 +9,10 @@ authors:
 - Brian Hurst
 - Scott Weber
 - Dan O. Williams
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-15 00:00:00.000000000 Z
+date: 2023-03-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -90,7 +90,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description:
+description: 
 email:
 - daniel.williams@gsa.gov
 executables: []
@@ -102,6 +102,7 @@ files:
 - _includes/analytics.html
 - _includes/banner.html
 - _includes/components/banner.html
+- _includes/components/edit-page.html
 - _includes/components/footer--big.html
 - _includes/components/footer--default.html
 - _includes/components/footer--slim.html
@@ -109,6 +110,7 @@ files:
 - _includes/components/graphic-list.html
 - _includes/components/header.html
 - _includes/components/hero.html
+- _includes/components/identifier.html
 - _includes/components/search.html
 - _includes/favicon.html
 - _includes/footer.html
@@ -135,6 +137,7 @@ files:
 - _sass/uswds/components/_all.scss
 - _sass/uswds/components/_alt-color-section.scss
 - _sass/uswds/components/_card.scss
+- _sass/uswds/components/_edit-page.scss
 - _sass/uswds/components/_footer.scss
 - _sass/uswds/components/_header.scss
 - _sass/uswds/components/_hero.scss
@@ -2274,7 +2277,7 @@ homepage: https://designsystem.digital.gov/
 licenses:
 - CC0-1.0
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2289,8 +2292,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.16
-signing_key:
+rubygems_version: 3.1.6
+signing_key: 
 specification_version: 4
 summary: A Jekyll theme for the U.S. Web Design System.
 test_files: []