uswds-jekyll 4.2.0 → 5.0.0

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 %}

data/_includes/components/header.html

@@ -1,62 +1,71 @@
 {% if header %}
-
+  <div class="usa-overlay"></div>
 {% if header.type == 'basic' %}
-  <header class="usa-header usa-header-basic" role="banner">
+  <header class="usa-header usa-header--basic" role="banner">
 {% elsif header.type == 'basic-mega' %}
-  <header class="usa-header usa-header-basic usa-header-basic-megamenu" role="banner">
+  <header class="usa-header usa-header--basic usa-header--basic-megamenu" role="banner">
 {% elsif header.type == 'extended' or header.type == 'extended-mega' %}
-  <header class="usa-header usa-header-extended" role="banner">
+  <header class="usa-header usa-header--extended" role="banner">
 {% endif %}
 
   {% if header.type == 'basic' or header.type == 'basic-mega' %}
     <div class="usa-nav-container">
   {% endif %}
     <div class="usa-navbar">
-      <button class="usa-menu-btn">Menu</button>
-      <div class="usa-logo" id="{% if header.type == 'extended' or header.type == 'extended-mega' %}extended-mega-{% endif %}logo">
-        <em class="usa-logo-text">
-          <a href="{% if header.href %}{{ header.href }}{% else %}{{ site.baseurl }}/{% endif %}" title="Home">
+      <div class="usa-logo" id="header-logo">
+        <a
+          href="{% if header.href %}{{ header.href }}{% else %}{{ site.baseurl }}/{% endif %}"
+          title="Home">
+          {% if header.logo %}
+            <img
+              class="usa-logo-img"
+              src="{% if header.logo.external %}{{ header.logo.src }}{% else %}{{ header.logo.src | relative_url }}{% endif %}"
+              alt="{{ header.logo.alt }}">
+          {% endif %}
+          <em class="usa-logo__text">
             {{ header.title | default: site.title }}
-          </a>
-        </em>
+          </em>
+        </a>
       </div>
+      <button class="usa-menu-btn">Menu</button>
     </div>
 
     <nav role="navigation" class="usa-nav">
-      <div class="usa-nav-inner">
-        <button class="usa-nav-close">
+      <div class="usa-nav__inner">
+        <button class="usa-nav__close">
           <img src="{{ site.baseurl }}/assets/uswds/img/close.svg" alt="close">
         </button>
 
         {% assign _primary = header.primary.links %}
         {% assign primary_links = site.data.navigation[_primary] | default: _primary %}
         {% if primary_links %}
-        <ul class="usa-nav-primary usa-accordion">
+        <ul class="usa-nav__primary usa-accordion">
           {% for _section in primary_links %}
-          <li>
+          <li class="usa-nav__primary-item">
             {% if _section.links %}
               {% assign section_links = site.data.navigation[_section.links] | default: _section.links %}
               {% assign _section_id = _section.id %}
               {% unless _section_id %}{% assign _section_id = 'nav-' | append: forloop.index %}{% endunless %}
-            <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="{{ _section_id }}">
+            <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="{{ _section_id }}">
               <span>{{ _section.text }}</span>
             </button>
             {% if header.type == 'basic' or header.type == 'extended' %}
-            <ul id="{{ _section_id }}" class="usa-nav-submenu" aria-hidden="true">
+            <ul id="{{ _section_id }}" class="usa-nav__submenu">
             {% endif %}
             {% if header.type == 'basic-mega' or header.type == 'extended-mega' %}
-            <div id="{{ _section_id }}" class="usa-nav-submenu usa-megamenu usa-grid-full" aria-hidden="true">
+            <div id="{{ _section_id }}" class="usa-nav__submenu usa-megamenu">
+              <div class="grid-row grid-gap-4">
             {% endif %}
               {% for _link in section_links %}
                 {% if header.type == 'basic-mega' or header.type == 'extended-mega' %}
                 <!-- wrap every 3 links in a usa-megamenu-col div -->
                 {% capture modulo %}{{ forloop.index | modulo: 3 }}{% endcapture %}
                   {% if modulo == '1' %}
