@cdc/core 1.1.2 → 1.1.3

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

@@ -0,0 +1,278 @@
+.collapsed + .table-container {
+  border-bottom: none;
+}
+
+.table-container {
+  overflow-x: auto;
+  border-right: 1px solid $lightGray;
+  border-left: 1px solid $lightGray;
+  border-bottom: 1px solid $lightGray;
+}
+
+div.data-table-heading {
+  background: rgba(0, 0, 0, 0.05);
+  padding: .5em .7em;
+  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;
+    position: relative;
+  }
+
+  &.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;
+    border-bottom: $lightGray 1px solid;
+  }
+}
+
+table.data-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;
+    }
+  }
+
+  thead {
+    color: #fff;
+    background-color: $mediumGray;
+
+    .resizer {
+      cursor: e-resize;
+      width: 10px;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      touch-action: none;
+    }
+
+    tr {
+      text-align: left;
+    }
+
+    th,
+    td {
+      padding: .5em 1.3em .5em .7em;
+      line-height: normal;
+      position: relative;
+      text-align: left;
+      cursor: pointer;
+      border-right: 1px solid $lightGray !important;
+
+      svg {
+        margin-left: 1rem;
+      }
+    }
+
+    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
+    }
+  }
+
+  tbody {
+    tr {
+      width: 100%;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.05)
+      }
+    }
+  }
+
+  tr {
+    border-bottom: solid 1px #E5E5E5;
+    min-width: 100%; // Needed to fill content up
+    &:last-child {
+      border-bottom: 0
+    }
+  }
+
+  td {
+    padding: .3em .7em;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  th,
+  td {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    &:last-child {
+      border-right: 0 !important;
+    }
+
+    &:first-child {
+      flex-grow: 1;
+    }
+  }
+
+  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 {
+    text-decoration: underline;
+    cursor: pointer;
+    color: #075290;
+
+    svg {
+      max-width: 13px;
+      vertical-align: baseline;
+      margin-left: 5px;
+    }
+  }
+}
+
+.no-data {
+  position: relative;
+
+  .no-data-message {
+    @include emptyState;
+
+    h3 {
+      font-size: 1.3rem;
+      font-weight: 600;
+      margin-bottom: .3rem;
+    }
+  }
+
+  tr:hover {
+    background: #fff;
+  }
+
+  th, td {
+    width: 50%;
+
+    &::before {
+      content: "\00a0";
+    }
+  }
+}
+
+.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;
+
+      &:hover {
+        background: lighten($mediumGray, 5%);
+      }
+    }
+
+    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);
+      }
+    }
+
+    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);
+      }
+    }
+
+    button[disabled] {
+      background: $mediumGray;
+      opacity: .3;
+      cursor: default;
+
+      &:hover {
+        background: $mediumGray;
+      }
+    }
+  }
+}
+
+.btn-download {
+  color: #fff;
+  float: right;
+  text-decoration: none;
+  transition: .3s all;
+  margin: 1em 0;
+
+  &:hover {
+    transition: .3s all;
+  }
+}

package/styles/v2/layout/_header.scss

@@ -0,0 +1,13 @@
+.header {
+  position: relative;
+  padding: 0.6em 0.8em;
+  margin: 0;
+  color: #fff;
+  font-size: 1.1em;
+  border-bottom-width: 3px;
+  border-bottom-style: solid;
+
+  &:not(:empty) {
+    margin: 0 0 1rem 0;
+  }
+}

package/styles/v2/layout/_link.scss

@@ -0,0 +1,46 @@
+.guidance-link {
+  display: flex;
+  position: relative;
+  padding: .75em 1em;
+  margin: 2em 0 1em;
+  text-decoration: none;
+  font-size: 1em;
+  border: $lightGray 1px solid;
+  color: #444;
+  transition: .2s all;
+
+  &:before {
+    content: " ";
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    bottom: -1px;
+    width: 5px;
+    background: $blue;
+  }
+
+  &:hover {
+    background: $lightestGray;
+    color: #444;
+    transition: .2s all;
+  }
+
+  > div {
+    font-size: .9em;
+  }
+
+  svg {
+    width: 60px;
+    color: $blue;
+    margin-right: 1rem;
+
+    path {
+      fill: currentColor;
+    }
+  }
+
+  h3 {
+    font-weight: 600;
+    font-size: 1.2rem;
+  }
+}

