qpp-style 9.8.1 → 9.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qpp-style",
-  "version": "9.8.1",
+  "version": "9.8.4",
   "description": "Shared style guide across the QPP program.",
   "main": "dist/index.js",
   "homepage": "https://cmsgov.github.io/qpp-style",
@@ -29,17 +29,17 @@
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
     "@babel/register": "^7.15.3",
-    "@storybook/addon-a11y": "^6.3.10",
-    "@storybook/addon-actions": "^6.3.10",
-    "@storybook/addon-backgrounds": "^6.3.10",
-    "@storybook/addon-docs": "^6.3.10",
+    "@storybook/addon-a11y": "^6.3.12",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-backgrounds": "^6.3.12",
+    "@storybook/addon-docs": "^6.3.12",
     "@storybook/addon-knobs": "^6.3.1",
-    "@storybook/addon-links": "^6.3.10",
+    "@storybook/addon-links": "^6.3.12",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storysource": "^6.3.10",
-    "@storybook/addon-viewport": "^6.3.10",
-    "@storybook/addons": "^6.3.10",
-    "@storybook/react": "^6.3.10",
+    "@storybook/addon-storysource": "^6.3.12",
+    "@storybook/addon-viewport": "^6.3.12",
+    "@storybook/addons": "^6.3.12",
+    "@storybook/react": "^6.3.12",
     "@testing-library/react": "^12.1.2",
     "autoprefixer": "^10.3.7",
     "babel-eslint": "^10.1.0",
@@ -76,7 +76,7 @@
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
     "rimraf": "^3.0.2",
-    "sass": "^1.42.1",
+    "sass": "^1.43.2",
     "sass-loader": "^10.2.0",
     "sinon": "^11.1.2",
     "style-loader": "^1.3.0",
