@cdc/core 4.24.3 → 4.24.5

package/components/Layout/components/Sidebar/index.tsx

@@ -0,0 +1,3 @@
+import Sidebar from './components/Sidebar'
+
+export default Sidebar

package/components/Layout/components/Visualization/index.tsx

@@ -0,0 +1,81 @@
+// main visualization wrapper
+import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import React, { forwardRef, useRef } from 'react'
+import { Config as DataBiteConfig } from '@cdc/data-bite/src/types/Config'
+import './visualizations.scss'
+import { Config as WaffleChartConfig } from '@cdc/waffle-chart/src/types/Config'
+import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
+
+type VisualizationWrapper = {
+  children: React.ReactNode
+  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig
+  currentViewport: string
+  imageId: string
+  isEditor: boolean
+  showEditorPanel: boolean
+}
+
+const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {
+  const { config = {}, isEditor = false, currentViewport = 'lg', imageId = '', showEditorPanel = true } = props
+
+  const getWrappingClasses = () => {
+    let classes = ['cdc-open-viz-module', `${currentViewport}`, `font-${config?.fontSize}`, `${config?.theme}`]
+    isEditor && classes.push('spacing-wrapper')
+    isEditor && classes.push('isEditor')
+
+    if (isEditor && showEditorPanel) {
+      classes = classes.filter(item => item !== 'editor-panel--hidden')
+      classes.push('editor-panel--visible')
+    }
+
+    if (isEditor && !showEditorPanel) {
+      classes = classes.filter(item => item !== 'editor-panel--visible')
+      classes.push('editor-panel--hidden')
+    }
+
+    if (config.type === 'chart') {
+      classes.push('type-chart')
+      config?.visualizationType === 'Spark Line' && classes.push(`type-sparkline`)
+      return classes
+    }
+    if (config.type === 'map') {
+      classes.push(`type-map`)
+    }
+
+    if (config.type === 'data-bite') {
+      classes.push('cdc-open-viz-module', 'type-data-bite', currentViewport, config.theme, `font-${config.fontSize}`)
+      if (isEditor) {
+        classes.push('is-editor')
+      }
+    }
+
+    if (config.type === 'markup-include') {
+      classes.push('markup-include', 'cdc-open-viz-module')
+    }
+
+    if (config.type === 'waffle-chart') {
+      classes.push('cove', 'cdc-open-viz-module', 'type-waffle-chart', currentViewport, config.theme, 'font-' + config.overallFontSize)
+
+      if (isEditor) {
+        classes.push('is-editor')
+      }
+
+      classes.push('cove-component', 'waffle-chart')
+    }
+    return classes
+  }
+
+  return (
+    // prettier-ignore
+    <div
+      {...(config.type === 'chart' ? { 'data-lollipop': config.isLollipopChart } : {})}
+      className={getWrappingClasses().join(' ')}
+      data-download-id={imageId}
+      ref={ref}
+    >
+      {props.children}
+    </div>
+  )
+})
+
+export default Visualization

package/components/Layout/components/Visualization/visualizations.scss

@@ -0,0 +1,33 @@
+.cdc-open-viz-module.isEditor {
+  overflow: auto;
+  display: grid;
+  transition: grid-template-columns 400ms ease-in-out;
+
+  .editor-panel__toggle {
+    transition: left 400ms ease-in-out;
+  }
+
+  .sidebar {
+    transition: left 400ms ease-in-out;
+  }
+
+  &.editor-panel--visible {
+    grid-template-areas: 'panel content';
+    grid-template-columns: 350px calc(100% - 350px);
+  }
+
+  &.editor-panel--hidden {
+    grid-template-areas: 'panel content';
+    grid-template-columns: 0px 100%;
+  }
+
+  .cove-editor__content,
+  .cove-component__content {
+    grid-area: content;
+    position: relative;
+    left: 0;
+    width: 100% !important;
+    padding-left: 0px !important;
+    grid-area: content;
+  }
+}

package/components/Layout/index.tsx

@@ -0,0 +1,11 @@
+import Responsive from './components/Responsive'
+import Sidebar from './components/Sidebar'
+import VisualizationWrapper from './components/Visualization'
+
+const Layout = {
+  Responsive,
+  Sidebar,
+  VisualizationWrapper
+}
+
+export default Layout

