Feature/ecasogp uswds upgrade

.gitignore

@@ -14,3 +14,6 @@ assets/fonts
 assets/js/uswds.js
 assets/js/uswds.min.js
 assets/js/uswds.min.js.map
+assets/js/uswds-init.js
+assets/js/uswds-init.min.js
+assets/js/uswds-init.min.js.map

Gemfile

@@ -2,7 +2,7 @@ ruby '>= 3.1.3'
 
 source "https://rubygems.org"
 
-gem "jekyll", "~> 3.8" # pinned awaiting release of https://github.com/jekyll/jekyll/pull/9304
+gem 'jekyll', '~> 4.3.3'
 gem "execjs", "2.7.0" # https://github.com/rails/execjs/issues/99
 gem "mini_racer"
 gem "autoprefixer-rails"
@@ -15,7 +15,7 @@ gem "kramdown-parser-gfm"
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.15"
   gem 'jekyll-redirect-from'
-  gem 'jekyll-paginate-v2', "3.0.0"  
+  gem 'jekyll-paginate-v2', '~> 3.0' 
   gem 'jekyll-sitemap'
   gem 'jekyll-seo-tag'
   gem 'jekyll-autoprefixer'
@@ -28,3 +28,4 @@ gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 gem "wdm", "~> 0.1.0" if Gem.win_platform?
 
 gem "html-proofer", "~> 3.15"
+gem 'jekyll-sass-converter', '~> 3.0'

_config.yml

@@ -243,10 +243,8 @@ pagination:
     after: 2
   # Optional, the default file extension for generated pages (e.g html, json, xml).
   # Internally this is set to html by default
-  extension: html
   # Optional, the default name of the index file for generated pages (e.g. 'index.html')
   # Without file extension
-  indexpage: "index.html"
 
 exclude:
   - package.json
@@ -272,7 +270,7 @@ autoprefixer:
 sass:
   sass_dir: _sass
   load_paths:
-    - node_modules/uswds/dist/
+    - node_modules/@uswds/uswds/packages
   sourcemap: development
   quiet_deps: true
   style: compressed

_includes/footer.html

@@ -62,17 +62,17 @@ <h3 class="usa-footer__primary-link">Related Councils</h3>
   <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-9">
-          <div class="mobile-lg:grid-col-2">
+        <div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
+          <div class="mobile-lg:grid-col-auto">
             <img class="usa-footer__logo-img" alt="Office of Management and Budget Logo" src="{{ site.baseurl }}/assets/images/logos/omb-logo.png">
           </div>
-          <div class="mobile-lg:grid-col">
+          <div class="mobile-lg:grid-col-auto">
             <strong>
               Office of Management and Budget
             </strong>
           </div>
         </div>
-        <div class="usa-footer__contact-links mobile-lg:grid-col-2">
+        <div class="usa-footer__contact-links mobile-lg:grid-col-6">
           <h3 class="usa-footer__contact-heading">Contact Us</h3>
           <address class="usa-footer__address">
             <div class="usa-footer__contact-info grid-row grid-gap">

_includes/header.html

@@ -5,49 +5,99 @@
 {% include meta.html %}
 <div class="page-landing-page layout-demo ">
   <a class="usa-skipnav" href="#main-content">Skip to main content</a>
-  <div class="usa-banner">
-    <div class="usa-accordion">
-      <header class="usa-banner__header">
-        <div class="usa-banner__inner">
-          <div class="grid-col-auto">
-            <img class="usa-banner__header-flag" alt="U.S. flag" src="{{ site.baseurl }}/assets/img/us_flag_small.png">
-          </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>
+
+  <section
+  class="usa-banner"
+  aria-label="Official website of the United States government"
+>
+  <div class="usa-accordion">
+    <header class="usa-banner__header">
+      <div class="usa-banner__inner">
+        <div class="grid-col-auto">
+          <img
+            aria-hidden="true"
+            class="usa-banner__header-flag"
+            src="{{ site.baseurl }}/assets/img/us_flag_small.png"
+            alt="US Flag"
+          />
         </div>
