@cdc/filtered-text 4.24.5 → 4.24.9-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/filtered-text",
-  "version": "4.24.5",
+  "version": "4.24.9-1",
   "description": "React component for adding filtered text on dashboards.",
   "moduleName": "CdcFilteredText",
   "main": "dist/cdcfilteredtext",
@@ -11,8 +11,9 @@
     "preview": "vite preview",
     "graph": "nx graph",
     "prepublishOnly": "lerna run --scope @cdc/filtered-text build",
-    "test": "vitest watch --reporter verbose",
-    "test:ui": "vitest --ui"
+    "test": "vitest run --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
   },
   "repository": {
     "type": "git",
@@ -25,7 +26,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.24.5",
+    "@cdc/core": "^4.24.9-1",
     "html-react-parser": "^3.0.8",
     "papaparse": "^5.3.2"
   },
@@ -33,5 +34,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "def85aaf4cd9dc1983e80f2900199f35de82af95"
+  "gitHead": "4a77c2fa79c8fa6074da3b6dfee3d8e32f0b2586"
 }

package/src/CdcFilteredText.jsx

@@ -14,6 +14,7 @@ import EditorPanel from './components/EditorPanel'
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
+import Layout from '@cdc/core/components/Layout'
 
 // external
 import parse from 'html-react-parser'
@@ -31,7 +32,7 @@ const CdcFilteredText = ({ config: configObj, configUrl, isDashboard = false, is
   let { title, filters } = config
   const fontSize = config.fontSize === 'small' ? '16px' : config.fontSize === 'medium' ? '22px' : '27px'
 
-  const { contentClasses } = useDataVizClasses(config)
+  const { contentClasses, innerContainerClasses } = useDataVizClasses(config)
 
   // Default Functions
 
@@ -56,7 +57,7 @@ const CdcFilteredText = ({ config: configObj, configUrl, isDashboard = false, is
     }
 
     let newConfig = { ...config, ...response }
-    const processedConfig = { ...(await coveUpdateWorker(newConfig)) }
+    const processedConfig = { ...coveUpdateWorker(newConfig) }
 
     updateConfig(processedConfig)
     setLoading(false)
@@ -118,27 +119,29 @@ const CdcFilteredText = ({ config: configObj, configUrl, isDashboard = false, is
   if (loading === false) {
     let body = (
       <>
-        <Title classes={[`${config.theme}`]} title={title} style={{ fontSize }} />
-        <div className={contentClasses.join(' ')}>
-          <div className='cove-component__content-wrap'>
-            {filterByTextColumn()
-              .slice(0, 1)
-              .map((el, i) => (
-                <p style={{ fontSize }} key={i}>
-                  {' '}
-                  {parse(el[config.textColumn] || '')}{' '}
-                </p>
-              ))}
+        <Layout.Responsive isEditor={isEditor}>
+          <div className={`cove-component__content no-borders`}>
+            <Title classes={[`${config.theme}`]} title={title} style={{ fontSize }} />
+            <div className={`${contentClasses.join(' ')} body`}>
+              {filterByTextColumn()
+                .slice(0, 1)
+                .map((el, i) => (
+                  <p style={{ fontSize }} key={i}>
+                    {' '}
+                    {parse(el[config.textColumn] || '')}{' '}
+                  </p>
+                ))}
+            </div>
           </div>
-        </div>
+        </Layout.Responsive>
       </>
     )
 
     content = (
-      <div className={`cove ${config.theme} `}>
-        {isEditor && <EditorPanel>{body}</EditorPanel>}
-        {!isEditor && body}
-      </div>
+      <>
+        {isEditor && <EditorPanel />}
+        {body}
+      </>
     )
   }
   const values = {
@@ -153,7 +156,11 @@ const CdcFilteredText = ({ config: configObj, configUrl, isDashboard = false, is
 
   return (
     <ErrorBoundary component='CdcFilteredText'>
-      <ConfigContext.Provider value={values}>{content}</ConfigContext.Provider>
+      <ConfigContext.Provider value={values}>
+        <Layout.VisualizationWrapper config={config} isEditor={isEditor} showEditorPanel={config?.showEditorPanel}>
+          {content}
+        </Layout.VisualizationWrapper>
+      </ConfigContext.Provider>
     </ErrorBoundary>
   )
 }

package/src/components/EditorPanel.jsx

@@ -1,9 +1,8 @@
 import React, { useState, useEffect, memo, useContext } from 'react'
 
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-
 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 Button from '@cdc/core/components/elements/Button'
@@ -11,6 +10,7 @@ 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 { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 
 import '@cdc/core/styles/v2/components/editor.scss'
@@ -97,6 +97,10 @@ const EditorPanel = memo(props => {
 
   const onBackClick = () => {
     setDisplayPanel(!displayPanel)
+    updateConfig({
+      ...config,
+      showEditorPanel: !displayPanel
+    })
   }
 
   const Error = () => {
@@ -248,20 +252,11 @@ const EditorPanel = memo(props => {
 
   return (
     <ErrorBoundary component='EditorPanel'>
-      <div className='cove-editor'>
+      <Layout.Sidebar displayPanel={displayPanel} isDashboard={isDashboard} title={'Configure Filtered Text'} onBackClick={onBackClick}>
         {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
         {config.newViz && showConfigConfirm && <Confirm />}
-        <button className={`cove-editor--toggle` + (!displayPanel ? ` collapsed` : ``)} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick} />
-        <section className={`cove-editor__panel` + (displayPanel ? `` : ' hidden')}>
-          <div className='cove-editor__panel-container'>
-            <h2 className='cove-editor__heading'>Configure Filtered Text</h2>
-            <section className='cove-editor__content'>{editorContent}</section>
-          </div>
-        </section>
-        <div className='cove-editor__content'>
-          <div className='cove-editor__content-wrap'>{props.children}</div>
-        </div>
-      </div>
+        {editorContent}
+      </Layout.Sidebar>
     </ErrorBoundary>
   )
 })

package/src/scss/main.scss

@@ -1,4 +1,8 @@
-@import '@cdc/core/styles/v2/main';
+@import '@cdc/core/styles/base';
+
+.cdc-open-viz-module.isEditor {
+  background: transparent;
+}
 
 .cove-accordion__panel-section {
   overflow: auto;
@@ -9,3 +13,14 @@
     margin-right: 5px;
   }
 }
+
+.cdc-open-viz-module.type-filtered-text {
+  .cove-accordion__panel-section .cove-input__checkbox--small {
+    // float: initial;
+    // display: initial;
+    float: none;
+  }
+  .cove-component__content.body:not(:empty) {
+    padding: 1rem !important ;
+  }
+}