@cdc/core 4.26.2 → 4.26.3

package/components/Layout/components/VisualizationContent.test.tsx

@@ -0,0 +1,182 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import VisualizationContent from './VisualizationContent'
+
+describe('VisualizationContent', () => {
+  it('renders the standard inner, body, and body-wrap layers by default', () => {
+    const { container } = render(
+      <VisualizationContent innerClassName='inner-extra' bodyClassName='body-extra' bodyWrapClassName='wrap-extra'>
+        <div>Inner content</div>
+      </VisualizationContent>
+    )
+
+    const inner = container.querySelector('.cove-visualization__inner')
+    const body = container.querySelector('.cove-visualization__body')
+    const bodyWrap = container.querySelector('.cove-visualization__body-wrap')
+    const content = container.querySelector('.cove-visualization__content-section')
+
+    expect(inner).toHaveClass('inner-extra')
+    expect(body).toHaveClass('body-extra')
+    expect(bodyWrap).toHaveClass('wrap-extra')
+    expect(inner?.firstElementChild).toBe(body)
+    expect(body?.firstElementChild).toBe(bodyWrap)
+    expect(bodyWrap?.firstElementChild).toBe(content)
+    expect(screen.getByText('Inner content')).toBeInTheDocument()
+  })
+
+  it('renders header and footer outside the body wrapper', () => {
+    const { container } = render(
+      <VisualizationContent
+        header={<div data-testid='header'>Header</div>}
+        footer={<div data-testid='footer'>Footer</div>}
+      >
+        <div>Wrapped content</div>
+      </VisualizationContent>
+    )
+
+    expect(screen.getByTestId('header')).toBeInTheDocument()
+    expect(screen.getByTestId('footer')).toBeInTheDocument()
+    expect(container.querySelector('.cove-visualization__body-wrap')?.textContent).toContain('Wrapped content')
+  })
+
+  it('renders message content inside the body-wrap before the wrapped content', () => {
+    const { container } = render(
+      <VisualizationContent message={<div data-testid='message'>Message</div>}>
+        <div>Wrapped content</div>
+      </VisualizationContent>
+    )
+
+    const body = container.querySelector('.cove-visualization__body')
+    const messageLayer = container.querySelector('.cove-visualization__message')
+    const message = container.querySelector('.cove-visualization__message-section')
+    const bodyWrap = container.querySelector('.cove-visualization__body-wrap')
+    const content = container.querySelector('.cove-visualization__content-section')
+
+    expect(screen.getByTestId('message')).toBeInTheDocument()
+    expect(messageLayer).toBe(message)
+    expect(body?.firstElementChild).toBe(bodyWrap)
+    expect(bodyWrap?.firstElementChild).toBe(message)
+    expect(bodyWrap?.children[1]).toBe(content)
+  })
+
+  it('adds the shared no-subtext body state only when outer subtext is absent', () => {
+    const { container: withoutSubtext } = render(
+      <VisualizationContent header={<div>Header</div>} message={<div>Message</div>}>
+        <div>Wrapped content</div>
+      </VisualizationContent>
+    )
+    const { container: withSubtext } = render(
+      <VisualizationContent header={<div>Header</div>} subtext={<div>Subtext</div>}>
+        <div>Wrapped content</div>
+      </VisualizationContent>
+    )
+
+    expect(withoutSubtext.querySelector('.cove-visualization__body')).toHaveClass(
+      'cove-visualization__body--no-subtext'
+    )
+    expect(withSubtext.querySelector('.cove-visualization__body')).not.toHaveClass(
+      'cove-visualization__body--no-subtext'
+    )
+  })
+
+  it('applies custom classes to the message wrapper', () => {
+    const { container } = render(
+      <VisualizationContent message={<div data-testid='message'>Message</div>} messageClassName='introText mb-4'>
+        <div>Wrapped content</div>
+      </VisualizationContent>
+    )
+
+    const message = container.querySelector('.cove-visualization__message')
+
+    expect(message).toHaveClass('introText')
+    expect(message).toHaveClass('mb-4')
+  })
+
+  it('applies the introText wrapper class when requested', () => {
+    const { container } = render(
+      <VisualizationContent message={<div data-testid='message'>Message</div>} messageIsIntroText>
+        <div>Wrapped content</div>
+      </VisualizationContent>
+    )
+
+    const message = container.querySelector('.cove-visualization__message')
+
+    expect(message).toHaveClass('introText')
+  })
+
+  it('renders subtext content inside the body after the body-wrap', () => {
+    const { container } = render(
+      <VisualizationContent subtext={<div data-testid='subtext'>Subtext</div>}>
+        <div>Wrapped content</div>
+      </VisualizationContent>
+    )
+
+    const body = container.querySelector('.cove-visualization__body')
+    const bodyWrap = container.querySelector('.cove-visualization__body-wrap')
+    const subtext = container.querySelector('.cove-visualization__subtext-section')
+
+    expect(screen.getByTestId('subtext')).toBeInTheDocument()
+    expect(body?.firstElementChild).toBe(bodyWrap)
+    expect(body?.lastElementChild).toBe(subtext)
+    expect(subtext).not.toHaveClass('mt-4')
+    expect(subtext).not.toHaveClass('mb-4')
+    expect(subtext).not.toHaveAttribute('style')
+  })
+
+  it('renders body subtext content inside the body-wrap after the wrapped content', () => {
+    const { container } = render(
+      <VisualizationContent bodySubtext={<div data-testid='body-subtext'>Body Subtext</div>}>
+        <div>Wrapped content</div>
+      </VisualizationContent>
+    )
+
+    const bodyWrap = container.querySelector('.cove-visualization__body-wrap')
+    const content = container.querySelector('.cove-visualization__content-section')
+    const bodySubtext = container.querySelector('.cove-visualization__body-subtext-section')
+
+    expect(screen.getByTestId('body-subtext')).toBeInTheDocument()
+    expect(bodyWrap?.lastElementChild).toBe(bodySubtext)
+    expect(bodyWrap?.firstElementChild).toBe(content)
+    expect(bodySubtext).not.toHaveClass('mt-4')
+    expect(bodySubtext).not.toHaveClass('mb-4')
+    expect(bodySubtext).not.toHaveAttribute('style')
+  })
+
+  it('renders body footer content inside the body-wrap after body subtext', () => {
+    const { container } = render(
+      <VisualizationContent
+        bodySubtext={<div data-testid='body-subtext'>Body Subtext</div>}
+        bodyFooter={<div data-testid='body-footer'>Body Footer</div>}
+      >
+        <div>Wrapped content</div>
+      </VisualizationContent>
+    )
+
+    const bodyWrap = container.querySelector('.cove-visualization__body-wrap')
+    const content = container.querySelector('.cove-visualization__content-section')
+    const bodySubtext = container.querySelector('.cove-visualization__body-subtext-section')
+    const bodyFooter = container.querySelector('.cove-visualization__body-footer-section')
+
+    expect(screen.getByTestId('body-footer')).toBeInTheDocument()
+    expect(bodyWrap?.children[0]).toBe(content)
+    expect(bodyWrap?.children[1]).toBe(bodySubtext)
+    expect(bodyWrap?.lastElementChild).toBe(bodyFooter)
+  })
+
+  it('passes through non-class inner div props, including refs', () => {
+    const innerRef = React.createRef<HTMLDivElement>()
+
+    const { container } = render(
+      <VisualizationContent innerClassName='inner-extra' innerProps={{ 'aria-label': 'Visualization content', ref: innerRef }}>
+        <div>Inner content</div>
+      </VisualizationContent>
+    )
+
+    const inner = container.querySelector('.cove-visualization__inner')
+
+    expect(inner).toHaveAttribute('aria-label', 'Visualization content')
+    expect(inner).toHaveClass('inner-extra')
+    expect(innerRef.current).toBe(inner)
+  })
+})

