uswds-jekyll 4.1.0 → 4.2.0

data/_includes/components/header.html

@@ -0,0 +1,150 @@
+{% if header %}
+
+{% if header.type == 'basic' %}
+  <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">
+{% elsif header.type == 'extended' or header.type == 'extended-mega' %}
+  <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">
+            {{ header.title | default: site.title }}
+          </a>
+        </em>
+      </div>
+    </div>
+
+    <nav role="navigation" class="usa-nav">
+      <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">
+          {% for _section in primary_links %}
+          <li>
+            {% 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 }}">
+              <span>{{ _section.text }}</span>
+            </button>
+            {% if header.type == 'basic' or header.type == 'extended' %}
+            <ul id="{{ _section_id }}" class="usa-nav-submenu" aria-hidden="true">
+            {% 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">
+            {% 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>
+                  {% endif %}
+                {% endif %}
+                <li>
+                  <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' %}
+                  {% if modulo == '0' or forloop.last %}
+                    </ul>
+                    </div>
+                  {% endif %}
+                {% endif %}
+              {% endfor %}
+            {% if header.type == 'basic' or header.type == 'extended' %}
+            </ul>
+            {% endif %}
+            {% if header.type == 'basic-mega' or header.type == 'extended-mega' %}
+            </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 %}">
+                <span>{{ _section.text }}</span>
+              </a>
+            {% endif %}
+          </li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+
+        {% 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 %}
+          {% endif %}
+
+          {% 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 %}
+              {% assign secondary_links = site.data.navigation[_secondary.links] | default: _secondary.links %}
+              {% for _link in secondary_links %}
+                <li>
+                  <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}"
+                  {% if _link.class %} class="{{ _link.class }}" {% endif %}>
+                    {{ _link.text }}
+                  </a>
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+          {% endif %}
+
+
+        </div>
+      </div>
+    </nav>
+  {% if header.type == 'basic' or header.type == 'basic-mega' %}
+    </div>
+  {% endif %}
+  </header>
+  <div class="usa-overlay"></div>
+{% endif %}

data/_includes/footer.html

@@ -1,3 +1,9 @@
 {% assign footer = site.data.footer %}
 
-{% include components/footer--medium.html %}
+{% if footer.type == 'slim' %}
+  {% include components/footer--slim.html %}
+{% elsif footer.type == 'medium' %}
+  {% include components/footer--medium.html %}
+{% elsif footer.type == 'big' %}
+  {% include components/footer--big.html %}
+{% endif %}

data/_includes/header.html

@@ -4,8 +4,4 @@
   {% include components/banner.html %}
 {% endif %}
 
-{% if header.type == 'basic' %}
-  {% include components/header--basic.html %}
-{% else %}
-  {% include components/header--extended.html %}
-{% endif %}
+{% include components/header.html %}

data/_includes/meta.html

@@ -3,4 +3,10 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
 <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
+
+{% assign description = page.description | default: site.description %}
+{% if description %}
+<meta name="description" content="{{ description }}">
+{% endif %}
+
 {% include favicon.html %}

data/_includes/sidenav.html

@@ -1,21 +1,23 @@
-<ul class="usa-sidenav-list">
-  {% 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>
-    <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">
-      {% include subnav.html links=page.subnav %}
-    </ul>
-    {% endif %}
-  </li>
-  {% endfor %}
-</ul>
+<nav>
+  <ul class="usa-sidenav-list">
+    {% 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>
+      <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">
+        {% include subnav.html links=page.subnav %}
+      </ul>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+</nav>

data/_layouts/default.html

@@ -14,11 +14,39 @@
     {% include skipnav.html %}
     {% include header.html %}
 
+    {% assign hero = page.hero %}
+    {% 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 }}
+      </div>
+    </section>
+    {% endif %}
+
+    {% capture _graphics %}
+      {% include graphic-list.html graphics=page.graphics %}
+    {% endcapture %}
+
+    {% if page.graphics_position != 'after' %}
+      {{ _graphics }}
+    {% endif %}
+
     <main id="main-content"{% for _attr in layout.main %} {{ _attr[0] }}="{{ _attr[1] }}"{% endfor %}>
-    {{ content }}
+          {{ content }}
     </main>
 
+    {% if page.graphics_position == 'after' %}
+      {{ _graphics }}
+    {% endif %}
+
     {% include footer.html %}
+
     {% include scripts.html %}
+
   </body>
 </html>

data/_layouts/home.html

@@ -1,30 +1,3 @@
 ---
 layout: default
 ---
-
-{% assign hero = page.hero %}
-{% 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 }}
-  </div>
-</section>
-{% endif %}
-
-{% capture _graphics %}
-  {% include graphic-list.html graphics=page.graphics %}
-{% endcapture %}
-{% if page.graphics_position != 'after' %}{{ _graphics }}{% endif %}
-
-<section class="usa-section">
-  <div class="usa-grid">
-    {{ content }}
-  </div>
-</section>
-
-{% if page.graphics_position == 'after' %}{{ _graphics }}{% endif %}

data/_layouts/page.html

