@cdc/filtered-text 4.26.2 → 4.26.3

package/examples/default.json

@@ -3,5 +3,11 @@
   "title": "Filtered Text",
   "theme": "theme-blue",
   "dataUrl": "examples/sex-ageGroup-with-values.json",
-  "textColumn": "age-group"
+  "textColumn": "Text",
+  "filters": [
+    {
+      "columnName": "Sex",
+      "columnValue": "Female"
+    }
+  ]
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cdc/filtered-text",
-  "version": "4.26.2",
+  "version": "4.26.3",
   "description": "React component for adding filtered text on dashboards.",
   "license": "Apache-2.0",
   "author": "Adam Doe <rsq2@cdc.gov>",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.2",
+    "@cdc/core": "^4.26.3",
     "html-react-parser": "^5.2.3",
     "lodash": "^4.17.23"
   },
@@ -17,7 +17,7 @@
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "main": "dist/cdcfilteredtext",
   "moduleName": "CdcFilteredText",

package/src/CdcFilteredText.jsx

@@ -12,9 +12,10 @@ import EditorPanel from './components/EditorPanel'
 
 // helpers
 import DataTransform from '@cdc/core/helpers/DataTransform'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
-import Layout from '@cdc/core/components/Layout'
+import { VisualizationContainer, VisualizationContent } from '@cdc/core/components/Layout'
 
 // external
 import parse from 'html-react-parser'
