@cdc/markup-include 4.24.9 → 4.24.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/markup-include",
-  "version": "4.24.9",
+  "version": "4.24.11",
   "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.11",
     "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": "9ab5ee9b2b0ef7321a66a2104be6ce8899ec3808"
 }

package/src/CdcMarkupInclude.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useRef, useReducer, useState } from 'react'
+import { useEffect, useCallback, useRef, useReducer, useMemo } from 'react'
 import _ from 'lodash'
 // external
 import { Markup } from 'interweave'
@@ -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,46 +152,58 @@ 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)
   }
 
+  const emptyVariableChecker = []
+
   const convertVariablesInMarkup = inlineMarkup => {
     if (_.isEmpty(markupVariables)) return inlineMarkup
     const variableRegexPattern = /{{(.*?)}}/g
     const convertedInlineMarkup = inlineMarkup.replace(variableRegexPattern, variableTag => {
+      if (emptyVariableChecker.length > 0) return
       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 workingData =
+        workingVariable && workingVariable.conditions.length === 0
+          ? data
+          : filterOutConditions(data, [...workingVariable.conditions])
+
+      const variableValues: string[] = _.uniq(
+        (workingData || []).map(dataObject => {
+          const dataObjectValue = dataObject[workingVariable.columnName]
+          return workingVariable.addCommas && !isNaN(parseFloat(dataObjectValue))
+            ? parseFloat(dataObjectValue).toLocaleString('en-US', { useGrouping: true })
+            : dataObjectValue
+        })
+      )
 
-      const variableValues: string[] = _.uniq(workingData?.map(dataObject => dataObject[workingVariable.columnName]))
       const variableDisplay = []
 
       const listConjunction = !isEditor ? 'and' : 'or'
 
       const length = variableValues.length
       if (length === 2) {
-        variableValues.push(variableValues.join(` ${listConjunction} `))
+        const newVariableValues = variableValues.join(` ${listConjunction} `)
+        variableValues.splice(0, 2, newVariableValues)
       }
       if (length > 2) {
         variableValues[length - 1] = `${listConjunction} ${variableValues[length - 1]}`
       }
       variableDisplay.push(variableValues.join(', '))
 
-      let finalDisplay = variableDisplay[0]
+      const finalDisplay = variableDisplay[0]
 
-      if(workingVariable.addCommas && !isNaN(parseFloat(finalDisplay))){
-        finalDisplay = parseFloat(finalDisplay)
-        finalDisplay = finalDisplay.toLocaleString('en-US', {useGrouping: true})
+      if (finalDisplay === '' && contentEditor.allowHideSection) {
+        emptyVariableChecker.push(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 +236,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))
@@ -224,23 +245,27 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
 
   const markup = useInlineHTML ? convertVariablesInMarkup(inlineHTML) : parseBodyMarkup(urlMarkup)
 
+  const hideMarkupInclude = contentEditor?.allowHideSection && emptyVariableChecker.length > 0 && !isEditor
+
   if (loading === false) {
     content = (
       <>
         {isEditor && <EditorPanel />}
-        <Layout.Responsive isEditor={isEditor}>
-          <div className='markup-include-content-container cove-component__content no-borders'>
-            <div className={`markup-include-component ${contentClasses.join(' ')}`}>
-              <Title title={title} isDashboard={isDashboard} classes={[`${theme}`, 'mb-0']} />
-              <div className={`${innerContainerClasses.join(' ')}`}>
-                <div className='cove-component__content-wrap'>
-                  {!markupError && <Markup allowElements={!!urlMarkup} content={markup} />}
-                  {markupError && srcUrl && <div className='warning'>{errorMessage}</div>}
+        {!hideMarkupInclude && (
+          <Layout.Responsive isEditor={isEditor}>
+            <div className='markup-include-content-container cove-component__content no-borders'>
+              <div className={`markup-include-component ${contentClasses.join(' ')}`}>
+                <Title title={title} isDashboard={isDashboard} classes={[`${theme}`, 'mb-0']} />
+                <div className={`${innerContainerClasses.join(' ')}`}>
+                  <div className='cove-component__content-wrap'>
+                    {!markupError && <Markup allowElements={!!urlMarkup} content={markup} />}
+                    {markupError && srcUrl && <div className='warning'>{errorMessage}</div>}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </Layout.Responsive>
+          </Layout.Responsive>
+        )}
       </>
     )
   }

package/src/components/Conditions.tsx

@@ -14,7 +14,15 @@ type CondtionsProps = {
   updateConditionsList: Function
 }
 
-const Conditions: React.FC<CondtionsProps> = ({ conditionControls, conditionLookup, conditionSettings, conditionIndex, removeCondition, selectedColumn, updateConditionsList }) => {
+const Conditions: React.FC<CondtionsProps> = ({
+  conditionControls,
+  conditionLookup,
+  conditionSettings,
+  conditionIndex,
+  removeCondition,
+  selectedColumn,
+  updateConditionsList
+}) => {
   const [openConditionControls, setOpenConditionControls] = conditionControls
   const showCondition = openConditionControls[conditionIndex]
   const setShowCondition = (index, value) => {
@@ -43,7 +51,10 @@ const Conditions: React.FC<CondtionsProps> = ({ conditionControls, conditionLook
         <button onClick={() => setShowCondition(conditionIndex, true)}>
           <Icon display='caretDown' />
         </button>
-        <span> {value ? `${columnName} ${isOrIsNotEqualTo === 'is' ? 'is' : 'is not'} ${value}` : 'New Condition'}</span>
+        <span>
+          {' '}
+          {value ? `${columnName} ${isOrIsNotEqualTo === 'is' ? 'is' : 'is not'} ${value}` : 'New Condition'}
+        </span>
       </div>
     </>
   ) : (
@@ -58,7 +69,7 @@ const Conditions: React.FC<CondtionsProps> = ({ conditionControls, conditionLook
         >
           <Icon display='caretDown' />
         </button>
-        <button className='btn btn-danger btn-sm mt-0 ml-2' onClick={() => removeCondition(conditionIndex)}>
+        <button className='btn btn-warn btn-sm mt-0 ml-2' onClick={() => removeCondition(conditionIndex)}>
           Remove
         </button>
       </div>
@@ -66,7 +77,11 @@ const Conditions: React.FC<CondtionsProps> = ({ conditionControls, conditionLook
         <label className='d-block'>
           <span>Condition : </span>
           <div className='pt-1'>
-            <select className='ml-1' value={columnName} onChange={e => handleConditionChange(e.target.value, 'columnName')}>
+            <select
+              className='ml-1'
+              value={columnName}
+              onChange={e => handleConditionChange(e.target.value, 'columnName')}
+            >
               <option value=''>Select</option>
               {columnNameConditionOptions?.map(columnName => (
                 <option key={columnName} value={columnName}>
@@ -74,7 +89,11 @@ const Conditions: React.FC<CondtionsProps> = ({ conditionControls, conditionLook
                 </option>
               ))}
             </select>
-            <select className='ml-1' value={isOrIsNotEqualTo} onChange={e => handleConditionChange(e.target.value, 'isOrIsNotEqualTo')}>
+            <select
+              className='ml-1'
+              value={isOrIsNotEqualTo}
+              onChange={e => handleConditionChange(e.target.value, 'isOrIsNotEqualTo')}
+            >
               <option value='is'>is</option>
               <option value='isNot'>is not</option>
             </select>

package/src/components/EditorPanel.tsx

@@ -23,13 +23,26 @@ import Accordion from '@cdc/core/components/ui/Accordion'
 import '@cdc/core/styles/v2/components/editor.scss'
 import './editorPanel.style.css'
 import VariableSection from './Variables'
+import { CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 
-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 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: React.FC = () => {
   const { config, data, isDashboard, loading, setParentConfig, updateConfig } = useContext(ConfigContext)
   const { contentEditor, theme, visual } = config
-  const { inlineHTML, markupVariables, srcUrl, title, useInlineHTML } = contentEditor
+  const { inlineHTML, markupVariables, srcUrl, title, useInlineHTML, allowHideSection } = contentEditor
   const [displayPanel, setDisplayPanel] = useState(true)
   const updateField = updateFieldFactory(config, updateConfig, true)
   const hasData = data?.[0] !== undefined ?? false
@@ -111,17 +124,40 @@ const EditorPanel: React.FC = () => {
   const editorContent = (
     <Accordion>
       <Accordion.Section title='General'>
-        <InputText value={title || ''} section='contentEditor' fieldName='title' label='Title' placeholder='Markup Include Title' updateField={updateField} />
+        <InputText
+          value={title || ''}
+          section='contentEditor'
+          fieldName='title'
+          label='Title'
+          placeholder='Markup Include Title'
+          updateField={updateField}
+        />
       </Accordion.Section>
       <Accordion.Section title='Content Editor'>
         <span className='divider-heading'>Enter Markup</span>
-        <InputCheckbox inline value={useInlineHTML} section='contentEditor' fieldName='useInlineHTML' label='Use Inline HTML&nbsp;' updateField={updateField} />
+        <InputCheckbox
+          inline
+          value={useInlineHTML}
+          section='contentEditor'
+          fieldName='useInlineHTML'
+          label='Use Inline HTML&nbsp;'
+          updateField={updateField}
+        />
         <div className='column-edit'>
           {useInlineHTML ? (
             <>
               {/* HTML Textbox */}
               <div ref={textAreaInEditorContainer}>
-                <InputText value={inlineHTML} section='contentEditor' fieldName='inlineHTML' label='HTML' placeholder='Add HTML here' type='textarea' rows={10} updateField={updateField} />
+                <InputText
+                  value={inlineHTML}
+                  section='contentEditor'
+                  fieldName='inlineHTML'
+                  label='HTML'
+                  placeholder='Add HTML here'
+                  type='textarea'
+                  rows={10}
+                  updateField={updateField}
+                />
 
                 <hr className='accordion__divider' />
               </div>
@@ -140,23 +176,69 @@ const EditorPanel: React.FC = () => {
                     </Tooltip>
                   </span>
                 </label>
-                {hasData === false && <span className='need-data-source-prompt'>To use variables, add data source.</span>}
+                {hasData === false && (
+                  <span className='need-data-source-prompt'>To use variables, add data source.</span>
+                )}
                 {variableArray && variableArray.length > 0 && (
                   <div className='section-border'>
                     {variableArray?.map((variableObject, index) => {
-                      return <VariableSection key={`${variableObject.name}-${index}`} controls={openVariableControls} data={data} deleteVariable={deleteVariable} updateVariableArray={updateVariableArray} variableConfig={variableObject} variableIndex={index} />
+                      return (
+                        <VariableSection
+                          key={`${variableObject.name}-${index}`}
+                          controls={openVariableControls}
+                          data={data}
+                          deleteVariable={deleteVariable}
+                          updateVariableArray={updateVariableArray}
+                          variableConfig={variableObject}
+                          variableIndex={index}
+                        />
+                      )
                     })}
                   </div>
                 )}
+                <div className='pt-2'>
+                  <CheckBox
+                    value={allowHideSection}
+                    section='contentEditor'
+                    fieldName='allowHideSection'
+                    label='Hide Section on Null'
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display='question'
+                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>{`Hide this entire Markup Include section if any variable is null or blank.`}</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+                </div>
+
                 <div className='mb-1 d-flex'>
-                  <button className={'btn btn-primary'} onClick={handleCreateNewVariableButtonClick} disabled={!hasData}>
+                  <button
+                    className={'btn btn-primary'}
+                    onClick={handleCreateNewVariableButtonClick}
+                    disabled={!hasData}
+                  >
                     Create New Variable
                   </button>
                 </div>
               </fieldset>
             </>
           ) : (
-            <InputText value={srcUrl || ''} section='contentEditor' fieldName='srcUrl' label='Source URL;' placeholder='https://www.example.com/file.html' updateField={updateField} />
+            <InputText
+              value={srcUrl || ''}
+              section='contentEditor'
+              fieldName='srcUrl'
+              label='Source URL;'
+              placeholder='https://www.example.com/file.html'
+              updateField={updateField}
+            />
           )}
         </div>
       </Accordion.Section>
@@ -177,11 +259,41 @@ const EditorPanel: React.FC = () => {
           </ul>
         </div>
         <div className='cove-accordion__panel-section checkbox-group'>
-          <InputCheckbox value={visual.border} section='visual' fieldName='border' label='Display Border&nbsp;' updateField={updateField} />
-          <InputCheckbox value={visual.borderColorTheme} section='visual' fieldName='borderColorTheme' label='Use Border Color Theme&nbsp;' updateField={updateField} />
-          <InputCheckbox value={visual.accent} section='visual' fieldName='accent' label='Use Accent Style&nbsp;' updateField={updateField} />
-          <InputCheckbox value={visual.background} section='visual' fieldName='background' label='Use Theme Background Color&nbsp;' updateField={updateField} />
-          <InputCheckbox value={visual.hideBackgroundColor} section='visual' fieldName='hideBackgroundColor' label='Hide Background Color&nbsp;' updateField={updateField} />
+          <InputCheckbox
+            value={visual.border}
+            section='visual'
+            fieldName='border'
+            label='Display Border&nbsp;'
+            updateField={updateField}
+          />
+          <InputCheckbox
+            value={visual.borderColorTheme}
+            section='visual'
+            fieldName='borderColorTheme'
+            label='Use Border Color Theme&nbsp;'
+            updateField={updateField}
+          />
+          <InputCheckbox
+            value={visual.accent}
+            section='visual'
+            fieldName='accent'
+            label='Use Accent Style&nbsp;'
+            updateField={updateField}
+          />
+          <InputCheckbox
+            value={visual.background}
+            section='visual'
+            fieldName='background'
+            label='Use Theme Background Color&nbsp;'
+            updateField={updateField}
+          />
+          <InputCheckbox
+            value={visual.hideBackgroundColor}
+            section='visual'
+            fieldName='hideBackgroundColor'
+            label='Hide Background Color&nbsp;'
+            updateField={updateField}
+          />
         </div>
       </Accordion.Section>
     </Accordion>
@@ -191,7 +303,12 @@ const EditorPanel: React.FC = () => {
 
   return (
     <ErrorBoundary component='EditorPanel'>
-      <Layout.Sidebar displayPanel={displayPanel} isDashboard={isDashboard} title={'Configure Markup Include'} onBackClick={onBackClick}>
+      <Layout.Sidebar
+        displayPanel={displayPanel}
+        isDashboard={isDashboard}
+        title={'Configure Markup Include'}
+        onBackClick={onBackClick}
+      >
         {editorContent}
       </Layout.Sidebar>
     </ErrorBoundary>

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;