package/components/Layout/styles/editor-grid-view.scss

@@ -0,0 +1,156 @@
+.cove-editor__grid-caret--bottom {
+  @at-root {
+    .cove-editor__content[data-grid] #{&}::before,
+    .cove-editor__content[data-grid] #{&}::after {
+      content: '';
+      display: block;
+      position: absolute;
+      bottom: -20px;
+      width: 14px;
+      height: 14px;
+      border-color: #949da4;
+      border-style: solid;
+      border-width: 0;
+      transition: opacity $editorAnimationTimer ease;
+      opacity: 1;
+    }
+
+    .cove-editor__content[data-grid] #{&}::before {
+      left: -20px;
+      border-top-width: 2px;
+      border-right-width: 2px;
+    }
+
+    .cove-editor__content[data-grid] #{&}::after {
+      right: -20px;
+      border-top-width: 2px;
+      border-left-width: 2px;
+    }
+
+    .cove-editor.panel-shown #{&}::before,
+    .cove-editor.panel-shown #{&}::after {
+      opacity: 1;
+    }
+  }
+}
+
+.cove-editor__grid-caret--top {
+  @at-root {
+    .cove-editor__content[data-grid] #{&}::before,
+    .cove-editor__content[data-grid] #{&}::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: -20px;
+      width: 14px;
+      height: 14px;
+      border-color: #949da4;
+      border-style: solid;
+      border-width: 0;
+      transition: opacity $editorAnimationTimer ease;
+      opacity: 1;
+    }
+
+    .cove-editor__content[data-grid] #{&}::before {
+      left: -20px;
+      border-right-width: 2px;
+      border-bottom-width: 2px;
+    }
+
+    .cove-editor__content[data-grid] #{&}::after {
+      right: -20px;
+      border-bottom-width: 2px;
+      border-left-width: 2px;
+    }
+
+    .cove-editor.panel-shown #{&}::before,
+    .cove-editor.panel-shown #{&}::after {
+      opacity: 1;
+    }
+  }
+}
+
+.cove-editor__content-wrap--x {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  min-width: 35rem;
+  max-width: 50%;
+  min-height: 100vh;
+  margin-right: auto;
+  margin-left: auto;
+  transition: max-width $editorAnimationTimer cubic-bezier(0.16, 1, 0.3, 1);
+
+  @at-root {
+    .cove-dashboard #{&} {
+      min-height: calc(100vh - 3rem);
+    }
+
+    .cove-tabs #{&} {
+      // min-height: calc(100vh - #{$wizardTabsHeight});
+    }
+
+    .cove-editor__content[data-grid] #{&}::before,
+    .cove-editor__content[data-grid] #{&}::after {
+      content: '';
+      width: 1px;
+      height: 100%;
+      top: 0;
+      display: block;
+      position: absolute;
+      background-image: repeating-linear-gradient(0deg, #949da4, #949da4 18px, transparent 18px, transparent 26px);
+      transition: opacity $editorAnimationTimer ease;
+      opacity: 1;
+    }
+
+    .cove-editor.panel-shown #{&}::before,
+    .cove-editor.panel-shown #{&}::after {
+      opacity: 1;
+    }
+
+    .cove-editor__content[data-grid] #{&}::before {
+      left: -1px;
+    }
+
+    .cove-editor__content[data-grid] #{&}::after {
+      right: -1px;
+    }
+  }
+}
+
+.cove-editor__content-wrap--y {
+  position: relative;
+  width: 100%;
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+
+  @at-root {
+    .cove-editor__content[data-grid] #{&}::before,
+    .cove-editor__content[data-grid] #{&}::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 50%;
+      width: 100vw;
+      height: 1px;
+      background-image: repeating-linear-gradient(90deg, #949da4, #949da4 18px, transparent 18px, transparent 26px);
+      transform: translateX(-50%);
+      transition: opacity $editorAnimationTimer ease;
+      opacity: 1;
+    }
+
+    .cove-editor.panel-shown #{&}::before,
+    .cove-editor.panel-shown #{&}::after {
+      opacity: 1;
+    }
+
+    .cove-editor__content[data-grid] #{&}::before {
+      top: -1px;
+    }
+
+    .cove-editor__content[data-grid] #{&}::after {
+      bottom: -1px;
+    }
+  }
+}

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

