@cdc/core 1.1.4 → 4.22.11

package/styles/v2/layout/_data-table.scss

@@ -1,24 +1,28 @@
-.collapsed + .table-container {
+.cove-data-table {
+  position: relative;
+}
+
+.collapsed + .cove-data-table__table-wrapper {
   border-bottom: none;
 }
 
-.table-container {
-  overflow-x: auto;
+.cove-data-table__table-wrapper {
   border-right: 1px solid $lightGray;
   border-left: 1px solid $lightGray;
   border-bottom: 1px solid $lightGray;
+  overflow-x: auto;
 }
 
-div.data-table-heading {
-  background: rgba(0, 0, 0, 0.05);
-  padding: .5em .7em;
+.cove-data-table__table-heading {
+  padding: 0.5em 0.7em;
+  //TODO find fix
+  //background-image: url(~@cdc/core/assets/icon-minus.svg);
+  background-size: 15px 15px; // Need to define both for IE11
+  background-position: right 0.7em center;
+  background-repeat: no-repeat;
   border: $lightGray 1px solid;
   border-bottom: 0;
   cursor: pointer;
-  background-image: url(~@cdc/core/assets/minus.svg);
-  background-size: 15px 15px; // Need to define both for IE11
-  background-position: right .7em center;
-  background-repeat: no-repeat;
 
   &:focus {
     z-index: 2;
@@ -26,59 +30,38 @@ div.data-table-heading {
   }
 
   &.collapsed {
-    background-image: url(~@cdc/core/assets/plus.svg);
-    background-size: 15px 15px; // Need to define both for IE11
-    background-position: right .7em center;
-    background-repeat: no-repeat;
+    //TODO find fix
+    //background-image: url(~@cdc/core/core/assets/icon-plus.svg);
     border-bottom: $lightGray 1px solid;
   }
 }
 
-table.data-table {
+.cove-data-table__table {
   width: 100%;
   background: #fff;
   position: relative;
   border: none;
-  overflow-x: auto;
   border-collapse: collapse;
   overflow: auto;
   appearance: none;
 
   * {
-    box-sizing: border-box
-  }
-
-  thead {
-    user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-
-    tr {
-      background: none;
-    }
+    box-sizing: border-box;
   }
 
   thead {
     color: #fff;
     background-color: $mediumGray;
-
-    .resizer {
-      cursor: e-resize;
-      width: 10px;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      touch-action: none;
-    }
+    user-select: none;
 
     tr {
       text-align: left;
+      background: none;
     }
 
     th,
     td {
-      padding: .5em 1.3em .5em .7em;
+      padding: 0.5em 1.3em 0.5em 0.7em;
       line-height: normal;
       position: relative;
       text-align: left;
@@ -90,26 +73,9 @@ table.data-table {
       }
     }
 
-    th.sort {
-      background-color: darken($mediumGray, 10%);
-      background-repeat: no-repeat;
-      background-position: right .5em center;
-      background-size: 10px 5px;
-    }
-
-    th.sort-asc,
-    td.sort-asc {
-      background-image: url(~@cdc/core/assets/asc.svg);
-    }
-
-    th.sort-desc,
-    td.sort-desc {
-      background-image: url(~@cdc/core/assets/desc.svg);
-    }
-
     th:last-child,
     td:last-child {
-      border-right: 0
+      border-right: 0;
     }
   }
 
@@ -118,22 +84,36 @@ table.data-table {
       width: 100%;
 
       &:hover {
-        background: rgba(0, 0, 0, 0.05)
+        background: rgba(0, 0, 0, 0.05);
       }
     }
   }
 
   tr {
-    border-bottom: solid 1px #E5E5E5;
+    border-bottom: solid 1px #e5e5e5;
     min-width: 100%; // Needed to fill content up
+
     &:last-child {
-      border-bottom: 0
+      border-bottom: 0;
     }
   }
 
   td {
-    padding: .3em .7em;
+    position: relative;
+    padding: 0.3em 0.7em;
     border-right: 1px solid rgba(0, 0, 0, 0.1);
+
+    a {
+      padding: 0.3em 0.7em;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      display: block;
+      color: inherit;
+      text-decoration: none;
+    }
   }
 
   th,
@@ -151,23 +131,7 @@ table.data-table {
     }
   }
 
-  td {
-    position: relative;
-  }
-
-  td a {
-    padding: .3em .7em;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    display: block;
-    color: inherit;
-    text-decoration: none;
-  }
-
-  td span.table-link {
+  .table-link {
     text-decoration: underline;
     cursor: pointer;
     color: #075290;
@@ -178,101 +142,59 @@ table.data-table {
       margin-left: 5px;
     }
   }
-}
-
-.no-data {
-  position: relative;
-
-  .no-data-message {
-    @include emptyState;
 
-    h3 {
-      font-size: 1.3rem;
-      font-weight: 600;
-      margin-bottom: .3rem;
-    }
+  .sort {
+    background-color: darken($mediumGray, 10%);
+    background-repeat: no-repeat;
+    background-position: right 0.5em center;
+    background-size: 10px 5px;
   }
 
-  tr:hover {
-    background: #fff;
+  .sort-asc {
+    //TODO find fix
+    //background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
   }
 
-  th, td {
-    width: 50%;
+  .sort-desc {
+    //TODO find fix
+    //background-image: url(~@cdc/core/assets/icon-caret-filled-down.svg);
+  }
 
-    &::before {
-      content: "\00a0";
-    }
+  .resizer {
+    cursor: e-resize;
+    width: 10px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    touch-action: none;
   }
 }
 
-.data-table-pagination {
-  margin: 1rem 0;
-  display: flex;
-  align-items: center;
-
-  ul {
-    list-style: none;
-    margin: 0 1rem 0 0;
-    display: flex;
-
-    li + li {
-      margin-left: .3rem;
-    }
-
-    button {
-      background: $mediumGray;
-      padding: .6rem .8rem;
+.cove-data-table__footer {
+  margin-top: 1rem;
+}
 
-      &:hover {
-        background: lighten($mediumGray, 5%);
-      }
-    }
+.cove-data-table__pagination {
+}
 
-    button.btn-next {
-      &::before {
-        content: " ";
-        background-image: url(~@cdc/core/assets/asc.svg);
-        background-size: 10px 5px;
-        width: 10px;
-        height: 5px;
-        display: block;
-        transform: rotate(90deg);
-      }
-    }
+.cove-data-table__pagination--index {
+}
 
-    button.btn-prev {
-      &::before {
-        content: " ";
-        background-image: url(~@cdc/core/assets/asc.svg);
-        background-size: 10px 5px;
-        width: 10px;
-        height: 5px;
-        display: block;
-        transform: rotate(-90deg);
-      }
-    }
+.cove-data-table__no-data {
+  position: relative;
+  user-select: none;
 
-    button[disabled] {
-      background: $mediumGray;
-      opacity: .3;
-      cursor: default;
+  th,
+  td {
+    width: 50%;
 
-      &:hover {
-        background: $mediumGray;
-      }
+    &::before {
+      content: '\00a0';
     }
   }
 }
 
-.btn-download {
-  color: #fff;
-  float: right;
-  text-decoration: none;
-  transition: .3s all;
-  margin: 1em 0;
-
-  &:hover {
-    transition: .3s all;
-  }
+.cove-data-table__no-data--message {
+  @include emptyState;
 }

package/styles/v2/layout/_progression.scss

@@ -1,4 +1,5 @@
-.waiting {
+//TODO: Replace any '.waiting' classes with below
+.waiting-splash {
   @include emptyState;
   padding-top: 0;
 
@@ -13,7 +14,7 @@
   h3 {
     font-size: 1.3rem;
     font-weight: 600;
-    margin-bottom: .3rem;
+    margin-bottom: 0.3rem;
   }
 
   p {
@@ -25,7 +26,8 @@
   }
 }
 
-.loading {
+//TODO: Replace any '.loading' classes with below
+.loading-splash {
   position: absolute;
   top: 0;
   right: 0;
@@ -33,7 +35,7 @@
   left: 0;
   min-height: 30%;
   text-align: center;
-  background: rgba(255, 255, 255, .5);
+  background: rgba(255, 255, 255, 0.5);
   z-index: 3;
 
   span {
@@ -54,8 +56,10 @@
     transform: scale(1.3);
     color: #777;
 
-    &.sm, &.xs, &.xxs {
-      transform: scale(0.7)
+    &.sm,
+    &.xs,
+    &.xxs {
+      transform: scale(0.7);
     }
 
     div + div {
@@ -70,10 +74,10 @@
       background-color: currentColor;
       border: 0 solid currentColor;
       border-radius: 100%;
-      animation: ball-beat .7s -.15s infinite linear;
+      animation: ball-beat 0.7s -0.15s infinite linear;
 
       &:nth-child(2n-1) {
-        animation-delay: -.5s;
+        animation-delay: -0.5s;
       }
     }
   }

package/styles/v2/layout/index.scss

@@ -1,7 +1,5 @@
-@import "alert";
-@import "component";
-@import "data-table";
-@import "header";
-@import "link";
-@import "progression";
-@import "tooltip";
+@import 'alert';
+@import 'component';
+@import 'data-table';
+@import 'progression';
+@import 'tooltip';

package/styles/v2/main.scss

@@ -1,15 +1,65 @@
 @import 'utils';
-@import 'base';
 @import 'themes';
 
 .cove {
+  @import 'base';
   color: $baseColor;
   font-size: 16px;
   line-height: 1.4;
 
+  :focus,
+  [tabindex]:focus-visible {
+    outline: 2px solid rgba(255, 102, 1, 0.9);
+  }
+
+  margin: 0;
+  font: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  color: #111;
+
+  strong {
+    font-weight: 600;
+  }
+
+  .subtext {
+    margin-top: 1em;
+  }
+
+  .warning {
+    padding: 0.75em 1em;
+    margin: 1em 0;
+    background-color: #ffd2d2;
+    color: #d8000c;
+    font-size: 0.8em;
+    border: #d8000c 1px solid;
+    border-radius: 0.4em;
+
+    strong {
+      font-weight: 600;
+      display: block;
+    }
+  }
+
+  .sr-only,
+  .sr-only-focusable:not(:focus) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+    display: flex;
+  }
+
   @import 'layout';
 
   @include breakpointClass(md) {
     font-size: 16px;
   }
-}
+}

package/styles/v2/themes/_color-definitions.scss

@@ -1,17 +1,72 @@
-@use "sass:string";
+@use 'sass:string';
 
 $theme: (
-        'amber':  ('#fbab18', '#ffd54f', '#ffecb3', '#fff7e1'),
-        'blue':   ('#005eaa', '#88c3ea', '#c0e9ff', '#edf9ff'),
-        'brown':  ('#705043', '#ad907b', '#d7ccc8', '#f2ebe8'),
-        'cyan':   ('#006778', '#65b0bd', '#cce5e9', '#ebf5f6'),
-        'green':  ('#4b830d', '#84bc49', '#dcedc8', '#f1f8e9'),
-        'indigo': ('#26418f', '#92a6dd', '#dee8ff', '#f2f6ff'),
-        'orange': ('#bb4d00', '#ffad42', '#ffe97d', '#fff4cf'),
-        'pink':   ('#af4448', '#e57373', '#ffc2c2', '#ffe7e7'),
-        'purple': ('#712177', '#b890bb', '#e3d3e4', '#f7f2f7'),
-        'slate':  ('#29434e', '#7e9ba5', '#b6c6d2', '#e2e8ed'),
-        'teal':   ('#00695c', '#4ebaaa', '#ceece7', '#ebf7f5' )
+  'amber': (
+    '#fbab18',
+    '#ffd54f',
+    '#ffecb3',
+    '#fff7e1'
+  ),
+  'blue': (
+    '#005eaa',
+    '#88c3ea',
+    '#c0e9ff',
+    '#edf9ff'
+  ),
+  'brown': (
+    '#705043',
+    '#ad907b',
+    '#d7ccc8',
+    '#f2ebe8'
+  ),
+  'cyan': (
+    '#007B91',
+    '#65b0bd',
+    '#cce5e9',
+    '#ebf5f6'
+  ),
+  'green': (
+    '#4b830d',
+    '#84bc49',
+    '#dcedc8',
+    '#f1f8e9'
+  ),
+  'indigo': (
+    '#26418f',
+    '#92a6dd',
+    '#dee8ff',
+    '#f2f6ff'
+  ),
+  'orange': (
+    '#bb4d00',
+    '#ffad42',
+    '#ffe97d',
+    '#fff4cf'
+  ),
+  'pink': (
+    '#af4448',
+    '#e57373',
+    '#ffc2c2',
+    '#ffe7e7'
+  ),
+  'purple': (
+    '#712177',
+    '#b890bb',
+    '#e3d3e4',
+    '#f7f2f7'
+  ),
+  'slate': (
+    '#29434e',
+    '#7e9ba5',
+    '#b6c6d2',
+    '#e2e8ed'
+  ),
+  'teal': (
+    '#00695c',
+    '#4ebaaa',
+    '#ceece7',
+    '#ebf7f5'
+  )
 );
 
 // .type-sparkline class used for creating sparklines
@@ -31,8 +86,36 @@ $theme: (
       border-bottom-width: 4px;
     }
 
-     &.theme-#{$theme-name} {
+    &.theme-#{$theme-name} {
+      .cove-component__content:not(.no-borders).component--has-borderColorTheme {
+        border-left: 1px solid string.unquote(nth($theme-colors, 1));
+        border-right: 1px solid string.unquote(nth($theme-colors, 1));
+        border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
+      }
+
+      // when component doesn't have a title add border top
+      .cove-component__inner:not(.component--has-title) .cove-component__content.component--has-borderColorTheme:not(.no-borders) {
+        border-top: 1px solid string.unquote(nth($theme-colors, 1));
+      }
+
+      .cove-component__inner:not(.component--has-title) .cove-component__content {
+        border-top: 1px solid #ccc;
+      }
 
+      .cove-component__header {
+        border-color: string.unquote(nth($theme-colors, 2));
+      }
+
+      .cove-component__content.component--has-accent {
+        border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
+      }
+
+      .cove-component__content.component--has-background:not(.component--hideBackgroundColor) {
+        background: string.unquote(nth($theme-colors, 3));
+      }
+    }
+
+    &.theme-#{$theme-name} {
       .cove-component__content:not(.no-borders).component--has-borderColorTheme {
         border-left: 1px solid string.unquote(nth($theme-colors, 1));
         border-right: 1px solid string.unquote(nth($theme-colors, 1));
@@ -43,7 +126,7 @@ $theme: (
       .cove-component__inner:not(.component--has-title) .cove-component__content.component--has-borderColorTheme:not(.no-borders) {
         border-top: 1px solid string.unquote(nth($theme-colors, 1));
       }
-      
+
       // should probably be in color definitions but logically makes sense here.
       .cove-component__inner:not(.component--has-title) .cove-component__content {
         border-top: 1px solid #ccc;
@@ -54,7 +137,7 @@ $theme: (
       }
 
       .cove-component__content.component--has-accent {
-        border-left: .5rem solid string.unquote(nth($theme-colors, 1)) !important;
+        border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
       }
 
       .cove-component__content.component--has-background:not(.component--hideBackgroundColor) {
@@ -65,17 +148,17 @@ $theme: (
 }
 
 $baseColor: #333;
-$blue: #005EAA;
-$lightestGray: #F2F2F2;
-$lightGray: #C7C7C7;
+$blue: #005eaa;
+$lightestGray: #f2f2f2;
+$lightGray: #c7c7c7;
 $mediumGray: #565656;
 $darkGray: #333;
 $red: #d8000c;
 $white: #fff;
 
-$primary: 	#005eaa !default;
+$primary: #005eaa !default;
 $secondary: #88c3ea !default;
-$tertiary: 	#c0e9ff !default;
+$tertiary: #c0e9ff !default;
 $quaternary: #edf9ff !default;
 
 $purple-primary: #712177 !default;

package/styles/v2/themes/index.scss

@@ -1 +1 @@
-@import "color-definitions";
+@import 'color-definitions';

package/styles/v2/utils/_align.scss

@@ -0,0 +1,17 @@
+// Content Align Classes
+@mixin align($propNames, $className, $valueName) {
+  @each $propName in $propNames {
+    #{'.align-' + $propName + '-' + $className} {
+      #{'align-' + $propName}: #{$valueName} !important;
+    }
+  }
+}
+
+@include align(('content', 'items', 'self'), 'start', 'flex-start');
+@include align(('content', 'items', 'self'), 'end', 'flex-end');
+@include align(('content', 'items', 'self'), 'center', 'center');
+@include align(('content', 'items', 'self'), 'stretch', 'stretch');
+
+@include align(('items', 'self'), 'baseline', 'baseline');
+@include align('content', 'around', 'space-around');
+@include align('content', 'between', 'space-between');

package/styles/v2/utils/_animations.scss

@@ -32,8 +32,8 @@
 
 @keyframes ball-beat {
   50% {
-    opacity: .2;
-    transform: scale(.75);
+    opacity: 0.2;
+    transform: scale(0.75);
   }
   100% {
     opacity: 1;