@cdc/core 4.24.9 → 4.24.10

package/styles/_reset.scss

@@ -1,6 +1,7 @@
 .cdc-open-viz-module {
   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: 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;
@@ -69,14 +70,7 @@
   form,
   label,
   legend,
-  table,
   caption,
-  tbody,
-  tfoot,
-  thead,
-  tr,
-  th,
-  td,
   article,
   aside,
   canvas,
@@ -146,11 +140,4 @@
       half as far down as the superscript moved up */
     bottom: -0.25em;
   }
-
-  ul > li:first-child {
-    margin-top: auto;
-  }
-  ul > li:last-of-type {
-    margin-bottom: auto;
-  }
 }

package/styles/base.scss

@@ -71,7 +71,6 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   @include breakpointClass(md) {
     font-size: 16px !important;
   }
-  @import 'data-table';
   @import 'global';
   @import 'button-section';
   @import 'series-list';

package/styles/cove-main.scss

@@ -0,0 +1,6 @@
+@import 'base';
+@import 'heading-colors';
+@import 'v2/themes/color-definitions';
+@import 'variables';
+@import 'v2/components/ui/tooltip';
+@import 'v2/main.scss'

package/styles/filters.scss

@@ -5,6 +5,12 @@
     gap: 7px 15px;
     margin-top: 15px;
     margin-bottom: 15px;
+    label {
+      display: inherit;
+      margin-bottom: 5px;
+      font-weight: 600;
+      font-size: 16px;
+    }
   }
 
   &__intro-text {
@@ -28,10 +34,6 @@ section.filters-section {
   border-radius: 10px;
   margin-bottom: 10px;
   display: block !important;
-
-  &.legend_visible_top {
-    margin-bottom: 0px;
-  }
 }
 
 div.single-filters {

package/styles/v2/components/ui/tooltip.scss

@@ -95,56 +95,58 @@
   }
 }
 
