uswds-jekyll 5.3.0 → 5.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 29e08c0c93242d0988e5b023c39b250ecb253f039ad18db213a11a0c19232c27
-  data.tar.gz: 31e0ba8838991c621837ddd6790a972174f4b56ed3b7920ef3ec68f9f93fe53c
+  metadata.gz: d031cfbe163942532cb33aa9102c51309c3fa957ba006c3e3683ae23fdc78e1b
+  data.tar.gz: 261d98f68bf1354408c556623df791ba577ef2ccd987b32b180c2a877d543565
 SHA512:
-  metadata.gz: 3bc6518ab545cce8c5dcca05413cf759a66f0114cea6d5e3df31519b2a8092366c8d3ea5518a0571cd78b489e47dad9e08ac9f01dd094eec05d0930aa379e8d1
-  data.tar.gz: 70820de8069997a91357ba38291226ac4d4093817aaf5cd27f72c5e0824db79ea3c3d3be86bba6e914abbb0ec542f79b9e96e78e4ca6edd1534ebfcb64e0d464
+  metadata.gz: c81d1c591e147b094895554f9584a7881924c6085cfd3bc14ab6400ff2fee9eeb3ae54d7e0c9da38ece07558c863cc0fcbbcd8e0027c9d9eb1a0dc23fa9368b9
+  data.tar.gz: b6e9405a3d6e5c0569e4bb8e6d1f844672d216c3f64285c14ec6f454d94a743f69d9a32625066bfda46d465d292b7827baaf18b00a9e45097bee6a0b6711b458

data/README.md

@@ -284,6 +284,10 @@ You can add DAP to your site by uncommenting the `dap_agency` line and, if need
 # dap_subagency: TTS
 ```
 
+### Feedback form
+
+To add a user feedback form, create a new survey through [Touchpoints](https://touchpoints.digital.gov/) and add the ID via the `touchpoints_form_id` key in `_config.yml`.
+
 ### Last modified date
 
 To show the last date a page was last modified by:
@@ -306,7 +310,7 @@ This will add the date right before the footer component.
 
 ### Anchor JS
 
-You can show an anchor link next to header tags by uncommenting this section from the `_config.yml` data file. This will add an anchor link after the header tag on the page and post layouts making ech header linkable. See https://github.com/bryanbraun/anchorjs for more information.
+You can show an anchor link next to header tags by uncommenting this section from the `_config.yml` data file. This will add an anchor link after the header tag on the page and post layouts making each header linkable. See https://github.com/bryanbraun/anchorjs for more information.
 
 ```yml
 # anchor_js_targets: [h1, h2, h3, h4, h5, h6]
@@ -314,10 +318,10 @@ You can show an anchor link next to header tags by uncommenting this section fro
 
 ### Private Eye JS
 
