@cdc/core 1.1.4 → 4.22.11

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

@@ -0,0 +1,101 @@
+@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: 0.8rem;
+    margin-bottom: 1rem;
+  }
+
+  table + table {
+    margin-top: 1em;
+  }
+
+  table {
+    font-size: 0.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

@@ -1,10 +1,11 @@
-@import "../utils/variables";
-@import "../themes/index";
+@import '../utils/variables';
+@import '../themes/index';
 
 .cove-editor {
+  @import './../base/reset';
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-template-areas: "panel content";
+  grid-template-areas: 'panel content';
   height: 100vh;
 
   .cove-editor__panel {
@@ -22,7 +23,7 @@
   .cove-editor__heading {
     font-size: 1.125em;
     user-select: none;
-    padding: .625rem 1.125rem;
+    padding: 0.625rem 1.125rem;
   }
 
   .cove-editor__panel-container {
@@ -52,7 +53,7 @@
     border: 0;
     cursor: pointer;
     transition: left 400ms ease 65ms, background-color 200ms ease;
-    box-shadow: rgba(0, 0, 0, .5) 0 1px 2px;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
     user-select: none;
     z-index: 8;
 
@@ -61,7 +62,7 @@
       left: 50%;
       transform: translate(-50%, -50%);
       position: absolute;
-      content: "\00ab";
+      content: '\00ab';
     }
 
     &.collapsed {
@@ -69,12 +70,12 @@
       margin-left: 0;
 
       &:before {
-        content: "\00bb";
+        content: '\00bb';
       }
     }
 
     &:hover {
-      background-color: #ffffff
+      background-color: #ffffff;
     }
   }
 }
@@ -91,7 +92,7 @@
 
     > label {
       width: 48%;
-      margin-top: 0 !important
+      margin-top: 0 !important;
     }
   }
 
