Enhancement [DEV-10065] conform legends to ux specs (#1792)

* enhancement: conform legends to ux specs * fix: remove extra bootstrap import * enhancement: change themes to ts * enhancement: move scaling css to global * enhancement: replace more css with bootstrap * fix: add modules to sb * fix: added map container scope * fix: bootstrap ml and mr to 5.0 ms and me
CDCgov · Dec 23, 2024 · ffc9280 · ffc9280
1 parent ed1ab47
commit ffc9280
Show file tree

Hide file tree

Showing 38 changed files with 479 additions and 349 deletions.
diff --git a/.storybook/coveSbThemes.js → .storybook/coveSbThemes.ts b/.storybook/coveSbThemes.js → .storybook/coveSbThemes.ts
@@ -19,7 +19,7 @@ export const managerTheme = create({
   appBorderRadius: 0,
 
   // Typography
-  fontBase: '"Open Sans", sans-serif',
+  fontBase: '"Nunito", sans-serif',
   fontCode: 'monospace',
 
   // Text colors
@@ -36,7 +36,7 @@ export const managerTheme = create({
   inputBg: 'white',
   inputBorder: 'silver',
   inputTextColor: '#383838',
-  inputBorderRadius: 0,
+  inputBorderRadius: 0
 })
 
 export const previewTheme = create({
@@ -55,7 +55,7 @@ export const previewTheme = create({
   appBorderRadius: 4,
 
   // Typography
-  fontBase: '"Open Sans", sans-serif',
+  fontBase: '"Nunito", sans-serif',
   fontCode: 'monospace',
 
   // Text colors
@@ -71,6 +71,5 @@ export const previewTheme = create({
   inputBg: 'white',
   inputBorder: 'silver',
   inputTextColor: '#383838',
-  inputBorderRadius: 4,
+  inputBorderRadius: 4
 })
-
diff --git a/.storybook/globals.d.ts b/.storybook/globals.d.ts
@@ -0,0 +1,7 @@
+declare module '*.svg' {
+  const content: string
+
+  export default content
+}
+
+declare module '*.json'
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,26 +1,23 @@
 <script>
-  window.global = window;
-  window.process = { // vite does not polyfill process https://github.com/storybookjs/storybook/issues/18920
-    "env": {
-      "NODE_ENV": "production"
+  window.global = window
+  window.process = {
+    // vite does not polyfill process https://github.com/storybookjs/storybook/issues/18920
+    env: {
+      NODE_ENV: 'production'
     }
   }
 </script>
 <style>
-.search-result-item--label {
-  color: #a3a3a3 !important;
-}
+  .search-result-item--label {
+    color: #a3a3a3 !important;
+  }
 
-.search-result-item--label .sto-1xkb16p {
-  color: #005eaa !important;
-}
+  .search-result-item--label .sto-1xkb16p {
+    color: #005eaa !important;
+  }
 
-.sbdocs-h3 {
-  color: #3a569b !important;
-}
+  .sbdocs-h3 {
+    color: #3a569b !important;
+  }
 </style>
-<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/contrib/libs/bootstrap/latest/css/bootstrap.min.css?_=39423">
-<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/4.0/assets/css/app.min.css?_=39423">
-
-<!-- to toggle on tp5 -->
-<!-- <link rel="stylesheet prefetch" href="https://wcms-wp-test.cdc.gov/TemplatePackage/5.0/css/app.css?_=81698"> -->
+<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
diff --git a/packages/chart/index.html b/packages/chart/index.html
@@ -17,11 +17,7 @@
         margin-top: 3rem;
       } */
     </style>
-    <link
-      rel="stylesheet prefetch"
-      href="https://www.cdc.gov/TemplatePackage/contrib/libs/bootstrap/latest/css/bootstrap.min.css?_=39423"
-    />
-    <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/4.0/assets/css/app.min.css?_=39423" />
+    <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
   </head>
 
   <body>

diff --git a/packages/chart/src/_stories/Chart.Legend.Gradient.stories.tsx b/packages/chart/src/_stories/Chart.Legend.Gradient.stories.tsx
@@ -51,7 +51,7 @@ export const Legend_Gradient_With_box: Story = {
 export const Legend_Gradient_With_Text: Story = {
   args: {
     config: editConfigKeys(chartGradientConfig, [
-      { path: ['legend', 'title'], value: 'Title' },
+      { path: ['legend', 'label'], value: 'Title' },
       { path: ['legend', 'description'], value: 'Description' },
       { path: ['legend', 'hideBorder'], value: false }
     ])

diff --git a/packages/chart/src/components/Legend/Legend.Component.tsx b/packages/chart/src/components/Legend/Legend.Component.tsx
@@ -17,7 +17,7 @@ import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 
-const LEGEND_PADDING = 30
+const LEGEND_PADDING = 36
 
 export interface LegendProps {
   colorScale: ColorScale
@@ -74,8 +74,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
         aria-label='legend'
         tabIndex={0}
       >
-        {legend.label && <h3>{parse(legend.label)}</h3>}
-        {legend.description && <p>{parse(legend.description)}</p>}
+        {(legend.label || legend.description) && (
+          <div className='mb-3'>
+            {legend.label && <h3 className='fw-bold'>{parse(legend.label)}</h3>}
+            {legend.description && <p className='mt-2'>{parse(legend.description)}</p>}
+          </div>
+        )}
         <LegendGradient
           config={config}
           {...getGradientConfig(config, formatLabels, colorScale)}
@@ -152,7 +156,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                           )}
                         </>
 
-                        <LegendLabel align='left' margin='0 0 0 4px'>
+                        <LegendLabel align='left' className='m-0'>
                           {label.text}
                         </LegendLabel>
                       </LegendItem>
@@ -191,9 +195,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                           fill='transparent'
                           borderColor={bar.color ? bar.color : `rgba(255, 102, 1)`}
                         />{' '}
-                        <LegendLabel align='left' margin='0 0 0 4px'>
-                          {bar.legendLabel ? bar.legendLabel : bar.value}
-                        </LegendLabel>
+                        <LegendLabel align='left'>{bar.legendLabel ? bar.legendLabel : bar.value}</LegendLabel>
                       </LegendItem>
                     )
                   })}

diff --git a/packages/chart/src/components/Legend/helpers/getLegendClasses.ts b/packages/chart/src/components/Legend/helpers/getLegendClasses.ts
@@ -2,7 +2,7 @@ import { ChartConfig } from './../../../types/ChartConfig'
 
 export const getLegendClasses = (config: ChartConfig) => {
   const { position, singleRow, reverseLabelOrder, verticalSorted, hideBorder } = config.legend
-  const containerClasses = ['legend-container']
+  const containerClasses = ['legend-container', 'p-3']
   const innerClasses = ['legend-container__inner']
 
   // Handle legend positioning

diff --git a/packages/chart/src/scss/main.scss b/packages/chart/src/scss/main.scss
@@ -153,23 +153,38 @@
   .legend-container {
     background: #fff;
     width: 100%;
-    padding: 15px;
     vertical-align: top;
     text-align: left;
     border: 1px solid var(--lightGray);
     position: relative;
 
+    h3 {
+      font-size: var(--legend-title-font-size);
+    }
+
+    p {
+      font-size: var(--legend-description-font-size);
+    }
+
+    tspan,
+    div {
+      font-size: var(--legend-item-font-size);
+    }
+
     &.border-0 {
       border: 1px solid transparent;
       padding: 0;
     }
 
     &__inner {
+      display: flex;
+      flex-direction: column;
+      row-gap: var(--space-between-legend-item-rows);
+      column-gap: var(--space-between-legend-item-columns);
       &.double-column,
       &.single-row {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        grid-column-gap: 1.5em;
       }
 
       &.vertical-sorted {
@@ -197,8 +212,7 @@
     .legend-item {
       text-align: left;
       user-select: none;
-      white-space: nowrap;
-
+      line-height: var(--legend-item-font-size);
       .visx-legend-label {
         word-wrap: break-word;
         white-space: pre-wrap;
@@ -212,27 +226,9 @@
 
     .legend-item > .legend-item {
       display: inline-block;
-      margin-right: 0.5rem;
       flex: 0 0 auto;
     }
 
-    h3 {
-      font-size: 1.3rem;
-    }
-
-    h3,
-    p {
-      margin-bottom: 0.4em;
-    }
-
-    & div.legend-item {
-      margin-bottom: 0.2em !important;
-
-      &:last-child {
-        margin: 0 !important;
-      }
-    }
-
     .legend-item {
       cursor: pointer;
       transition: 0.2s all;
@@ -297,15 +293,14 @@
     align-items: center;
     font-size: 1em;
     vertical-align: middle;
-    margin-bottom: 0.5em;
 
     & > span {
       display: flex;
       justify-items: center;
       align-items: center;
       white-space: nowrap;
       font-size: 1em;
-      margin-right: 8px;
+      margin-right: 9px;
       max-height: 1px;
     }
 

diff --git a/packages/core/components/EditorPanel/FootnotesEditor.tsx b/packages/core/components/EditorPanel/FootnotesEditor.tsx
@@ -39,13 +39,40 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }
     <>
       <em>Dynamic Footnotes</em>
       <div className='row border p-2'>
-        <InputSelect label='Select a Footnote Dataset' value={config.dataKey} options={dataSetOptions} fieldName='dataKey' updateField={updateField} />
+        <InputSelect
+          label='Select a Footnote Dataset'
+          value={config.dataKey}
+          options={dataSetOptions}
+          fieldName='dataKey'
+          updateField={updateField}
+        />
 
         {config.dataKey && (
           <div className='p-3'>
-            <InputSelect label='Footnote Symbol Column' value={config.dynamicFootnotes?.symbolColumn} options={dataColumns} section='dynamicFootnotes' fieldName='symbolColumn' updateField={updateField} />
-            <InputSelect label='Footnote Text Column' value={config.dynamicFootnotes?.textColumn} options={dataColumns} section='dynamicFootnotes' fieldName='textColumn' updateField={updateField} />
-            <InputSelect label='Footnote Order Column' value={config.dynamicFootnotes?.orderColumn} options={dataColumns} section='dynamicFootnotes' fieldName='orderColumn' updateField={updateField} />
+            <InputSelect
+              label='Footnote Symbol Column'
+              value={config.dynamicFootnotes?.symbolColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='symbolColumn'
+              updateField={updateField}
+            />
+            <InputSelect
+              label='Footnote Text Column'
+              value={config.dynamicFootnotes?.textColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='textColumn'
+              updateField={updateField}
+            />
+            <InputSelect
+              label='Footnote Order Column'
+              value={config.dynamicFootnotes?.orderColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='orderColumn'
+              updateField={updateField}
+            />
           </div>
         )}
       </div>
@@ -57,10 +84,25 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }
       {config.staticFootnotes?.map((note, index) => (
         <div key={index} className='row border p-2'>
           <div className='col-8'>
-            <InputSelect label='Symbol' value={note.symbol} options={[['', '--Select--'], ...footnotesSymbols]} fieldName='symbol' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, symbol: value })} />{' '}
-            <TextField label='Text' value={note.text} fieldName='text' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, text: value })} />
+            <InputSelect
+              label='Symbol'
+              value={note.symbol}
+              options={[['', '--Select--'], ...footnotesSymbols]}
+              fieldName='symbol'
+              updateField={(section, subsection, fieldName, value) =>
+                updateStaticFootnote(index, { ...note, symbol: value })
+              }
+            />{' '}
+            <TextField
+              label='Text'
+              value={note.text}
+              fieldName='text'
+              updateField={(section, subsection, fieldName, value) =>
+                updateStaticFootnote(index, { ...note, text: value })
+              }
+            />
           </div>
-          <div className='col-2 ml-4'>
+          <div className='col-2 ms-4'>
             <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
               Delete
             </button>

diff --git a/packages/core/components/Filters/Filters.tsx b/packages/core/components/Filters/Filters.tsx
@@ -437,7 +437,7 @@ const Filters = (props: FilterProps) => {
 
       const classList = [
         'single-filters',
-        'form-group mr-3',
+        'form-group me-3',
         mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`
       ]
       const mobileExempt = ['nested-dropdown', 'multi-select'].includes(filterStyle)

diff --git a/packages/core/components/Footnotes/Footnotes.tsx b/packages/core/components/Footnotes/Footnotes.tsx
@@ -12,7 +12,7 @@ const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
         {footnotes.map((note, i) => {
           return (
             <li key={note.symbol + i} className='mb-1'>
-              {note.symbol && <span className='mr-1'>{note.symbol}</span>}
+              {note.symbol && <span className='me-1'>{note.symbol}</span>}
               {note.text}
             </li>
           )

diff --git a/packages/core/components/Legend/Legend.Gradient.tsx b/packages/core/components/Legend/Legend.Gradient.tsx
@@ -92,10 +92,7 @@ const LegendGradient = ({
 
   if (style === 'gradient') {
     return (
-      <svg
-        style={{ overflow: 'visible', width: '100%', marginTop: 10, marginBottom: hideBorder ? 10 : 0 }}
-        height={newHeight}
-      >
+      <svg className={'w-100 overflow-visible'} height={newHeight}>
         {/* background border*/}
         <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill='#d3d3d3' />
         {/* Define the gradient */}

diff --git a/packages/core/components/LegendShape.tsx b/packages/core/components/LegendShape.tsx
@@ -10,9 +10,8 @@ interface LegendShapeProps {
 const LegendShape: React.FC<LegendShapeProps> = props => {
   const { fill, borderColor, display = 'inline-block', shape = 'circle' } = props
   const dimensions = { width: '1em', height: '1em' }
-  const marginRight = ['circle', 'square'].includes(shape) ? '5px' : '0'
+  const isCircleOrSquare = ['circle', 'square'].includes(shape)
   const styles = {
-    marginRight: marginRight,
     borderRadius: shape === 'circle' ? '50%' : '0px',
     verticalAlign: 'middle',
     display: display,
@@ -22,7 +21,7 @@ const LegendShape: React.FC<LegendShapeProps> = props => {
     backgroundColor: fill
   }
 
-  return <span className='legend-item' style={styles} />
+  return <span className={`legend-item ${isCircleOrSquare ? 'me-2' : ''}`} style={styles} />
 }
 
 export default LegendShape