uswds-rails 1.4.1 → 1.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 527c148580ccd2b9a299708c1b5b201c414354dd44a9e2475e7b8bd20cac88c8
-  data.tar.gz: 66988327aca6e9c6cdb79a97d6a8607390b28ca95b0ca4622ace9bf19fe66536
+  metadata.gz: b73889f0bc059b764657abd1efcb685a29506d0ae970bfca061b314350b1c8a9
+  data.tar.gz: a85cb088185bb658718cce0027e6898b448e2aa00a8ddbb834a420d7413a12de
 SHA512:
-  metadata.gz: 1b720d9e61d6a19bf768482ac93bdea0f06a6f54e4f8b319c264b99c475fab574e28f6ad70d04b6332e1b0d1620447444034eac5a4a0375db96042b003ce8b80
-  data.tar.gz: f00dbd78b4f5566165781d2d7f7295919e2974536fab4370bb9af91f2309a94acdde39cb350fa7a7ec62b5636d76ce8fc9eb8b3f312c5703b26087443886424e
+  metadata.gz: d85631fb1ab1b9a6b33f576099c369764d44419bb870cb231ed3ae4c5a17029b10727524ed07931d46df757ab0cb7adbfab74815d99e29b4a94b94e25b03607c
+  data.tar.gz: 10a2508ca4b598b93b0ca85a0eca3fb335698c863bf9f7634b0e1e1f2eeff77ae16fce3595aae037e4c422be06a0f975f2b4dca88a8c9d8ecf409ccd9adc5195

data/app/assets/stylesheets/uswds/components/_footer.scss

