npm - @cdc/filtered-text - Versions diffs - 4.26.1 → 4.26.3 - Mend

@cdc/filtered-text 4.26.1 → 4.26.3

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/LICENSE +201 -0
package/dist/cdcfilteredtext.js +8438 -7841
package/examples/default.json +13 -0
package/index.html +1 -24
package/package.json +27 -32
package/src/CdcFilteredText.jsx +28 -41
package/src/components/EditorPanel/EditorPanel.tsx +58 -3
package/src/scss/main.scss +8 -15
package/src/test/CdcFilteredText.test.jsx +2 -2

package/examples/default.json ADDED Viewed

@@ -0,0 +1,13 @@
+{
+  "type": "filtered-text",
+  "title": "Filtered Text",
+  "theme": "theme-blue",
+  "dataUrl": "examples/sex-ageGroup-with-values.json",
+  "textColumn": "Text",
+  "filters": [
+    {
+      "columnName": "Sex",
+      "columnValue": "Female"
+    }
+  ]
+}

package/index.html CHANGED Viewed

@@ -1,24 +1 @@
-<!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 type="text/css">
-      body {
-        margin: 0;
-        border-top: none !important;
-      }
-      /* Add 1rem padding to mimic DFE when editor is not visible */
-      .cdc-open-viz-module:not(.isEditor) {
-        padding: 1rem;
-      }
-    </style>
-    <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
-  </head>
-  <body>
-    <div class="react-container" data-config="/examples/example-config.json"></div>
-    <script type="module" src="./src/index.jsx"></script>
-  </body>
-</html>
+<!-- index.html is generated by @cdc/core/generateViteConfig.js using the files in @cdc/core/devTemplate/ -->

package/package.json CHANGED Viewed

@@ -1,45 +1,40 @@
 {
   "name": "@cdc/filtered-text",
-  "version": "4.26.1",
+  "version": "4.26.3",
   "description": "React component for adding filtered text on dashboards.",
-  "moduleName": "CdcFilteredText",
-  "main": "dist/cdcfilteredtext",
-  "type": "module",
-  "scripts": {
-    "start": "vite --open",
-    "build": "vite build",
-    "preview": "vite preview",
-    "graph": "nx graph",
-    "prepublishOnly": "lerna run --scope @cdc/filtered-text build",
-    "test": "vitest run --reporter verbose",
-    "test-watch": "vitest watch --reporter verbose",
-    "test-watch:ui": "vitest --ui"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CDCgov/cdc-open-viz.git"
-  },
-  "author": "Adam Doe <rsq2@cdc.gov>",
-  "bugs": {
-    "url": "https://github.com/CDCgov/cdc-open-viz/issues"
-  },
   "license": "Apache-2.0",
-  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
+  "author": "Adam Doe <rsq2@cdc.gov>",
+  "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.1",
-    "html-react-parser": "5.2.3",
-    "lodash": "^4.17.21"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@cdc/core": "^4.26.3",
+    "html-react-parser": "^5.2.3",
+    "lodash": "^4.17.23"
   },
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^5.1.2",
     "sass": "^1.89.2",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16"
+  "gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
+  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
+  "main": "dist/cdcfilteredtext",
+  "moduleName": "CdcFilteredText",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "repository": "CDCgov/cdc-open-viz.git",
+  "scripts": {
+    "build": "vite build",
+    "graph": "nx graph",
+    "prepublishOnly": "lerna run --scope @cdc/filtered-text build",
+    "preview": "vite preview",
+    "start": "vite --open",
+    "test": "vitest run --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
+  },
+  "type": "module"
 }

package/src/CdcFilteredText.jsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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