@cdc/core 4.26.2 → 4.26.3

package/components/ui/Tooltip.tsx

@@ -6,7 +6,7 @@ import 'react-tooltip/dist/react-tooltip.css'
 import type { PlacesType } from 'react-tooltip'
 
 // Styles
-import '../../styles/v2/components/ui/tooltip.scss'
+import './tooltip.scss'
 
 const TooltipTarget = children => children
 const TooltipContent = children => children

package/components/ui/_stories/Title.stories.tsx

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

package/{styles/v2/components → components/ui}/accordion.scss

@@ -1,5 +1,5 @@
-@import '../utils/variables';
-@import '../themes/index';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
 
 .cove {
   .cove-accordion__item {
@@ -14,7 +14,7 @@
   }
 
   .cove-accordion__heading {
-    background: $lightestGray;
+    background: var(--lightestGray);
   }
 
   .cove-accordion__button {

package/components/ui/accordion.styles.css

@@ -5,13 +5,13 @@
 }
 
 .accordion__button {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   cursor: pointer;
   font-size: 1em;
   padding: 0.3em 1em;
-  width: 100%;
-  text-align: left;
   position: relative;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  text-align: left;
+  width: 100%;
 }
 
 .accordion__panel:first-child {
@@ -19,31 +19,31 @@
 }
 
 .accordion__button:before {
-  display: inline-block;
+  border-bottom: 2px solid currentColor;
+  border-right: 2px solid currentColor;
   content: '';
+  display: inline-block;
   height: 7px;
-  width: 7px;
   margin-right: 1em;
-  border-bottom: 2px solid currentColor;
-  border-right: 2px solid currentColor;
-  transform: rotate(-45deg) translateY(-50%);
-  right: 0;
   position: absolute;
+  right: 0;
   top: 50%;
+  transform: rotate(-45deg) translateY(-50%);
   transition: 0.1s all;
+  width: 7px;
 }
 
 .accordion__button[aria-expanded='true']::before,
 .accordion__button[aria-selected='true']::before {
-  transform: rotate(45deg) translateY(-50%);
   margin-right: 1.3em;
+  transform: rotate(45deg) translateY(-50%);
   transition: 0.1s all;
 }
 
 .accordion__panel {
+  animation: fadein 0.2s ease-in;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   padding: 1em 1.25em 2em;
-  animation: fadein 0.2s ease-in;
 }
 
 .accordion__panel h5 {

package/{styles/v2/components → components/ui}/modal.scss

@@ -1,5 +1,5 @@
-@import '../utils/variables';
-@import '../themes/index';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
 
 .cove-overlay {
   .cove-modal {

package/{styles/v2/components → components/ui}/overlay.scss

@@ -1,5 +1,5 @@
-@import '../utils/variables';
-@import '../themes/index';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
 
 .cove-overlay {
   display: flex;
@@ -14,21 +14,21 @@
 
   &.animate-in {
     .cove-overlay__bg {
-      animation: fadeIn 400ms $transition-expo-out 0s 1 forwards;
+      animation: fadeIn 400ms var(--transition-expo-out) 0s 1 forwards;
     }
 
     .cove-overlay__container {
-      animation: fadeInUp 700ms $transition-expo-out 50ms 1 forwards;
+      animation: fadeInUp 700ms var(--transition-expo-out) 50ms 1 forwards;
     }
   }
 
   &.animate-out {
     .cove-overlay__bg {
-      animation: fadeOut 400ms $transition-expo-out 0s 1 forwards;
+      animation: fadeOut 400ms var(--transition-expo-out) 0s 1 forwards;
     }
 
     .cove-overlay__container {
-      animation: fadeOut 400ms $transition-expo-out 0s 1 forwards;
+      animation: fadeOut 400ms var(--transition-expo-out) 0s 1 forwards;
       transform: translateY(0);
     }
   }

package/{styles/v2/components → components}/ui/tooltip.scss

@@ -11,7 +11,7 @@
 
 // Namespace to cove project, inconveniently using two different classes.
 .cove,
-.cdc-open-viz-module {
+.cove-visualization {
   // todo: move to a utils folder.
   .capitalize {
     text-transform: capitalize;

package/{styles → components}/waiting.scss

@@ -1,25 +1,31 @@
-.cdc-open-viz-module {
-  @import 'v2/utils/mixins';
+.cove-visualization {
+  @import '../styles/utils/mixins';
+
   .waiting {
     &.collapsed {
       padding: 2em !important;
     }
+
     @include emptyState;
     align-items: flex-start;
     padding-top: 250px;
+
     .waiting-container {
       max-width: 400px;
     }
+
     h3 {
       font-size: 1.3rem;
       font-weight: 600;
       margin-bottom: 0.3rem;
     }
+
     p {
       font-size: 1em;
+
       strong {
         font-weight: bold;
       }
     }
   }
-}
+}

package/devTemplate/dev.js

@@ -6,6 +6,56 @@ const params = new URLSearchParams(window.location.search)
 const configParam = params.get('config')
 let editorEnabled = params.get('editor') === 'true'
 const previewEnabled = params.get('preview') === 'true'
+const sectionGapParam = params.get('sectionGap')
+const fontSizeParam = params.get('fontSize')
+const metaFontSizeParam = params.get('metaFontSize')
+
+if (sectionGapParam) {
+  const numericGap = Number(sectionGapParam)
+  if (!Number.isNaN(numericGap) && numericGap >= 0) {
+    document.documentElement.style.setProperty('--cove-visualization-section-gap', `${numericGap}px`)
+  }
+}
+
+if (fontSizeParam) {
+  const numericFontSize = Number(fontSizeParam)
+  if (!Number.isNaN(numericFontSize) && numericFontSize > 0) {
+    document.documentElement.style.setProperty('--app-font-size', `${numericFontSize}px`)
+  }
+}
+
+if (metaFontSizeParam) {
+  const numericMetaFontSize = Number(metaFontSizeParam)
+  if (!Number.isNaN(numericMetaFontSize) && numericMetaFontSize > 0) {
+    document.documentElement.style.setProperty('--visualization-meta-font-size', `${numericMetaFontSize}px`)
+  }
+}
+
+window.addEventListener('message', event => {
+  const { data } = event
+  if (!data) return
+
+  if (data.type === 'cove:setSectionGap') {
+    const numericGap = Number(data.value)
+    if (Number.isNaN(numericGap) || numericGap < 0) return
+
+    document.documentElement.style.setProperty('--cove-visualization-section-gap', `${numericGap}px`)
+  }
+
+  if (data.type === 'cove:setFontSize') {
+    const numericFontSize = Number(data.value)
+    if (Number.isNaN(numericFontSize) || numericFontSize <= 0) return
+
+    document.documentElement.style.setProperty('--app-font-size', `${numericFontSize}px`)
+  }
+
+  if (data.type === 'cove:setMetaFontSize') {
+    const numericMetaFontSize = Number(data.value)
+    if (Number.isNaN(numericMetaFontSize) || numericMetaFontSize <= 0) return
+
+    document.documentElement.style.setProperty('--visualization-meta-font-size', `${numericMetaFontSize}px`)
+  }
+})
 
 if (configParam) {
   document.querySelector('.react-container').setAttribute('data-config', configParam)