@@ -5,15 +5,14 @@ main:
 ---
 {% assign sidenav = site.data.navigation[page.sidenav] | default: page.sidenav %}
 {% if sidenav %}
-<aside class="usa-layout-docs-sidenav sidenav">
-  {% include sidenav.html links=sidenav %}
-</aside>
+  <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>
-{% else %}
-<div class="usa-layout-docs-main_content">
-  {{ content }}
-</div>
-{% endif %}
+</div>

data/_layouts/project.html

@@ -3,7 +3,7 @@ layout: page
 ---
 
 
-<aside class="usa-layout-docs-sidenav sidenav">
+<aside class="usa-layout-docs-sidenav sidenav {% if page.sticky_sidenav %}usa-sticky-sidenav{% endif %}">
   <ul class="usa-sidenav-list">
     {% for item in site.projects %}
       <li>

data/_layouts/team-member.html

@@ -3,7 +3,7 @@ layout: page
 ---
 
 
-<aside class="usa-layout-docs-sidenav sidenav">
+<aside class="usa-layout-docs-sidenav sidenav {% if page.sticky_sidenav %}usa-sticky-sidenav{% endif %}">
   <ul class="usa-sidenav-list">
     {% for item in site.team %}
       <li>

data/_sass/components/_side-nav.scss

@@ -1,3 +1,8 @@
+.usa-sticky-sidenav {
+  position: sticky;
+  top: 1rem;
+}
+
 .usa-sidenav-list {
   @if variable-exists(side-nav-bg) {
     background-color: $side-nav-bg;

data/_sass/uswds/components/_alerts.scss

@@ -79,7 +79,6 @@ $icon-size: 3rem;
 
 .usa-alert-body {
   display: table-cell;
-  padding-left: $icon-size + $h-padding;
   vertical-align: top;
 }
 
@@ -108,6 +107,10 @@ $icon-size: 3rem;
     &::before {
       background-color: map-get($alerts-bar, $name);
     }
+
+    .usa-alert-body {
+      padding-left: $icon-size + $h-padding;
+    }
   }
 }
 

data/_sass/uswds/components/_banner.scss

@@ -36,9 +36,8 @@
 }
 
 .usa-banner-inner {
-  @include outer-container();
+  @include outer-container($site-max-width);
   @include padding(null $site-margins-mobile);
-  max-width: $site-max-width;
 
   @include media($nav-width) {
     @include padding(null $site-margins);
@@ -141,11 +140,11 @@
     @include padding(0 null null 0);
     /* stylelint-disable declaration-block-no-ignored-properties */
     display: inline;
-    height: initial;
+    height: auto;
     margin-left: 3px;
     position: relative;
     vertical-align: middle;
-    width: initial;
+    width: auto;
     /* stylelint-enable */
   }
 

data/_sass/uswds/components/_footer.scss

@@ -17,7 +17,13 @@
     }
 
     &:hover {
+      cursor: pointer;
       text-decoration: underline;
+
+      @include media($medium-screen) {
+        cursor: auto;
+        text-decoration: none;
+      }
     }
   }
 
@@ -41,10 +47,8 @@
 }
 
 .usa-footer-return-to-top {
-  color: $color-primary;
   padding-bottom: $spacing-medium;
   padding-top: $spacing-medium;
-  text-decoration: underline;
 }
 
 .usa-footer-primary-section {

data/_sass/uswds/components/_forms.scss

@@ -1,32 +1,32 @@
 $usa-form-width: 32rem;
 
-form {
-  a {
-    border-bottom: 0;
+[type=submit] {
+  @include media($medium-screen) {
+    margin-top: calc(3rem - .2em); // Label margin minus input bottom margin
   }
+}
 
-  [type=submit],
-  [type=submit] {
-    display: block;
-    margin-bottom: 1.5em;
-    margin-top: 2.5rem;
+fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
 
-    @include media($medium-screen) {
-      padding-left: 2.7em;
-      padding-right: 2.7em;
-      width: auto;
-    }
+.usa-form {
+  @include media($medium-screen) {
+    max-width: $usa-form-width;
   }
+}
 
-  [name=password],
-  [name=confirmPassword] {
-    margin-bottom: 1.1rem;
+.usa-input-tiny {
+  @include media($medium-screen) {
+    max-width: 6rem;
   }
 }
 
-.usa-form {
+.usa-input-medium {
   @include media($medium-screen) {
-    max-width: $usa-form-width;
+    max-width: 12rem;
   }
 }
 
@@ -41,32 +41,12 @@ form {
   }
 }
 
-fieldset {
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
 .usa-form-large {
   @include media($medium-screen) {
     max-width: 46rem;
   }
 }
 
-input {
-  &.usa-input-tiny { /* stylelint-disable-line selector-no-qualifying-type */
-    @include media($medium-screen) {
-      max-width: 6rem;
-    }
-  }
-
-  &.usa-input-medium { /* stylelint-disable-line selector-no-qualifying-type */
-    @include media($medium-screen) {
-      max-width: 12rem;
-    }
-  }
-}
-
 .usa-input-grid {
   @include media($medium-screen) {
     padding-right: 5%;