@@ -38,10 +39,6 @@ const CdcFilteredText = ({
   let { title, filters } = config
 
   const { contentClasses, innerContainerClasses } = useDataVizClasses(config)
-  const { visual } = config
-
-  const shouldApplyTopPadding = visual?.border || visual?.background || (config.title && config.titleStyle === 'legacy')
-  const shouldApplySidePadding = visual?.border || visual?.accent || visual?.background
 
   // Default Functions
 
@@ -51,9 +48,9 @@ const CdcFilteredText = ({
     let data = response.formattedData || response.data || {}
 
     if (response.dataUrl) {
-      const dataString = await fetch(response.dataUrl)
-
-      data = await dataString.json()
+      const { data: fetchedData, dataMetadata } = await fetchRemoteData(response.dataUrl)
+      data = fetchedData
+      response.dataMetadata = dataMetadata
       if (response.dataDescription) {
         data = transform.autoStandardize(data)
         data = transform.developerStandardize(data, response.dataDescription)
@@ -122,39 +119,29 @@ const CdcFilteredText = ({
   let content = <Loading />
 
   if (loading === false) {
-    let body = (
-      <>
-        <Layout.Responsive isEditor={isEditor}>
-          <div className={`cove-component__content no-borders`}>
-            <Title
-              classes={[`${config.theme}`, 'mb-0']}
-              title={title}
-              titleStyle={config.titleStyle}
-              config={config}
-              noContent={!config.textColumn}
-            />
-            <div
-              className={`${contentClasses.join(' ')} body${shouldApplyTopPadding ? ' has-top-padding' : ''}${
-                shouldApplySidePadding ? ' has-side-padding' : ''
-              }`}
-            >
-              {filterByTextColumn()
-                .slice(0, 1)
-                .map((el, i) => (
-                  <p key={i}> {parse(el[config.textColumn] || '')} </p>
-                ))}
-            </div>
-          </div>
-        </Layout.Responsive>
-      </>
+    const body = (
+      <VisualizationContent
+        innerClassName={innerContainerClasses.join(' ')}
+        bodyClassName={contentClasses.join(' ')}
+        header={
+          <Title
+            classes={[`${config.theme}`, 'mb-0']}
+            title={title}
+            titleStyle={config.titleStyle}
+            config={config}
+            noContent={!config.textColumn}
+          />
+        }
+      >
+        {filterByTextColumn()
+          .slice(0, 1)
+          .map((el, i) => (
+            <p key={i}> {parse(el[config.textColumn] || '')} </p>
+          ))}
+      </VisualizationContent>
     )
 
-    content = (
-      <>
-        {isEditor && <EditorPanel />}
-        {body}
-      </>
-    )
+    content = body
   }
   const values = {
     config,
@@ -169,9 +156,9 @@ const CdcFilteredText = ({
   return (
     <ErrorBoundary component='CdcFilteredText'>
       <ConfigContext.Provider value={values}>
-        <Layout.VisualizationWrapper config={config} isEditor={isEditor} showEditorPanel={config?.showEditorPanel}>
+        <VisualizationContainer config={config} isEditor={isEditor} editorPanel={<EditorPanel />}>
           {content}
-        </Layout.VisualizationWrapper>
+        </VisualizationContainer>
       </ConfigContext.Provider>
     </ErrorBoundary>
   )

package/src/components/EditorPanel/EditorPanel.tsx

@@ -10,12 +10,13 @@ import { useDataColumns } from '@cdc/core/hooks/useDataColumns'
 
 // Components
 import { EditorPanel as BaseEditorPanel } from '@cdc/core/components/EditorPanel/EditorPanel'
-import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import { TextField, Select } 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 Accordion from '@cdc/core/components/ui/Accordion'
-import { VisualSection } from '@cdc/core/components/EditorPanel/sections/VisualSection'
+import StyleTreatmentSection from '@cdc/core/components/EditorPanel/sections/StyleTreatmentSection'
+import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
 
 type FilteredTextEditorPanelProps = {
   // Add any props if needed
@@ -24,6 +25,21 @@ type FilteredTextEditorPanelProps = {
 const EditorPanel: React.FC<FilteredTextEditorPanelProps> = () => {
   const { config, updateConfig, loading, stateData: data, setParentConfig, isDashboard } = useContext(ConfigContext)
   const updateField = updateFieldFactory(config, updateConfig, true)
+  const styleTreatment = config?.visual?.tp5Treatment ? 'tp5' : 'legacy'
+
+  const handleStyleTreatmentChange = (value: string) => {
+    const useTp5Treatment = value === 'tp5'
+    updateConfig({
+      ...config,
+      visual: {
+        ...config.visual,
+        tp5Treatment: useTp5Treatment,
+        border: useTp5Treatment ? false : config.visual?.border,
+        borderColorTheme: useTp5Treatment ? false : config.visual?.borderColorTheme,
+        accent: useTp5Treatment ? false : config.visual?.accent
+      }
+    })
+  }
 
   // Filters -------------------------
   const { addNewFilter, removeFilter, updateFilterProp, getFilterColumnValues } = useFilterManagement(
@@ -78,6 +94,29 @@ const EditorPanel: React.FC<FilteredTextEditorPanelProps> = () => {
                 </Tooltip>
               }
             />
+            <Select
+              value={config.locale}
+              fieldName='locale'
+              label='Language for dates and numbers'
+              updateField={updateField}
+              options={[
+                { value: 'en-US', label: 'English (en-US)' },
+                { value: 'es-MX', label: 'Spanish (es-MX)' }
+              ]}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Change the language (locale) for this visualization to alter the way dates and numbers are
+                      formatted.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
           </Accordion.Section>
           <Accordion.Section title='Data'>
             <Select
@@ -149,7 +188,23 @@ const EditorPanel: React.FC<FilteredTextEditorPanelProps> = () => {
             </Button>
           </Accordion.Section>
           <Accordion.Section title='Visual'>
-            <VisualSection config={config} updateField={updateField} updateConfig={updateConfig} />
+            <HeaderThemeSelector
+              selectedTheme={config.theme}
+              onThemeSelect={theme => updateConfig({ ...config, theme })}
+            />
+            <StyleTreatmentSection
+              styleTreatment={styleTreatment}
+              onStyleTreatmentChange={handleStyleTreatmentChange}
+              showStyleTreatment={false}
+              border={config.visual?.border}
+              borderColorTheme={config.visual?.borderColorTheme}
+              accent={config.visual?.accent}
+              background={config.visual?.background}
+              hideBackgroundColor={config.visual?.hideBackgroundColor}
+              showBackground
+              showHideBackgroundColor
+              updateField={updateField}
+            />
           </Accordion.Section>
         </Accordion>
       )}

package/src/scss/main.scss

@@ -1,4 +1,6 @@
-.cdc-open-viz-module.isEditor {
+@import '@cdc/core/styles/layout/wrapper-padding';
+
+.cove-visualization.is-editor {
   background: transparent;
 }
 
@@ -12,23 +14,14 @@
   }
 }
 
-.cdc-open-viz-module.type-filtered-text {
+.cove-visualization.type-filtered-text {
+  .cove-visualization__body {
+    @include cove-visualization-body-padding;
+  }
+
   .cove-accordion__panel-section .cove-input__checkbox--small {
     // float: initial;
     // display: initial;
     float: none;
   }
-  .cove-component__content.body:not(:empty) {
-    padding: 0;
-
-    &.has-top-padding {
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-    }
-
-    &.has-side-padding {
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-  }
 }

package/src/test/CdcFilteredText.test.jsx

@@ -1,11 +1,11 @@
-import path from 'path'
+import path from 'node:path'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
 
 describe('Filtered Text', () => {
   it('Can be built in isolation', async () => {
     const pkgDir = path.join(__dirname, '..')
-    const result = testStandaloneBuild(pkgDir)
+    const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
 })