uswds-jekyll 2.2.1 → 5.0.0

data/_includes/analytics.html

@@ -1,16 +1,13 @@
 {% if site.google_analytics_ua %}
 <!-- Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics_ua }}"></script>
 <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');
+  window.dataLayer = window.dataLayer || [];
+  function gtag() { dataLayer.push(arguments); }
+  gtag('js', new Date());
 
-  // anonymize user IPs (chops off the last IP triplet)
-  ga('set', 'anonymizeIp', true);
-  ga('set', 'forceSSL', true);
-  ga('send', 'pageview');
+  // `forceSSL` was used for analytics.js (the older Google Analytics script). It isn't documented for gtag.js, but the term occurs in the gtag.js code; figure it doesn't hurt to leave it in. -@afeld, 5/29/19
+  gtag('config', '{{ site.google_analytics_ua }}', { 'anonymize_ip': true, 'forceSSL': true });
 </script>
 {% endif %}
 

data/_includes/components/banner.html

@@ -1,20 +1,43 @@
-<div class="usa-banner">
+<section class="usa-banner" aria-label="Official government website">
   <div class="usa-accordion">
-    <header class="usa-banner-header">
-      <div class="usa-grid usa-banner-inner"> <img src="{{ site.baseurl }}/assets/uswds/img/favicons/favicon-57.png" alt="U.S. flag">
-        <p>An official website of the United States government</p> <button class="usa-accordion-button usa-banner-button" aria-expanded="false" aria-controls="gov-banner"> <span class="usa-banner-button-text">Here's how you know</span> </button> </div>
-    </header>
-    <div class="usa-banner-content usa-grid usa-accordion-content" id="gov-banner">
-      <div class="usa-banner-guidance-gov usa-width-one-half"> <img class="usa-banner-icon usa-media_block-img" src="{{ site.baseurl }}/assets/uswds/img/icon-dot-gov.svg" alt="Dot gov">
-        <div class="usa-media_block-body">
-          <p> <strong>The .gov means it’s official.</strong> <br> Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you're on a federal government site. </p>
+    <header class="usa-banner__header">
+      <div class="usa-banner__inner">
+        <div class="grid-col-auto">
+          <img class="usa-banner__header-flag" src="{{ site.baseurl }}/assets/uswds/img/us_flag_small.png" alt="U.S. flag">
+        </div>
+        <div class="grid-col-fill tablet:grid-col-auto">
+          <p class="usa-banner__header-text">An official website of the United States government</p>
+          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
         </div>
+        <button class="usa-accordion__button usa-banner__button"
+          aria-expanded="false" aria-controls="gov-banner">
+          <span class="usa-banner__button-text">Here’s how you know</span>
+        </button>
       </div>
-      <div class="usa-banner-guidance-ssl usa-width-one-half"> <img class="usa-banner-icon usa-media_block-img" src="{{ site.baseurl }}/assets/uswds/img/icon-https.svg" alt="Https">
-        <div class="usa-media_block-body">
-          <p> <strong>The site is secure.</strong> <br> The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely. </p>
+    </header>
+    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
+      <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" alt="Dot gov">
+          <div class="usa-media-block__body">
+            <p>
+              <strong>The .gov means it’s official.</strong>
+              <br>
+              Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.
+            </p>
+          </div>
+        </div>
+        <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-https.svg" alt="Https">
+          <div class="usa-media-block__body">
+            <p>
+              <strong>The site is secure.</strong>
+              <br>
+              The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
+            </p>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</section>

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

