@cdc/markup-include 4.24.9 → 4.24.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/markup-include",
-  "version": "4.24.9",
+  "version": "4.24.10",
   "description": "React component for displaying HTML content from an outside link",
   "moduleName": "CdcMarkupInclude",
   "main": "dist/cdcmarkupinclude",
@@ -27,7 +27,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.24.9",
+    "@cdc/core": "^4.24.10",
     "axios": "^1.6.0",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
@@ -39,5 +39,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "c4b0402afe6ed209a85b7078711549b9fd7dae7d"
+  "gitHead": "a4d88d1bc91f596e1b0307d8e25c57ad8c668b75"
 }

package/src/CdcMarkupInclude.tsx

@@ -31,8 +31,21 @@ type CdcMarkupIncludeProps = {
 
 import Title from '@cdc/core/components/ui/Title'
 
-const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config: configObj, isDashboard = true, isEditor = false, setConfig: setParentConfig }) => {
-  const initialState = { config: configObj, loading: true, urlMarkup: '', markupError: null, errorMessage: null, coveLoadedHasRan: false }
+const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
+  configUrl,
+  config: configObj,
+  isDashboard = true,
+  isEditor = false,
+  setConfig: setParentConfig
+}) => {
+  const initialState = {
+    config: configObj,
+    loading: true,
+    urlMarkup: '',
+    markupError: null,
+    errorMessage: null,
+    coveLoadedHasRan: false
+  }
 
   const [state, dispatch] = useReducer(markupIncludeReducer, initialState)
 
@@ -92,7 +105,8 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
       let errorList = {
         200: 'This is likely due to a CORS restriction policy from the remote origin address.',
         404: 'The requested source URL cannot be found. Please verify the link address provided.',
-        proto: 'Provided source URL must include https:// or http:// before the address (depending on the source content type).'
+        proto:
+          'Provided source URL must include https:// or http:// before the address (depending on the source content type).'
       }
 
       message += errorList[errorCode]
@@ -138,7 +152,10 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
   const filterOutConditions = (workingData, conditionList) => {
     const { columnName, isOrIsNotEqualTo, value } = conditionList[0]
 
-    const newWorkingData = isOrIsNotEqualTo === 'is' ? workingData.filter(dataObject => dataObject[columnName] === value) : workingData.filter(dataObject => dataObject[columnName] !== value)
+    const newWorkingData =
+      isOrIsNotEqualTo === 'is'
+        ? workingData.filter(dataObject => dataObject[columnName] === value)
+        : workingData.filter(dataObject => dataObject[columnName] !== value)
 
     conditionList.shift()
     return conditionList.length === 0 ? newWorkingData : filterOutConditions(newWorkingData, conditionList)
@@ -150,9 +167,14 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
     const convertedInlineMarkup = inlineMarkup.replace(variableRegexPattern, variableTag => {
       const workingVariable = markupVariables.filter(variable => variable.tag === variableTag)[0]
       if (workingVariable === undefined) return [variableTag]
-      const workingData = workingVariable && workingVariable.conditions.length === 0 ? data : filterOutConditions(data, [...workingVariable.conditions])
-
-      const variableValues: string[] = _.uniq(workingData?.map(dataObject => dataObject[workingVariable.columnName]))
+      const workingData =
+        workingVariable && workingVariable.conditions.length === 0
+          ? data
+          : filterOutConditions(data, [...workingVariable.conditions])
+
+      const variableValues: string[] = _.uniq(
+        (workingData || []).map(dataObject => dataObject[workingVariable.columnName])
+      )
       const variableDisplay = []
 
       const listConjunction = !isEditor ? 'and' : 'or'
@@ -168,16 +190,12 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
 
       let finalDisplay = variableDisplay[0]
 
-      if(workingVariable.addCommas && !isNaN(parseFloat(finalDisplay))){
+      if (workingVariable.addCommas && !isNaN(parseFloat(finalDisplay))) {
         finalDisplay = parseFloat(finalDisplay)
-        finalDisplay = finalDisplay.toLocaleString('en-US', {useGrouping: true})
+        finalDisplay = finalDisplay.toLocaleString('en-US', { useGrouping: true })
       }
 
-      const displayInfoMessage = '<span class="font-weight-bold display-Info-message">One or more of the following values will appear in the place of this variable placeholder:</span>'
-
-      const newReplacementForVariable = `<span class="cove-tooltip-variable">${variableTag}<span class="cove-tooltip-value">${displayInfoMessage}<br/>${finalDisplay}</span></span><span class="cove-markup-include-variable-value">${finalDisplay}</span>`
-
-      return newReplacementForVariable
+      return finalDisplay
     })
     return convertedInlineMarkup
   }
@@ -210,11 +228,6 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
     }
   }, [config, container])
 
-  //Reload config if config object provided/updated
-  useEffect(() => {
-    loadConfig().catch(err => console.log(err))
-  }, [configObj?.data])
-
   //Reload any functions when config is updated
   useEffect(() => {
     loadConfigMarkupData().catch(err => console.log(err))

package/src/coreStyles_markupinclude.scss

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

package/src/index.jsx

@@ -5,6 +5,8 @@ import { GlobalContextProvider } from '@cdc/core/components/GlobalContext'
 
 import CdcMarkupInclude from './CdcMarkupInclude'
 
+import './coreStyles_markupinclude.scss'
+
 let isEditor = window.location.href.includes('editor=true')
 
 let domContainer = document.getElementsByClassName('react-container')[0]
@@ -14,5 +16,5 @@ ReactDOM.createRoot(domContainer).render(
     <GlobalContextProvider>
       <CdcMarkupInclude configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
     </GlobalContextProvider>
-  </React.StrictMode>,
+  </React.StrictMode>
 )

package/src/scss/main.scss

@@ -1,5 +1,3 @@
-@import '@cdc/core/styles/base';
-
 .markup-include {
   .checkbox-group {
     padding: 16px;