-By default, the USWDS Jekyll theme uses [Private Eye](https://github.com/18F/private-eye) to denote private links. You can turn this off with the setting below. If you would like to customize the default Private Eye configuration, you can find it in `/assets/js/private_eye_conf.js`.
+By default, the USWDS Jekyll theme uses [Private Eye](https://github.com/18F/private-eye) to denote private links. You can turn this on by adding the setting below in your _config.yml. If you would like to customize the default Private Eye configuration, you can find it in `/assets/js/private_eye_conf.js`.
 
 ```yml
-private_eye: false
+private_eye: true
 ```
 
 ## Assets
@@ -357,7 +361,7 @@ scripts:
     async: true # optional
 ```
 
-Scripts specified as objects (in the latter item above) must have a `src` property. Scripts with `async: true` will get an `async` attribute, which tells the browser _not_ to let this script's loading block the execution of subsequent scripts. If the execution order of your scripts is **not** important, setting `async: true` may provide performance benefits to your users. (Conversely, if you don't know whether your scripts need to execute in a particular order, then you should not set `async: true` because it may prevent your scripts from running propertly.)
+Scripts specified as objects (in the latter item above) must have a `src` property. Scripts with `async: true` will get an `async` attribute, which tells the browser _not_ to let this script's loading block the execution of subsequent scripts. If the execution order of your scripts is **not** important, setting `async: true` may provide performance benefits to your users. (Conversely, if you don't know whether your scripts need to execute in a particular order, then you should not set `async: true` because it may prevent your scripts from running properly.)
 
 ### Asset load order
 
@@ -634,8 +638,8 @@ To develop this theme and/or test it locally:
 #### Scripts
 
 - `start`: Starts the jekyll site
-- `setup-uswds`: Copies assets from the USWDS package to their theme locations, but running the following scipts, which can also be run separately:
+- `setup-uswds`: Copies assets from the USWDS package to their theme locations, by running the following scripts, which can also be run separately:
   - `sync-assets`: Copies assets to `assets/uswds`
-  - `sync-sass`: Copies Sass cource files to `_sass/uswds/src/`
+  - `sync-sass`: Copies Sass source files to `_sass/uswds/src/`
   - `sync-default-settings`: Copies default settings files to `_sass/uswds/settings`
   - `sync-theme-settings`: Copies only theme settings files to `_sass/settings`

data/_includes/scripts.html

@@ -46,3 +46,20 @@
 //]]>
 </script>
 {% endif %}
+
+
+{% if site.touchpoints_form_id %}
+<script type="text/javascript">
+//<![CDATA[
+      var touchpoints_config = { siteHandle:"{{ site.touchpoints_form_id }}" };
+
+      var script = document.createElement("script");
+      script.type = "text/javascript";
+      script.src = `https://touchpoints.app.cloud.gov/touchpoints/${touchpoints_config.siteHandle}/js`;
+      script.async = true;
+      document.getElementsByTagName("head")[0].appendChild(script);
+
+//]]>
+</script>
+
+{% endif %}

data/_sass/uswds/src/base/_body.scss

@@ -1,5 +1,4 @@
 body {
-  background-color: color("white");
-  color: color("ink");
+  @include set-text-and-bg($context: "Body");
   overflow-x: hidden;
 }

data/_sass/uswds/src/components/_accordions.scss

@@ -16,11 +16,11 @@ $accordion-border: units($theme-accordion-border-width) solid
 // scss-lint:disable PropertyCount
 @mixin accordion-button-styles {
   @include button-unstyled;
-  @include add-background-svg("minus");
+  @include add-background-svg("usa-icons/remove");
 
   background-color: color("base-lightest");
   background-position: right units(2.5) center;
-  background-size: units(2);
+  background-size: units(3);
   color: color("ink");
   cursor: pointer;
   display: inline-block;
@@ -39,8 +39,8 @@ $accordion-border: units($theme-accordion-border-width) solid
 // scss-lint:enable PropertyCount
 
 @mixin accordion-button-unopened-styles {
-  @include add-background-svg("plus");
-  background-size: units(2);
+  @include add-background-svg("usa-icons/add");
+  background-size: units(3);
 }
 
 @mixin accordion-nested-list {

data/_sass/uswds/src/components/_alerts.scss

@@ -1,25 +1,13 @@
 // Alert variables ---------- //
-// TODO: Custom alerts are effectively hidden and not well supported
-// Consider removing or rebuilding
-$usa-custom-alerts: () !default;
-$usa-custom-alerts-bar: () !default;
-
-$usa-alerts: (
-  success: "success-lighter",
-  warning: "warning-lighter",
-  error: "error-lighter",
-  info: "info-lighter",
-);
 
-$usa-alerts-bar: (
-  success: "success",
+$alert-icons: (
+  success: "check_circle",
   warning: "warning",
   error: "error",
   info: "info",
+  emergency: "error",
 );
 
-$alerts: map-merge($usa-alerts, $usa-custom-alerts);
-$alerts-bar: map-merge($usa-alerts-bar, $usa-custom-alerts-bar);
 $alert-padding-left: units($theme-alert-padding-x) +
   units($theme-alert-bar-width);
 
@@ -27,9 +15,9 @@ $alert-padding-left: units($theme-alert-padding-x) +
   @include typeset($theme-alert-font-family);
   @include border-box-sizing;
   background-color: color("base-lightest");
-  background-position: $alert-padding-left units($theme-alert-padding-x);
+  background-position: $alert-padding-left units($theme-alert-padding-x - 1);
   background-repeat: no-repeat;
-  background-size: units(4);
+  background-size: units($theme-alert-icon-size);
   padding-bottom: units(2);
   padding-left: $alert-padding-left;
   padding-right: units($theme-alert-padding-x);
@@ -72,7 +60,7 @@ $alert-padding-left: units($theme-alert-padding-x) +
 }
 
 .usa-alert__heading {
-  @include typeset($theme-alert-font-family, "lg", 2);
+  @include typeset($theme-alert-font-family, "lg", 1);
   margin-top: 0;
   margin-bottom: units(1);
 }
@@ -90,48 +78,25 @@ $alert-padding-left: units($theme-alert-padding-x) +
   padding-top: units(0.5);
 }
 
-@each $name, $bgcolor in $alerts {
+@each $name, $icon in $alert-icons {
   .usa-alert--#{$name} {
-    @include add-background-svg("alerts/#{$name}");
-    background-color: color($bgcolor);
-
-    &::before {
-      background-color: color(map-get($alerts-bar, $name));
-    }
-
-    .usa-alert__body {
-      padding-left: units($theme-alert-icon-size) +
-        units($theme-alert-padding-x);
-    }
+    @include alert-status-styles($name, $icon);
   }
 }
 
 .usa-alert--slim {
-  background-position: $alert-padding-left center;
-  background-size: units(3);
-  padding-bottom: units($theme-alert-bar-width);
-  padding-top: units($theme-alert-bar-width);
-
-  .usa-alert__body {
-    padding-left: units(5);
-  }
-
-  .usa-alert__text:only-child {
-    margin-bottom: units(0.5);
-    padding-top: units(0.5);
-  }
+  @include alert-slim-styles;
 }
 
-.usa-alert--no-icon {
-  background-image: none;
-
-  .usa-alert__body {
-    padding-left: 0;
-  }
+.usa-alert--no-heading {
+  background-position: $alert-padding-left
+    calc(#{units($theme-alert-padding-x)} - #{units(0.5)});
 }
 
 .usa-alert--validation {
   background-size: units(3);
+  background-position: $alert-padding-left
+    calc(#{units($theme-alert-padding-x)} - #{units(2px)});
 
   .usa-alert__body {
     padding-left: units(5);

data/_sass/uswds/src/components/_banner.scss

@@ -1,7 +1,9 @@
+$banner-context: "Banner";
 $banner-guidance-measure: 3;
 $banner-icon-colors: get-link-tokens-from-bg(
   $theme-banner-background-color,
-  $theme-banner-link-color
+  $theme-banner-link-color,
+  $context: $banner-context
 );
 $banner-icon-color: nth($banner-icon-colors, 1);
 $banner-icon-hover: nth($banner-icon-colors, 2);
@@ -21,10 +23,10 @@ $banner-icon-chevron-up: map-merge(
   )
 );
 $banner-icon-close: (
-  "name": "close-alt",
+  "name": "usa-icons/close",
   "svg-height": 40,
   "svg-width": 40,
-  "height": $theme-icon-image-size,
+  "height": 3,
   "color": "blue-60v",
   "color-variant": "white",
   "container-height": $size-touch-target,
@@ -48,7 +50,10 @@ $banner-icon-close: (
 
 .usa-banner__header,
 .usa-banner__content {
-  @include set-text-from-bg($theme-banner-background-color);
+  @include set-text-from-bg(
+    $theme-banner-background-color,
+    $context: $banner-context
+  );
 }
 
 .usa-banner__content {
@@ -138,7 +143,8 @@ $banner-icon-close: (
   );
   @include set-link-from-bg(
     $theme-banner-background-color,
-    $theme-banner-link-color
+    $theme-banner-link-color,
+    $context: $banner-context
   );
 
   line-height: line-height($theme-banner-font-family, 2);
@@ -198,7 +204,8 @@ $banner-icon-close: (
   @include u-text("primary", underline, baseline);
   @include set-link-from-bg(
     $theme-banner-background-color,
-    $theme-banner-link-color
+    $theme-banner-link-color,
+    $context: $banner-context
   );
   display: block;
   font-size: font-size($theme-banner-font-family, 1);
@@ -223,7 +230,8 @@ $banner-icon-close: (
     );
     @include set-link-from-bg(
       $theme-banner-background-color,
-      $theme-banner-link-color
+      $theme-banner-link-color,
+      $context: $banner-context
     );
     @include u-pin("none");
     display: inline;
@@ -295,3 +303,10 @@ $banner-icon-close: (
 .usa-banner__icon {
   width: units(5);
 }
+
+// [uswds-init.js] Offscreen content while js is loading
+.usa-js-loading {
+  .usa-banner__content {
+    @include add-sr-only;
+  }
+}

data/_sass/uswds/src/components/_breadcrumb.scss

@@ -3,27 +3,28 @@
 // =====================================
 
 // This helps balance spacing around inline-block elements
+$breadcrumb-context: "Breadcrumb";
 $gap-inline-spacer: -0.25em;
+$icon-vertical-spacer: -0.2em;
 
 $breadcrumb-gap: 1.5;
-$breadcrumb-icon-height: 1.35ex;
-$breadcrumb-icon-spacing: calc(
-  #{units($breadcrumb-gap)} + #{$gap-inline-spacer}
-);
+$breadcrumb-icon-height: 2.5ex;
+$breadcrumb-icon-display-height: 2ex;
+$breadcrumb-icon-spacing: 0px;
 
 $icon-breadcrumb-separator: (
-  "name": "angle-arrow-right",
-  "svg-height": 64,
+  "name": "usa-icons/navigate_next",
+  "svg-height": 40,
   "svg-width": 40,
-  "height": $breadcrumb-icon-height,
+  "height": $breadcrumb-icon-display-height,
   "color": $theme-breadcrumb-separator-color,
 );
 
 $icon-breadcrumb-back: (
-  "name": "arrow-left",
-  "svg-height": 64,
-  "svg-width": 64,
-  "height": $breadcrumb-icon-height,
+  "name": "usa-icons/arrow_back",
+  "svg-height": 40,
+  "svg-width": 40,
+  "height": $breadcrumb-icon-display-height,
   "color": $theme-breadcrumb-separator-color,
 );
 
@@ -36,7 +37,7 @@ $breadcrumb-back-icon-aspect: (
 // Defines spacing so back icon is optically placed
 @mixin exdent-icon($dim: $breadcrumb-back-icon-aspect) {
   $aspect: nth($dim, 1) / nth($dim, 2);
-  $icon-width: $breadcrumb-icon-height * $aspect;
+  $icon-width: $breadcrumb-icon-display-height * $aspect;
   padding-left: calc(#{$icon-width} + #{$breadcrumb-icon-spacing});
   text-indent: calc((#{$icon-width} + #{$breadcrumb-icon-spacing}) * -1);
 }
@@ -47,7 +48,10 @@ $breadcrumb-back-icon-aspect: (
     $theme-breadcrumb-font-size,
     3
   );
-  @include set-text-and-bg($theme-breadcrumb-background-color);
+  @include set-text-and-bg(
+    $theme-breadcrumb-background-color,
+    $context: $breadcrumb-context
+  );
   @include u-padding-x($theme-breadcrumb-padding-x);
 
   @include at-media($theme-breadcrumb-min-width) {
@@ -55,12 +59,6 @@ $breadcrumb-back-icon-aspect: (
     @include u-padding-top($theme-breadcrumb-padding-top);
   }
 
-  &.usa-breadcrumb--wrap {
-    @include at-media($theme-breadcrumb-min-width) {
-      @include u-line-height($theme-breadcrumb-font-family, 4);
-    }
-  }
-
   &:not(.usa-breadcrumb--wrap) {
     .usa-breadcrumb__list {
       @include at-media($theme-breadcrumb-min-width) {
@@ -75,8 +73,8 @@ $breadcrumb-back-icon-aspect: (
 .usa-breadcrumb__list {
   @include unstyled-list;
   @include u-display("block");
-  @include u-margin(-$theme-focus-width);
   @include u-padding($theme-focus-width);
+  margin: units($theme-focus-width) * -1;
 }
 
 .usa-breadcrumb__list-item {
@@ -105,13 +103,21 @@ $breadcrumb-back-icon-aspect: (
         // Override link colors from button-unstyled()
         @include set-link-from-bg(
           $theme-breadcrumb-background-color,
-          $theme-breadcrumb-link-color
+          $theme-breadcrumb-link-color,
+          $context: $breadcrumb-context
         );
 
         @include u-display("inline-block");
         @include u-padding-bottom($theme-breadcrumb-padding-bottom);
         @include u-padding-top($theme-breadcrumb-padding-top);
 
+        &:before {
+          bottom: $icon-vertical-spacer;
+          // Magic number to center icon
+          height: $breadcrumb-icon-display-height;
+          position: relative;
+        }
+
         // Prevent underline that extends beyond text
         &,
         &:hover,
@@ -146,8 +152,12 @@ $breadcrumb-back-icon-aspect: (
 
     // Style overrides for separator using non-token values
     &:not(:last-child)::after {
+      // Magic number to center icon
+      bottom: $icon-vertical-spacer;
       margin-left: $breadcrumb-icon-spacing;
       margin-right: $breadcrumb-icon-spacing;
+      height: $breadcrumb-icon-display-height;
+      position: relative;
     }
   }
 }
@@ -155,7 +165,8 @@ $breadcrumb-back-icon-aspect: (
 .usa-breadcrumb__link {
   @include set-link-from-bg(
     $theme-breadcrumb-background-color,
-    $theme-breadcrumb-link-color
+    $theme-breadcrumb-link-color,
+    $context: $breadcrumb-context
   );
   @include u-display("inline");
 
@@ -166,3 +177,18 @@ $breadcrumb-back-icon-aspect: (
     @include u-text("underline");
   }
 }
+
+// ---------------------------------
+// Variations
+// ---------------------------------
+
+// Breadcrumb wrap
+.usa-breadcrumb--wrap {
+  @include at-media($theme-breadcrumb-min-width) {
+    @include u-line-height($theme-breadcrumb-font-family, 4);
+  }
+
+  .usa-breadcrumb__list-item {
+    @include u-display("inline-block");
+  }
+}

data/_sass/uswds/src/components/_collection.scss

@@ -0,0 +1,108 @@
+$collection-thumb-width: 10;
+$collection-thumb-width-mobile: 8;
+$collection-thumb-margin: 2;
+
+@include override-prose {
+  .usa-collection {
+    @include typeset($theme-collection-font-family, "sm", 3);
+    @extend %usa-list;
+    @include u-padding-left(0);
+  }
+
+  .usa-collection__item {
+    @extend %usa-list-item;
+    @include unstyled-list;
+    @include u-align-items("align-start");
+    @include u-border-top(1px);
+    @include u-display("flex");
+    @include u-margin-y(2);
+    @include u-padding-top(2);
+  }
+}
+
+.usa-collection__img,
+.usa-collection__calendar-date {
+  @include media-block-img;
+  width: units($collection-thumb-width-mobile);
+  margin-right: units($collection-thumb-margin);
+
+  @include at-media("tablet") {
+    width: units($collection-thumb-width);
+  }
+}
+
+.usa-collection__body {
+  @include u-flex(1);
+}
+
+.usa-collection__heading {
+  @include typeset($theme-collection-header-typeset);
+  @include u-margin-bottom(0);
+  @include u-margin-top(0);
+}
+
+.usa-collection__description {
+  @include u-margin-y(1);
+}
+
+.usa-collection__meta {
+  @include unstyled-list;
+  @include u-margin-top(0.5);
+}
+
+.usa-collection__meta-item {
+  @include u-margin-top(0.5);
+  @include typeset("ui", "2xs", 3);
+  display: block;
+  margin-right: units(1);
+
+  &.usa-tag {
+    @include u-bg("base-lighter");
+    @include u-line-height("ui", 1);
+    @include u-padding-y(0.5);
+    @include u-text("ink");
+    display: inline-block;
+    margin-top: units(0.5);
+
+    &--new {
+      @include u-bg("accent-warm-dark");
+      @include u-text("white");
+    }
+  }
+}
+
+.usa-collection__calendar-date {
+  text-decoration: none;
+}
+
+.usa-collection__calendar-date-month,
+.usa-collection__calendar-date-day {
+  @include u-font("ui", 6);
+  display: block;
+  font-weight: fw("bold");
+  padding: units(0.5);
+  text-align: center;
+
+  @include at-media("tablet") {
+    padding: units(1);
+  }
+}
+
+.usa-collection__calendar-date-month {
+  @include u-radius-top("sm");
+  background-color: color("primary");
+  color: color("white");
+}
+
+.usa-collection__calendar-date-day {
+  @include u-radius-bottom("sm");
+  border: 1px solid color("primary");
+  color: color("primary");
+}
+
+.usa-collection--condensed {
+  .usa-collection__item {
+    @include u-margin-y(1);
+    @include u-padding-top(1);
+  }
+}