@@ -0,0 +1,142 @@
+{% if footer %}
+<footer class="usa-footer usa-footer--big">
+
+  {% if footer.last_updated %}
+    <div class="grid-container">
+      <p>Last updated: {{ page.last_modified_at | date: '%B %d, %Y at %I:%M %p' }}</p>
+    </div>
+  {% endif %}
+
+  {% if footer.top %}
+    <div class="grid-container 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 = '12 6' | split: ' ' %}
+    {% if footer_links.size > 2 %}
+      {% assign _size = "-" | append: 4 %}
+    {% else %}
+      {% assign _size = "-" | append: footer_links.size %}
+    {% endif %}
+  <div class="usa-footer__primary-section">
+    <div class="grid-container">
+      <div class="grid-row grid-gap">
+        <div class="{% if footer.big_footer_signup_form %}tablet:grid-col-8{% endif %}">
+          <nav class="usa-footer__nav" aria-label="Footer navigation">
+            <div class="grid-row grid-gap-4">
+              {% for _item in footer_links %}
+              <div class="mobile-lg:grid-col-6 desktop:grid-col{{ _size }}">
+                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
+                  {% if _item.links %}
+                    <h4 class="usa-footer__primary-link">{{ _item.text }}</h4>
+                    <ul class="usa-list usa-list--unstyled">
+                      {% for _link in _item.links %}
+                      <li class="usa-footer__secondary-link">
+                        <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+                          {{ _link.text }}
+                        </a>
+                      </li>
+                      {% endfor %}
+                    </ul>
+                  {% else %}
+                    <a class="usa-footer__primary-link" href="{% if _item.external == true %}{{ _item.href }}{% else %}{{ _item.href | relative_url }}{% endif %}">
+                      {{ _item.text }}
+                    </a>
+                  {% endif %}
+                </section>
+              </div>
+              {% endfor %}
+            </div>
+          </nav>
+        </div>
+        {% if footer.big_footer_signup_form %}
+        <div class="tablet:grid-col-4">
+          <div class="usa-sign-up">
+            <h3 class="usa-sign-up__heading">Sign up</h3>
+            <form class="usa-form">
+              <label class="usa-label" for="email">Your email address</label>
+              <input class="usa-input" id="email" name="email" type="email">
+              <button class="usa-button" type="submit">Sign up</button>
+            </form>
+          </div>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
+  {% if footer.logos or footer.heading or footer.contact or footer.edit_page %}
+  <div class="usa-footer__secondary-section">
+    <div class="grid-container">
+      <div class="grid-row grid-gap">
+        <div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
+          {% if footer.logos %}
+            {% for logo in footer.logos -%}
+              <div class="mobile-lg:grid-col-auto">
+                {% 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 %}
+              </div>
+            {% endfor %}
+          {% endif %}
+
+          {% if footer.heading %}
+          <div class="mobile-lg:grid-col-auto">
+            <h3 class="usa-footer__logo-heading">{{ footer.heading }}</h3>
+          </div>
+          {% endif %}
+        </div>
+
+        {% if footer.contact %}
+        <div class="usa-footer__contact-links mobile-lg:grid-col-6">
+          {% assign social_links = site.data.footer.contact.social_links %}
+          {% if footer.contact.contact_links %}
+            <div class="usa-footer__social-links grid-row grid-gap-1">
+              <div class="grid-col-auto">
+                {% for _link in social_links %}
+                  <a class="usa-social-link usa-social-link--{{ _link.type | default: 'generic' }}" href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+                    <span>{{ _link.text }}</span>
+                  </a>
+                {% endfor %}
+              </div>
+            </div>
+          {% endif %}
+          {% if footer.contact.heading %}
+            <h3 class="usa-footer__contact-heading">{{ footer.contact.heading }}</h3>
+            {% endif %}
+            {% if footer.contact.contact_links %}
+              <address class="usa-footer__address">
+                {% assign contact_links = site.data.footer.contact.contact_links %}
+                <div class="usa-footer__contact-info grid-row grid-gap">
+                {% for _link in contact_links %}
+                    <div class="grid-col-auto">
+                      <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+                        {{ _link.text }}
+                      </a>
+                    </div>
+                {% endfor %}
+                </div>
+              </address>
+          {% endif %}
+        {% endif %}
+      </div>
+      {% if footer.edit_page %}
+        {% include components/github-edit.html footer=footer path=page.path %}
+      {% endif %}
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
+</footer>
+{% endif %}

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

@@ -0,0 +1,104 @@
+{% if footer %}
+<footer class="usa-footer">
+
+  {% if footer.last_updated %}
+    <div class="grid-container ">
+      <p>Last updated: {{ page.last_modified_at | date: '%B %d, %Y at %I:%M %p' }}</p>
+    </div>
+  {% endif %}
+
+  {% if footer.top %}
+    <div class="grid-container 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">
+    <nav class="usa-footer__nav" aria-label="Footer navigation">
+      <ul class="grid-row grid-gap">
+        {% for _link in footer_links %}
+        <li class="mobile-lg:grid-col-4 desktop:grid-col-auto 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>
+  {% endif %}
+
+  {% if footer.logos or footer.heading or footer.contact or footer.edit_page %}
+  <div class="usa-footer__secondary-section">
+    <div class="grid-container">
+      <div class="grid-row grid-gap">
+        <div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
+          {% if footer.logos %}
+            {% for logo in footer.logos -%}
+              <div class="mobile-lg:grid-col-auto">
+                {% 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 %}
+              </div>
+            {% endfor %}
+          {% endif %}
+
+          {% if footer.heading %}
+          <div class="mobile-lg:grid-col-auto">
+            <h3 class="usa-footer__logo-heading">{{ footer.heading }}</h3>
+          </div>
+          {% endif %}
+        </div>
+
+        {% if footer.contact %}
+        <div class="usa-footer__contact-links mobile-lg:grid-col-6">
+          {% assign social_links = site.data.footer.contact.social_links %}
+          {% if footer.contact.contact_links %}
+            <div class="usa-footer__social-links grid-row grid-gap-1">
+              <div class="grid-col-auto">
+                {% for _link in social_links %}
+                  <a class="usa-social-link usa-social-link--{{ _link.type | default: 'generic' }}" href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+                    <span>{{ _link.text }}</span>
+                  </a>
+                {% endfor %}
+              </div>
+            </div>
+          {% endif %}
+          {% if footer.contact.heading %}
+            <h3 class="usa-footer__contact-heading">{{ footer.contact.heading }}</h3>
+            {% endif %}
+            {% if footer.contact.contact_links %}
+              <address class="usa-footer__address">
+                {% assign contact_links = site.data.footer.contact.contact_links %}
+                <div class="usa-footer__contact-info grid-row grid-gap">
+                {% for _link in contact_links %}
+                    <div class="grid-col-auto">
+                      <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+                        {{ _link.text }}
+                      </a>
+                    </div>
+                {% endfor %}
+                </div>
+              </address>
+          {% endif %}
+        {% endif %}
+      </div>
+      {% if footer.edit_page %}
+        {% include components/github-edit.html footer=footer path=page.path %}
+      {% endif %}
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
+</footer>
+{% endif %}

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