@@ -104,7 +104,7 @@
     "url": "https://github.com/CMSgov/qpp-style/issues"
   },
   "dependencies": {
-    "@cmsgov/design-system": "^2.8.0",
+    "@cmsgov/design-system": "^2.9.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@reach/portal": "^0.16.0",
@@ -114,7 +114,7 @@
     "d3-selection": "^1.4.2",
     "d3-shape": "^1.3.7",
     "jwt-decode": "^3.1.2",
-    "preact": "^10.5.14",
+    "preact": "^10.5.15",
     "prop-types": "^15.7.2",
     "react-modal": "^3.14.3",
     "retry": "^0.13.1",

package/styles/qppds/base/_typography.scss

@@ -1,65 +1,73 @@
 @import '../settings/index';
 
-// Override legacy qpp-style label styles
-// TODO: reevaluate this when we get to forms and fieldsets
-label {
-  color: $gray-80;
-  font-size: $font-size-14;
-  font-weight: $font-medium;
-  text-transform: none;
-  display: block;
-}
-
-@for $i from 1 through length($headings) {
-  $heading: nth($headings, $i);
+// scope all base (global) styles nested under .qppds selector
+// this can help avoid conflicts between new qppds styles and legacy styles
+.qppds,
+.qpp-prose {
+  // *:not() { // TODO: ignore component classes
+  // Override legacy qpp-style label styles
+  // TODO: reevaluate this when we get to forms and fieldsets
+  label {
+    @include input-label;
+  }
 
-  h#{$i},
-  .h#{$i} {
-    font-family: $font-rubik;
-    font-weight: nth($heading, 5);
-    font-size: nth($heading, 1);
-    line-height: nth($heading, 3);
+  @for $i from 1 through length($headings) {
+    $heading: nth($headings, $i);
 
-    @include media-breakpoint(xxs) {
-      font-size: nth($heading, 2);
-      line-height: nth($heading, 4);
-    }
-    @include media-breakpoint(xs) {
-      font-size: nth($heading, 1);
-      line-height: nth($heading, 3);
+    h#{$i},
+    .h#{$i} {
+      @include heading($heading);
     }
   }
-}
 
-p,
-.p1 {
-  font-family: $font-rubik;
-  font-size: $font-size-18;
-  line-height: $line-height-base;
+  p,
+  .p1 {
+    @include p1;
+  }
+
+  .p2 {
+    @include p2;
+  }
 
-  @include media-breakpoint(xxs) {
-    font-size: $font-size-16;
+  .l1 {
+    @include l1;
   }
-  @include media-breakpoint(xs) {
-    font-size: $font-size-18;
+
+  .l2 {
+    @include l2;
   }
+  //}
 }
 
-.p2 {
-  font-size: $font-size-14;
+// prefixed, single-use global classes for typography styles that can
+// be used outside a .qppds wrapper.
+.qpp-label {
+  @include input-label;
 }
 
-.l1 {
-  font-family: $font-rubik;
-  font-size: $font-size-18;
-  line-height: $line-height-md;
+@for $i from 1 through length($headings) {
+  $heading: nth($headings, $i);
+
+  .qpp-h#{$i} {
+    @include heading($heading);
+  }
 }
 
-.l2 {
-  font-family: $font-rubik;
-  font-size: $font-size-14;
-  line-height: $line-height-md;
-  text-transform: uppercase;
+.qpp-p,
+.qpp-p1 {
+  @include p1;
+}
+
+.qpp-p2 {
+  @include p2;
+}
+
+.qpp-l1 {
+  @include l1;
+}
+
+.qpp-l2 {
+  @include l2;
 }
 
 .qpp-error-message {

package/styles/qppds/base/index.scss

@@ -2,12 +2,7 @@
 // comment out until we're ready to replace old font-face definitions
 // @import './fonts';
 
-// scope all base (global) styles nested under .qppds selector
-// this can help avoid conflicts between new qppds styles and legacy styles
-.qppds {
-  @import './typography';
-}
-
+@import './typography';
 @import './backgrounds';
 @import './layout';
 @import './icon';

package/styles/qppds/components/_modal.scss

@@ -21,6 +21,10 @@
     }
   }
 
+  &__side-panel {
+    display: flex;
+  }
+
   .qpp-c-modal__header {
     padding: $spacing-32 $spacing-32 0;
     display: flex;
@@ -57,6 +61,24 @@
     max-height: 60vh;
     overflow-y: auto;
     padding: 0 2rem;
+
+    &::-webkit-scrollbar {
+      -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
+    }
+
+    &::-webkit-scrollbar:vertical {
+      width: 11px;
+    }
+
+    &::-webkit-scrollbar:horizontal {
+      width: 11px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 8px;
+      border: 2px solid $white;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
   }
 
   .qpp-c-modal__footer {

package/styles/qppds/settings/mixins/_index.scss

@@ -5,3 +5,4 @@
 @import './focus';
 @import './table';
 @import './borders';
+@import './type';

package/styles/qppds/settings/mixins/_type.scss

@@ -0,0 +1,65 @@
+@import '../variables/index';
+
+@mixin input-label {
+  color: $gray-80;
+  font-size: $font-size-14;
+  font-weight: $font-medium;
+  text-transform: none;
+  display: block;
+}
+
+// uses heading objects defined in src/variables/_type
+@mixin heading($heading) {
+  font-family: $font-rubik;
+  font-weight: nth($heading, 5);
+  font-size: nth($heading, 1);
+  line-height: nth($heading, 3);
+
+  @include media-breakpoint(xxs) {
+    font-size: nth($heading, 2);
+    line-height: nth($heading, 4);
+  }
+  @include media-breakpoint(xs) {
+    font-size: nth($heading, 1);
+    line-height: nth($heading, 3);
+  }
+}
+
+@mixin p1 {
+  font-family: $font-rubik;
+  font-size: $font-size-18;
+  line-height: $line-height-base;
+
+  @include media-breakpoint(xxs) {
+    font-size: $font-size-16;
+  }
+  @include media-breakpoint(xs) {
+    font-size: $font-size-18;
+  }
+}
+
+@mixin p2 {
+  font-family: $font-rubik;
+  font-size: $font-size-14;
+  line-height: $line-height-base;
+
+  @include media-breakpoint(xxs) {
+    font-size: $font-size-14;
+  }
+  @include media-breakpoint(xs) {
+    font-size: $font-size-14;
+  }
+}
+
+@mixin l1 {
+  font-family: $font-rubik;
+  font-size: $font-size-18;
+  line-height: $line-height-md;
+}
+
+@mixin l2 {
+  font-family: $font-rubik;
+  font-size: $font-size-14;
+  line-height: $line-height-md;
+  text-transform: uppercase;
+}

package/styles/qppds/utilities/_height.scss

@@ -0,0 +1,38 @@
+$static-height-vals: (
+  10: 10px,
+  12: 12px,
+  15: 15px,
+  16: 16px,
+  20: 20px,
+  24: 24px,
+  30: 30px,
+  32: 32px,
+  40: 40px,
+  50: 50px
+);
+
+@each $name in map-keys($static-height-vals) {
+  $value: map-get($static-height-vals, $name);
+
+  .qpp-u-height--#{$name}px {
+    height: #{$value} !important;
+  }
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $viewport: map-get($breakpoints, $breakpoint);
+
+  @media (min-height: $viewport) {
+    @each $name in map-keys($static-height-vals) {
+      $value: map-get($static-height-vals, $name);
+
+      .qpp-u-#{$breakpoint}-height--#{$name}px {
+        height: #{$value} !important;
+      }
+    }
+  }
+}
+
+.qpp-u-height--auto {
+    height: auto !important;
+}

package/styles/qppds/utilities/_width.scss

@@ -42,3 +42,38 @@ $width-values: (
     }
   }
 }
+
+$static-width-vals: (
+  10: 10px,
+  12: 12px,
+  15: 15px,
+  16: 16px,
+  20: 20px,
+  24: 24px,
+  30: 30px,
+  32: 32px,
+  40: 40px,
+  50: 50px
+);
+
+@each $name in map-keys($static-width-vals) {
+  $value: map-get($static-width-vals, $name);
+
+  .qpp-u-width--#{$name}px {
+    width: #{$value} !important;
+  }
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $viewport: map-get($breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    @each $name in map-keys($static-width-vals) {
+      $value: map-get($static-width-vals, $name);
+
+      .qpp-u-#{$breakpoint}-width--#{$name}px {
+        width: #{$value} !important;
+      }
+    }
+  }
+}