-                    <div class="usa-megamenu-col">
-                      <ul>
+                    <div class="desktop:grid-col-3">
+                      <ul class="usa-nav__submenu-list">
                   {% endif %}
                 {% endif %}
-                <li>
+                <li class="usa-nav__submenu-item">
                   <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a>
                 </li>
                 {% if header.type == 'basic-mega' or header.type == 'extended-mega' %}
@@ -70,10 +79,11 @@
             </ul>
             {% endif %}
             {% if header.type == 'basic-mega' or header.type == 'extended-mega' %}
+              </div><!-- /grid-row -->
             </div>
             {% endif %}
             {% else %}
-              <a class="{% if _section.class %}{{ _section.class }}{% else %} usa-nav-link {% endif %} {% if _section.href == page.permalink %} usa-current{% endif %}" href="{% if _section.external %}{{ _section.href }}{% else %}{{ _section.href | relative_url }}{% endif %}">
+              <a class="{% if _section.class %}{{ _section.class }}{% else %} usa-nav__link {% endif %} {% 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 %}
@@ -85,49 +95,17 @@
         {% if header.type == 'basic' or header.type == 'basic-mega' %}
           {% assign _secondary = header.secondary %}
           {% 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>
-          {% endif %}
+            {% include components/search.html %}
           {% endif %}
+        {% endif %}
 
-          {% if header.type == 'extended' or header.type == 'extended-mega' %}
+        {% if header.type == 'extended' or header.type == 'extended-mega' %}
           {% assign _secondary = header.secondary %}
-          <div class="usa-nav-secondary">
-            {% 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 site.search_site_handle %}
-              <li class="js-search-button-container">
-                <button class="usa-header-search-button js-search-button">Search</button>
-              </li>
-              {% endif %}
+          <div class="usa-nav__secondary">
+            <ul class="usa-unstyled-list usa-nav__secondary-links">
               {% assign secondary_links = site.data.navigation[_secondary.links] | default: _secondary.links %}
               {% for _link in secondary_links %}
-                <li>
+                <li class="usa-nav__secondary-item">
                   <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}"
                   {% if _link.class %} class="{{ _link.class }}" {% endif %}>
                     {{ _link.text }}
@@ -135,6 +113,40 @@
                 </li>
               {% endfor %}
             </ul>