-      </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" alt="Dot gov" src="{{ site.baseurl }}/assets/img/icon-dot-gov.svg">
-            <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 class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
+          <p class="usa-banner__header-text">
+            An official website of the United States government
+          </p>
+          <p class="usa-banner__header-action">Here’s how you know</p>
+        </div>
+        <button
+          type="button"
+          class="usa-accordion__button usa-banner__button"
+          aria-expanded="false"
+          aria-controls="gov-banner-default"
+        >
+          <span class="usa-banner__button-text">Here’s how you know</span>
+        </button>
+      </div>
+    </header>
+    <div
+      class="usa-banner__content usa-accordion__content"
+      id="gov-banner-default"
+    >
+      <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/img/icon-dot-gov.svg"
+            role="img"
+            alt="Dot Gov"
+            aria-hidden="true"
+          />
+          <div class="usa-media-block__body">
+            <p>
+              <strong>Official websites use .gov</strong><br />A
+              <strong>.gov</strong> website belongs to an official government
+              organization in the United States.
+            </p>
           </div>
-          <div class="usa-banner__guidance tablet:grid-col-6">
-            <img class="usa-banner__icon usa-media-block__img" alt="Https" src="{{ site.baseurl }}/assets/img/icon-https.svg">
-            <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 class="usa-banner__guidance tablet:grid-col-6">
+          <img
+            class="usa-banner__icon usa-media-block__img"
+            src="{{ site.baseurl }}/assets/img/icon-https.svg"
+            role="img"
+            alt="Https Icon"
+            aria-hidden="true"
+          />
+          <div class="usa-media-block__body">
+            <p>
+              <strong>Secure .gov websites use HTTPS</strong><br />A
+              <strong>lock</strong> (
+              <span class="icon-lock"
+                ><svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="52"
+                  height="64"
+                  viewBox="0 0 52 64"
+                  class="usa-banner__lock-image"
+                  role="img"
+                  aria-labelledby="banner-lock-description-default"
+                  focusable="false"
+                >
+                  <title id="banner-lock-title-default">Lock</title>
+                  <desc id="banner-lock-description-default">Locked padlock icon</desc>
+                  <path
+                    fill="#000000"
+                    fill-rule="evenodd"
+                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                  />
+                </svg> </span
+              >) or <strong>https://</strong> means you’ve safely connected to
+              the .gov website. Share sensitive information only on official,
+              secure websites.
+            </p>
           </div>
         </div>
       </div>
     </div>
   </div>
+</section>
   <div class="usa-overlay"></div>
 </div>

_includes/highlights.html

@@ -1,11 +1,8 @@
-{% comment %}
-Use this section to highlight key elements of your site. Some sites will only have two while others may have six to
-eight.
-{% endcomment %}
+
 
 <div class="clearfix padding-y-4">
     <h2 class="text-primary-darker header-center" style="text-align: center;">Community News</h2>
-    {% for post in paginator.posts | sort: 'date' | reverse limit: 8 %}
+    {% for post in site.posts | sort: 'date' | reverse limit: 8 %}
     <section class="usa-graphic-list usa-section usa-prose clearfix grid-container padding-y-105">
         <div class="clearfix shadow-5 radius-lg bg-white padding-4">
             <div class="grid-row grid-gap">

_includes/menu.html

@@ -10,7 +10,7 @@
   </div>
   <nav role="navigation" class="usa-nav">
     <div class="usa-nav__inner">
-      <button class="usa-nav__close"><img alt="close" src="{{ site.baseurl }}/assets/img/close.svg"></button>
+      <button class="usa-nav__close side-nav"><img alt="close" src="{{ site.baseurl }}/assets/img/close.svg"></button>
       <ul class="usa-nav__primary usa-accordion">
         {% for nav_item in include.primary_navigation %}
         {% unless nav_item.children %}

_includes/meta.html

@@ -55,4 +55,6 @@
   <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/main.css?{{ site.time | date: '%s%N' }}">
   <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/banner.css?{{ site.time | date: '%s%N' }}">
   <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/podcast.css?{{ site.time | date: '%s%N' }}">
+  <script src="{{ site.baseurl }}/assets/js/uswds-init.min.js?{{ site.time | date: '%s%N' }}"></script>
+
 </head>

_layouts/workinggroup.html

@@ -78,7 +78,7 @@ <h2 class="font-serif-xl"><img src="{{site.baseurl}}/assets/images/icons/idea.sv
   <div>
     <section class="usa-layout-docs__main grid-row__workinggroup">
       <div class="tablet:grid-col-12 line-height-sans-5 tablet:margin-y-6 margin-bottom-8">
-        <section class="usa-accordion usa-accordion--bordered" aria-multiselectable="true">
+        <section class="usa-accordion usa-accordion--bordered" data-allow-multiple>
           {{ content }}
         </section>
       </div>