@@ -0,0 +1,197 @@
+$editorAnimationTimer: 400ms;
+$primary: #3e92d5;
+
+.cdc-open-viz-module .cove-editor-utils__hotkeys {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  position: fixed;
+  bottom: 5rem;
+  left: 24rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: #a0a9b0;
+  background-color: #fff;
+  box-shadow: 5px 5px 10px 0 rgb(0 0 0 / 15%);
+  border-radius: 0.375rem;
+  transition: opacity $editorAnimationTimer ease, background-color 0s linear $editorAnimationTimer;
+  user-select: none;
+
+  &--left,
+  &--right {
+    > * {
+      transition: color 150ms ease;
+    }
+  }
+
+  &--left {
+    margin-right: 0.5rem;
+    font-weight: bold;
+    text-align: right;
+  }
+
+  &--right {
+    font-style: italic;
+
+    > * {
+      display: flex;
+    }
+  }
+
+  .hotkey--active {
+    color: #3e92d5;
+  }
+
+  @at-root {
+    .cove-editor:not(.panel-shown) #{&} {
+      opacity: 0;
+      transition: opacity $editorAnimationTimer ease, background-color 0s linear;
+    }
+
+    .cove-editor.panel-shown #{&} {
+      background-color: rgb(231 231 231 / 80%);
+      opacity: 1;
+    }
+  }
+}
+
+.cdc-open-viz-module .cove-editor-utils__breakpoints {
+  position: fixed;
+  bottom: 5rem;
+  right: 4rem;
+  padding: 0.5rem 1rem;
+  background-color: #fff;
+  border-radius: 999px;
+  box-shadow: 5px 5px 10px 0 rgb(0 0 0 / 15%);
+  user-select: none;
+
+  button {
+    padding: 0;
+    background: transparent;
+  }
+
+  @at-root {
+    .cove-editor:not(.panel-shown) #{&} {
+      animation: editorUtilsDown $editorAnimationTimer ease forwards;
+    }
+
+    .cove-editor.panel-shown #{&} {
+      animation: editorUtilsUp $editorAnimationTimer ease forwards;
+    }
+  }
+}
+
+.cove-editor-utils__breakpoints--px {
+  display: block;
+  position: absolute;
+  top: -2rem;
+  width: 100%;
+  font-size: 0.875rem;
+  text-align: center;
+  color: #949da4;
+}
+
+.cove-editor-utils__breakpoints-list {
+  display: flex;
+  padding-left: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.cdc-open-viz-module .cove-editor-utils__breakpoints-item {
+  display: block;
+  position: relative;
+  margin-right: 1rem;
+  font-size: 0.875em;
+  color: $primary;
+  transition-property: border, color, transform;
+  cursor: pointer;
+
+  &:last-of-type {
+    margin-right: 0;
+  }
+
+  &:not(:last-of-type) {
+    &::after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      width: 1px;
+      height: 100%;
+      margin-left: 0.5rem;
+      background-color: #d3d3d3;
+      pointer-events: none;
+    }
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: -1px;
+    left: 0;
+    height: 2px;
+    border-bottom: 2px dotted transparent;
+    transition-property: border;
+    pointer-events: none;
+  }
+
+  &.active::before {
+    border-bottom: 2px dotted #88c3ea;
+  }
+
+  > .cove-editor-utils__breakpoints-grid {
+    display: inline-flex;
+    height: 1.25rem;
+    padding-right: 0.125rem;
+    padding-left: 0.25rem;
+  }
+
+  > .cove-editor-utils__breakpoints-reset {
+    display: inline-flex;
+    height: 1.25rem;
+  }
+
+  @at-root {
+    //Gray out
+    .cove-editor-utils__breakpoints-list #{&} .cove-editor-utils__breakpoints-grid {
+      color: #b4b4b4;
+    }
+
+    .cove-editor-utils__breakpoints-list:hover #{&},
+    .cove-editor-utils__breakpoints-list.has-active #{&}:not(.active) {
+      color: #888;
+    }
+
+    //Colored
+    .cove-editor__content[data-grid='true'] #{&} .cove-editor-utils__breakpoints-grid,
+    .cove-editor-utils__breakpoints-list.has-active #{&} .cove-editor-utils__breakpoints-reset {
+      color: $primary !important;
+    }
+
+    .cove-editor-utils__breakpoints-list:hover #{&}.active,
+    .cove-editor-utils__breakpoints-list #{&}:hover,
+    .cove-editor-utils__breakpoints-list #{&}:hover .cove-editor-utils__breakpoints-grid,
+    .cove-editor-utils__breakpoints-list.has-active #{&}:hover {
+      color: $primary;
+    }
+  }
+}
+
+@keyframes editorUtilsUp {
+  0% {
+    bottom: -3rem;
+  }
+  100% {
+    bottom: 2rem;
+  }
+}
+
+@keyframes editorUtilsDown {
+  0% {
+    bottom: 2rem;
+  }
+  100% {
+    bottom: -3rem;
+  }
+}

