uswds-jekyll 2.2.1 → 5.0.0

data/_includes/components/header.html

@@ -0,0 +1,161 @@
+{% if header %}
+  <div class="usa-overlay"></div>
+{% 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">
+      <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 }}
+          </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">
+          <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 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 }}">
+              <span>{{ _section.text }}</span>
+            </button>
+            {% if header.type == 'basic' or header.type == 'extended' %}
+            <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">
+              <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="desktop:grid-col-3">
+                      <ul class="usa-nav__submenu-list">
+                  {% endif %}
+                {% endif %}
+                <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' %}
+                  {% 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><!-- /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 %}">
+                <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  %}
+            {% include components/search.html %}
+          {% endif %}
+        {% endif %}
+
+        {% if header.type == 'extended' or header.type == 'extended-mega' %}
+          {% assign _secondary = header.secondary %}
+          <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 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 }}
+                  </a>
+                </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 %}
+
+
+        </div>
+      </div>
+    </nav>
+  {% if header.type == 'basic' or header.type == 'basic-mega' %}
+    </div>
+  {% endif %}
+  </header>
+{% 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

@@ -1,2 +1,9 @@
 {% assign footer = site.data.footer %}
-{% include components/footer.html %}
+
+{% 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 %}

data/_includes/header.html

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

data/_includes/meta.html

@@ -2,5 +2,11 @@
 <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 %}
+<meta name="description" content="{{ description }}">
+{% endif %}
+
 {% include favicon.html %}

data/_includes/project-list.html

@@ -0,0 +1,14 @@
+<div class="card-deck">
+  {% for item in site.projects %}
+    <div class="card">
+      <img class="card-img-top" src="{{ site.baseurl }}{{ item.small_image }}" alt="{{ item.image_alt }} ">
+      <div class="card-body">
+        <h3 class="card-title">{{ item.title }}</h3>
+        <p class="card-text">{{ item.description }}</p>
+      </div>
+      <div class="card-footer">
+        <a href="{{ site.baseurl }}{{ item.url }}" class="card-read-more-link">Read more <svg xmlns="http://www.w3.org/2000/svg" width="444.819" height="444.819" viewBox="0 0 444.819 444.819"><path d="M352.025 196.712L165.885 10.848C159.028 3.615 150.468 0 140.185 0s-18.84 3.62-25.696 10.848l-21.7 21.416c-7.045 7.043-10.567 15.604-10.567 25.692 0 9.897 3.52 18.56 10.566 25.98L231.544 222.41 92.785 361.168c-7.04 7.043-10.563 15.604-10.563 25.693 0 9.9 3.52 18.566 10.564 25.98l21.7 21.417c7.043 7.043 15.612 10.564 25.697 10.564 10.09 0 18.656-3.52 25.697-10.564L352.025 248.39c7.046-7.423 10.57-16.084 10.57-25.98.002-10.09-3.524-18.655-10.57-25.698z"/></svg></a>
+      </div>
+    </div>
+  {% endfor %}
+</div>

data/_includes/scripts.html

@@ -18,13 +18,24 @@
   | 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_site_handle %}
+<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);
 
-{% 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">
+//]]>
 </script>
 {% endif %}

data/_includes/sidenav.html

@@ -1,20 +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 %}>
-      {{ 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 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 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__sublist">
+        {% include subnav.html links=page.subnav %}
+      </ul>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+</nav>

data/_includes/styles.html

@@ -1,15 +1,11 @@
 {% assign _styles = '' | split: '' %}
-{% assign _site_styles = site.styles %}
-{% unless _site_styles -%}
-  {% assign _uswds_css = '/assets/uswds/css/uswds.min.css' %}
-  {% assign _site_styles = '' | split: ''
-    | push: _uswds_css %}
-{% endunless %}
+{% assign _default_styles = '' | split: ''
+  | push: '/assets/css/uswds-theme.css' %}
 {% assign _styles = _styles
-  | push: _site_styles
+  | push: _default_styles
+  | push: site.styles
   | push: layout.styles
-  | push: page.styles
-  | uniq %}
+  | push: page.styles %}
 {% for _list in _styles %}{% for _style in _list %}
 <link rel="stylesheet"
   href="{{ _style.href | default: _style | relative_url }}"

data/_includes/subnav.html

@@ -1,5 +1,5 @@
 {% for link in include.links %}
   <li>
-    <a href="{% if link.external %}{{ link.href }}{% else %}{{ link.href }}{% endif %}">{{ link.text }}</a>
+    <a href="{% if link.external %}{{ link.href }}{% else %}{{ link.href }}{% endif %}" {% if link.class %} class="{{ link.class }}" {% endif %}>{{ link.text }} {{ link.class }}</a>
   </li>
 {% endfor %}

data/_includes/team-list.html

@@ -0,0 +1,13 @@
+<div class="card-deck">
+  {% for item in site.team %}
+    <div class="card">
+      <a href="{{ site.baseurl }}{{ item.url }}">
+        <img class="card-img-top" src="{{ site.baseurl }}{{ item.image }}" alt="photo of {{ item.name }} ">
+        <div class="card-body">
+          <h3 class="card-title">{{ item.name }}</h3>
+          <p class="card-text">{{ item.job_title }}</p>
+        </div>
+      </a>
+    </div>
+  {% endfor %}
+</div>

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>
@@ -9,16 +11,50 @@
       {% include analytics.html %}
     {% endif %}
   </head>
-  <body class="{{ layout.class }} {{ page.class }}">
+  <body class="{{ layout.class }} {{ page.class }} {% if site.site_width %}site-{{ site.site_width }}{% endif %}">
 
     {% include skipnav.html %}
     {% include header.html %}
 
-    <main id="main-content"{% for _attr in layout.main %} {{ _attr[0] }}="{{ _attr[1] }}"{% endfor %}>
-    {{ content }}
-    </main>
+    {% assign hero = page.hero %}
+    {% include components/hero.html %}
+
+    {% if page.tagline and page.intro %}
+    <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 %}
+
+    {% capture _graphics %}
+      {% include graphic-list.html graphics=page.graphics %}
+    {% endcapture %}
+
+    {% if page.graphics_position != 'after' %}
+      {{ _graphics }}
+    {% endif %}
+
+    {% 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 }}
+    {% endif %}
 
     {% include footer.html %}
+
     {% include scripts.html %}
+
   </body>
 </html>