npm - @cdc/filtered-text - Versions diffs - 4.25.8 → 4.25.11 - Mend

@cdc/filtered-text 4.25.8 → 4.25.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/cdcfilteredtext.js +5022 -4860
package/index.html +33 -26
package/package.json +11 -3
package/src/CdcFilteredText.jsx +8 -2
package/src/components/EditorPanel.jsx +61 -99
package/src/index.jsx +0 -1
package/src/test/CdcFilteredText.test.jsx +8 -3
package/vite.config.js +1 -1
package/src/coreStyles_filteredtext.scss +0 -1

package/index.html CHANGED Viewed

@@ -1,29 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-    <style>
-      body {
-        /* max-width: 1000px; */
-        margin: 0 auto !important;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      .react-container + .react-container {
-        margin-top: 3rem;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="react-container" data-config="/examples/example-config.json"></div>
-    <script type="module" src="./src/index.jsx"></script>
-  </body>
-</html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <style type="text/css">
+    body {
+      margin: 0;
+      border-top: none !important;
+    }
+    .cdc-map-outer-container {
+      min-height: 100vh;
+    }
+  </style>
+  <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
+  <!-- This is temporary and for testing until Nunito/900 is added to TP -->
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap" rel="stylesheet" />
+  <style type="text/css">
+    @font-face {
+      font-family: 'Nunito';
+      font-weight: 900;
+      font-display: swap;
+      src: url('https://app.unpkg.com/@fontsource/nunito@5.0.18/files/files/nunito-latin-900-normal.woff2') format('woff2');
+    }
+  </style>
+</head>
+<body>
+  <div class="react-container" data-config="/examples/example-config.json"></div>
+  <script type="module" src="./src/index.jsx"></script>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/filtered-text",
-  "version": "4.25.8",
+  "version": "4.25.11",
   "description": "React component for adding filtered text on dashboards.",
   "moduleName": "CdcFilteredText",
   "main": "dist/cdcfilteredtext",
@@ -26,11 +26,19 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.25.8"
+    "@cdc/core": "^4.25.11",
+    "html-react-parser": "5.2.3",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "e369994230b5e3facff224e1d89d5937528ac5a0"
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^4.4.11",
+    "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vite-plugin-svgr": "^2.4.0"
+  },
+  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
 }

package/src/CdcFilteredText.jsx CHANGED Viewed

@@ -22,7 +22,13 @@ import parse from 'html-react-parser'
 // styles
 import './scss/main.scss'
