@cdc/core 1.1.4 → 9.22.9

package/styles/_data-table.scss

@@ -12,7 +12,7 @@ div.data-table-heading {
   border: $lightGray 1px solid;
   border-bottom: 0;
   cursor: pointer;
-  background-image: url(~@cdc/core/assets/minus.svg);
+  background-image: url(~@cdc/core/assets/icon-minus.svg);
   background-size: 15px 15px; // Need to define both for IE11
   background-position: right .7em center;
   background-repeat: no-repeat;
@@ -21,7 +21,7 @@ div.data-table-heading {
     position: relative;
   }
   &.collapsed {
-    background-image: url(~@cdc/core/assets/plus.svg);
+    background-image: url(~@cdc/core/assets/icon-plus.svg);
     background-size: 15px 15px; // Need to define both for IE11
     background-position: right .7em center;
     background-repeat: no-repeat;
@@ -84,7 +84,7 @@ table.data-table {
         margin-left: 1rem;
       }
     }
-    
+
     th.sort {
       background-color: darken($mediumGray, 10%);
       background-repeat: no-repeat;
@@ -94,20 +94,20 @@ table.data-table {
 
     th.sort-asc,
     td.sort-asc {
-      background-image: url(~@cdc/core/assets/asc.svg);
+      background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
     }
-    
+
     th.sort-desc,
     td.sort-desc {
-      background-image: url(~@cdc/core/assets/desc.svg);
+      background-image: url(~@cdc/core/assets/icon-caret-filled-down.svg);
     }
-    
+
     th:last-child,
     td:last-child {
       border-right: 0
     }
   }
-  
+
   tbody {
     tr {
       width: 100%;
@@ -124,12 +124,12 @@ table.data-table {
       border-bottom: 0
     }
   }
-  
+
   td {
     padding: .3em .7em;
     border-right: 1px solid rgba(0, 0, 0, 0.1);
   }
-  
+
   th,
   td {
     white-space: nowrap;
@@ -158,7 +158,7 @@ table.data-table {
     color: inherit;
     text-decoration: none;
   }
-  
+
   td span.table-link {
     text-decoration: underline;
     cursor: pointer;
@@ -213,7 +213,7 @@ table.data-table {
     button.btn-next {
       &::before {
         content: " ";
-        background-image: url(~@cdc/core/assets/asc.svg);
+        background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
         background-size: 10px 5px;
         width: 10px;
         height: 5px;
@@ -224,7 +224,7 @@ table.data-table {
     button.btn-prev {
       &::before {
         content: " ";
-        background-image: url(~@cdc/core/assets/asc.svg);
+        background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
         background-size: 10px 5px;
         width: 10px;
         height: 5px;

package/styles/_global.scss

@@ -167,3 +167,17 @@ select {
     font-size: 1.2rem;
   }
 }
+
+section.introText {
+  padding: 15px;
+}
+
+section.footnotes {
+  border-top: 1px solid #DDD;
+  margin-top: 20px;
+  padding: 15px;
+}
+
+.cdc-chart-inner-container .subtext {
+  padding: 15px;
+}

package/styles/_reset.scss

@@ -6,6 +6,16 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   color: #111;
+
+  // match cdc site outline
+  :focus,
+  [tabindex]:focus-visible {
+    outline: 2px solid rgba(255,102,1,.9) !important;
+  }
+
+  .outline-none {
+    outline: none !important;
+  }
 }
 .cdc-open-viz-module {
   div, span, applet, object, iframe,
@@ -67,4 +77,4 @@
       half as far down as the superscript moved up */
     bottom: -0.25em;
   }
-}
+}

package/styles/base.scss

@@ -1,3 +1,5 @@
+@use "sass:string";
+
 @mixin breakpoint($class) {
   @if $class == xs {
     @media (max-width: 767px) { @content; }
@@ -65,4 +67,18 @@
   }
   @import "data-table";
   @import "global";
-}
+}
+
+$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' )
+);

package/styles/v2/base/_file-selector.scss

@@ -0,0 +1,20 @@
+.cove-file-selector {
+  padding: 1rem 3rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: $mediumGray;
+  border: $lightGray 2px dashed;
+  border-radius: .2rem;
+  cursor: pointer;
+  transition: .1s all;
+
+  &.drag-active {
+    background-color: $lightestGray;
+  }
+
+  span {
+    white-space: pre;
+    color: $blue;
+    text-decoration: underline;
+  }
+}

package/styles/v2/base/_general.scss

@@ -1,33 +1,20 @@
+@import '../themes/color-definitions';
+
 .cove {
   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;
+  line-height: 1.4;
+  color: $baseColor;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
-  color: #111;
-
-  strong {
-    font-weight: 600;
-  }
-
-  .subtext {
-    margin-top: 1em;
-  }
-
-  .warning {
-    padding: .75em 1em;
-    margin: 1em 0;
-    background-color: #FFD2D2;
-    color: #D8000C;
-    font-size: .8em;
-    border: #D8000C 1px solid;
-    border-radius: .4em;
 
-    strong {
-      font-weight: 600;
-      display: block;
-    }
+  small {
+    display: block;
+    font-size: .8rem;
+    font-style: italic;
+    color: $mediumGray;
   }
 
   .sr-only,

package/styles/v2/base/_heading.scss

@@ -0,0 +1,20 @@
+*[class^='cove-heading'] {
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+}
+
+.cove-heading--1 {
+  font-size: 1.5rem;
+}
+
+.cove-heading--2 {
+  font-size: 1.25rem;
+}
+
+.cove-heading--3 {
+  font-size: 1rem;
+}
+
+.cove-heading--4 {
+  font-size: 0.75rem;
+}

package/styles/v2/base/_reset.scss

@@ -27,7 +27,8 @@ html:focus-within {
 }
 
 body {
-  min-height: 100vh;
+  // TODO: Uncomment after cove refactor - conflicts with flex display on current <body>. Why the $#@&%! 'that' was done in the first place, I have no clue.
+  //min-height: 100vh;
   text-rendering: optimizeSpeed;
   line-height: 1.5;
 }

package/styles/v2/base/index.scss

@@ -1,3 +1,7 @@
-@import "reset";
+//@import "reset"; TODO: Enable after cove refactor
 @import "typography";
+
 @import "general";
+@import "heading";
+
+@import "file-selector";

package/styles/v2/components/button.scss

@@ -1,6 +1,16 @@
 @import "../utils/variables";
 @import "../themes/index";
 
+.sbdocs .cove-button {
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+
+  &.fluid {
+    width: 100%;
+    margin-right: 0;
+  }
+}
+
 .cove-button {
   display: inline-block;
   position: relative;
@@ -24,7 +34,7 @@
 
   &:disabled {
     background-color: #adadad !important;
-    cursor: not-allowed !important;
+    cursor: not-allowed;
   }
 
   &:not(:disabled) {
@@ -38,19 +48,25 @@
     background-color: lighten($primary, 5%);
   }
 
-  &:active,
-  &:focus {
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      outline: 2px solid rgba(161, 161, 161, 0.6);
-      border-radius: .3125em;
-      margin: -2px;
-      pointer-events: none;
+  &:not(.loading) {
+    &:focus,
+    &:active {
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        outline: 2px solid rgba(161, 161, 161, 0.6);
+        border-radius: .3125em;
+        margin: -2px;
+        pointer-events: none;
+      }
     }
   }
 
+  &.loading:disabled {
+    cursor: default;
+  }
+
   &.fluid {
     width: 100%;
   }
@@ -121,58 +137,3 @@
   transition: all 500ms $transition-expo-out;
   opacity: 0;
 }
-
-/* Old Styles ------------------------------------------
-.btn {
-  display: block;
-  padding: .4em .8em;
-  font-size: 1em;
-  color: #fff;
-  background: #005eaa;
-  border: 0;
-  border-radius: .3em;
-  transition: .1s background-color;
-  cursor: pointer;
-
-  &.full-width {
-    width: 100%;
-  }
-
-  &:hover {
-    transition: .1s background-color;
-  }
-
-  &.secondary {
-    font-size: .8em;
-    padding: .3em 1em;
-    background: rgba(0, 0, 0, 0.3);
-    display: inline-block;
-    margin-bottom: 1em;
-
-    &:hover {
-      background: rgba(0, 0, 0, .5);
-    }
-  }
-
-  &.danger {
-    background-color: $red;
-    color: #fff;
-
-    &:hover {
-      background-color: darken($red, 5%);
-    }
-  }
-
-  &:hover {
-    transition: .1s all;
-    background: lighten(#005eaa, 5%);
-  }
-
-  svg {
-    width: 16px;
-    height: 16px;
-    position: relative;
-    top: 2px;
-    margin-left: 5px;
-  }
-}*/

package/styles/v2/components/card.scss

@@ -0,0 +1,7 @@
+.cove-card {
+  border: 1px solid #c7c7c7;
+  border-radius: 0.25rem;
+  background-color: #f2f2f2;
+  padding: .75rem;
+  height: 100%;
+}

package/styles/v2/components/data-designer.scss

@@ -0,0 +1,100 @@
+@import "../utils/variables";
+@import "../themes/color-definitions";
+
+.cove-modal__content {
+  .dataset-selector-container {
+    padding: 1em;
+    
+    .dataset-selector {
+      margin: 0 0.5em;
+      padding: 0.5em;
+      max-width: 10em;
+    }
+  }
+
+  .cove-data-designer__container {
+    padding: 1em;
+  }
+}
+
+.cove-data-designer__container {
+  .fw-bold {
+    font-weight: bold;
+  }
+
+  .fw-normal {
+    font-weight: normal;
+  }
+
+  .column {
+    grid-column-end: span 6;
+  }
+}
+
+.cove-data-designer__button {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  cursor: pointer;
+
+  strong {
+    font-weight: bold;
+  }
+
+  .cove-card {
+    position: relative;
+    text-align: left;
+    box-sizing: border-box;
+    border: 0;
+    padding: 1em;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: 1px solid $lightGray;
+      border-radius: 0.25rem;
+    }
+  }
+
+  &.active {
+    .cove-card::after {
+      border: 2px solid #005eaa;
+    }
+  }
+
+  p {
+    font-size: .8rem;
+    margin-bottom: 1rem;
+  }
+
+  table + table {
+    margin-top: 1em;
+  }
+
+  table {
+    font-size: .8rem;
+    background-color: #fff;
+    border: 1px solid $lightGray;
+    border-collapse: collapse;
+
+    th {
+      color: white;
+      text-align: left;
+      background-color: $primary;
+    }
+
+    th, td {
+      padding: 0 5px;
+      border-top: 1px solid $lightGray;
+      border-bottom: 1px solid $lightGray;
+    }
+  }
+}

package/styles/v2/components/editor.scss

@@ -2,6 +2,8 @@
 @import "../themes/index";
 
 .cove-editor {
+
+  @import "./../base/reset";
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-areas: "panel content";
@@ -414,7 +416,6 @@
     display: block;
     text-align: left;
     cursor: pointer;
-    color: rgba(0, 0, 0, .5);
     text-decoration: underline;
 
     span {

package/styles/v2/components/guidance-block.scss

@@ -0,0 +1,74 @@
+@import "../utils/variables";
+@import "../themes/color-definitions";
+
+.cove-guidance-block {
+  display: block;
+  position: relative;
+  padding: .75rem 1rem;
+  margin-left: 5px;
+  color: #444;
+  text-decoration: none;
+  border: $lightGray 1px solid;
+  border-left: none;
+  border-radius: 0 0.1875rem 0.1875rem 0;
+  transition: all 200ms $transition-expo-out;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: -5px;
+    bottom: -1px;
+    width: 5px;
+    background: $blue;
+    border-radius: 0.1875rem 0 0 0.1875rem;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: $lightestGray;
+    color: #444;
+    transition: .2s all;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    left: -4px;
+    margin: -4px;
+    border-radius: 0.1875rem;
+    outline: 2px solid transparent;
+    transition: outline 200ms $transition-expo-out;
+    pointer-events: none;
+  }
+
+  &:focus,
+  &:active {
+    outline: none;
+
+    &:after {
+      outline: 2px solid rgba(161, 161, 161, 0.6);
+    }
+  }
+
+  svg {
+    width: 60px;
+    color: $blue;
+    margin-right: 1rem;
+
+    path {
+      fill: currentColor;
+    }
+  }
+}
+
+.cove-guidance-block__header {
+  font-weight: bold;
+  font-size: 1.125rem;
+}
+
+.cove-guidance-block__content {
+  font-size: .875rem;
+}

package/styles/v2/components/icon.scss

@@ -15,9 +15,5 @@
     max-width: 100%;
     max-height: 100%;
     pointer-events: none;
-
-    path {
-      fill: currentColor;
-    }
   }
 }

package/styles/v2/components/input/_input-check-radio.scss

@@ -0,0 +1,97 @@
+.cove-input-group--checkbox {
+  margin-bottom: 1rem;
+}
+
+.cove-input-group--checkbox,
+.cove-input-group--radio {
+  display: flex;
+  align-items: center;
+
+  label,
+  input[type="checkbox"],
+  input[type="radio"] {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  label {
+    padding-right: 6px;
+
+    + input[type="checkbox"],
+    + input[type="radio"] {
+      margin-left: 0;
+    }
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    display: inline-block;
+    margin-right: 0;
+    margin-left: 0;
+
+    + label {
+      padding-right: 0;
+      padding-left: 6px;
+    }
+  }
+
+  input[type="radio"] {
+    margin-bottom: 5px;
+  }
+}
+
+.cove-input__checkbox {
+  display: inline-block;
+  width: 1.75rem;
+  aspect-ratio: 1/1;
+  cursor: pointer;
+
+  &--small {
+    @extend .cove-input__checkbox;
+    width: 1.25rem;
+  }
+
+  &--large {
+    @extend .cove-input__checkbox;
+    width: 2.25rem;
+  }
+
+  &.active {
+    .cove-input__checkbox-box {
+      background-color: #fff;
+
+      &.custom-color {
+        box-shadow: none;
+      }
+    }
+
+    .cove-input__checkbox-check {
+      opacity: 1;
+      transform: translateY(-1px);
+    }
+  }
+}
+
+.cove-input__checkbox-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #f4f4f4;
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 1px #c4c4c4;
+  transition: all 150ms $transition-expo-out;
+}
+
+.cove-input__checkbox-check {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: 3px;
+  fill: #fff;
+  pointer-events: none;
+  transform: translateY(-1px);
+  transition: all 250ms $transition-expo-out;
+  opacity: 0;
+}