+            {% 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">
+              <input
+                name="utf8"
+                type="hidden"
+                value="&#x2713;" />
+              <input
+                type="hidden"
+                name="affiliate"
+                id="affiliate"
+                value="{{ site.search_site_handle }}" />
+                <div role="search">
+                  <label
+                    for="query" class="usa-sr-only">Enter search terms</label>
+                  <input
+                    autocomplete="off"
+                    class="usa-input usagov-search-autocomplete"
+                    id="query"
+                    name="query"
+                    type="search" />
+                  <button
+                    class="usa-button"
+                    type="submit"
+                    name="commit">
+                    <span class="usa-sr-only">Search</span>
+                  </button>
+                </div>
+              </form>
+            {% endif %}
           </div>
           {% endif %}
 
@@ -146,5 +158,4 @@
     </div>
   {% endif %}
   </header>
-  <div class="usa-overlay"></div>
 {% endif %}

data/_includes/components/hero.html

@@ -1,21 +1,14 @@
 {% if hero %}
-<section class="usa-hero"{% if hero.image %}
-  style="background-image: url('{{ hero.image | relative_url }}')"{% endif %}>
-  <div class="usa-grid">
-    <div class="usa-hero-callout usa-section-dark">
+<section class="usa-hero"{% if hero.image %} style="background-image: url({{ hero.image }})"{% endif %} aria-label="Introduction";>
+  <div class="grid-container">
+    <div class="usa-hero__callout">
       {% if hero.callout %}
-      <h2>
+      <h1 class="usa-hero__heading">
         {% if hero.callout.alt %}
-        <span class="usa-hero-callout-alt">{{ hero.callout.alt }}</span>
+        <span class="usa-hero__heading--alt">{{ hero.callout.alt }}</span>
         {% endif %}
         {{ hero.callout.text | default: hero.callout }}
-      </h2>
-      {% endif %}
-
-      {% if hero.link %}
-      <a class="usa-hero-link" href="{{ hero.link.href | relative_url }}">
-        {{ hero.link.text }}
-      </a>
+      </h1>
       {% endif %}
 
       {{ hero.content | markdownify }}

data/_includes/components/search.html

@@ -0,0 +1,31 @@
+<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">
+  <input
+    name="utf8"
+    type="hidden"
+    value="&#x2713;" />
+  <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="usa-input usagov-search-autocomplete"
+      id="query"
+      name="query"
+      type="search" />
+    <button
+      class="usa-button"
+      type="submit"
+      name="commit">
+      <span class="usa-sr-only">Search</span>
+    </button>
+  </div>
+</form>

data/_includes/footer.html

@@ -2,8 +2,8 @@
 
 {% if footer.type == 'slim' %}
   {% include components/footer--slim.html %}
-{% elsif footer.type == 'medium' %}
-  {% include components/footer--medium.html %}
+{% elsif footer.type == 'default' or footer.type == 'medium' %}
+  {% include components/footer--default.html %}
 {% elsif footer.type == 'big' %}
   {% include components/footer--big.html %}
 {% endif %}

data/_includes/meta.html

@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-<title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
+<title>{% if page.title %}{{ page.title | strip_html }} | {% endif %}{{ site.title }}</title>
 
 {% assign description = page.description | default: site.description %}
 {% if description %}

data/_includes/scripts.html

@@ -18,16 +18,18 @@
   | push: layout.scripts
   | push: page.scripts
   | uniq %}
-{% for _list in _scripts %}{% for _script in _list %}
+{% for _script in _scripts %}
   {% assign _src = _script.src | default: _script %}
-<script src="{{ _src | replace: _async_marker, '' | relative_url }}"{% if _script.async or _src contains _async_marker %} async{% endif %}></script>
-{% endfor %}{% endfor %}
+    {% if _src %}
+      <script src="{{ _src | replace: _async_marker, '' | relative_url }}"{% if _script.async or _src contains _async_marker %} async{% endif %}></script>
+    {% endif %}
+{% endfor %}
 
 
-{% if site.search %}
+{% if site.search_site_handle %}
 <script type="text/javascript">
 //<![CDATA[
-      var usasearch_config = { siteHandle:"{{ site.search.site_handle }}" };
+      var usasearch_config = { siteHandle:"{{ site.search_site_handle }}" };
 
       var script = document.createElement("script");
       script.type = "text/javascript";

data/_includes/sidenav.html

@@ -1,19 +1,19 @@
-<nav>
-  <ul class="usa-sidenav-list">
+<nav aria-label="Secondary navigation">
+  <ul class="usa-sidenav">
     {% for link in include.links %}
       {% assign _href = link.href %}
       {% assign _current = false %}
       {% if link.href == page.url or link.href == page.permalink %}
         {% assign _current = true %}
       {% endif %}
-    <li>
+    <li class="usa-sidenav__item">
       <a href="{% if link.external == true %}{{ link.href }}{% else %}{{ link.href | relative_url }}{% endif %}"
          {% if _current %} class="usa-current" {% endif %}
          {% if link.class %}class="{{ link.class }}" {% endif %} >
          {{ link.text }}
       </a>
       {% if _current and page.subnav %}
-      <ul class="usa-sidenav-sub_list">
+      <ul class="usa-sidenav__sublist">
         {% include subnav.html links=page.subnav %}
       </ul>
       {% endif %}