-const CdcFilteredText = ({ config: configObj, configUrl, isDashboard = false, isEditor = false, setConfig: setParentConfig }) => {
+const CdcFilteredText = ({
+  config: configObj,
+  configUrl,
+  isDashboard = false,
+  isEditor = false,
+  setConfig: setParentConfig
+}) => {
   const transform = new DataTransform()
   // Default States
   const [config, setConfig] = useState(defaults)
@@ -103,7 +109,7 @@ const CdcFilteredText = ({ config: configObj, configUrl, isDashboard = false, is
   //Load initial config
   useEffect(() => {
-    loadConfig().catch(err => console.log(err))
+    loadConfig().catch(err => console.error(err))
   }, []) // eslint-disable-line
   useEffect(() => {

package/src/components/EditorPanel.jsx CHANGED Viewed

@@ -1,34 +1,20 @@
-import React, { useState, useEffect, memo, useContext } from 'react'
+import React, { memo, useState, useEffect, useContext } from 'react'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import _ from 'lodash'
 import ConfigContext from '../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Accordion from '@cdc/core/components/ui/Accordion'
-import InputText from '@cdc/core/components/inputs/InputText'
+import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import Button from '@cdc/core/components/elements/Button'
 import Icon from '@cdc/core/components/ui/Icon'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
-import InputSelect from '@cdc/core/components/inputs/InputSelect'
-import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox'
 import Layout from '@cdc/core/components/Layout'
+import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 import '@cdc/core/styles/v2/components/editor.scss'
-const headerColors = [
-  'theme-blue',
-  'theme-purple',
-  'theme-brown',
-  'theme-teal',
-  'theme-pink',
-  'theme-orange',
-  'theme-slate',
-  'theme-indigo',
-  'theme-cyan',
-  'theme-green',
-  'theme-amber'
-]
 const EditorPanel = memo(props => {
   const { config, updateConfig, loading, stateData: data, setParentConfig, isDashboard } = useContext(ConfigContext)
@@ -147,7 +133,7 @@ const EditorPanel = memo(props => {
     )
   }
   const convertStateToConfig = () => {
-    let strippedState = _.cloneDeep(config)
+    let strippedState = cloneConfig(config)
     delete strippedState.newViz
     delete strippedState.runtime
@@ -156,7 +142,7 @@ const EditorPanel = memo(props => {
   const editorContent = (
     <Accordion>
       <Accordion.Section title='General'>
-        <InputText
+        <TextField
           value={config.title}
           fieldName='title'
           label='Title'
@@ -165,33 +151,30 @@ const EditorPanel = memo(props => {
         />
       </Accordion.Section>
       <Accordion.Section title='Data'>
-        <div className='cove-accordion__panel-section'>
-          <div className='cove-input-group'>
-            <InputSelect
-              value={config.textColumn || ''}
-              fieldName='textColumn'
-              label='Text Column'
-              updateField={updateField}
-              initial='Select'
-              options={getColumns()}
-            />
-          </div>
-        </div>
-        <hr className='cove-accordion__divider' />
+        <Select
+          value={config.textColumn || ''}
+          fieldName='textColumn'
+          label='Text Column'
+          updateField={updateField}
+          initial='Select'
+          options={getColumns()}
+        />
         <label style={{ marginBottom: '1rem' }}>
-          <span className='edit-label'>Data Point Filters</span>
-          <Tooltip style={{ textTransform: 'none' }}>
-            <Tooltip.Target>
-              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-            </Tooltip.Target>
-            <Tooltip.Content>
-              <p>
-                To refine the highlighted data point, specify one or more filters (e.g., "Male" and "Female" for a
-                column called "Sex").
-              </p>
-            </Tooltip.Content>
-          </Tooltip>
+          <span className='edit-label'>
+            Data Point Filters
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>
+                  To refine the highlighted data point, specify one or more filters (e.g., "Male" and "Female" for a
+                  column called "Sex").
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          </span>
         </label>
         {config.filters && (
           <ul className='filters-list' style={{ paddingLeft: 0, marginBottom: '1rem' }}>
@@ -206,38 +189,28 @@ const EditorPanel = memo(props => {
                 >
                   Remove
                 </button>
-                <label>
-                  <span className='edit-label column-heading'>Column</span>
-                  <select
-                    value={filter.columnName}
-                    onChange={e => {
-                      updateFilterProp('columnName', index, e.target.value)
-                    }}
-                  >
-                    <option value=''>- Select Option -</option>
-                    {getColumns().map((dataKey, index) => (
-                      <option value={dataKey} key={index}>
-                        {dataKey}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-                <label>
-                  <span className='edit-label column-heading'>Column Value</span>
-                  <select
-                    value={filter.columnValue}
-                    onChange={e => {
-                      updateFilterProp('columnValue', index, e.target.value)
-                    }}
-                  >
-                    <option value=''>- Select Option -</option>
-                    {getFilterColumnValues(index).map((dataKey, index) => (
-                      <option value={dataKey} key={index}>
-                        {dataKey}
-                      </option>
-                    ))}
-                  </select>
-                </label>
+                <Select
+                  label='Column'
+                  value={filter.columnName || ''}
+                  options={[
+                    { value: '', label: '- Select Option -' },
+                    ...getColumns().map(col => ({ value: col, label: col }))
+                  ]}
+                  onChange={e => {
+                    updateFilterProp('columnName', index, e.target.value)
+                  }}
+                />
+                <Select
+                  label='Column Value'
+                  value={filter.columnValue || ''}
+                  options={[
+                    { value: '', label: '- Select Option -' },
+                    ...getFilterColumnValues(index).map(val => ({ value: val, label: val }))
+                  ]}
+                  onChange={e => {
+                    updateFilterProp('columnValue', index, e.target.value)
+                  }}
+                />
               </fieldset>
             ))}
           </ul>
@@ -247,32 +220,21 @@ const EditorPanel = memo(props => {
         </Button>
       </Accordion.Section>
       <Accordion.Section title='Visual'>
-        <InputSelect
+        <Select
           value={config.fontSize}
           fieldName='fontSize'
           label='Font Size'
           updateField={updateField}
           options={['small', 'medium', 'large']}
         />
-        <br />
-        <label>
-          <span className='edit-label'>Theme</span>
-          <ul className='color-palette'>
-            {headerColors.map(palette => (
-              <li
-                title={palette}
-                key={palette}
-                onClick={() => {
-                  updateConfig({ ...config, theme: palette })
-                }}
-                className={config.theme === palette ? 'selected ' + palette : palette}
-              ></li>
-            ))}
-          </ul>
-        </label>
+        <HeaderThemeSelector
+          selectedTheme={config.theme}
+          onThemeSelect={theme => updateConfig({ ...config, theme })}
+          label='Theme'
+        />
         <div className='cove-accordion__panel-section checkbox-group'>
-          <InputCheckbox
+          <CheckBox
             inline
             size='small'
             value={config.visual.border}
@@ -281,7 +243,7 @@ const EditorPanel = memo(props => {
             label='Display Border'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             inline
             size='small'
             value={config.visual.borderColorTheme}
@@ -290,7 +252,7 @@ const EditorPanel = memo(props => {
             label='Use theme border color'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             size='small'
             value={config.visual.accent}
             section='visual'
@@ -298,7 +260,7 @@ const EditorPanel = memo(props => {
             label='Use Accent Style'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             size='small'
             value={config.visual.background}
             section='visual'
@@ -306,7 +268,7 @@ const EditorPanel = memo(props => {
             label='Use Theme Background Color'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             size='small'
             value={config.visual.hideBackgroundColor}
             section='visual'

package/src/index.jsx CHANGED Viewed

@@ -2,7 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import '@cdc/core/styles/cove-main.scss'
-import './coreStyles_filteredtext.scss'
 import CdcFilteredText from './CdcFilteredText'

package/src/test/CdcFilteredText.test.jsx CHANGED Viewed

@@ -1,6 +1,11 @@
-// Placeholder test until we add them in.
+import path from 'path'
+import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
+import { describe, it, expect } from 'vitest'
 describe('Filtered Text', () => {
-  it('has a test.', async () => {
-    return true
+  it('Can be built in isolation', async () => {
+    const pkgDir = path.join(__dirname, '..')
+    const result = testStandaloneBuild(pkgDir)
+    expect(result).toBe(true)
   })
 })

package/vite.config.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import GenerateViteConfig from '../../generateViteConfig.js'
+import GenerateViteConfig from '@cdc/core/generateViteConfig.js'
 import { moduleName } from './package.json'
 export default GenerateViteConfig(moduleName)

package/src/coreStyles_filteredtext.scss DELETED Viewed

	@@ -1 +0,0 @@
1	- @import '@cdc/core/styles/base';