package/styles/v2/layout/_progression.scss

@@ -0,0 +1,80 @@
+.waiting {
+  @include emptyState;
+  padding-top: 0;
+
+  &.collapsed {
+    padding: 2em !important;
+  }
+
+  .waiting-container {
+    max-width: 400px;
+  }
+
+  h3 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: .3rem;
+  }
+
+  p {
+    font-size: 1em;
+
+    strong {
+      font-weight: bold;
+    }
+  }
+}
+
+.loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  min-height: 30%;
+  text-align: center;
+  background: rgba(255, 255, 255, .5);
+  z-index: 3;
+
+  span {
+    display: block;
+    margin-bottom: 1em;
+    font-size: 1.3em;
+  }
+
+  .la-ball-beat {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    width: 108px;
+    height: 36px;
+    margin: 0 auto;
+    font-size: 0;
+    transform: scale(1.3);
+    color: #777;
+
+    &.sm, &.xs, &.xxs {
+      transform: scale(0.7)
+    }
+
+    div + div {
+      margin-left: 10px;
+    }
+
+    > div {
+      display: inline-block;
+      position: relative;
+      width: 20px;
+      height: 20px;
+      background-color: currentColor;
+      border: 0 solid currentColor;
+      border-radius: 100%;
+      animation: ball-beat .7s -.15s infinite linear;
+
+      &:nth-child(2n-1) {
+        animation-delay: -.5s;
+      }
+    }
+  }
+}

package/styles/v2/layout/_tooltip.scss

