@cdc/core 4.24.5 → 4.24.9

package/components/Filters.tsx

@@ -0,0 +1,520 @@
+import { useState, useEffect, useMemo } from 'react'
+import { useId } from 'react'
+
+// CDC
+import Button from './elements/Button'
+import { getQueryParams, updateQueryString } from '../helpers/queryStringUtils'
+import MultiSelect from './MultiSelect'
+import { Visualization } from '../types/Visualization'
+import { MultiSelectFilter, OrderBy, VizFilter } from '../types/VizFilter'
+import { filterVizData } from '../helpers/filterVizData'
+import { addValuesToFilters } from '../helpers/addValuesToFilters'
+import { DimensionsType } from '../types/Dimensions'
+import NestedDropdown from './NestedDropdown'
+import _ from 'lodash'
+
+export const filterStyleOptions = ['dropdown', 'nested-dropdown', 'pill', 'tab', 'tab bar', 'multi-select']
+
+export const filterOrderOptions: { label: string; value: OrderBy }[] = [
+  {
+    label: 'Ascending Alphanumeric',
+    value: 'asc'
+  },
+  {
+    label: 'Descending Alphanumeric',
+    value: 'desc'
+  },
+  {
+    label: 'Custom',
+    value: 'cust'
+  }
+]
+
+export const handleSorting = singleFilter => {
+  const singleFilterValues = _.cloneDeep(singleFilter.values)
+  if (singleFilter.order === 'cust' && singleFilter.filterStyle !== 'nested-dropdown') {
+    singleFilter.values = singleFilter.orderedValues?.length ? singleFilter.orderedValues : singleFilterValues
+    return singleFilter
+  }
+
+  const sort = (a, b) => {
+    const asc = singleFilter.order !== 'desc'
+    return (asc ? a : b).toString().localeCompare((asc ? b : a).toString(), 'en', { numeric: true })
+  }
+
+  singleFilter.values = singleFilterValues.sort(sort)
+
+  return singleFilter
+}
+
+const hasStandardFilterBehavior = ['chart', 'table']
+
+export const useFilters = props => {
+  const [showApplyButton, setShowApplyButton] = useState(false)
+
+  // Desconstructing: notice, adding more descriptive visualizationConfig name over config
+  // visualizationConfig feels more robust for all vis types so that its not confused with config/state/etc.
+  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, getUniqueValues } = props
+  const { type, data } = visualizationConfig
+
+  /**
+   * Re-orders a filter based on two indices and updates the runtime filters array and filters state
+   * @param {number} idx1 - The index of the original position of the filter value.
+   * @param {number} idx2 - The index of the new position for the filter value.
+   * @param {number} filterIndex - The index of the filter item within the array of filter items.
+   * @param {object} filter - The filter item itself, which contains an array of filter values.
+   * @return {void} None. This function only updates the state of the component.
+   *
+   * @modifies {object} - The filter object passed in as a parameter
+   * @modifies {array} - The filteredData state if visualizationConfig.type equals 'map'
+   * @modifies {object} - The visualizationConfig state
+   */
+  const handleFilterOrder = (idx1, idx2, filterIndex, filter) => {
+    // Create a shallow copy of the filter values array & update position of the values
+    const updatedValues = [...filter.values]
+    const [movedItem] = updatedValues.splice(idx1, 1)
+    updatedValues.splice(idx2, 0, movedItem)
+
+    const filtersCopy = hasStandardFilterBehavior.includes(visualizationConfig.type)
+      ? [...visualizationConfig.filters]
+      : [...filteredData]
+    const filterItem = { ...filtersCopy[filterIndex] }
+
+    // Overwrite filterItem.values since thats what we map through in the editor panel
+    filterItem.values = updatedValues
+    filterItem.orderedValues = updatedValues
+    filterItem.active = updatedValues[0]
+    filterItem.order = 'cust'
+
+    // Update the filters
+    filtersCopy[filterIndex] = filterItem
+
+    if (visualizationConfig.type === 'map') {
+      setFilteredData(filtersCopy)
+    }
+
+    setConfig({ ...visualizationConfig, filters: filtersCopy })
+  }
+
+  const changeFilterActive = (index, value) => {
+    let newFilters = visualizationConfig.type === 'map' ? [...filteredData] : [...visualizationConfig.filters]
+
+    if (visualizationConfig.filterBehavior === 'Apply Button') {
+      newFilters[index].queuedActive = value
+      setShowApplyButton(true)
+    } else {
+      const newFilter = newFilters[index]
+      if (newFilter.filterStyle !== 'nested-dropdown') {
+        newFilter.active = value
+      } else {
+        newFilter.active = value[0]
+        newFilter.subGrouping.active = value[1]
+      }
+
+      const queryParams = getQueryParams()
+      if (newFilter.setByQueryParameter && queryParams[newFilter.setByQueryParameter] !== newFilter.active) {
+        queryParams[newFilter.setByQueryParameter] = newFilter.active
+        updateQueryString(queryParams)
+      }
+    }
+
+    if (!visualizationConfig.dynamicSeries) {
+      newFilters = addValuesToFilters(newFilters, excludedData)
+      setConfig({
+        ...visualizationConfig,
+        filters: newFilters
+      })
+    }
+
+    // Used for setting active filter, fromHash breaks the filteredData functionality.
+    if (visualizationConfig.type === 'map' && visualizationConfig.filterBehavior === 'Filter Change') {
+      setFilteredData(newFilters)
+    }
+
+    // If we're on a chart and not using the apply button
+    if (
+      hasStandardFilterBehavior.includes(visualizationConfig.type) &&
+      visualizationConfig.filterBehavior === 'Filter Change'
+    ) {
+      const newFilteredData = filterVizData(newFilters, excludedData)
+      setFilteredData(newFilteredData)
+
+      if (visualizationConfig.dynamicSeries) {
+        const runtime = visualizationConfig.runtime || {}
+        runtime.series = []
+        runtime.seriesLabels = {}
+        runtime.seriesLabelsAll = []
+
+        if (newFilteredData && newFilteredData.length && newFilteredData.length > 0) {
+          Object.keys(newFilteredData[0]).forEach(seriesKey => {
+            if (
+              seriesKey !== visualizationConfig.xAxis.dataKey &&
+              newFilteredData[0][seriesKey] &&
+              (!visualizationConfig.filters ||
+                visualizationConfig.filters?.filter(filter => filter.columnName === seriesKey).length === 0) &&
+              (!visualizationConfig.columns || Object.keys(visualizationConfig.columns).indexOf(seriesKey) === -1)
+            ) {
+              runtime.series.push({
+                dataKey: seriesKey,
+                type: visualizationConfig.dynamicSeriesType,
+                lineType: visualizationConfig.dynamicSeriesLineType,
+                tooltip: true
+              })
+            }
+          })
+        }
+
+        runtime.seriesKeys = runtime.series
+          ? runtime.series.map(series => {
+              runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
+              runtime.seriesLabelsAll.push(series.name || series.dataKey)
+              return series.dataKey
+            })
+          : []
+
+        setConfig({
+          ...visualizationConfig,
+          filters: newFilters,
+          runtime
+        })
+      }
+    }
+  }
+
+  const handleApplyButton = newFilters => {
+    let needsQueryUpdate = false
+    const queryParams = getQueryParams()
+    newFilters.forEach(newFilter => {
+      if (newFilter.queuedActive) {
+        newFilter.active = newFilter.queuedActive
+        delete newFilter.queuedActive
+        if (newFilter.setByQueryParameter && queryParams[newFilter.setByQueryParameter] !== newFilter.active) {
+          queryParams[newFilter.setByQueryParameter] = newFilter.active
+          needsQueryUpdate = true
+        }
+      }
+    })
+    if (needsQueryUpdate) {
+      updateQueryString(queryParams)
+    }
+
+    setConfig({ ...visualizationConfig, filters: newFilters })
+
+    if (type === 'map') {
+      setFilteredData(newFilters, excludedData)
+    }
+
+    if (hasStandardFilterBehavior.includes(visualizationConfig.type)) {
+      setFilteredData(filterVizData(newFilters, excludedData))
+    }
+
+    setShowApplyButton(false)
+  }
+
+  const handleReset = e => {
+    let newFilters = [...visualizationConfig.filters]
+    e.preventDefault()
+
+    // reset to first item in values array.
+    let needsQueryUpdate = false
+    const queryParams = getQueryParams()
+    newFilters.forEach((filter, i) => {
+      if (!filter.values || filter.values.length === 0) {
+        filter.values = getUniqueValues(data, filter.columnName)
+      }
+      newFilters[i].active = handleSorting(filter).values[0]
+
+      if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== filter.active) {
+        queryParams[filter.setByQueryParameter] = filter.active
+        needsQueryUpdate = true
+      }
+    })
+
+    if (needsQueryUpdate) {
+      updateQueryString(queryParams)
+    }
+
+    setConfig({ ...visualizationConfig, filters: newFilters })
+
+    if (type === 'map') {
+      setFilteredData(newFilters, excludedData)
+    } else {
+      setFilteredData(filterVizData(newFilters, excludedData))
+    }
+  }
+
+  const filterConstants = {
+    buttonText: 'Apply Filters',
+    resetText: 'Reset All',
+    introText: `Make a selection from the filters to change the visualization information.`,
+    applyText: 'Select the apply button to update the visualization information.'
+  }
+
+  // prettier-ignore
+  return {
+    handleApplyButton,
+    changeFilterActive,
+    showApplyButton,
+    handleReset,
+    filterConstants,
+    filterStyleOptions,
+    filterOrderOptions,
+    handleFilterOrder,
+    handleSorting
+  }
+}
+
+type FilterProps = {
+  filteredData: Object[]
+  dimensions: DimensionsType
+  config: Visualization
+  // function for updating the runtime filters
+  setFilteredData: Function
+  // updating function for setting fitlerBehavior
+  setConfig: Function
+  // exclusions
+  exclusions: any[]
+}
+
+const Filters = (props: FilterProps) => {
+  const { config: visualizationConfig, filteredData, dimensions } = props
+  const { filters, type, general, theme, filterBehavior } = visualizationConfig
+  const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
+  const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
+  const id = useId()
+
+  // useFilters hook provides data and logic for handling various filter functions
+  // prettier-ignore
+  const {
+    handleApplyButton,
+    changeFilterActive,
+    showApplyButton,
+    handleReset,
+    filterConstants,
+    handleSorting
+  } = useFilters(props)
+
+  useEffect(() => {
+    if (!dimensions) return
+    if (Number(dimensions[0]) < 768 && filters?.length > 0) {
+      setMobileFilterStyle(true)
+    } else {
+      setMobileFilterStyle(false)
+    }
+  }, [dimensions])
+
+  useEffect(() => {
+    if (selectedFilter) {
+      const el = document.getElementById(selectedFilter.id)
+      if (el) el.focus()
+    }
+  }, [changeFilterActive, selectedFilter])
+
+  const TabBar = props => {
+    const { filter: singleFilter, index: outerIndex } = props
+    return (
+      <section className='single-filters__tab-bar'>
+        {singleFilter.values.map((filter, index) => {
+          const buttonClassList = ['button__tab-bar', singleFilter.active === filter ? 'button__tab-bar--active' : '']
+          return (
+            <button
+              id={`${filter}-${outerIndex}-${index}-${id}`}
+              className={buttonClassList.join(' ')}
+              key={filter}
+              onClick={e => {
+                changeFilterActive(outerIndex, filter)
+                setSelectedFilter(e.target)
+              }}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  changeFilterActive(outerIndex, filter)
+                  setSelectedFilter(e.target)
+                }
+              }}
+            >
+              {filter}
+            </button>
+          )
+        })}
+      </section>
+    )
+  }
+
+  const Dropdown = props => {
+    const { index: outerIndex, label, active, filters } = props
+    return (
+      <select
+        id={`filter-${outerIndex}`}
+        name={label}
+        aria-label={`Filter by ${label}`}
+        className='filter-select'
+        data-index='0'
+        value={active}
+        onChange={e => {
+          changeFilterActive(outerIndex, e.target.value)
+        }}
+      >
+        {filters}
+      </select>
+    )
+  }
+
+  const vizFiltersWithValues = useMemo(() => {
+    // Here charts is using config.filters where maps is using a runtime value
+    let vizfilters = type === 'map' ? filteredData : filters
+    if (!vizfilters) return []
+    if (vizfilters.fromHash) delete vizfilters.fromHash // support for Maps config
+    return addValuesToFilters(vizfilters as VizFilter[], visualizationConfig.data)
+  }, [filters, filteredData])
+
+  // Resolve Filter Styles
+  const Style = () => {
+    return vizFiltersWithValues.map((singleFilter: VizFilter, outerIndex) => {
+      if (singleFilter.showDropdown === false) return
+
+      const DropdownOptions = []
+      const Pills = []
+      const Tabs = []
+
+      const { active, queuedActive, label, filterStyle } = singleFilter as VizFilter
+
+      handleSorting(singleFilter)
+
+      singleFilter.values?.forEach((filterOption, index) => {
+        const pillClassList = ['pill', active === filterOption ? 'pill--active' : null, theme && theme]
+        const tabClassList = ['tab', active === filterOption && 'tab--active', theme && theme]
+
+        Pills.push(
+          <div className='pill__wrapper' key={`pill-${index}`}>
+            <button
+              id={`${filterOption}-${outerIndex}-${index}-${id}`}
+              className={pillClassList.join(' ')}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  changeFilterActive(outerIndex, filterOption)
+                  setSelectedFilter(e.target)
+                }
+              }}
+              onClick={e => {
+                changeFilterActive(outerIndex, filterOption)
+                setSelectedFilter(e.target)
+              }}
+              name={label}
+            >
+              {filterOption}
+            </button>
+          </div>
+        )
+
+        DropdownOptions.push(
+          <option key={index} value={filterOption} aria-label={filterOption}>
+            {singleFilter.labels && singleFilter.labels[filterOption]
+              ? singleFilter.labels[filterOption]
+              : filterOption}
+          </option>
+        )
+
+        Tabs.push(
+          <button
+            id={`${filterOption}-${outerIndex}-${index}-${id}`}
+            className={tabClassList.join(' ')}
+            onClick={e => {
+              changeFilterActive(outerIndex, filterOption)
+              setSelectedFilter(e.target)
+            }}
+            onKeyDown={e => {
+              if (e.keyCode === 13) {
+                changeFilterActive(outerIndex, filterOption)
+                setSelectedFilter(e.target)
+              }
+            }}
+          >
+            {filterOption}
+          </button>
+        )
+      })
+
+      const classList = [
+        'single-filters',
+        mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`
+      ]
+      const mobileExempt = ['nested-dropdown', 'multi-select'].includes(filterStyle)
+      const showDefaultDropdown = (filterStyle === 'dropdown' || mobileFilterStyle) && !mobileExempt
+      return (
+        <div className={classList.join(' ')} key={outerIndex}>
+          <>
+            {label && <label htmlFor={`filter-${outerIndex}`}>{label}</label>}
+            {filterStyle === 'tab' && !mobileFilterStyle && Tabs}
+            {filterStyle === 'pill' && !mobileFilterStyle && Pills}
+            {filterStyle === 'tab bar' && !mobileFilterStyle && <TabBar filter={singleFilter} index={outerIndex} />}
+            {filterStyle === 'multi-select' && (
+              <MultiSelect
+                options={singleFilter.values.map(v => ({ value: v, label: v }))}
+                fieldName={outerIndex}
+                updateField={(_section, _subSection, fieldName, value) => changeFilterActive(fieldName, value)}
+                selected={singleFilter.active as string[]}
+                limit={(singleFilter as MultiSelectFilter).selectLimit || 5}
+              />
+            )}
+            {filterStyle === 'nested-dropdown' && (
+              <NestedDropdown
+                currentFilter={singleFilter}
+                listLabel={label}
+                handleSelectedItems={value => changeFilterActive(outerIndex, value)}
+              />
+            )}
+            {showDefaultDropdown && (
+              <Dropdown
+                filter={singleFilter}
+                index={outerIndex}
+                label={label}
+                active={queuedActive || active}
+                filters={DropdownOptions}
+              />
+            )}
+          </>
+        </div>
+      )
+    })
+  }
+
+  if (visualizationConfig?.filters?.length === 0) return
+  const filterSectionClassList = [
+    `filters-section legend_${visualizationConfig?.legend?.hide ? 'hidden' : 'visible'}_${
+      visualizationConfig?.legend?.position || ''
+    }`,
+    type === 'map' ? general.headerColor : visualizationConfig?.visualizationType === 'Spark Line' ? null : theme
+  ]
+  return (
+    <section className={filterSectionClassList.join(' ')}>
+      <p className='filters-section__intro-text'>
+        {filters?.some(f => f.active && f.showDropdown) ? filterConstants.introText : ''}{' '}
+        {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
+      </p>
+      <div className='filters-section__wrapper'>
+        {' '}
+        <>
+          <Style />
+          {filterBehavior === 'Apply Button' ? (
+            <div className='filters-section__buttons'>
+              <Button
+                onClick={() => handleApplyButton(filters)}
+                disabled={!showApplyButton}
+                className={[general?.headerColor ? general.headerColor : theme, 'apply'].join(' ')}
+              >
+                {filterConstants.buttonText}
+              </Button>
+              <a href='#!' role='button' onClick={handleReset}>
+                {filterConstants.resetText}
+              </a>
+            </div>
+          ) : (
+            <></>
+          )}
+        </>
+      </div>
+    </section>
+  )
+}
+
+export default Filters

package/components/Footnotes/Footnotes.tsx

@@ -0,0 +1,25 @@
+import { Footnote } from '../../types/Footnotes'
+import './footnotes.css'
+
+type FootnotesProps = {
+  footnotes: Footnote[]
+}
+
+const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
+  return (
+    <footer className='col-12 m-3 mt-1 mb-0'>
+      <ul className='cove-footnotes'>
+        {footnotes.map((note, i) => {
+          return (
+            <li key={note.symbol + i} className='mb-1'>
+              {note.symbol && <span className='mr-1'>{note.symbol}</span>}
+              {note.text}
+            </li>
+          )
+        })}
+      </ul>
+    </footer>
+  )
+}
+
+export default Footnotes

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -0,0 +1,45 @@
+import EditorWrapper from '../EditorWrapper'
+import Footnotes from './Footnotes'
+import FootnotesEditor from '../EditorPanel/FootnotesEditor'
+import { ViewPort } from '../../types/ViewPort'
+import FootnotesConfig, { Footnote } from '../../types/Footnotes'
+import _ from 'lodash'
+import { useMemo } from 'react'
+import { updateFieldFactory } from '../../helpers/updateFieldFactory'
+
+type StandAloneProps = {
+  isEditor?: boolean
+  visualizationKey: string
+  config: FootnotesConfig
+  updateConfig?: (config: FootnotesConfig) => void
+  viewport?: ViewPort
+}
+
+const FootnotesStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, viewport, isEditor, updateConfig }) => {
+  const updateField = updateFieldFactory<Footnote[]>(config, updateConfig)
+  if (isEditor)
+    return (
+      <EditorWrapper component={FootnotesStandAlone} visualizationKey={visualizationKey} visualizationConfig={config} updateConfig={updateConfig} type={'Footnotes'} viewport={viewport}>
+        <FootnotesEditor key={visualizationKey} config={config} updateField={updateField} />
+      </EditorWrapper>
+    )
+
+  // get the api footnotes from the config
+  const apiFootnotes = useMemo(() => {
+    if (config.dataKey && config.dynamicFootnotes) {
+      const { symbolColumn, textColumn, orderColumn } = config.dynamicFootnotes
+      const configData = config.formattedData || config.data
+      const _data = configData.map(row => _.pick(row, [symbolColumn, textColumn, orderColumn]))
+      _data.sort((a, b) => a[orderColumn] - b[orderColumn])
+      return _data.map(row => ({ symbol: row[symbolColumn], text: row[textColumn] }))
+    }
+    return []
+  }, [config.dynamicFootnotes, config.formattedData, config.data])
+
+  // get static footnotes from the config.footnotes
+  const staticFootnotes = config.staticFootnotes || []
+
+  return <Footnotes footnotes={[...apiFootnotes, ...staticFootnotes]} />
+}
+
+export default FootnotesStandAlone

package/components/Footnotes/footnotes.css

@@ -0,0 +1,5 @@
+:is(ul).cove-footnotes {
+  :is(li) {
+    list-style: none;
+  }
+}

package/components/Footnotes/index.ts

@@ -0,0 +1 @@
+export { default } from './Footnotes'

package/components/Layout/components/Responsive.tsx

@@ -13,7 +13,8 @@ const breakpoints = [
   '1280' // xl
 ]
 
-const os = navigator.userAgent.indexOf('Win') !== -1 ? 'Win' : navigator.userAgent.indexOf('Mac') !== -1 ? 'MacOS' : null
+const os =
+  navigator.userAgent.indexOf('Win') !== -1 ? 'Win' : navigator.userAgent.indexOf('Mac') !== -1 ? 'MacOS' : null
 
 const Responsive = ({ children, isEditor }) => {
   const [displayPanel, setDisplayPanel] = useState(false)
@@ -35,6 +36,7 @@ const Responsive = ({ children, isEditor }) => {
   )
 
   const onKeypress = key => {
+    if (!isEditor) return key
     if (key.code === 'KeyL' && key.ctrlKey) setDisplayPanel(display => !display)
     const viewportCommandKey = os === 'MacOS' ? key.metaKey : key.altKey
     if (viewportCommandKey) {
@@ -113,7 +115,10 @@ const Responsive = ({ children, isEditor }) => {
 
   return (
     <div className='cove-editor__content' data-grid={displayGrid || null}>
-      <div className='cove-editor__content-wrap--x' style={viewportPreview ? { maxWidth: viewportPreview + 'px', minWidth: 'unset' } : null}>
+      <div
+        className='cove-editor__content-wrap--x'
+        style={viewportPreview ? { maxWidth: viewportPreview + 'px', minWidth: 'unset' } : null}
+      >
         <div className='cove-editor__content-wrap--y'>
           <div className='cove-editor-utils__breakpoints--px'>
             {displayGrid && displayPanel && (
@@ -143,7 +148,8 @@ const Responsive = ({ children, isEditor }) => {
           <p className={displayGrid ? 'hotkey--active' : null}>G</p>
           <p className={rotateAnimation ? 'hotkey--active' : null}>R</p>
           <p className={viewportPreview ? 'hotkey--active' : null}>
-            {os === 'MacOS' ? <Icon style={{ marginRight: '0.25rem' }} display='command' size={12} /> : 'Alt'} + {viewportPreview ? breakpoints.indexOf(viewportPreview) + 1 : `[1 - ${breakpoints.length}]`}
+            {os === 'MacOS' ? <Icon style={{ marginRight: '0.25rem' }} display='command' size={12} /> : 'Alt'} +{' '}
+            {viewportPreview ? breakpoints.indexOf(viewportPreview) + 1 : `[1 - ${breakpoints.length}]`}
           </p>
         </div>
       </div>
@@ -161,7 +167,11 @@ const Responsive = ({ children, isEditor }) => {
             </div>
           </button>
           {breakpoints.map((breakpoint, index) => (
-            <button className={`cove-editor-utils__breakpoints-item${viewportPreview === breakpoint ? ' active' : ''}`} onClick={() => viewportPreviewController(breakpoint)} key={index}>
+            <button
+              className={`cove-editor-utils__breakpoints-item${viewportPreview === breakpoint ? ' active' : ''}`}
+              onClick={() => viewportPreviewController(breakpoint)}
+              key={index}
+            >
               {breakpoint}px
             </button>
           ))}

package/components/Layout/components/Sidebar/components/Sidebar.tsx

@@ -21,21 +21,30 @@ const Sidebar: React.FC<SidebarProps> = props => {
     const sectionClasses = ['editor-panel', 'cove', 'sidebar']
     if (!displayPanel) sectionClasses.push('hidden')
     if (isDashboard) sectionClasses.push('dashboard')
-    return sectionClasses
+    return sectionClasses.join(' ')
   }
 
   const getButtonClasses = () => {
     const buttonClasses = []
     if (displayPanel) buttonClasses.push('editor-panel__toggle')
     if (!displayPanel) buttonClasses.push('collapsed', 'editor-panel__toggle')
-    return buttonClasses
+    return buttonClasses.join(' ')
+  }
+
+  const getTitleClasses = () => {
+    const titleClasses = ['editor-panel__title']
+    if (!displayPanel) titleClasses.push('collapsed')
+    return titleClasses.join(' ')
   }
 
   return (
     <>
-      <button className={getButtonClasses().join(' ')} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}></button>
-      <section className={getSectionClasses().join(' ')}>
-        <h2 className='editor-panel__title'>{title}</h2>
+      {/* mimic the editor panel title to keep the button visible. */}
+      <section className='editor-panel__toggle-wrapper p-absolute' style={{ height: '49.75px', width: '350px' }}>
+        <button className={getButtonClasses()} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}></button>
+      </section>
+      <section className={getSectionClasses()}>
+        <h2 className={getTitleClasses()}>{title}</h2>
         <section className='form-container' data-html2canvas-ignore>
           {children}
         </section>