package/components/Layout/components/VisualizationContent.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+type VisualizationContentInnerProps = Omit<React.ComponentPropsWithRef<'div'>, 'className'>
+
+type VisualizationContentProps = {
+  bodyFooter?: React.ReactNode
+  bodySubtext?: React.ReactNode
+  bodyClassName?: string
+  bodyWrapClassName?: string
+  children: React.ReactNode
+  filters?: React.ReactNode
+  footer?: React.ReactNode
+  header?: React.ReactNode
+  innerClassName?: string
+  innerProps?: VisualizationContentInnerProps
+  message?: React.ReactNode
+  messageClassName?: string
+  messageIsIntroText?: boolean
+  subtext?: React.ReactNode
+}
+
+const VisualizationContent = ({
+  bodyFooter,
+  bodySubtext,
+  bodyClassName,
+  bodyWrapClassName,
+  children,
+  filters,
+  footer,
+  header,
+  innerClassName,
+  innerProps,
+  message,
+  messageClassName,
+  messageIsIntroText,
+  subtext
+}: VisualizationContentProps) => {
+  const resolvedInnerClasses = ['cove-visualization__inner', innerClassName].filter(Boolean).join(' ')
+  const bodyClasses = ['cove-visualization__body', !subtext && 'cove-visualization__body--no-subtext', bodyClassName].filter(Boolean).join(' ')
+  const bodyWrapClasses = ['cove-visualization__body-wrap', bodyWrapClassName].filter(Boolean).join(' ')
+
+  return (
+    <div {...innerProps} className={resolvedInnerClasses}>
+      {header}
+      <div className={bodyClasses}>
+        <div className={bodyWrapClasses}>
+          {message ? (
+            <section
+              className={[
+                'cove-visualization__message',
+                'cove-visualization__message-section',
+                messageIsIntroText && 'introText',
+                messageClassName
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {message}
+            </section>
+          ) : null}
+          {filters ? <section className='cove-visualization__filters-section'>{filters}</section> : null}
+          <section className='cove-visualization__content-section'>{children}</section>
+          {bodySubtext ? (
+            <section className='cove-visualization__body-subtext-section'>{bodySubtext}</section>
+          ) : null}
+          {bodyFooter ? <section className='cove-visualization__body-footer-section'>{bodyFooter}</section> : null}
+        </div>
+        {subtext ? <section className='cove-visualization__subtext-section'>{subtext}</section> : null}
+      </div>
+      {footer}
+    </div>
+  )
+}
+
+export default VisualizationContent

package/components/Layout/index.tsx

@@ -1,11 +1,11 @@
 import Responsive from './components/Responsive'
 import Sidebar from './components/Sidebar'
+import VisualizationContainer from './components/VisualizationContainer'
+import VisualizationContent from './components/VisualizationContent'
 import VisualizationWrapper from './components/Visualization'
 
-const Layout = {
-  Responsive,
-  Sidebar,
-  VisualizationWrapper
-}
+export { Responsive, Sidebar, VisualizationContainer, VisualizationContent, VisualizationWrapper }
 
+/** @deprecated Use named imports instead: `import { Responsive, Sidebar, VisualizationContainer, VisualizationContent } from '@cdc/core/components/Layout'` */
+const Layout = { Responsive, Sidebar, VisualizationContainer, VisualizationContent, VisualizationWrapper }
 export default Layout

package/components/Layout/styles/editor-utils.scss

@@ -1,7 +1,7 @@
 $editorAnimationTimer: 400ms;
 $primary: #3e92d5;
 
-.cdc-open-viz-module .cove-editor-utils__hotkeys {
+.cove-visualization .cove-editor-utils__hotkeys {
   display: inline-flex;
   flex-flow: row nowrap;
   position: fixed;
@@ -54,7 +54,7 @@ $primary: #3e92d5;
   }
 }
 
-.cdc-open-viz-module .cove-editor-utils__breakpoints {
+.cove-visualization .cove-editor-utils__breakpoints {
   position: fixed;
   bottom: 5rem;
   right: 4rem;
@@ -97,7 +97,7 @@ $primary: #3e92d5;
   list-style: none;
 }
 
-.cdc-open-viz-module .cove-editor-utils__breakpoints-item {
+.cove-visualization .cove-editor-utils__breakpoints-item {
   display: block;
   position: relative;
   margin-right: 1rem;

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

@@ -161,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(' ')}
@@ -168,7 +175,7 @@ const Button = ({
       onClick={() => generateMedia(state, type, elementToCapture, interactionLabel, includeContextInDownload)}
       style={{ lineHeight: '1.4em' }}
     >
-      {buttonText[type]}
+      {label}
     </button>
   )
 }
@@ -184,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',