@@ -0,0 +1,132 @@
+//# Must be loaded outside of Tooltip component for animation availability
+
+$cove-tooltip-bg: #fff;
+$cove-tooltip-color: #333;
+$cove-tooltip-animation: 500ms cubic-bezier(0.16, 1, 0.3, 1) 50ms 1 forwards;
+
+.cove-tooltip {
+  position: relative;
+}
+
+.cove-tooltip--target {
+  cursor: pointer;
+}
+
+.cove-tooltip__content {
+  max-width: 280px;
+  padding: 10px 8px;
+  text-align: left;
+  font-size: 0.875rem;
+  color: $cove-tooltip-color;
+  background-color: $cove-tooltip-bg;
+  border-radius: 5px;
+  user-select: none;
+  cursor: default;
+  opacity: 0;
+
+  &.place-top {
+    &.has-shadow {
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.show {
+      animation: tooltip-btt $cove-tooltip-animation;
+    }
+  }
+
+  &.place-right {
+    &.has-shadow {
+      box-shadow: -4px 4px 14px rgba(0, 0, 0, 0.15), -4px 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.show {
+      animation: tooltip-ltr $cove-tooltip-animation;
+    }
+  }
+
+  &.place-bottom {
+    &.has-shadow {
+      box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.show {
+      animation: tooltip-ttb $cove-tooltip-animation;
+    }
+  }
+
+  &.place-left {
+    &.has-shadow {
+      box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15), 4px 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.show {
+      animation: tooltip-rtl $cove-tooltip-animation;
+    }
+  }
+}
+
+.interactive {
+  a {
+    pointer-events: all;
+  }
+}
+
+.cove-tooltip--border-0 {
+  border-width: 0;
+}
+
+.cove-tooltip--border-1 {
+  border-width: 1px;
+}
+
+.cove-tooltip--border-2 {
+  border-width: 2px;
+}
+
+@keyframes tooltip-ltr {
+  0% {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes tooltip-rtl {
+  0% {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes tooltip-ttb {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tooltip-btt {
+  0% {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/styles/v2/layout/index.scss

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

package/styles/v2/main.scss

@@ -0,0 +1,15 @@
+@import 'utils';
+@import 'base';
+@import 'themes';
+
+.cove {
+  color: $baseColor;
+  font-size: 16px;
+  line-height: 1.4;
+
+  @import 'layout';
+
+  @include breakpointClass(md) {
+    font-size: 16px;
+  }
+}

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

@@ -0,0 +1,129 @@
+@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' )
+);
+
+// .type-sparkline class used for creating sparklines
+// once v2 is released plz update html structure
+// to use .cove
+.markup-include,
+.type-waffle-chart,
+.type-data-bite,
+.cdc-open-viz-module.type-chart.type-sparkline,
+.cove {
+  @each $theme-name, $theme-colors in $theme {
+    // Header
+    .theme-#{$theme-name} {
+      background-color: string.unquote(nth($theme-colors, 1));
+      border-color: string.unquote(nth($theme-colors, 2));
+      border-bottom-style: solid;
+      border-bottom-width: 4px;
+    }
+
+     &.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));
+      }
+      
+      // 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;
+      }
+
+      .cove-component__header {
+        border-color: string.unquote(nth($theme-colors, 2));
+      }
+
+      .cove-component__content.component--has-accent {
+        border-left: .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));
+      }
+    }
+  }
+}
+
+$baseColor: #333;
+$blue: #005EAA;
+$lightestGray: #F2F2F2;
+$lightGray: #C7C7C7;
+$mediumGray: #565656;
+$darkGray: #333;
+$red: #d8000c;
+$white: #fff;
+
+$primary: 	#005eaa !default;
+$secondary: #88c3ea !default;
+$tertiary: 	#c0e9ff !default;
+$quaternary: #edf9ff !default;
+
+$purple-primary: #712177 !default;
+$purple-secondary: #b890bb !default;
+$purple-tertiary: #e3d3e4 !default;
+$purple-quaternary: #f7f2f7 !default;
+
+$brown-primary: #705043 !default;
+$brown-secondary: #ad907b !default;
+$brown-tertiary: #d7ccc8 !default;
+$brown-quaternary: #f2ebe8 !default;
+
+$teal-primary: #00695c !default;
+$teal-secondary: #4ebaaa !default;
+$teal-tertiary: #ceece7 !default;
+$teal-quaternary: #ebf7f5 !default;
+
+$pink-primary: #af4448 !default;
+$pink-secondary: #e57373 !default;
+$pink-tertiary: #ffc2c2 !default;
+$pink-quaternary: #ffe7e7 !default;
+
+$orange-primary: #bb4d00 !default;
+$orange-secondary: #ffad42 !default;
+$orange-tertiary: #ffe97d !default;
+$orange-quaternary: #fff4cf !default;
+
+$slate-primary: #29434e !default;
+$slate-secondary: #7e9ba5 !default;
+$slate-tertiary: #b6c6d2 !default;
+$slate-quaternary: #e2e8ed !default;
+
+$indigo-primary: #26418f !default;
+$indigo-secondary: #92a6dd !default;
+$indigo-tertiary: #dee8ff !default;
+$indigo-quaternary: #f2f6ff !default;
+
+$cyan-primary: #006778 !default;
+$cyan-secondary: #65b0bd !default;
+$cyan-tertiary: #cce5e9 !default;
+$cyan-quaternary: #ebf5f6 !default;
+
+$green-primary: #4b830d !default;
+$green-secondary: #84bc49 !default;
+$green-tertiary: #dcedc8 !default;
+$green-quaternary: #f1f8e9 !default;
+
+$amber-primary: #fbab18 !default;
+$amber-secondary: #ffd54f !default;
+$amber-tertiary: #ffecb3 !default;
+$amber-quaternary: #fff7e1 !default;

package/styles/v2/themes/index.scss

@@ -0,0 +1 @@
+@import "color-definitions";