package/components/Layout/styles/editor.scss

@@ -0,0 +1,144 @@
+$editorAnimationTimer: 400ms;
+$editorWidth: 350px;
+$mediumGray: #e6e6e6;
+
+@import 'editor-grid-view.scss';
+
+.cdc-open-viz-module.isEditor {
+  background: $mediumGray !important;
+}
+
+// .cdc-open-viz-module .form-container {
+//   height: 100%;
+// }
+
+.cove-editor {
+  display: grid;
+  grid-template-areas: 'panel content';
+  grid-template-columns: auto 1fr;
+  position: relative;
+  height: 100vh;
+  max-height: 100%;
+  overflow: hidden;
+  isolation: isolate;
+
+  @at-root {
+    .cove-dashboard #{&} {
+      height: calc(100vh - 3rem);
+    }
+
+    .cove-tabs #{&} {
+      // height: calc(100vh - #{$wizardTabsHeight});
+    }
+  }
+}
+
+.cove-editor__toggle {
+  position: absolute;
+  top: 0.5rem;
+  left: 309px;
+  width: 1.5rem;
+  height: 1.5rem;
+  color: #000;
+  background-color: #f2f2f2;
+  border: 0;
+  border-radius: 999px;
+  transition: left 300ms ease 60ms, background-color 200ms ease;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
+  user-select: none;
+  cursor: pointer;
+  z-index: 8;
+
+  &:before {
+    content: '\00ab';
+    position: absolute;
+    top: 46%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    user-select: none;
+  }
+
+  &.collapsed {
+    left: 1rem;
+    margin-left: 0;
+
+    &:before {
+      content: '\00bb';
+    }
+  }
+
+  &:hover {
+    background-color: #fff;
+  }
+}
+
+.cove-editor__panel {
+  grid-area: panel;
+  position: relative;
+  width: 0;
+  max-height: 100vh;
+  // padding-top: 2.5rem;
+  background-color: #fff;
+  //border-right: 1px solid #c2c2c2;
+  transition: width $editorAnimationTimer ease;
+  overflow: hidden;
+  box-shadow: 1px 0 0 rgb(0 0 0 / 15%);
+  z-index: 7;
+
+  @at-root {
+    .cove-editor {
+      width: $editorWidth;
+    }
+  }
+}
+
+// .cove-editor__panel-heading {
+//   box-sizing: border-box;
+//   position: absolute;
+//   top: 0;
+//   right: 0;
+//   width: $editorWidth;
+//   padding: 0.5rem 1.125rem;
+//   margin: 0;
+//   font-size: 1.125em;
+//   line-height: 1.5rem;
+//   color: #fff;
+//   background-color: $mediumGray;
+//   user-select: none;
+//   z-index: 1;
+// }
+
+// .cove-editor__panel-container {
+//   float: right;
+//   width: $editorWidth - 1px;
+//   min-width: $editorWidth - 1px;
+//   height: 100%;
+//   overflow: hidden auto;
+// }
+
+.cove-editor__divider {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 0;
+  border-top: 1px solid #e2e2e2;
+}
+
+.cove-editor__content {
+  display: flex;
+  position: relative;
+  height: 100vh;
+  grid-area: content;
+  justify-content: center;
+  position: relative;
+  background-color: #e6e6e6;
+  transition: background-color 400ms cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden auto;
+  width: calc(100% - $editorWidth);
+  left: $editorWidth;
+  @at-root {
+    .cove-editor.panel-shown #{&} {
+      background-color: #e7e7e7;
+    }
+  }
+}

