@cdc/core 4.26.1 → 4.26.3

package/components/Layout/styles/editor.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/v2/utils/variables';
+@import '../../../styles/utils/properties';
 
 $editorAnimationTimer: 400ms;
 $mediumGray: #e6e6e6;
@@ -81,7 +81,7 @@ $mediumGray: #e6e6e6;
 
   @at-root {
     .cove-editor {
-      width: $editorWidth;
+      width: var(--editorWidth);
     }
   }
 }
@@ -127,8 +127,8 @@ $mediumGray: #e6e6e6;
   background-color: #e6e6e6;
   transition: background-color 400ms cubic-bezier(0.16, 1, 0.3, 1);
   overflow: hidden auto;
-  width: calc(100% - $editorWidth);
-  left: $editorWidth;
+  width: calc(100% - var(--editorWidth));
+  left: var(--editorWidth);
   @at-root {
     .cove-editor.panel-shown #{&} {
       background-color: #e7e7e7;

package/components/Legend/Legend.Gradient.tsx

@@ -99,7 +99,13 @@ const LegendGradient = ({
   if (style === 'gradient') {
     return (
       // TODO: figure out why bootstrap 'overflow: visible' is not working consistently
-      <svg className={'w-100 overflow-visible'} height={newHeight} style={{ overflow: 'visible' }} width={width}>
+      <svg
+        className={'w-100 overflow-visible'}
+        height={newHeight}
+        style={{ display: 'block', maxWidth: '100%', overflow: 'visible' }}
+        viewBox={`0 0 ${width} ${newHeight}`}
+        width='100%'
+      >
         {/* background border*/}
         <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill={BORDER_COLOR} />
         {/* Define the gradient */}

package/components/Loader/loader.styles.css

@@ -1,10 +1,10 @@
 .cove-loader {
   &.fullscreen {
     background: rgba(255, 255, 255, 0.8);
-    position: absolute;
-    width: 100%;
     display: flex;
     justify-content: center;
+    position: absolute;
+    width: 100%;
     z-index: 100;
     & > * {
       margin-top: 40vh;

package/components/Loading.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import '../styles/loading.scss'
+import './loading.scss'
 
 export default function Loading({ viewport = 'lg' }) {
   return (

package/components/MediaControls.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-// import html2pdf from 'html2pdf.js'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import { prepareScreenshotContainer } from '@cdc/core/helpers/prepareScreenshot'
@@ -162,6 +161,13 @@ const Button = ({
 }) => {
   const buttonClasses = ['btn', 'btn-primary']
 
+  const label =
+    type === 'csv'
+      ? state?.table?.downloadDataLabel || buttonText[type]
+      : type === 'image'
+        ? state?.table?.downloadImageLabel || buttonText[type]
+        : buttonText[type]
+
   return (
     <button
       className={buttonClasses.join(' ')}
@@ -169,7 +175,7 @@ const Button = ({
       onClick={() => generateMedia(state, type, elementToCapture, interactionLabel, includeContextInDownload)}
       style={{ lineHeight: '1.4em' }}
     >
-      {buttonText[type]}
+      {label}
     </button>
   )
 }
@@ -185,7 +191,8 @@ const DownloadLink = ({
 }) => {
   const vizType = state?.type === 'map' ? 'Map' : 'Chart'
   const format = type === 'pdf' ? 'PDF' : 'PNG'
-  const linkText = `Download ${vizType} (${format})`
+  const defaultLinkText = `Download ${vizType} (${format})`
+  const linkText = type === 'image' ? state?.table?.downloadImageLabel || defaultLinkText : defaultLinkText
 
   return (
     <a

package/components/MultiSelect/multiselect.styles.css

@@ -3,45 +3,45 @@
     display: block;
   }
   .wrapper {
-    display: inline-flex;
     align-items: center;
+    display: inline-flex;
     width: 100%;
     .selected {
       &[aria-disabled='true'] {
         background: var(--lightestGray);
       }
       border: 1px solid var(--lightGray);
-      padding: 7px;
+      border-radius: 5px;
+      display: inline-block;
       min-width: 200px;
+      padding: 7px;
       width: 100%;
-      display: inline-block;
       :is(button) {
-        border: none;
         background: none;
+        border: none;
       }
       :is(div) {
-        display: inline-block;
-        padding: 0 0 0 5px;
-        margin-right: 5px;
-        margin-bottom: 2px;
         background: var(--lightGray);
         border-radius: 5px;
+        display: inline-block;
+        margin-bottom: 2px;
+        margin-right: 5px;
+        padding: 0 0 0 5px;
       }
       .expand {
-        padding: 2px 0px;
-        margin-right: -6px;
+        color: var(--mediumGray);
         float: right;
         margin-bottom: -3px;
-        color: var(--mediumGray);
+        margin-right: -6px;
+        padding: 2px 0px;
         &:focus {
           outline: none;
         }
       }
-      border-radius: 5px;
     }
     .cove-tooltip__content {
-      position: absolute;
       min-width: 120px;
+      position: absolute;
       :is(p) {
         margin-bottom: 0;
       }
@@ -52,15 +52,15 @@
   }
   .dropdown {
     background: white;
-    position: absolute;
-    top: var(--select-height);
-    margin-top: 0px;
     border: 1px solid var(--lightGray);
-    padding-left: 0;
-    min-height: 40px;
+    margin-top: 0px;
     max-height: 200px;
-    overflow-y: scroll;
+    min-height: 40px;
     min-width: 200px;
+    overflow-y: scroll;
+    padding-left: 0;
+    position: absolute;
+    top: var(--select-height);
     z-index: 4;
 
     :is(li) {

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -1,4 +1,4 @@
-.cdc-dashboard-inner-container.cove-component__content.cove-dashboard-filters-container:has(
+.cdc-dashboard-inner-container.cove-visualization__body.cove-dashboard-filters-container:has(
     > .nested-dropdown.open-filter
   )
   :has(> .nested-dropdown-container) {
@@ -16,14 +16,14 @@
   }
 
   .search-input {
-    color: var(--cool-gray-90);
-    font-weight: 300;
 
     border: none;
-    position: relative;
+    color: var(--cool-gray-90);
     display: inline-block;
-    width: 100%;
+    font-weight: 300;
     padding: 0;
+    position: relative;
+    width: 100%;
     &::placeholder {
       color: var(--cool-gray-90);
     }
@@ -36,21 +36,21 @@
   [class^='main-nested-dropdown-container-'],
   .nested-dropdown-input-container {
     border: 1px solid var(--cool-gray-10);
+    font-size: 1em;
     min-width: 200px;
     padding: 0.4rem 0.75rem;
-    font-size: 1em;
   }
 
   [class^='selectable-item-'] {
+    font-weight: normal;
     list-style: none;
     padding-left: 20px;
     position: relative;
-    font-weight: normal;
     white-space: nowrap;
 
     & .check-mark {
-      position: absolute;
       left: 0px;
+      position: absolute;
     }
 
     &:hover {
@@ -59,16 +59,16 @@
   }
 
   .nested-dropdown-input-container {
-    display: block;
-    width: calc(100% + 7px);
     border-radius: 0.25rem;
+    display: block;
     position: relative;
+    width: calc(100% + 7px);
     & > span.list-arrow {
-      position: absolute;
-      top: 9px;
-      right: 9px;
       float: right;
       pointer-events: none;
+      position: absolute;
+      right: 9px;
+      top: 9px;
     }
 
     &.disabled {
@@ -80,12 +80,12 @@
   }
 
   & [class^='main-nested-dropdown-container-'] {
+    background: white;
     max-height: 375px;
+    min-width: 200px;
     overflow-y: auto;
     position: absolute;
     z-index: 3;
-    min-width: 200px;
-    background: white;
   }
 
   .hide {

package/components/PaletteSelector/PaletteSelector.css

@@ -7,12 +7,12 @@
 
 /* List item-based palette selector (used by maps) */
 .color-palette li {
-  width: 1.5em;
-  height: 1.5em;
+  border: rgba(0, 0, 0, 0.3) 3px solid;
+  cursor: pointer;
   display: inline-block;
+  height: 1.5em;
   margin-right: 0.5em;
-  cursor: pointer;
-  border: rgba(0, 0, 0, 0.3) 3px solid;
+  width: 1.5em;
 }
 
 .color-palette li.active {
@@ -33,25 +33,25 @@
 }
 
 .color-palette a {
-  display: inline-block;
   border-bottom: 1px solid rgba(0, 0, 0, 0.8);
+  display: inline-block;
 }
 
 /* Series list variant */
 .color-palette.series-list {
+  border: none;
   flex-direction: column;
   padding: 0;
-  border: none;
 }
 
 .color-palette.series-list li {
-  padding: 0.3em 0.5em;
-  display: flex;
   align-items: center;
+  border: 0;
+  display: flex;
+  height: auto;
   justify-content: space-between;
+  padding: 0.3em 0.5em;
   width: auto;
-  height: auto;
-  border: 0;
 }
 
 .color-palette.series-list li:not(:last-child) {
@@ -60,18 +60,18 @@
 
 /* Header variant */
 .header .color-palette li {
-  width: 1.5em;
-  height: 1.5em;
   display: inline-block;
+  height: 1.5em;
+  width: 1.5em;
 }
 
 /* Developer rollback component styles */
 .developer-palette-rollback {
-  margin: 8px 0;
-  padding: 8px;
+  background-color: #fffbf0;
   border: 1px dashed #ffc107;
   border-radius: 4px;
-  background-color: #fffbf0;
+  margin: 8px 0;
+  padding: 8px;
 }
 
 .developer-palette-rollback .rollback-info {

package/components/RichTooltip/richTooltip.css

@@ -1,16 +1,16 @@
 .tooltip-link {
+  color: var(--cool-gray-90);
+  cursor: pointer;
+  font-family: var(--app-font-main);
+  font-size: 0.833rem !important;
+  position: relative;
   text-decoration: underline;
   text-decoration-color: var(--cool-gray-90);
   text-decoration-style: dotted;
   text-decoration-thickness: 2px;
   text-underline-offset: 0.25rem;
-  position: relative;
-  cursor: pointer;
-  color: var(--cool-gray-90);
-  font-family: var(--app-font-main);
-  font-size: 0.833rem !important;
 }
 .tooltip-link:hover {
-  text-decoration-color: #009ec1;
   color: var(--cool-gray-90);
+  text-decoration-color: #009ec1;
 }

package/components/Table/table.styles.css

@@ -2,9 +2,9 @@
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
+  left: -10000px;
   overflow: hidden;
+  position: fixed;
   white-space: nowrap;
   width: 1px;
-  position: fixed;
-  left: -10000px;
 }

package/components/Waiting.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import '../styles/waiting.scss'
+import './waiting.scss'
 
 const styles = {
   position: 'relative',

package/components/_stories/CustomColorsEditor.stories.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import CustomColorsEditor from '../CustomColorsEditor/CustomColorsEditor'
+
+const meta: Meta<typeof CustomColorsEditor> = {
+  title: 'Components/Atoms/CustomColorsEditor',
+  component: CustomColorsEditor
+}
+
+export default meta
+type Story = StoryObj<typeof CustomColorsEditor>
+
+const fiftyColors = [
+  '#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231',
+  '#911eb4', '#42d4f4', '#f032e6', '#bfef45', '#fabed4',
+  '#469990', '#dcbeff', '#9a6324', '#fffac8', '#800000',
+  '#aaffc3', '#808000', '#ffd8b1', '#000075', '#a9a9a9',
+  '#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231',
+  '#911eb4', '#42d4f4', '#f032e6', '#bfef45', '#fabed4',
+  '#469990', '#dcbeff', '#9a6324', '#fffac8', '#800000',
+  '#aaffc3', '#808000', '#ffd8b1', '#000075', '#a9a9a9',
+  '#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00',
+  '#ffff33', '#a65628', '#f781bf', '#999999', '#66c2a5'
+]
+
+const Wrapper = ({ initialColors }: { initialColors: string[] }) => {
+  const [colors, setColors] = useState(initialColors)
+  return <CustomColorsEditor colors={colors} onChange={setColors} label='Custom Color Order' />
+}
+
+export const Default: Story = {
+  render: () => <Wrapper initialColors={['#3366cc', '#dc3912', '#ff9900']} />
+}
+
+export const FiftyColors: Story = {
+  render: () => <Wrapper initialColors={fiftyColors} />
+}

package/components/_stories/DataTable.stories.tsx

@@ -45,6 +45,7 @@ export const CityState: Story = {
     tabbingId: '#asdf',
     columns: CityStateExample.columns,
     applyLegendToRow: () => ['#000'],
+    getPatternForRow: () => null,
     displayGeoName
   },
   decorators: [

package/components/_stories/Filters.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Filters> = {
   component: Filters,
   decorators: [
     Story => (
-      <div className='cdc-open-viz-module'>
+      <div className='cove-visualization'>
         <Story />
       </div>
     )

package/components/_stories/styles.scss

@@ -1,5 +1,4 @@
 @import '../../styles/base.scss';
-@import '../../styles/_variables';
 @import '../../styles/_global.scss';
 
 

package/components/elements/Button.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import LoadSpin from '../ui/LoadSpin'
 
-import '../../styles/v2/components/button.scss'
+import './button.scss'
 
 const Button = ({
   style,

package/components/elements/Card.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import '../../styles/v2/components/card.scss'
+import './card.css'
 
 const Card = ({ children, className, ...attributes }) => {
   return (

package/{styles/v2/components → components/elements}/button.scss

@@ -1,6 +1,6 @@
 @use 'sass:color';
-@import '../utils/variables';
-@import '../themes/index';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
 
 :root {
   --cove-button-primary: var(--colors-blue-vivid-60);
@@ -29,7 +29,7 @@
   }
 }
 
-.cdc-open-viz-module button.cove-button {
+.cove-visualization button.cove-button {
   display: inline-block;
   position: relative;
   min-height: 2.125rem;
@@ -42,8 +42,8 @@
   border-radius: 6px;
   border: 0;
   outline: none;
-  transition: background-color 500ms $transition-expo-out, color 500ms $transition-expo-out,
-    border-color 500ms $transition-expo-out;
+  transition: background-color 500ms var(--transition-expo-out), color 500ms var(--transition-expo-out),
+    border-color 500ms var(--transition-expo-out);
 
   &.secondary {
     background-color: var(--cove-button-secondary);
@@ -70,6 +70,7 @@
   &:disabled {
     background-color: var(--cove-button-primary-disabled);
     color: var(--cove-button-primary-disabled-font-color);
+    border: none;
     cursor: not-allowed;
   }
 
@@ -140,7 +141,7 @@
 
 .cove-button__text {
   position: relative;
-  transition: width 500ms $transition-expo-out;
+  transition: width 500ms var(--transition-expo-out);
   align-self: stretch;
 
   .cove-button__text--loading {
@@ -157,7 +158,7 @@
     top: 0;
     left: 0;
     white-space: nowrap;
-    transition: all 500ms $transition-expo-out;
+    transition: all 500ms var(--transition-expo-out);
   }
 }
 
@@ -170,6 +171,6 @@
 .cove-button__text--loading,
 .cove-button__load-spin {
   white-space: nowrap;
-  transition: all 500ms $transition-expo-out;
+  transition: all 500ms var(--transition-expo-out);
   opacity: 0;
 }

package/components/inputs/InputCheckbox.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, memo } from 'react'
 import PropTypes from 'prop-types'
 
 import Check from '../../assets/icon-check.svg'
-import '../../styles/v2/components/input/index.scss'
+import './index.scss'
 
 const InputCheckbox = memo(
   ({

package/components/inputs/InputSelect.tsx

@@ -1,4 +1,4 @@
-import '../../styles/v2/components/input/index.scss'
+import './index.scss'
 
 interface InputProps {
   label?

package/components/inputs/InputText.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, memo } from 'react'
 import { useDebounce } from 'use-debounce'
 
-import '../../styles/v2/components/input/index.scss'
+import './index.scss'
 
 const InputText = memo(({ label, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', tooltip, placeholder, i = null, min = null, max = null, className, ...attributes }) => {
   const [value, setValue] = useState(stateValue)

package/components/inputs/InputToggle.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import '../../styles/v2/components/input/index.scss'
+import './index.scss'
 
 type InputSliderProps = {
   /** Add label to the input field */

package/{styles/v2/components/input → components/inputs}/_input-check-radio.scss

@@ -79,7 +79,7 @@
   background-color: #f4f4f4;
   border-radius: 3px;
   box-shadow: inset 0 0 0 1px #c4c4c4;
-  transition: all 150ms $transition-expo-out;
+  transition: all 150ms var(--transition-expo-out);
 }
 
 .cove-input__checkbox-check {
@@ -92,6 +92,6 @@
   fill: #fff;
   pointer-events: none;
   transform: translateY(-1px);
-  transition: all 250ms $transition-expo-out;
+  transition: all 250ms var(--transition-expo-out);
   opacity: 0;
 }

package/{styles/v2/components/input → components/inputs}/_input-group.scss

@@ -65,10 +65,10 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: $baseColor;
+  color: var(--baseColor);
   text-align: center;
   white-space: nowrap;
-  background-color: $lightestGray;
-  border: 1px solid $lightGray;
+  background-color: var(--lightestGray);
+  border: 1px solid var(--lightGray);
   border-radius: 0.1875rem;
 }

package/{styles/v2/components/input → components/inputs}/_input-slider.scss

@@ -167,7 +167,7 @@
   background-color: #fff;
   box-shadow: -2px 4px 10px -7px rgb(0 0 0);
   border-radius: 100%;
-  transition: all 200ms $transition-expo-out;
+  transition: all 200ms var(--transition-expo-out);
   z-index: 2;
 }
 
@@ -179,5 +179,5 @@
   height: 100%;
   background-color: #ccc;
   border-radius: 999px;
-  transition: all 200ms $transition-expo-out;
+  transition: all 200ms var(--transition-expo-out);
 }

package/{styles/v2/components/input → components/inputs}/_input.scss

@@ -6,14 +6,14 @@
   border-style: solid !important; // intentional use of !important for CDC
   border-color: #cbcbcb !important; // intentional use of !important for CDC
   border-radius: 0.1875rem;
-  transition: border-color 200ms $transition-expo-out;
+  transition: border-color 200ms var(--transition-expo-out);
   font-family: sans-serif;
-  color: $baseColor;
+  color: var(--baseColor);
   width: 100%;
   max-width: 100%;
 
   &::placeholder {
-    transition: opacity 400ms $transition-expo-out;
+    transition: opacity 400ms var(--transition-expo-out);
     color: #b3b3b3;
     opacity: 1;
   }
@@ -42,7 +42,7 @@
   display: inline-block;
   margin-bottom: 0.5rem;
   font-size: 0.75rem;
-  color: $baseColor;
+  color: var(--baseColor);
   text-transform: uppercase;
   user-select: none;
 }
@@ -52,7 +52,7 @@
   min-height: 140px;
   max-width: 100%;
   line-height: 1.5em;
-  color: $baseColor;
+  color: var(--baseColor);
 }
 
 .cove-input--hidden {

package/{styles/v2/components/input → components/inputs}/index.scss

@@ -1,5 +1,5 @@
-@import '../../utils/variables';
-@import '../../themes/index';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
 
 @import 'input';
 @import 'input-check-radio';

package/{styles → components}/loading.scss

@@ -21,7 +21,7 @@
   }
 }
 
-.cdc-open-viz-module .loading {
+.cove-visualization .loading {
   text-align: center;
   position: absolute;
   z-index: 3;