[DEV-10064] Update spacing for below-chart elements (#1798)

* Update spacing for below-chart elements * Add padding to bottom of legend
CDCgov · Dec 24, 2024 · ce83888 · ce83888
1 parent 009715f
commit ce83888
Show file tree

Hide file tree

Showing 13 changed files with 19 additions and 46 deletions.
diff --git a/packages/chart/src/CdcChart.tsx b/packages/chart/src/CdcChart.tsx
@@ -1252,7 +1252,7 @@ const CdcChart = ({
   }
 
   const getChartSubTextClasses = () => {
-    const classes = ['subtext ']
+    const classes = ['subtext mt-4']
     const isLegendOnBottom = legend?.position === 'bottom' || isLegendWrapViewport(currentViewport)
 
     if (config.isResponsiveTicks) classes.push('subtext--responsive-ticks ')
@@ -1465,8 +1465,8 @@ const CdcChart = ({
                 )}
                 {config?.annotations?.length > 0 && <Annotation.Dropdown />}
                 {/* show pdf or image button */}
+                {config?.footnotes && <section className='footnotes pt-2 mt-4'>{parse(config.footnotes)}</section>}
               </div>
-              {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
             </div>
           )}
         </Layout.Responsive>

diff --git a/packages/chart/src/components/Legend/Legend.Component.tsx b/packages/chart/src/components/Legend/Legend.Component.tsx
@@ -57,7 +57,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
       legend?.position === 'bottom' || (isLegendWrapViewport(currentViewport) && !legend.hide)
 
     const legendClasses = {
-      marginBottom: getMarginBottom(config, hasSuppression),
+      marginBottom: getMarginBottom(isBottomOrSmallViewport, config, hasSuppression),
       marginTop: getMarginTop(isBottomOrSmallViewport, config)
     }
 

diff --git a/packages/chart/src/components/Legend/helpers/index.ts b/packages/chart/src/components/Legend/helpers/index.ts
@@ -20,13 +20,15 @@ export const getMarginTop = (isBottomOrSmallViewport, config) => {
   }
   return '20px'
 }
-export const getMarginBottom = (config, hasSuppression) => {
+export const getMarginBottom = (isBottomOrSmallViewport, config, hasSuppression) => {
   const isLegendTop = config.legend?.position === 'top' && !config.legend.hide
 
   let marginBottom = 0
 
   if (isLegendTop) marginBottom = config.legend.hideBorder.topBottom ? 15 : 25
 
+  if (isBottomOrSmallViewport) marginBottom += 9
+
   if (hasSuppression) marginBottom += 40
 
   return `${marginBottom}px`

diff --git a/packages/chart/src/scss/DataTable.scss b/packages/chart/src/scss/DataTable.scss
@@ -1,14 +1,9 @@
 .data-table-container {
-  margin: 20px 0 0;
-
   &.brush-active {
     margin: 80px 0 0;
   }
 
   width: 100%;
-  &.download-link-above {
-    margin: 0;
-  }
 }
 
 .data-table-container {

diff --git a/packages/core/components/DataTable/DataTable.tsx b/packages/core/components/DataTable/DataTable.tsx
@@ -221,11 +221,12 @@ const DataTable = (props: DataTableProps) => {
     const getMediaControlsClasses = belowTable => {
       const classes = ['download-links']
       if (!belowTable) {
+        classes.push('mt-4', 'mb-2')
         const isLegendOnBottom = config?.legend?.position === 'bottom' || isLegendWrapViewport(viewport)
         if (config.brush?.active && !isLegendOnBottom) classes.push('brush-active')
         if (config.brush?.active && config.legend.hide) classes.push('brush-active')
       } else {
-        classes.push('below-table')
+        classes.push('mt-2')
       }
       return classes
     }
@@ -246,19 +247,18 @@ const DataTable = (props: DataTableProps) => {
     }
     const getClassNames = (): string => {
       const classes = ['data-table-container']
-      const isBrushActive = config?.brush?.active && config.legend?.position !== 'bottom'
 
+      if (config.table.showDownloadLinkBelow) {
+        classes.push('mt-4')
+      }
+
+      const isBrushActive = config?.brush?.active && config.legend?.position !== 'bottom'
       if (isBrushActive) {
         classes.push('brush-active')
       }
 
       classes.push(viewport)
 
-      const downloadLinkClass = !config.table.showDownloadLinkBelow ? 'download-link-above' : ''
-      if (downloadLinkClass) {
-        classes.push(downloadLinkClass)
-      }
-
       return classes.join(' ')
     }
 

diff --git a/packages/core/components/DataTable/components/ExpandCollapse.tsx b/packages/core/components/DataTable/components/ExpandCollapse.tsx
@@ -5,7 +5,7 @@ const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport
   return (
     <div
       role='button'
-      className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+      className={expanded ? 'data-table-heading p-3' : 'collapsed data-table-heading p-3'}
       onClick={() => {
         setExpanded(!expanded)
       }}

diff --git a/packages/core/components/DataTable/data-table.css b/packages/core/components/DataTable/data-table.css
@@ -16,7 +16,6 @@
 .cdc-open-viz-module div.data-table-heading {
   position: relative;
   background: rgba(0, 0, 0, 0.05);
-  padding: 0.5em 0.7em;
   border: var(--lightGray) 1px solid;
 
   svg {

diff --git a/packages/core/components/Layout/components/Visualization/visualizations.scss b/packages/core/components/Layout/components/Visualization/visualizations.scss
@@ -1,6 +1,6 @@
 .cdc-open-viz-module {
   .cdc-chart-inner-container .cove-component__content {
-    padding: 25px 15px 25px 0 !important;
+    padding: 27px 15px 27px 0 !important;
   }
   &.isEditor {
     overflow: auto;

diff --git a/packages/core/styles/_button-section.scss b/packages/core/styles/_button-section.scss
@@ -17,6 +17,7 @@
   display: flex;
   justify-content: flex-end;
   width: 100%;
+  line-height: 1;
   &.brush-active {
     margin-top: 2em;
   }
@@ -26,10 +27,6 @@
   & a {
     font-size: var(--download-link-font-size);
   }
-  margin-top: 20px;
-  &.below-table {
-    margin-top: 5px;
-  }
 }
 
 // odd wrapper thats different on dashboards

diff --git a/packages/core/styles/_global.scss b/packages/core/styles/_global.scss
@@ -161,12 +161,7 @@ section.introText {
 
 section.footnotes {
   border-top: 1px solid #ddd;
-  margin-top: 20px;
-  padding: 15px;
-}
-
-.cdc-chart-inner-container .subtext {
-  margin-top: 20px;
+  width: 100%;
 }
 
 .margin-left-href {
@@ -182,7 +177,6 @@ section.footnotes {
   }
 }
 
-
 // after migration to TP5 this declaration should be removed and all references
 // to it should be replaced with .form-select
 .cove-form-select {
@@ -192,4 +186,4 @@ section.footnotes {
   border-radius: 0.25rem;
   border: 1px solid var(--lightGray);
   color: var(--darkGray);
-}
+}
diff --git a/packages/dashboard/src/scss/main.scss b/packages/dashboard/src/scss/main.scss
@@ -162,13 +162,6 @@
     margin: 15px 0 0;
   }
 
-  .data-table-container {
-    margin: 20px 0 0;
-    &.download-link-above {
-      margin: 0;
-    }
-  }
-
   .collapsable-multiviz-container {
     position: relative;
     border: var(--lightGray) 1px solid;

diff --git a/packages/map/src/components/DataTable.tsx b/packages/map/src/components/DataTable.tsx
@@ -192,7 +192,7 @@ const DataTable = props => {
 
   const TableMediaControls = ({ belowTable }) => {
     return (
-      <MediaControls.Section classes={['download-links'] + (belowTable ? 'below-table' : '')}>
+      <MediaControls.Section classes={['download-links']}>
         <MediaControls.Link config={state} />
         {state.general.showDownloadButton && <DownloadButton />}
       </MediaControls.Section>

diff --git a/packages/map/src/scss/map.scss b/packages/map/src/scss/map.scss
@@ -327,10 +327,3 @@ canvas {
   pointer-events: none;
   display: none;
 }
-
-.data-table-container {
-  margin: 20px 0px 0px;
-  &.download-link-above {
-    margin-top: 0;
-  }
-}