qpp-style 9.18.1 → 9.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qpp-style",
-  "version": "9.18.1",
+  "version": "9.18.2",
   "description": "Shared style guide across the QPP program.",
   "main": "dist/index.js",
   "homepage": "https://cmsgov.github.io/qpp-style",
@@ -26,23 +26,21 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.18.13",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@babel/register": "^7.18.9",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-backgrounds": "^6.5.9",
-    "@storybook/addon-docs": "^6.5.9",
+    "@storybook/addon-a11y": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-backgrounds": "^6.5.10",
+    "@storybook/addon-docs": "^6.5.10",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-links": "^6.5.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storysource": "^6.5.9",
-    "@storybook/addon-viewport": "^6.5.9",
-    "@storybook/addons": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
-    "@storybook/react": "^6.5.9",
+    "@storybook/addon-storysource": "^6.5.10",
+    "@storybook/addon-viewport": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/react": "^6.5.10",
     "@testing-library/react": "^12.1.2",
     "autoprefixer": "^10.4.8",
     "babel-eslint": "^10.1.0",
@@ -74,7 +72,7 @@
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
     "rimraf": "^3.0.2",
-    "sass": "^1.53.0",
+    "sass": "^1.54.6",
     "sass-loader": "^13.0.2",
     "sinon": "^12.0.1",
     "style-loader": "^3.3.1",
@@ -112,7 +110,7 @@
     "d3-selection": "^1.4.2",
     "d3-shape": "^1.3.7",
     "jwt-decode": "^3.1.2",
-    "preact": "^10.6.5",
+    "preact": "^10.10.6",
     "prop-types": "^15.8.1",
     "react-modal": "^3.14.4",
     "retry": "^0.13.1",

package/styles/qppds/base/_typography.scss

@@ -45,6 +45,18 @@
   @include input-label;
 }
 