@@ -0,0 +1,93 @@
+{% if footer %}
+<footer class="usa-footer usa-footer--slim">
+
+  {% if footer.last_updated %}
+    <div class="grid-container">
+      <p>Last updated: {{ page.last_modified_at | date: '%B %d, %Y at %I:%M %p' }}</p>
+    </div>
+  {% endif %}
+
+  {% if footer.top %}
+    <div class="grid-container 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-footer__primary-container grid-row">
+        <div class="{% if footer.contact.contact_links %}mobile-lg:grid-col-8{% endif %}">
+          <nav class="usa-footer__nav" aria-label="Footer navigation">
+            <ul class="grid-row grid-gap">
+              {% for _link in footer_links %}
+              <li class="mobile-lg:grid-col-6 desktop:grid-col-auto 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>
+      {% if footer.contact.contact_links %}
+        <div class="mobile-lg:grid-col-4">
+          <address class="usa-footer__address">
+            <div class="grid-row grid-gap">
+              {% assign contact_links = site.data.footer.contact.contact_links %}
+              {% for _link in contact_links %}
+                <div class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
+                  <div class="usa-footer__contact-info">
+                    <a href="{% if _link.external == true %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">
+                      {{ _link.text }}
+                    </a>
+                  </div>
+                </div>
+              {% endfor %}
+            </div>
+          </address>
+        </div>
+      {% endif %}
+      </div>
+    </div>
+  {% endif %}
+
+  {% if footer.logos or footer.edit_page %}
+  <div class="usa-footer__secondary-section">
+    <div class="grid-container">
+      <div class="usa-footer__logo grid-row grid-gap-2">
+        {% if footer.logos %}
+          <div class="grid-col-auto">
+            {% 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 %}
+          </div>
+        {% endif %}
+
+        {% if footer.heading %}
+        <div class="grid-col-auto">
+          <h3 class="usa-footer__logo-heading">{{ footer.heading }}</h3>
+        </div>
+        {% endif %}
+      </div>
+
+      {% if footer.edit_page %}
+      <div class="usa-footer-contact-links usa-width-one-half align-right">
+        {% include components/github-edit.html footer=footer path=page.path %}
+      </div>
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+
+</footer>
+{% endif %}

data/_includes/components/github-edit.html

@@ -0,0 +1,3 @@
+{% assign github_info = site.github_info | default: site.github %}
+{% assign edit_link_text = include.footer.edit_page.text | default: 'Edit this page' %}
+<small><a href="https://github.com/{{ github_info.organization }}/{{ github_info.repository }}/edit/{{ github_info.default_branch }}/{{ include.path }}" class="usa-sidenav-edit" target="_blank">{{ edit_link_text }}</a></small>

data/_includes/components/graphic-list.html

@@ -1,16 +1,18 @@
 {% assign graphics = include.graphics %}
 {% if graphics %}
-<section class="usa-section usa-section-dark usa-graphic_list">
-  {% for graphic in graphics %}
-    {% cycle '<div class="usa-grid usa-graphic_list-row">', '' %}
-    <div class="usa-width-one-half usa-media_block">
-      <img class="usa-media_block-img"  src="{{ graphic.image.src | relative_url }}" alt="{{ graphic.image.alt }}">
-      <div class="usa-media_block-body">
-        {% if graphic.title %}<h3>{{ graphic.title }}</h3>{% endif %}
-        {{ graphic.description | markdownify }}
+<section class="usa-graphic-list usa-section usa-section--dark">
+  <div class="grid-container">
+    {% for graphic in graphics %}
+      {% cycle '<div class="usa-graphic-list__row grid-row grid-gap">', '' %}
+      <div class="usa-media-block tablet:grid-col">
+        <img class="usa-media-block__img"  src="{{ graphic.image.src | relative_url }}" alt="{{ graphic.image.alt }}">
+        <div class="usa-media-block__body">
+          {% if graphic.title %}<h2 class="usa-graphic-list__heading">{{ graphic.title }}</h2>{% endif %}
+          {{ graphic.description | markdownify }}
+        </div>
       </div>
-    </div>
-    {% cycle '', '</div>' %}
-  {% endfor %}
+      {% cycle '', '</div>' %}
+    {% endfor %}
+  </div>
 </section>
 {% endif %}