[DEV-10064] Update spacing for below-chart elements

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>

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 {

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(' ')
     }
 

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)
       }}

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 {

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

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);
-}
+}

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;

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>

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;
-  }
-}