Merge branch 'main' of https://github.com/uswds/uswds-site into al-su…

…ccess-dark
uswds · Jan 17, 2023 · f4be42e · f4be42e
2 parents 9f6a67e + 0a6080f
commit f4be42e
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 46 deletions.
diff --git a/.snyk b/.snyk
@@ -1420,8 +1420,8 @@ ignore:
         expires: '2022-01-27T21:29:25.296Z'
     - '*':
         reason: No available upgrade or patch
-        expires: 2023-01-18T23:30:13.009Z
-        created: 2022-12-19T23:30:13.064Z
+        expires: 2023-02-08T23:54:37.979Z
+        created: 2023-01-09T23:54:38.031Z
   SNYK-JS-NODESASS-1059081:
     - gulp-sass > node-sass:
         reason: No available upgrade or patch.
@@ -3498,13 +3498,18 @@ ignore:
   SNYK-JS-UNSETVALUE-2400660:
     - '*':
         reason: No available upgrade or patch
-        expires: 2023-01-18T23:30:14.882Z
-        created: 2022-12-19T23:30:14.935Z
+        expires: 2023-02-08T23:54:39.844Z
+        created: 2023-01-09T23:54:39.898Z
   SNYK-JS-DECODEURICOMPONENT-3149970:
     - '*':
         reason: No available upgrade or patch
-        expires: 2023-01-18T23:30:33.040Z
-        created: 2022-12-19T23:30:33.094Z
+        expires: 2023-02-08T23:54:41.654Z
+        created: 2023-01-09T23:54:41.708Z
+  SNYK-JS-DEBUG-3227433:
+    - '*':
+        reason: No available upgrade or patch
+        expires: 2023-02-08T23:54:33.524Z
+        created: 2023-01-09T23:54:33.576Z
 # patches apply the minimum changes required to fix a vulnerability
 patch:
   'npm:minimatch:20160620':

diff --git a/_components/banner/guidance/implementation.md b/_components/banner/guidance/implementation.md
@@ -1,3 +1,7 @@
 - Some .mil websites do not belong to an official U.S. Department of Defense organization. These sites should adapt the **Official websites use .mil section** to use more technically accurate language: “A **.mil** website operates under the approval of the U.S. Department of Defense.”
 - The banner should directly follow the `skipnav` component.
 - Set the banner background color with `$theme-banner-background-color`. Banner text will update automatically.
+
+{:.site-note}
+**Note:** We recommend loading `uswds-init.js` when using `banner` to assist in preventing flashes of unstyled content (FOUC) as well as cumulative layout shift (CLS). This small JavaScript file (less than 1 KB minified) helps the browser know if the USWDS JavaScript library is loading properly.
+<br>To add `uswds-init` to your site, simply copy `uswds-init.min.js` from `dist/js` into your site assets and reference the file in the `<head>` of your HTML files. Alternatively, you can inline its contents directly into a `<script>` tag in your HTML files.
diff --git a/css/_uswds-theme-custom-styles.scss b/css/_uswds-theme-custom-styles.scss
@@ -3531,4 +3531,4 @@ $do-dont-top-bar-width: 1;
 
 .usa-in-page-nav {
   @include u-z(100);
-}
+}
diff --git a/css/uswds-together.scss b/css/uswds-together.scss
@@ -22,7 +22,6 @@ $gray-90-next: #202020;
 $next-button-color: #2672de;
 $next-button-hover-color: #0d53b7;
 
-
 $next-theme-colors: (
   "next-gray-medium" #d8d8d0 true,
   "next-gray-dark" #2e2e2e,
@@ -35,8 +34,8 @@ $next-theme-colors: (
   "next-blue-medium" #2672de,
   "next-blue-dark" #1f5aad,
   "next-mint-medium" #74d7ad true,
-  "next-mint-dark" #45a17a true
-  "together-green" #00A91C true,
+  "next-mint-dark" #45a17a true,
+  "together-green" #00a91c true
 );
 
 @each $color-name, $color-value, $text-black in $next-theme-colors {
@@ -96,12 +95,12 @@ html {
 }
 
 // Header
-.together-site-header, 
+.together-site-header,
 .together-site-header .site-header-navbar {
   background-color: $gray-80-next;
 }
 
-.site-header--dark .site-logo .usa-logo__text::before {  
+.site-header--dark .site-logo .usa-logo__text::before {
   filter: brightness(20);
 }
 
@@ -115,7 +114,6 @@ html {
   display: flex;
   @include at-media("tablet") {
     align-content: center;
-
   }
   .together-hero__image {
     position: block;
@@ -125,8 +123,7 @@ html {
   }
 }
 
-
-.heading-wrapper{ 
+.heading-wrapper {
   @include at-media("tablet") {
     min-height: 14rem;
   }
@@ -281,7 +278,7 @@ html {
 .together-internal-nav__link,
 .together-internal-nav__link:visited {
   border-bottom: none;
-  color: #565C65;
+  color: #565c65;
   display: block;
   font-size: size("lang", "3xs");
   padding: units(1) units(0.5);
@@ -294,13 +291,13 @@ html {
   }
 
   &:hover {
-    color: #565C65;
-    border-color: #565C65;
+    color: #565c65;
+    border-color: #565c65;
   }
 
   &.current {
-    border-color: #565C65;
-    color: #565C65;
+    border-color: #565c65;
+    color: #565c65;
     font-weight: font-weight("bold");
   }
 }
@@ -390,7 +387,7 @@ html {
 
 .next-overview {
   margin-top: 1em;
-  
+
   @include at-media("tablet") {
     margin-top: 0;
   }
@@ -400,45 +397,44 @@ html {
   border-bottom: 4px dotted $gray-20-next;
   padding-bottom: units(9);
   padding-top: units(9);
-  
+
   @include at-media("desktop") {
     padding-bottom: units(15);
     padding-top: units(15);
   }
-  
+
   &:focus {
     outline: none;
   }
-  
+
   h2 {
     font-family: family("heading");
     font-size: size("heading", 12);
     line-height: line-height("heading", 3);
     margin-top: 0;
     margin-bottom: units(1.5);
-    
+
     @include at-media("desktop") {
       font-size: size("heading", 14);
     }
   }
-  
+
   h3 {
     font-size: size("lang", 11);
     margin: units(4) 0 0 0;
   }
-  
+
   h4 {
     color: color("base");
     font-size: size("lang", 9);
     margin-bottom: 0;
-
   }
   p {
     font-size: size("lang", 6);
     color: color("base-darkest");
   }
   .border-together-green {
-    border-color: #00A91C !important;
+    border-color: #00a91c !important;
   }
 }
 
@@ -510,7 +506,7 @@ html {
   }
 }
 
-.together-section-description >  p:first-child {
+.together-section-description > p:first-child {
   font-size: size("lang", 8);
   margin-top: 0;
 }
@@ -570,7 +566,7 @@ html {
 // Styled inline blockquote
 .together-blockquote {
   position: relative;
-  border-left: 5px solid #005EA2;
+  border-left: 5px solid #005ea2;
   color: $indigo-cool-80;
   font-family: family("heading");
   font-size: size("heading", 8);
@@ -684,7 +680,7 @@ html {
   margin-bottom: units(2);
   min-height: 7rem;
   flex-flow: column;
-  
+
   @include at-media("desktop") {
     min-height: 10rem;
     margin: units(5) 0;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -90,7 +90,7 @@
     "prettier": "^2.4.1",
     "sass": "^1.43.4",
     "simplecrawler": "^1.1.8",
-    "snyk": "^1.1026.0",
+    "snyk": "^1.1064.0",
     "stylelint": "^14.1.0",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0"