@@ -341,7 +341,7 @@ li.usa-footer-primary-content {
   }
 
   ul {
-    padding-bottom: 2.5rem;
+    padding-bottom: 2.4rem;
 
     @include media($medium-screen) {
       padding-bottom: 0;
@@ -355,8 +355,10 @@ li.usa-footer-primary-content {
       }
     }
 
-    li {
-      line-height: 2em;
+    li:not(.usa-footer-primary-link) {
+      line-height: $heading-line-height;
+      padding-bottom: 0.35em;
+      padding-top: 0.35em;
     }
 
     .usa-footer-primary-link {

data/app/assets/stylesheets/uswds/components/_search.scss

@@ -14,25 +14,6 @@ $usa-btn-big-width:     11.6rem;
   max-width: none;
   position: relative;
 
-  [type=search],
-  .usa-search-input {
-    @include padding(0 null);
-    -webkit-appearance: none;
-    border-bottom-right-radius: 0;
-    border-right: none;
-    border-top-right-radius: 0;
-    box-sizing: border-box;
-    float: left;
-    font-size: $small-font-size;
-    height: 3.3rem;
-    margin: 0;
-    width: calc(100% - #{$usa-btn-small-width});
-
-    @include media($small-screen) {
-      width: calc(100% - #{$usa-btn-medium-width});
-    }
-  }
-
   [type=submit],
   .usa-search-submit {
     @include search-icon;
@@ -49,14 +30,6 @@ $usa-btn-big-width:     11.6rem;
     }
   }
 
-  .usa-search-submit-text {
-    @include sr-only();
-
-    @include media($small-screen) {
-      @include not-sr-only();
-    }
-  }
-
   &.usa-search-big {
     @include media($small-screen) {
       $height: 4.4rem;
@@ -104,3 +77,35 @@ $usa-btn-big-width:     11.6rem;
     }
   }
 }
+
+// Extra specificity to override rules set in reset.css.
+input[type=search] { /* stylelint-disable-line selector-no-qualifying-type */
+  box-sizing: border-box;
+  -webkit-appearance: none;
+}
+
+[type=search],
+.usa-search-input {
+  @include padding(0 null);
+  border-bottom-right-radius: 0;
+  border-right: none;
+  border-top-right-radius: 0;
+  box-sizing: border-box;
+  float: left;
+  font-size: $small-font-size;
+  height: 3.3rem;
+  margin: 0;
+  width: calc(100% - #{$usa-btn-small-width});
+
+  @include media($small-screen) {
+    width: calc(100% - #{$usa-btn-medium-width});
+  }
+}
+
+.usa-search-submit-text {
+  @include sr-only;
+
+  @include media($small-screen) {
+    @include not-sr-only();
+  }
+}

data/app/assets/stylesheets/uswds/core/_utilities.scss

@@ -36,6 +36,12 @@
   text-transform: uppercase;
 }
 
+// Focus state mixin
+@mixin focus {
+  outline: $focus-outline;
+  outline-offset: $focus-spacing;
+}
+
 // Mobile-first media query helper
 @mixin media($bp) {
   @media screen and (min-width: #{$bp}) {
@@ -141,8 +147,8 @@
 
 @mixin display-icon($icon, $direction, $size, $margin, $hover) {
   &::#{$direction} {
-    background-image: url('#{$image-path}/#{$icon}.png');
-    background-image: url('#{$image-path}/#{$icon}.svg');
+    background-image: asset-url('#{$image-path}/#{$icon}.png');
+    background-image: asset-url('#{$image-path}/#{$icon}.svg');
     background-size: 100%;
     content: '';
     display: inline-block;
@@ -160,8 +166,8 @@
 
   @if $hover == 'hover' {
     &:hover::#{$direction} {
-      background-image: url('#{$image-path}/#{$icon}-hover.png');
-      background-image: url('#{$image-path}/#{$icon}-hover.svg');
+      background-image: asset-url('#{$image-path}/#{$icon}-hover.png');
+      background-image: asset-url('#{$image-path}/#{$icon}-hover.svg');
     }
   }
 }

data/app/assets/stylesheets/uswds/elements/_inputs.scss

@@ -88,13 +88,12 @@ select {
 
 .usa-input-required:after {
   color: $color-secondary-darkest;
-  content: ' (*Required)';
+  content: ' (*required)';
 }
 
 .usa-input-optional:after {
   color: $color-gray-medium;
-  content: ' - optional';
-  font-style: italic;
+  content: ' (optional)';
 }
 
 label {
@@ -112,11 +111,27 @@ select {
   -webkit-appearance: none;
   appearance: none;
   background-color: $color-white;
-  background-image: url('#{$image-path}/arrow-both.png');
-  background-image: url('#{$image-path}/arrow-both.svg');
+  background-image: asset-url('#{$image-path}/arrow-both.png');
+  background-image: asset-url('#{$image-path}/arrow-both.svg');
   background-position: right 1.3rem center;
   background-repeat: no-repeat;
-  background-size: 1.3rem;
+  background-size: 1rem;
+  padding-right: 3rem;
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  // Show default webkit style on select element when autofilled to show icon
+  &:-webkit-autofill {
+    appearance: menulist;
+  }
+
+  // Remove dotted outline from select element on focus in Firefox
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $color-black;
+  }
 }
 
 option:first-child {
@@ -202,8 +217,8 @@ legend {
 
 [type=checkbox]:checked + label::before,
 [type=checkbox]:checked:disabled + label::before {
-  background-image: url('#{$image-path}/correct8.png');
-  background-image: url('#{$image-path}/correct8.svg');
+  background-image: asset-url('#{$image-path}/correct8.png');
+  background-image: asset-url('#{$image-path}/correct8.svg');
   background-position: 50%;
   background-repeat: no-repeat;
 }

data/app/assets/stylesheets/uswds/elements/_typography.scss

@@ -22,6 +22,10 @@ a {
     color: $color-primary-darker;
   }
 
+  &:focus {
+    @include focus;
+  }
+
   &:visited {
     color: $color-visited;
   }
@@ -29,8 +33,8 @@ a {
 
 @mixin external-link($external-link, $external-link-hover) {
   &::after {
-    background: url('#{$image-path}/#{$external-link}.png') no-repeat 0 0;
-    background: url('#{$image-path}/#{$external-link}.svg') no-repeat 0 0;
+    background: asset-url('#{$image-path}/#{$external-link}.png') no-repeat 0 0;
+    background: asset-url('#{$image-path}/#{$external-link}.svg') no-repeat 0 0;
     background-size: 100%;
     content: '';
     display: inline-block;
@@ -41,8 +45,8 @@ a {
   }
 
   &:hover::after {
-    background-image: url('#{$image-path}/#{$external-link-hover}.png');
-    background-image: url('#{$image-path}/#{$external-link-hover}.svg');
+    background-image: asset-url('#{$image-path}/#{$external-link-hover}.png');
+    background-image: asset-url('#{$image-path}/#{$external-link-hover}.svg');
   }
 }
 
@@ -62,8 +66,7 @@ h1,
 h2,
 h3,
 h4,
-h5,
-h6 {
+h5 {
   clear: both;
   font-family: $font-serif;
   line-height: $heading-line-height;
@@ -71,6 +74,10 @@ h6 {
   margin-top: 1.5em;
 }
 
+h6 {
+  font-family: $font-sans;
+}
+
 h1 {
   @include h1();
 }
@@ -107,7 +114,7 @@ dfn {
 // Custom typography
 
 .usa-content {
-  p:not(.usa-font-lead),
+  p,
   ul:not(.usa-accordion):not(.usa-accordion-bordered),
   ol:not(.usa-accordion):not(.usa-accordion-bordered) {
     max-width: $text-max-width;

data/app/assets/stylesheets/uswds/uswds.scss

@@ -1,4 +1,4 @@
-/*! uswds 1.4.1 */
+/*! uswds 1.4.2 */
 
 // Relative font and image file paths
 $font-path:  'uswds';
@@ -15,9 +15,9 @@ $asset-pipeline: true;
 // Core -------------- //
 @import 'uswds/core/variables';
 @import 'uswds/core/fonts';
-@import 'uswds/core/base';
 @import 'uswds/core/grid';
 @import 'uswds/core/utilities';
+@import 'uswds/core/base';
 
 // Elements -------------- //
 // Styles basic HTML elements

data/lib/uswds/rails/version.rb

@@ -1,5 +1,5 @@
 module Uswds
   module Rails
-    VERSION = '1.4.1'.freeze
+    VERSION = '1.4.2'.freeze
   end
 end

data/vendor/assets/images/uswds/arrow-both.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.93 13.66"><title>Sort</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M.62,5.59H9.31a.62.62,0,0,0,.44-1.06L5.4.18a.61.61,0,0,0-.87,0L.18,4.53a.61.61,0,0,0,0,.87A.6.6,0,0,0,.62,5.59Z" fill="#323a44" fill-rule="evenodd"/><path d="M9.31,8.07H.62a.6.6,0,0,0-.44.18.61.61,0,0,0,0,.87l4.35,4.35a.61.61,0,0,0,.87,0L9.75,9.13a.62.62,0,0,0-.44-1.06Z" fill="#323a44" fill-rule="evenodd"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 14"><g fill="#323a45" fill-rule="evenodd"><path d="M.62639628 5.99993896H9.3727389c.25339173.00130856.482416-.15074264.57956202-.38477624.09714598-.2340336.04312294-.50357616-.13670922-.6820964L5.4401815.1835435C5.32475606.06613116 5.1670083 0 5.00236114 0c-.16464716 0-.3223949.06613117-.43782037.1835435L.1835435 4.93306632C.06613116 5.0484918 0 5.20623953 0 5.3708867s.06613117.32239492.1835435.43782038c.1146444.1224934.27508006.19177244.44285278.19123188zM9.3727389 7.9999685H.6263963c-.1662653-.00316183-.32647608.06237894-.4428528.18116705C.0661312 8.296561 0 8.45430875 0 8.61895592s.06613117.32239492.1835435.43782037l4.38099726 4.7596802C4.67996622 13.9338688 4.83771396 14 5.00236113 14s.32239492-.0661312.43782038-.1835435l4.3754102-4.74961537c.17983216-.17852023.2338552-.44806278.13670922-.68209638-.09714602-.2340336-.3261703-.3860848-.579562-.38477625z"/></g></svg>

data/vendor/assets/stylesheets/uswds/components/_footer.scss

@@ -341,7 +341,7 @@ li.usa-footer-primary-content {
   }
 
   ul {
-    padding-bottom: 2.5rem;
+    padding-bottom: 2.4rem;
 
     @include media($medium-screen) {
       padding-bottom: 0;
@@ -355,8 +355,10 @@ li.usa-footer-primary-content {
       }
     }
 
-    li {
-      line-height: 2em;
+    li:not(.usa-footer-primary-link) {
+      line-height: $heading-line-height;
+      padding-bottom: 0.35em;
+      padding-top: 0.35em;
     }
 
     .usa-footer-primary-link {

data/vendor/assets/stylesheets/uswds/components/_search.scss

@@ -14,25 +14,6 @@ $usa-btn-big-width:     11.6rem;
   max-width: none;
   position: relative;
 
-  [type=search],
-  .usa-search-input {
-    @include padding(0 null);
-    -webkit-appearance: none;
-    border-bottom-right-radius: 0;
-    border-right: none;
-    border-top-right-radius: 0;
-    box-sizing: border-box;
-    float: left;
-    font-size: $small-font-size;
-    height: 3.3rem;
-    margin: 0;
-    width: calc(100% - #{$usa-btn-small-width});
-
-    @include media($small-screen) {
-      width: calc(100% - #{$usa-btn-medium-width});
-    }
-  }
-
   [type=submit],
   .usa-search-submit {
     @include search-icon;
@@ -49,14 +30,6 @@ $usa-btn-big-width:     11.6rem;
     }
   }
 
-  .usa-search-submit-text {
-    @include sr-only();
-
-    @include media($small-screen) {
-      @include not-sr-only();
-    }
-  }
-
   &.usa-search-big {
     @include media($small-screen) {
       $height: 4.4rem;
@@ -104,3 +77,35 @@ $usa-btn-big-width:     11.6rem;
     }
   }
 }
+
+// Extra specificity to override rules set in reset.css.
+input[type=search] { /* stylelint-disable-line selector-no-qualifying-type */
+  box-sizing: border-box;
+  -webkit-appearance: none;
+}
+
+[type=search],
+.usa-search-input {
+  @include padding(0 null);
+  border-bottom-right-radius: 0;
+  border-right: none;
+  border-top-right-radius: 0;
+  box-sizing: border-box;
+  float: left;
+  font-size: $small-font-size;
+  height: 3.3rem;
+  margin: 0;
+  width: calc(100% - #{$usa-btn-small-width});
+
+  @include media($small-screen) {
+    width: calc(100% - #{$usa-btn-medium-width});
+  }
+}
+
+.usa-search-submit-text {
+  @include sr-only;
+
+  @include media($small-screen) {
+    @include not-sr-only();
+  }
+}

data/vendor/assets/stylesheets/uswds/core/_base.scss

@@ -31,6 +31,5 @@ body {
 
 *:focus,
 .usa-focus {
-  outline: $focus-outline;
-  outline-offset: $focus-spacing;
+  @include focus;
 }

data/vendor/assets/stylesheets/uswds/core/_utilities.scss

@@ -36,6 +36,12 @@
   text-transform: uppercase;
 }
 
+// Focus state mixin
+@mixin focus {
+  outline: $focus-outline;
+  outline-offset: $focus-spacing;
+}
+
 // Mobile-first media query helper
 @mixin media($bp) {
   @media screen and (min-width: #{$bp}) {

data/vendor/assets/stylesheets/uswds/core/_variables.scss

@@ -128,7 +128,7 @@ $image-path:  '../img' !default;
 $asset-pipeline:      false !default;
 
 // Magic Numbers
-$text-max-width:          53rem !default;
+$text-max-width:          66ch !default; // 66 characters per line
 $lead-max-width:          77rem !default;
 $site-max-width:          1040px !default;
 $site-margins:            3rem !default;

data/vendor/assets/stylesheets/uswds/elements/_inputs.scss

@@ -88,13 +88,12 @@ select {
 
 .usa-input-required:after {
   color: $color-secondary-darkest;
-  content: ' (*Required)';
+  content: ' (*required)';
 }
 
 .usa-input-optional:after {
   color: $color-gray-medium;
-  content: ' - optional';
-  font-style: italic;
+  content: ' (optional)';
 }
 
 label {
@@ -116,7 +115,23 @@ select {
   background-image: url('#{$image-path}/arrow-both.svg');
   background-position: right 1.3rem center;
   background-repeat: no-repeat;
-  background-size: 1.3rem;
+  background-size: 1rem;
+  padding-right: 3rem;
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  // Show default webkit style on select element when autofilled to show icon
+  &:-webkit-autofill {
+    appearance: menulist;
+  }
+
+  // Remove dotted outline from select element on focus in Firefox
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $color-black;
+  }
 }
 
 option:first-child {

data/vendor/assets/stylesheets/uswds/elements/_table.scss

@@ -1,40 +1,35 @@
 table {
   border-spacing: 0;
   margin: 2em 0;
-  min-width: 100%;
-
-  thead {
-    th,
-    td {
-      background-color: $color-gray-lightest;
-    }
-  }
+}
 
+thead {
   th {
-    text-align: left;
-  }
-
-  tbody {
-    th {
-      font-weight: $font-normal;
-    }
+    font-weight: $font-bold;
   }
 
   th,
   td {
-    background-color: $color-white;
-    border: 1px solid $color-gray;
-    padding: 1.5rem;
+    background-color: $color-gray-lightest;
   }
 }
 
+th {
+  text-align: left;
+}
+
+th,
+td {
+  background-color: $color-white;
+  border: 1px solid $color-gray;
+  font-weight: $font-normal;
+  padding: 1rem 1.5rem;
+}
+
 .usa-table-borderless {
   thead {
-    tr {
-      background-color: transparent;
-    }
-
     th {
+      background-color: transparent;
       border-top: 0;
     }
   }
@@ -44,4 +39,17 @@ table {
     border-left: 0;
     border-right: 0;
   }
+
+  th {
+    &:first-child {
+      padding-left: 0;
+    }
+  }
+}
+
+caption {
+  @include h5;
+  font-family: $font-serif;
+  margin-bottom: 1.2rem;
+  text-align: left;
 }

data/vendor/assets/stylesheets/uswds/elements/_typography.scss

@@ -22,6 +22,10 @@ a {
     color: $color-primary-darker;
   }
 
+  &:focus {
+    @include focus;
+  }
+
   &:visited {
     color: $color-visited;
   }
@@ -62,8 +66,7 @@ h1,
 h2,
 h3,
 h4,
-h5,
-h6 {
+h5 {
   clear: both;
   font-family: $font-serif;
   line-height: $heading-line-height;
@@ -71,6 +74,10 @@ h6 {
   margin-top: 1.5em;
 }
 
+h6 {
+  font-family: $font-sans;
+}
+
 h1 {
   @include h1();
 }
@@ -107,7 +114,7 @@ dfn {
 // Custom typography
 
 .usa-content {
-  p:not(.usa-font-lead),
+  p,
   ul:not(.usa-accordion):not(.usa-accordion-bordered),
   ol:not(.usa-accordion):not(.usa-accordion-bordered) {
     max-width: $text-max-width;

data/vendor/assets/stylesheets/uswds/uswds.scss

@@ -8,9 +8,9 @@
 // Core -------------- //
 @import 'core/variables';
 @import 'core/fonts';
-@import 'core/base';
 @import 'core/grid';
 @import 'core/utilities';
+@import 'core/base';
 
 // Elements -------------- //
 // Styles basic HTML elements

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: uswds-rails
 version: !ruby/object:Gem::Version
-  version: 1.4.1
+  version: 1.4.2
 platform: ruby
 authors:
 - Jason Garber