+.qpp-legend {
+  @include input-label;
+  margin-top: $spacing-8;
+  // override legacy globals for legend
+  margin-bottom: 0;
+  border: 0;
+  border-bottom: 0;
+  padding: 0;
+  line-height: inherit;
+  width: auto;
+}
+
 @for $i from 1 through length($headings) {
   $heading: nth($headings, $i);
 

package/styles/qppds/components/_checkbox.scss

@@ -0,0 +1,199 @@
+@use 'sass:math';
+@import '../settings/index';
+
+$forced-color-active: active;
+
+/* stylelint-disable selector-max-specificity, max-nesting-depth, selector-max-compound-selectors, value-list-comma-newline-after */
+.qpp-c-checkbox,
+.qppds .qpp-c-checkbox,
+.qpp-prose .qpp-c-checkbox {
+  background: $white;
+
+  .qpp-c-checkbox__label {
+    font-size: $font-size-16;
+    line-height: $line-height-lg;
+    &::before,
+    &::after {
+      width: $spacing-20;
+      height: $spacing-20;
+    }
+  }
+
+  &--small {
+    .qpp-c-checkbox__label {
+      font-size: $font-size-14;
+      line-height: $line-height-md;
+      &::before,
+      &::after {
+        width: $spacing-16;
+        height: $spacing-16;
+      }
+    }
+  }
+
+  &--indeterminate {
+    .qpp-c-checkbox__input {
+      &:checked + [class*='__label']::before,
+      &:checked:disabled + [class*='__label']::before,
+      &:checked[aria-disabled='true'] + [class*='__label']::before {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' role='img' stroke='transparent' fill='white' viewBox='1.5 1.5 21 21'%3E%3Cpath fill-rule='evenodd' d='M4 11h16v2H4z'/%3E%3C/svg%3E"),
+          linear-gradient(transparent, transparent);
+      }
+    }
+  }
+}
+
+.qpp-c-checkbox__input {
+  // The actual input element is only visible to screen readers, because
+  // all visual styling is done via the label.
+  @include visually-hidden;
+  + [class*='__label'] {
+    &:hover {
+      &::before {
+        background-color: $gray-04;
+      }
+    }
+
+    &:active {
+      &::after {
+        box-shadow: 0 0 0 0.5rem $blue-10;
+        transition: box-shadow 0.08s ease;
+      }
+    }
+  }
+
+  &:focus {
+    outline: none;
+
+    + [class*='__label']::before {
+      @include focus-ring;
+    }
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    + [class*='__label'] {
+      color: rgba(27, 27, 27, 0.3); // TODO: DS styles
+
+      &:active {
+        &::after {
+          box-shadow: 0 0 0 0 transparent;
+        }
+      }
+    }
+    + [class*='__label'],
+    + [class*='__label']::before {
+      cursor: not-allowed;
+    }
+    + [class*='__label']::before {
+      background-color: $gray-10;
+      border: rem(1px) solid $gray-10;
+    }
+  }
+
+  // Checkboxes with tap-friendly targets
+  &--tile {
+    // TODO: designs and styles for "tile" mode to support friendler
+    // mobile tap targets for checkboxes and radios (USWDS feature).
+    + [class*='__label'] {
+      background-color: $white;
+      border: 2px solid rgba(27, 27, 27, 0.3);
+      color: #1b1b1b;
+      border-radius: 0.25rem;
+      margin-top: $spacing-8;
+      padding: $spacing-12 $spacing-16 $spacing-12 $spacing-40;
+
+      &::before {
+        left: $spacing-8;
+      }
+    }
+  }
+
+  &:checked + [class*='__label']::before,
+  &:checked:disabled + [class*='__label']::before,
+  &:checked[aria-disabled='true'] + [class*='__label']::before {
+    background-position: center center;
+    background-size: contain;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' role='img' stroke='transparent' fill='white' viewBox='1.5 1.5 21 21'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"),
+      linear-gradient(transparent, transparent);
+    background-repeat: no-repeat;
+    @media print {
+      background-image: none;
+      background-color: $white;
+      content: '\2714';
+      text-align: center;
+    }
+
+    @media (forced-colors: $forced-color-active) {
+      background-color: ButtonText;
+
+      &--tile {
+        background-color: ButtonText;
+      }
+    }
+  }
+
+  &:checked:not(:disabled, [aria-disabled='true']) {
+    + [class*='__label']::before {
+      background-color: $blue-60;
+      border: rem(1px) solid $blue-60;
+    }
+  }
+
+  &:checked:not(:disabled, [aria-disabled='true']) + [class*='__label'] {
+    &:hover {
+      &::before {
+        background-color: $blue-70;
+      }
+    }
+  }
+}
+
+.qpp-c-checkbox__label,
+.qppds .qpp-c-checkbox__label,
+.qpp-prose .qpp-c-checkbox__label {
+  cursor: pointer;
+  display: inherit;
+  font-weight: $font-regular;
+  margin-top: $spacing-12;
+  padding-left: $spacing-32;
+  position: relative;
+
+  &::before {
+    content: ' ';
+    background: $white;
+    border: 1px solid $gray-80;
+    border-radius: 3px;
+    box-sizing: border-box;
+    display: block;
+    top: 0;
+    left: 0;
+    margin-left: 0;
+    margin-top: 0;
+    position: absolute;
+    z-index: 1;
+  }
+
+  &::after {
+    content: ' ';
+    background: none;
+    border-radius: 1rem;
+    box-sizing: border-box;
+    display: block;
+    top: 0;
+    left: 0;
+    margin-left: 0;
+    margin-top: 0;
+    position: absolute;
+    z-index: 0;
+    box-shadow: 0 0 0 0 transparent;
+    transition: box-shadow 0.5s ease 0.04s;
+  }
+}
+
+.qpp-c-checkbox__label-description {
+  display: block;
+  //font-size: $font-size-base;
+  margin-top: $spacing-16;
+}
+/* stylelint-enable selector-max-specificity, max-nesting-depth, selector-max-compound-selectors, value-list-comma-newline-after */

package/styles/qppds/components/_radio-button.scss

@@ -0,0 +1,184 @@
+@use 'sass:math';
+@import '../settings/index';
+
+/* stylelint-disable selector-max-specificity, max-nesting-depth, selector-max-compound-selectors, value-list-comma-newline-after */
+.qpp-c-radio,
+.qppds .qpp-c-radio,
+.qpp-prose .qpp-c-radio {
+  background: $white;
+
+  &__label {
+    font-size: $font-size-16;
+    line-height: $line-height-lg;
+    &::before,
+    &::after {
+      width: $spacing-20;
+      height: $spacing-20;
+    }
+  }
+
+  &--small {
+    .qpp-c-radio__label {
+      font-size: $font-size-14;
+      line-height: $line-height-md;
+      &::before,
+      &::after {
+        width: $spacing-16;
+        height: $spacing-16;
+      }
+    }
+  }
+
+  &__input {
+    // The actual input element is only visible to screen readers, because
+    // all visual styling is done via the label.
+    @include visually-hidden;
+    background-color: $white;
+
+    &:focus {
+      outline: none;
+
+      + [class*='__label']::before {
+        @include focus-ring;
+        border: 0;
+        border-radius: 99rem;
+        box-shadow: 0 0 0 2px $blue-70, 0 0 0 4px $blue-10;
+        background-color: $white;
+      }
+
+      &:checked {
+        + [class*='__label']::before {
+          box-shadow: 0 0 0 2px $blue-70, inset 0 0 0 3px $white,
+            0 0 0 5px $blue-10;
+        }
+      }
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      + [class*='__label'] {
+        cursor: not-allowed;
+        color: rgba(27, 27, 27, 0.3);
+        &::before {
+          box-shadow: 0 0 0 2px $gray-20, inset 0 0 0 3px $white;
+        }
+      }
+    }
+
+    &:hover:not(:disabled) {
+      + [class*='__label']::before {
+        box-shadow: 0 0 0 2px $blue-80, inset 0 0 0 3px $white;
+      }
+
+      &:checked {
+        + [class*='__label']::before {
+          box-shadow: 0 0 0 2px $blue-80, inset 0 0 0 3px $white;
+          background-color: $blue-80;
+        }
+
+        &:focus {
+          + [class*='__label']::before {
+            box-shadow: 0 0 0 2px $blue-80, inset 0 0 0 3px $white,
+              0 0 0 5px $blue-10;
+          }
+        }
+      }
+
+      &:not(:checked) {
+        + [class*='__label']::before {
+          box-shadow: 0 0 0 2px $gray-80;
+          background-color: $gray-04;
+        }
+      }
+    }
+
+    &:active:not(:disabled, :checked) {
+      + [class*='__label'] {
+        &::after {
+          box-shadow: 0 0 0 0.5rem $blue-10;
+          transition: box-shadow 0.08s ease;
+        }
+      }
+    }
+
+    // Radios with tap-friendly targets
+    &--tile {
+      // TODO: designs and styles for "tile" mode to support friendler
+      // mobile tap targets for checkboxes and radios (USWDS feature).
+      + [class*='__label'] {
+        background-color: $white;
+        border: 2px solid rgba(27, 27, 27, 0.3);
+        color: #1b1b1b;
+        border-radius: 0.25rem;
+        margin-top: $spacing-8;
+        padding: $spacing-12 $spacing-16 $spacing-12 $spacing-40;
+
+        &::before {
+          left: $spacing-8;
+        }
+      }
+    }
+
+    &:checked + [class*='__label']::before {
+      background-color: $blue-60;
+      box-shadow: 0 0 0 2px $blue-60, inset 0 0 0 3px $white;
+      @media print {
+        box-shadow: 0 0 0 2px $blue-60, inset 0 0 0 3px $white;
+      }
+    }
+
+    &:checked:disabled + [class*='__label']::before,
+    &:checked[aria-disabled='true'] + [class*='__label']::before {
+      background-color: $gray-20;
+      box-shadow: 0 0 0 2px $gray-20, inset 0 0 0 3px $white;
+    }
+  }
+
+  &__label,
+  .qppds .qpp-c-radio__label,
+  .qpp-prose .qpp-c-radio_label {
+    cursor: pointer;
+    display: inherit;
+    font-weight: $font-regular;
+    margin-top: $spacing-12;
+    padding-left: $spacing-32;
+    position: relative;
+
+    &::before {
+      content: ' ';
+      background: $white;
+      display: block;
+      // top: 0;
+      left: 0;
+      margin-left: 0;
+      margin-top: 0;
+      position: absolute;
+      z-index: 1;
+      border-radius: 99rem;
+      box-shadow: 0 0 0 2px $gray-80;
+    }
+
+    &::after {
+      content: ' ';
+      background: none;
+      border-radius: 1rem;
+      box-sizing: border-box;
+      display: block;
+      top: 0;
+      left: 0;
+      margin-left: 0;
+      margin-top: 0;
+      position: absolute;
+      z-index: 0;
+      box-shadow: 0 0 0 0 transparent;
+      transition: box-shadow 0.5s ease 0.04s;
+    }
+  }
+
+  &__label-description {
+    display: block;
+    //font-size: $font-size-base;
+    margin-top: $spacing-16;
+  }
+}
+/* stylelint-enable selector-max-specificity, max-nesting-depth, selector-max-compound-selectors, value-list-comma-newline-after */

package/styles/qppds/components/index.scss

@@ -18,3 +18,5 @@
 @import './circular-loader';
 @import './gov-banner';
 @import './step-indicator';
+@import './checkbox';
+@import './radio-button';

package/styles/qppds/settings/variables/_layout.scss

@@ -7,18 +7,20 @@ $spacers: (
   '8': rem(8px),
   '12': rem(12px),
   '16': rem(16px),
+  '20': rem(20px),
   '24': rem(24px),
   '32': rem(32px),
   '40': rem(40px),
   '48': rem(48px),
-  '96': rem(96px)
+  '96': rem(96px),
 );
 
 $spacing-0: map-get($spacers, '0');
-$spacing-4: map-get($spacers, '4');  // deprecated
+$spacing-4: map-get($spacers, '4'); // deprecated
 $spacing-8: map-get($spacers, '8');
 $spacing-12: map-get($spacers, '12'); // deprecated
 $spacing-16: map-get($spacers, '16');
+$spacing-20: map-get($spacers, '20');
 $spacing-24: map-get($spacers, '24');
 $spacing-32: map-get($spacers, '32');
 $spacing-40: map-get($spacers, '40');
@@ -40,7 +42,7 @@ $breakpoints: (
   sm: $width-sm,
   md: $width-md,
   lg: $width-lg,
-  xl: $width-xl
+  xl: $width-xl,
 );
 
 // JS Variable Exports

package/styles/qppds/utilities/_list-style.scss

@@ -0,0 +1,18 @@
+// stylelint-disable declaration-no-important
+@import '../settings/index.scss';
+
+.qpp-u-list-style--none {
+  list-style: none !important;
+}
+
+.qpp-u-list-style--decimal {
+  list-style: decimal !important;
+}
+
+.qpp-u-list-style--upper-alpha {
+  list-style: upper-alpha !important;
+}
+
+.qpp-u-list-style--circle {
+  list-style: circle !important;
+}

package/styles/qppds/utilities/index.scss

@@ -14,3 +14,4 @@
 @import './text-transform';
 @import './height';
 @import './vertical-align';
+@import './list-style';

package/coverage/lcov-report/components/Accordion/index.html

@@ -1,116 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for components/Accordion</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> components/Accordion</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">70% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>14/20</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">40% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>8/20</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">50% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>3/6</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">70% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>14/20</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line medium'></div>
-    <div class="pad1">
-<table class="coverage-summary">
-<thead>
-<tr>
-   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
-   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
-   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
-   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
-   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
-   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
-   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
-</tr>
-</thead>
-<tbody><tr>
-	<td class="file medium" data-value="index.jsx"><a href="index.jsx.html">index.jsx</a></td>
-	<td data-value="70" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 70%"></div><div class="cover-empty" style="width: 30%"></div></div>
-	</td>
-	<td data-value="70" class="pct medium">70%</td>
-	<td data-value="20" class="abs medium">14/20</td>
-	<td data-value="40" class="pct low">40%</td>
-	<td data-value="20" class="abs low">8/20</td>
-	<td data-value="50" class="pct medium">50%</td>
-	<td data-value="6" class="abs medium">3/6</td>
-	<td data-value="70" class="pct medium">70%</td>
-	<td data-value="20" class="abs medium">14/20</td>
-	</tr>
-
-</tbody>
-</table>
-</div>
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Apr 29 2022 13:58:50 GMT-0400 (Eastern Daylight Time)
-            </div>
-        <script src="../../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
-    </body>
-</html>
-