progress in upgrading to USWDS 3

GSA · Oct 7, 2024 · 69e14f3 · 69e14f3
1 parent 37edd10
commit 69e14f3
Show file tree

Hide file tree

Showing 169 changed files with 6,375 additions and 7,353 deletions.
diff --git a/.asdfrc b/.asdfrc
@@ -0,0 +1 @@
+legacy_version_file = yes
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,6 @@ _site/
 .DS_Store
 .vendor/
 vendor/
-.bundle/
+.bundle/
+node_modules/*
+assets/uswds/*
diff --git a/.ruby-version b/.ruby-version
@@ -1 +1 @@
-3.1.4
+3.2.2
diff --git a/Gemfile b/Gemfile
@@ -4,9 +4,9 @@ source "https://rubygems.org"
 
 git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
 
-gem "jekyll", "~> 4.3.2"
+gem "jekyll", "4.3.2"
 gem "nokogiri", "~> 1.14"
-gem "html-proofer", "~> 3.19", ">= 3.19.4"
+gem "html-proofer", "3.19.4"
 gem "jekyll-redirect-from", ">= 0.16.0"
 gem "kramdown-parser-gfm", ">= 1.1.0"
 gem "jekyll-sitemap", ">= 1.4.0"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -3,8 +3,9 @@ GEM
   specs:
     addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
+    bigdecimal (3.1.8)
     colorator (1.1.0)
-    concurrent-ruby (1.2.3)
+    concurrent-ruby (1.3.4)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
@@ -13,9 +14,15 @@ GEM
     eventmachine (1.2.7)
     ffi (1.16.3)
     forwardable-extended (2.6.0)
-    google-protobuf (3.25.5)
-    google-protobuf (3.25.5-x86_64-darwin)
-    google-protobuf (3.25.5-x86_64-linux)
+    google-protobuf (4.28.2)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.28.2-x86_64-darwin)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.28.2-x86_64-linux)
+      bigdecimal
+      rake (>= 13)
     html-proofer (3.19.4)
       addressable (~> 2.3)
       mercenary (~> 0.3)
@@ -25,9 +32,9 @@ GEM
       typhoeus (~> 1.3)
       yell (~> 2.0)
     http_parser.rb (0.8.0)
-    i18n (1.14.5)
+    i18n (1.14.6)
       concurrent-ruby (~> 1.0)
-    jekyll (4.3.3)
+    jekyll (4.3.2)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -59,7 +66,7 @@ GEM
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.4.0)
+    mercenary (0.3.6)
     mini_portile2 (2.8.1)
     nokogiri (1.14.3)
       mini_portile2 (~> 2.8.0)
@@ -76,24 +83,26 @@ GEM
     rainbow (3.1.1)
     rake (13.2.1)
     rb-fsevent (0.11.2)
-    rb-inotify (0.10.1)
+    rb-inotify (0.11.1)
       ffi (~> 1.0)
     rexml (3.2.8)
       strscan (>= 3.0.9)
-    rouge (4.2.1)
+    rouge (4.4.0)
     safe_yaml (1.0.5)
-    sass-embedded (1.54.6)
-      google-protobuf (~> 3.19)
-      rake (>= 10.0.0)
-    sass-embedded (1.54.6-x86_64-darwin)
-      google-protobuf (~> 3.19)
+    sass-embedded (1.79.4)
+      google-protobuf (~> 4.27)
+      rake (>= 13)
+    sass-embedded (1.79.4-x86_64-darwin)
+      google-protobuf (~> 4.27)
+    sass-embedded (1.79.4-x86_64-linux-gnu)
+      google-protobuf (~> 4.27)
     strscan (3.1.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)
-    unicode-display_width (2.5.0)
-    webrick (1.8.1)
+    unicode-display_width (2.6.0)
+    webrick (1.8.2)
     yell (2.2.2)
 
 PLATFORMS
@@ -102,8 +111,8 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
-  html-proofer (~> 3.19, >= 3.19.4)
-  jekyll (~> 4.3.2)
+  html-proofer (= 3.19.4)
+  jekyll (= 4.3.2)
   jekyll-redirect-from (>= 0.16.0)
   jekyll-sitemap (>= 1.4.0)
   kramdown-parser-gfm (>= 1.1.0)

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -122,4 +122,5 @@ <h5>
     </section>
 </div>
 </body>
+<script src="{{ site.baseurl }}/assets/uswds/js/uswds.min.js?v={{ cache_bust }}"></script>
 </html>
diff --git a/_includes/head.html b/_includes/head.html
@@ -54,12 +54,11 @@
         assign cache_bust = site.time | replace: ' ', '-' | replace: ':', '-'
     %}
 
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/uswds/css/uswds_3.1.0.min.css?v={{ cache_bust }}">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/uswds/css/uswds.min.css?v={{ cache_bust }}">
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/uswds/css/styles.css?v={{ cache_bust }}">
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/custom.css?v={{ cache_bust }}">
     <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/datatables.min.css"/>
 
-    <script src="{{ site.baseurl }}/assets/uswds/js/uswds.min.js?v={{ cache_bust }}"></script>
+    <script src="{{ site.baseurl }}/assets/uswds/js/uswds-init.min.js?v={{ cache_bust }}"></script>
     <script type="text/javascript" src="{{ site.baseurl }}/assets/js/jquery-3.6.0.min.js"></script>
     <script type="text/javascript" src="{{ site.baseurl }}/assets/js/datatables.min.js"></script>
     <script type="text/javascript" src="{{ site.baseurl }}/assets/js/bootstrap.min.js"></script>

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,41 +1,50 @@
-<section class="usa-banner">
+
+<div class="usa-overlay"></div>
+<div class="usa-banner bg-base-lightest">
   <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.
+    <div class="usa-banner__header" aria-label="official-gov-website">
+      <div class="usa-banner__inner flex-justify-center">
+        <div class="grid-col-auto">
+          <img class="usa-banner__header-flag" src="{{ '/assets/uswds/img/us_flag_small.png' | relative_url }}" 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>
+    </div>
+    <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 bg-white circle-5" src="{{ '/assets/uswds/img/icon-dot-gov.svg' | relative_url }}" 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 bg-white circle-5" src="{{ '/assets/uswds/img/icon-https.svg' | relative_url }}" 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>
-</section>
+</div>
+
 
-<header class="usa-header usa-header-extended" role="banner">
+<header class="usa-header usa-header--extended" role="banner">
   <div class="usa-navbar">
   <div class="usa-logo" id="extended-logo">
     <a class="data-strategy-logo-link" href="{{ site.baseurl }}/"
@@ -56,46 +65,45 @@
 
   <nav role="navigation" class="usa-nav">
 
-    <div class="usa-nav-inner">
+    <div class="usa-nav__inner">
 
       <button class="usa-nav-close">
-        <img src="{{ site.baseurl }}/assets/uswds/img/close.svg" alt="close">
+        <img src="{{ site.baseurl }}/assets/uswds/img/usa-icons/close.svg" alt="close">
       </button>
 
-      <ul class="usa-nav-primary usa-accordion">
-        <li><a class="usa-nav-link" href="{{ site.baseurl }}/"><span>Home</span></a></li>
+      <ul class="usa-nav__primary usa-accordion">
+        <li><a class="usa-nav__link" href="{{ site.baseurl }}/"><span>Home</span></a></li>
         <li>
-          <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-nav-section-two"><span>About</span></button>
-          <ul id="basic-nav-section-two" class="usa-nav-submenu">
+          <button class="usa-accordion-button usa-nav__link" aria-expanded="false" aria-controls="basic-nav-section-two"><span>About</span></button>
+          <ul id="basic-nav-section-two" class="usa-nav__submenu">
             <li><a href="{{ site.baseurl }}/background/">Background</a></li>
             <li><a href="{{ site.baseurl }}/overview/">Overview</a></li>
             <li><a href="https://www.cdo.gov">CDO Council</a></li>
           </ul>
         </li>
         <li>
-          <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-nav-section-three"><span>Action Plan</span></button>
-          <ul id="basic-nav-section-three" class="usa-nav-submenu">
+          <button class="usa-accordion-button usa-nav__link" aria-expanded="false" aria-controls="basic-nav-section-three"><span>Action Plan</span></button>
+          <ul id="basic-nav-section-three" class="usa-nav__submenu">
             <li><a href="{{ site.baseurl }}/2021/action-plan/">2021 Action Plan</a></li>
             <li><a href="{{ site.baseurl }}/2020/action-plan/">2020 Action Plan</a></li>
           </ul>
         </li>
         <li>
-          <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-nav-section-four"><span>Action Progress</span></button>
-          <ul id="basic-nav-section-four" class="usa-nav-submenu">
+          <button class="usa-accordion-button usa-nav__link" aria-expanded="false" aria-controls="basic-nav-section-four"><span>Action Progress</span></button>
+          <ul id="basic-nav-section-four" class="usa-nav__submenu">
             <li><a href="{{ site.baseurl }}/2021/progress/">2021 Action Progress</a></li>
             <li><a href="{{ site.baseurl }}/2020/progress/">2020 Action Progress</a></li>
           </ul>
         </li>
-        <li><a class="usa-nav-link" href="{{ site.baseurl }}/resources/"><span>Resources</span></a></li>       
-        <li><a class="usa-nav-link" href="{{ site.baseurl }}/news/"><span>News</span></a></li>
+        <li><a class="usa-nav__link" href="{{ site.baseurl }}/resources/"><span>Resources</span></a></li>       
+        <li><a class="usa-nav__link" href="{{ site.baseurl }}/news/"><span>News</span></a></li>
       </ul>
 
-    <div class="usa-nav-secondary">
+    <div class="usa-nav__secondary">
 
     </div>
 
     </div>
   </nav>
 </header>
 
-<div class="usa-overlay"></div>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -2,8 +2,13 @@
 layout: default
 ---
 
- <div class="usa-overlay"></div>
-
-  <main class="usa-grid usa-section page-{{ page.title | downcase }}" id="main-content">
-        {{ content }}
-  </main>
+<main class="usa-layout-docs usa-section page-{{ page.title | downcase }}" id="main-content">
+      <div class="grid-container">
+            <div class="grid-row grid-gap">
+                  <div class="usa-layout__docs-main desktop:grid-col-12">
+                        <h1>{{ page.title }}</h1>
+                        {{ content }}
+                      </div>
+            </div>
+      </div>
+</main>
diff --git a/_sass/styles.scss b/_sass/styles.scss
@@ -0,0 +1,5 @@
+@use "uswds-core" with (
+    $theme-show-notifications: false
+ );
+
+@forward "uswds";
-Original file line number
+Diff line change
@@ Expand Up / @@ -122,4 +122,5 @@ <h5> @@
         </section>
     </div>
     </body>
+    <script src="{{ site.baseurl }}/assets/uswds/js/uswds.min.js?v={{ cache_bust }}"></script>
     </html>