-.cove-tooltip__content {
-  max-width: var(--cove-tooltip-maxWidth);
-  padding: 10px 8px;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  text-align: left;
-  color: var(--cove-tooltip-color);
-  background-color: var(--cove-tooltip-bg);
-  border-radius: 5px;
-  user-select: none;
-  cursor: default;
-  z-index: 1;
-
-  &.place-top {
-    &.has-shadow {
-      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
+.react-tooltip {
+  &.cove-tooltip__content {
+    max-width: var(--cove-tooltip-maxWidth);
+    padding: 10px 8px;
+    font-size: 0.875rem;
+    line-height: 1.125rem;
+    text-align: left;
+    color: var(--cove-tooltip-color);
+    background-color: var(--cove-tooltip-bg);
+    border-radius: 5px;
+    user-select: none;
+    cursor: default;
+    z-index: 1;
+
+    &.place-top {
+      &.has-shadow {
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
 
-    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-btt var(--cove-tooltip-animation);
+      &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+        animation: tooltip-btt var(--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);
-    }
+    &.place-right {
+      &.has-shadow {
+        box-shadow: -4px 4px 14px rgba(0, 0, 0, 0.15), -4px 4px 8px rgba(0, 0, 0, 0.1);
+      }
 
-    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-ltr var(--cove-tooltip-animation);
+      &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+        animation: tooltip-ltr var(--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);
-    }
+    &.place-bottom {
+      &.has-shadow {
+        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.1);
+      }
 
-    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-ttb var(--cove-tooltip-animation);
+      &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+        animation: tooltip-ttb var(--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);
-    }
+    &.place-left {
+      &.has-shadow {
+        box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15), 4px 4px 8px rgba(0, 0, 0, 0.1);
+      }
 
-    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-rtl var(--cove-tooltip-animation);
+      &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+        animation: tooltip-rtl var(--cove-tooltip-animation);
+      }
     }
   }
 }

package/styles/v2/layout/_component.scss

@@ -1,10 +1,8 @@
 .cove-component {
   border-radius: 3px;
-  // box-shadow: rgba(0, 0, 0, 0.2) 3px 6px 10px; // no box shadows
 }
 
 .cove-component__content {
-  padding-top: 1rem;
   border: solid 1px #ccc;
   border-top: none;
   border-radius: 0 0 3px 3px;
@@ -13,10 +11,6 @@
     border: none !important;
   }
 
-  // .cdc-data-bite-inner-container:not(.component--has-title) .cove-component__content:not(.no-borders) {
-  //   border-top: 1px solid #ccc;
-  // }
-
   .cove-component__content:not(.component--hideBackgroundColor) {
     background: $lightestGray;
   }

package/styles/v2/layout/index.scss

@@ -1,5 +1,4 @@
 @import 'alert';
 @import 'component';
-@import 'data-table';
 @import 'progression';
 @import 'tooltip';

package/types/Axis.ts

@@ -20,6 +20,7 @@ export type Axis = {
   label?: string
   labelOffset?: number
   labelPlacement?: string
+  labelsAboveGridlines?: boolean
   manual?: boolean
   manualStep?: number
   max?: string
@@ -39,6 +40,7 @@ export type Axis = {
   sortKey?: string
   showTargetLabel?: boolean
   size?: number
+  showYearsOnce?: boolean
   target?: number
   targetLabel?: string
   tickRotation?: number

package/types/General.ts

@@ -8,6 +8,7 @@ export type General = {
   allowMapZoom?: boolean
   showMissingDataLabel: boolean
   showSuppressedSymbol: boolean
+  showZeroValueData: boolean
   showAnnotationDropdown?: boolean
   hideNullValue: boolean
   title: string

package/types/Table.ts

@@ -1,6 +1,6 @@
 type Pivot = {
   columnName: string
-  valueColumn: string
+  valueColumns: string[]
 }
 
 export type Table = {
@@ -23,6 +23,7 @@ export type Table = {
   show?: boolean
   showDataTableLink?: boolean
   showDownloadImgButton?: boolean
+  showDownloadLinkBelow?: boolean
   showDownloadPdfButton?: boolean
   showDownloadUrl?: boolean
   showVertical?: boolean

package/types/Visualization.ts

@@ -28,6 +28,8 @@ type DeprecatedVisualizationType = {
   legend: Legend
   multiDashboards?: any[]
   newViz: boolean
+  isResponsiveTicks: boolean
+  barThickness: string
   openModal: boolean
   orientation: 'vertical' | 'horizontal'
   originalFormattedData: any
@@ -36,7 +38,17 @@ type DeprecatedVisualizationType = {
   table: Table
   theme: string
   title: string
-  type: 'dashboard' | 'chart' | 'footnotes' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'table' | 'navigation'
+  type:
+    | 'dashboard'
+    | 'chart'
+    | 'footnotes'
+    | 'map'
+    | 'data-bite'
+    | 'waffle-chart'
+    | 'markup-include'
+    | 'filtered-text'
+    | 'table'
+    | 'navigation'
   usesSharedFilter: any
   visualizationSubType: string
   visualizationType: string

package/types/VizFilter.ts

@@ -2,6 +2,7 @@ export type OrderBy = 'asc' | 'desc' | 'cust'
 
 export type FilterBase = {
   columnName: string
+  orderedValues?: string[]
   values: string[]
   showDropdown: boolean
   id: number
@@ -18,7 +19,7 @@ export type VizFilterStyle =
   | 'nested-dropdown'
 export type GeneralFilter = FilterBase & {
   active: string
-  queuedActive: string
+  queuedActive: string | string[]
   filterStyle: VizFilterStyle
   label: string
   order: OrderBy

package/components/DataTable/components/Icons.tsx

@@ -1,10 +0,0 @@
-export const UpIcon = () => (
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
-    <path d='M0 5l5-5 5 5z' />
-  </svg>
-)
-export const DownIcon = () => (
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
-    <path d='M0 0l5 5 5-5z' />
-  </svg>
-)

package/components/_stories/EditorPanel.stories.tsx

@@ -1,54 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-
-import DataTableEditor from '../EditorPanel/DataTableEditor'
-import { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
-import { useState } from 'react'
-
-const EditorPanel = () => {
-  const { config, isDashboard } = Primary.args
-  const [_config, setConfig] = useState(config)
-  const updateField = (section, subsection, fieldName, value) => {
-    setConfig({
-      ..._config,
-      [section]: {
-        ..._config[section],
-        [fieldName]: value
-      }
-    })
-  }
-  return (
-    <Accordion>
-      <AccordionItem>
-        <AccordionItemHeading>
-          <AccordionItemButton>Data Table</AccordionItemButton>
-        </AccordionItemHeading>
-        <AccordionItemPanel>
-          <DataTableEditor config={_config} isDashboard={isDashboard} updateField={updateField} isLoadedFromUrl={false} />
-        </AccordionItemPanel>
-      </AccordionItem>
-    </Accordion>
-  )
-}
-
-const meta: Meta<typeof DataTableEditor> = {
-  title: 'Components/Organisms/EditorPanel',
-  component: EditorPanel
-}
-
-export default meta
-
-type Story = StoryObj<typeof DataTableEditor>
-
-export const Primary: Story = {
-  args: {
-    config: {
-      table: {
-        label: 'Data Table',
-        show: true
-      },
-      columns: {},
-      visualizationType: 'Pie'
-    },
-    isDashboard: true
-  }
-}

package/components/_stories/Layout.Debug.stories.tsx

@@ -1,91 +0,0 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import './styles.scss'
-import CdcChart from '@cdc/chart'
-import CdcMap from '@cdc/map'
-import CdcMarkupInclude from '@cdc/markup-include'
-import CdcFilteredText from '@cdc/filtered-text'
-import CdcDashboard from '@cdc/dashboard'
-import CdcWaffleChart from '@cdc/waffle-chart'
-import config from './../../../chart/src/_stories/_mock/bar-chart-suppressed.json'
-import mapConfig from './../../../map/examples/default-usa.json'
-import markupConfig from './../../../markup-include/src/data/initial-state.js'
-import filteredTextConfig from './_mocks/filtered-text-config.json'
-import waffleChartConfig from './../../../waffle-chart/examples/gallery/count.json'
-import dashboardConfig from './../../../dashboard/examples/full-dashboard.json'
-
-// Determine the component based on config.type
-const getComponent = config => {
-  switch (config.type) {
-    case 'map':
-      return CdcMap
-    case 'chart':
-      return CdcChart
-    case 'markup-include':
-      return CdcMarkupInclude
-    case 'waffle-chart':
-      return CdcWaffleChart
-    case 'dashboard':
-      return CdcDashboard
-    default:
-      return () => <div>Unknown component type</div>
-  }
-}
-
-const meta = {
-  title: 'Components/Templates/Layout/Debug',
-  component: args => {
-    const Component = getComponent(args.config)
-    return (
-      <div className=''>
-        <Component {...args} />
-      </div>
-    )
-  }
-} as Meta
-
-export default meta
-
-type Story = StoryObj
-
-export const Chart: Story = {
-  args: {
-    config,
-    isEditor: true
-  }
-}
-
-export const Map: Story = {
-  args: {
-    config: mapConfig,
-    isEditor: true
-  }
-}
-
-export const MarkupInclude: StoryObj<typeof CdcMarkupInclude> = {
-  args: {
-    config: markupConfig,
-    isEditor: true
-  }
-}
-
-export const WaffleChart: StoryObj<typeof CdcWaffleChart> = {
-  args: {
-    config: waffleChartConfig,
-    isEditor: true
-  }
-}
-
-export const Dashboard: StoryObj<typeof CdcDashboard> = {
-  args: {
-    config: dashboardConfig,
-    isEditor: true
-  }
-}
-
-// export const WaffleChart: StoryObj<typeof CdcWaffleChart> = {
-//   args: {
-//     config: waffleChartConfig,
-//     isEditor: true
-//   }
-// }