@@ -106,22 +107,22 @@
     border: $lightGray 1px solid;
 
     &:empty {
-      border: none !important
+      border: none !important;
     }
 
     li {
-      padding: .3em .5em;
+      padding: 0.3em 0.5em;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      font-size: .9em;
+      font-size: 0.9em;
 
       &:hover {
         background-color: $lightestGray;
       }
 
       span {
-        font-size: .8em;
+        font-size: 0.8em;
         color: #f00;
         cursor: pointer;
       }
@@ -139,7 +140,7 @@
 
   .guidance-link {
     margin: 2em 1em 0;
-    padding: .75em 1em;
+    padding: 0.75em 1em;
 
     svg {
       width: 60px;
@@ -156,7 +157,7 @@
     background: #565656;
     color: #fff;
     font-size: 1.1em;
-    padding: .6em 1em;
+    padding: 0.6em 1em;
     position: relative;
     border-bottom: #565656 3px solid;
     z-index: 3;
@@ -189,7 +190,8 @@
         width: 30%;
         display: inline-block;
 
-        input[type="text"], input[type="number"] {
+        input[type='text'],
+        input[type='number'] {
           width: 50px;
         }
       }
@@ -198,15 +200,15 @@
 
   .remove-column {
     margin: 0 auto;
-    color: #C32B2B;
-    font-size: .7em;
+    color: #c32b2b;
+    font-size: 0.7em;
     font-weight: bold;
     line-height: 1.6em;
     text-decoration: underline;
     text-transform: uppercase;
     border: 0;
     border-radius: 5px;
-    transition: .1s all;
+    transition: 0.1s all;
     float: right;
     outline: 0;
     cursor: pointer;
@@ -216,13 +218,14 @@
     padding-left: 1em;
     border: 0;
     border-left: rgba(0, 0, 0, 0.2) 4px solid;
-    transition: .2s all;
+    transition: 0.2s all;
 
     &:not(:first-child) {
       margin-top: 2em;
     }
 
-    input[type="text"], input[type="number"] {
+    input[type='text'],
+    input[type='number'] {
       font-size: 1em;
     }
 
@@ -236,13 +239,13 @@
 
     &:hover {
       border-left: rgba(0, 0, 0, 0.7) 4px solid;
-      transition: .2s all;
+      transition: 0.2s all;
     }
   }
 
   span.subtext {
     display: block;
-    color: rgba(0, 0, 0, .5);
+    color: rgba(0, 0, 0, 0.5);
     text-transform: none;
     font-weight: normal;
   }
@@ -255,25 +258,25 @@
     list-style: none;
 
     > li {
-      margin-right: .3em;
-      margin-bottom: .3em;
+      margin-right: 0.3em;
+      margin-bottom: 0.3em;
     }
 
     li > div {
       display: block;
       box-sizing: border-box;
-      border: 1px solid #D1D1D1;
+      border: 1px solid #d1d1d1;
       border-radius: 2px;
-      background: #F1F1F1;
-      padding: .4em .6em;
-      font-size: .8em;
-      margin-bottom: .3em;
+      background: #f1f1f1;
+      padding: 0.4em 0.6em;
+      font-size: 0.8em;
+      margin-bottom: 0.3em;
       cursor: move;
     }
   }
 
   .info {
-    font-size: .8em;
+    font-size: 0.8em;
     line-height: 1.4em;
     font-style: italic;
     padding-top: 10px;
@@ -288,11 +291,11 @@
     cursor: text;
 
     input.react-tags__search-input {
-      font-size: .8rem;
+      font-size: 0.8rem;
     }
 
     span {
-      display: inline
+      display: inline;
     }
 
     &.is-focused {
@@ -307,23 +310,23 @@
   .react-tags__selected-tag {
     display: inline-block;
     box-sizing: border-box;
-    border: 1px solid #D1D1D1;
+    border: 1px solid #d1d1d1;
     border-radius: 2px;
-    background: #F1F1F1;
-    padding: .4em .6em;
-    font-size: .8em;
-    margin-right: .3em;
-    margin-bottom: .3em;
+    background: #f1f1f1;
+    padding: 0.4em 0.6em;
+    font-size: 0.8em;
+    margin-right: 0.3em;
+    margin-bottom: 0.3em;
 
     &::after {
       content: '\2715';
-      color: #AAA;
+      color: #aaa;
       margin-left: 8px;
     }
 
     &:hover,
     &:focus {
-      border-color: #B1B1B1;
+      border-color: #b1b1b1;
     }
   }
 
@@ -335,7 +338,7 @@
       max-width: 100%;
       margin: 0;
       outline: none;
-      padding: .5em .3em;
+      padding: 0.5em 0.3em;
       font-size: inherit;
       line-height: inherit;
     }
@@ -362,7 +365,7 @@
       padding: 0;
       list-style: none;
       background: white;
-      border: 1px solid #D1D1D1;
+      border: 1px solid #d1d1d1;
       border-radius: 2px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     }
@@ -406,7 +409,7 @@
   text-align: left;
 
   p {
-    font-size: .8rem;
+    font-size: 0.8rem;
   }
 
   .advanced-toggle-link {
@@ -414,7 +417,6 @@
     display: block;
     text-align: left;
     cursor: pointer;
-    color: rgba(0, 0, 0, .5);
     text-decoration: underline;
 
     span {
@@ -425,17 +427,17 @@
     }
 
     &:hover {
-      color: rgba(0, 0, 0, .7);
+      color: rgba(0, 0, 0, 0.7);
     }
   }
 
   textarea {
     height: 400px;
     width: 100%;
-    font-size: .9em;
-    padding: .5em;
+    font-size: 0.9em;
+    padding: 0.5em;
     font-family: monospace;
-    box-sizing: border-box
+    box-sizing: border-box;
   }
 }
 
@@ -468,7 +470,7 @@ ul.color-palette {
     }
 
     &.selected {
-      border: rgba(0, 0, 0, .8) 2px solid;
+      border: rgba(0, 0, 0, 0.8) 2px solid;
     }
 
     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: 0.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: 0.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: 0.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;
+}

package/styles/v2/components/input/_input-group.scss

@@ -0,0 +1,74 @@
+.cove-input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+
+  > {
+    .cove-input {
+      position: relative;
+      flex: 1 1 auto;
+      width: 1%;
+      min-width: 0;
+    }
+
+    .cove-input__label {
+      display: none;
+    }
+  }
+
+  &:not(.clear) {
+    > {
+      :not(:first-child) {
+        margin-left: -1px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      :not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  &.clear {
+    &[flow='left'] > {
+      :first-child {
+        border: 0;
+        left: 0;
+      }
+    }
+
+    &[flow='right'] > {
+      :last-child {
+        border: 0;
+        right: 0;
+      }
+    }
+
+    .cove-input-group__label {
+      position: absolute;
+      background-color: transparent;
+      height: 100%;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+}
+
+.cove-input-group__label {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: $baseColor;
+  text-align: center;
+  white-space: nowrap;
+  background-color: $lightestGray;
+  border: 1px solid $lightGray;
+  border-radius: 0.1875rem;
+}