data/_includes/styles.html

@@ -1,6 +1,6 @@
 {% assign _styles = '' | split: '' %}
 {% assign _default_styles = '' | split: ''
-  | push: '/assets/css/main.css' %}
+  | push: '/assets/css/uswds-theme.css' %}
 {% assign _styles = _styles
   | push: _default_styles
   | push: site.styles

data/_layouts/default.html

@@ -1,5 +1,7 @@
 ---
+main: foo, bar, qaz
 ---
+
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: site.lang | default: 'en-US' }}">
   <head>
@@ -18,12 +20,14 @@
     {% include components/hero.html %}
 
     {% if page.tagline and page.intro %}
-    <section class="usa-grid usa-section">
-      <div class="usa-width-one-third">
-        <h2>{{ page.tagline }}</h2>
-      </div>
-      <div class="usa-width-two-thirds">
-        {{ page.intro | markdownify }}
+    <section class="grid-container usa-section">
+      <div class="grid-row grid-gap">
+        <div class="tablet:grid-col-4">
+          <h2 class="font-heading-xl margin-top-0 tablet:margin-bottom-0">{{ page.tagline }}</h2>
+        </div>
+        <div class="tablet:grid-col-8 usa-prose">
+          {{ page.intro | markdownify }}
+        </div>
       </div>
     </section>
     {% endif %}
@@ -36,9 +40,13 @@
       {{ _graphics }}
     {% endif %}
 
-    <main id="main-content"{% for _attr in layout.main %} {{ _attr[0] }}="{{ _attr[1] }}"{% endfor %}>
-          {{ content }}
-    </main>
+    {% if page.layout == 'post' %}
+      {{ content }}
+    {% else %}
+      <main id="main-content"{% for _attr in layout.main %} {{ _attr[0] }}="{{ _attr[1] }}"{% endfor %}>
+        {{ content }}
+      </main>
+    {% endif %}
 
     {% if page.graphics_position == 'after' %}
       {{ _graphics }}

data/_layouts/home.html

@@ -1,3 +1,9 @@
 ---
 layout: default
+main:
+  class: usa-section
 ---
+
+<div class="grid-container">
+  {{ content }}
+</div>

data/_layouts/page.html

@@ -1,18 +1,25 @@
 ---
 layout: default
 main:
-  class: usa-grid usa-section usa-content usa-layout-docs
+  class: usa-layout-docs usa-layout-docs__main desktop:grid-col-9 usa-prose
 ---
-{% assign sidenav = site.data.navigation[page.sidenav] | default: page.sidenav %}
-{% if sidenav %}
-  <aside class="usa-layout-docs-sidenav sidenav {% if page.sticky_sidenav %}usa-sticky-sidenav{% endif %}">
-    {% include sidenav.html links=sidenav %}
-  </aside>
-{% endif %}
 
-<div class="usa-layout-docs-main_content">
-  {% if page.title %}
-    <h1>{{ page.title }}</h1>
-  {% endif %}
-  {{ content }}
-</div>
+<div class="usa-section">
+  <div class="grid-container">
+    <div class="grid-row grid-gap flex-align-start">
+      {% assign sidenav = site.data.navigation[page.sidenav] | default: page.sidenav %}
+      {% if sidenav %}
+        <div class="usa-layout-docs__sidenav desktop:grid-col-3{% if page.sticky_sidenav %} usa-sticky-sidenav{% endif %}">
+          {% include sidenav.html links=sidenav %}
+        </div>
+      {% endif %}
+
+      <main class="usa-layout-docs usa-layout-docs__main usa-prose{% if sidenav %} desktop:grid-col-9{% endif %}" id="main-content">
+        {% if page.title %}
+          <h1>{{ page.title }}</h1>
+        {% endif %}
+        {{ content }}
+      </main>
+    </div>
+  </div>
+</div>