package/components/LegendCircle.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 
-export default function LegendCircle({ fill, borderColor, display = 'inline-block' }) {
+export default function LegendCircle({ fill, borderColor, display = 'inline-block', viewport }) {
+  const dimensions = ['sm', 'xs', 'xxs'].includes(viewport) ? { width: '0.7em', height: '0.7em' } : { width: '1em', height: '1em' }
   const styles = {
     marginRight: '5px',
     borderRadius: '300px',
     verticalAlign: 'middle',
     display: display,
-    height: '1em',
-    width: '1em',
+    height: dimensions.height || '1em',
+    width: dimensions.width || '1em',
     border: borderColor ? `${borderColor}  1px solid` : 'rgba(0,0,0,.3) 1px solid',
     backgroundColor: fill
   }

package/components/MediaControls.jsx

@@ -59,7 +59,7 @@ const generateMedia = (state, type, elementToCapture) => {
 
   switch (type) {
     case 'image':
-      html2canvas(baseSvg, {foreignObjectRendering: true, x: -1 * (window.pageXOffset + baseSvg.getBoundingClientRect().left), y: -1 * (window.pageYOffset + baseSvg.getBoundingClientRect().top)}).then(canvas => {
+      html2canvas(baseSvg, {ignoreElements: el => el.className?.indexOf && el.className.search(/download-buttons|download-links|data-table-container/) !== -1}).then(canvas => {
         saveImageAs(canvas.toDataURL(), filename + '.png')
       })
       return

package/components/Table/Table.tsx

@@ -19,11 +19,13 @@ type TableProps = {
   }
   wrapColumns?: boolean
   hasRowType?: boolean // if it has row type then the first column is the row type which will explain how to render the row
+  fontSize: 'small' | 'medium' | 'large'
+  viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
 }
 
 type Position = 'sticky'
 
-const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions, wrapColumns, hasRowType }: TableProps) => {
+const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions, wrapColumns, hasRowType, fontSize, viewport }: TableProps) => {
   const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 2 } : {}
   const isGroupedMatrix = !Array.isArray(childrenMatrix)
   return (
@@ -37,7 +39,7 @@ const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent,
               const rows = childrenMatrix[groupName].map((row, i) => {
                 colSpan = row.length
                 const key = `${tableName}-${groupName}-row-${i}`
-                return <Row key={key} rowKey={key} childRow={row} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+                return <Row key={key} rowKey={key} childRow={row} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
               })
               return [<GroupRow label={groupName} colSpan={colSpan} key={`${tableName}-${groupName}`} />, ...rows]
             })
@@ -47,17 +49,17 @@ const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent,
               if (hasRowType) rowType = childRowCopy.shift()
               const key = `${tableName}-row-${i}`
               if (rowType === undefined) {
-                return <Row key={key} rowKey={key} childRow={childRow} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+                return <Row key={key} rowKey={key} childRow={childRow} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
               } else {
                 switch (rowType) {
                   case RowType.row_group:
                     return <GroupRow label={childRowCopy[0]} colSpan={childRowCopy.length} key={key} />
                   case RowType.total:
-                    return <Row key={key} rowKey={key} childRow={childRowCopy} isTotal={true} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+                    return <Row key={key} rowKey={key} childRow={childRowCopy} isTotal={true} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
                   case RowType.row_group_total:
                     return <GroupRow label={childRowCopy[0]} colSpan={1} key={key} data={childRowCopy.slice(1)} />
                   default:
-                    return <Row key={key} rowKey={key} childRow={childRowCopy} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+                    return <Row key={key} rowKey={key} childRow={childRowCopy} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
                 }
               }
             })}