@cdc/waffle-chart 4.26.2 → 4.26.3

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "4.26.2",
+  "version": "4.26.3",
   "description": "React component for displaying a single piece of data in a card module",
   "license": "Apache-2.0",
   "author": "rshelnutt <qyu6@cdc.gov>",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.2",
+    "@cdc/core": "^4.26.3",
     "@visx/shape": "^3.12.0",
     "@visx/text": "^3.12.0",
     "html-react-parser": "^5.2.3",
@@ -20,7 +20,7 @@
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "main": "dist/cdcwafflechart",
   "moduleName": "CdcWaffleChart",

package/src/CdcWaffleChart.tsx

@@ -25,13 +25,14 @@ import { publish } from '@cdc/core/helpers/events'
 import chartReducer from './store/chart.reducer'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
+import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 
 import './scss/main.scss'
 import Title from '@cdc/core/components/ui/Title'
-import Layout from '@cdc/core/components/Layout'
+import { VisualizationContainer, VisualizationContent } from '@cdc/core/components/Layout'
 
 // images
-import CalloutFlag from './images/callout-flag.svg?url'
+import CalloutFlag from '@cdc/core/assets/callout-flag.svg?url'
 
 // TP5 Style Constants
 const TP5_NODE_WIDTH = 13
@@ -72,6 +73,59 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
     roundToPlace
   } = config
 
+  const processedTextFields = useMemo(() => {
+    if (!config.enableMarkupVariables || !config.markupVariables?.length) {
+      return {
+        title,
+        content,
+        subtext,
+        valueDescription: config.valueDescription
+      }
+    }
+
+    const markupOptions = {
+      isEditor,
+      showNoDataMessage: false,
+      allowHideSection: false,
+      filters: config.filters || [],
+      locale: config.locale,
+      dataMetadata: config.dataMetadata
+    }
+
+    return {
+      title: title
+        ? processMarkupVariables(title, config.data || [], config.markupVariables, markupOptions).processedContent
+        : title,
+      content: content
+        ? processMarkupVariables(content, config.data || [], config.markupVariables, markupOptions).processedContent
+        : content,
+      subtext: subtext
+        ? processMarkupVariables(subtext, config.data || [], config.markupVariables, markupOptions).processedContent
+        : subtext,
+      valueDescription: config.valueDescription
+        ? processMarkupVariables(config.valueDescription, config.data || [], config.markupVariables, markupOptions)
+            .processedContent
+        : config.valueDescription
+    }
+  }, [
+    config.enableMarkupVariables,
+    config.markupVariables,
+    config.data,
+    config.filters,
+    config.locale,
+    config.dataMetadata,
+    config.valueDescription,
+    title,
+    content,
+    subtext,
+    isEditor
+  ])
+
+  const processedTitle = processedTextFields.title
+  const processedContent = processedTextFields.content
+  const processedSubtext = processedTextFields.subtext
+  const processedValueDescription = processedTextFields.valueDescription
+
   const gaugeColor = config.visual.colors[config.theme]
   let dataFontSize = config.fontSize ? { fontSize: config.fontSize + 'px' } : null
 
@@ -351,7 +405,7 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
     return setRatio() + 2
   }, [nodeWidth, nodeSpacer, config.visualizationType])
 
-  const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
+  const { contentClasses } = useDataVizClasses(config)
 
   const xScale = scaleLinear({
     domain: [0, waffleDenominator],
@@ -397,141 +451,141 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
         <Error updateConfig={updateConfig} config={config} />
       )}
       {config.newViz && showConfigConfirm && <Confirm updateConfig={updateConfig} config={config} />}
-      <div className='cove-component__content-wrap p-0'>
-        {(config.visualizationType === 'Gauge' || config.visualizationType === 'TP5 Gauge') && (
-          <div className={`cove-gauge-chart${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
-            <div className='cove-gauge-chart__chart'>
-              {config.visualizationType === 'TP5 Gauge' ? (
-                <>
-                  <div
-                    className={`cove-gauge-chart__body d-flex flex-row align-items-start flex-grow-1${
-                      !content ? ' justify-content-center' : ''
-                    }`}
-                  >
-                    <div className='cove-gauge-chart__value-section flex-shrink-0'>
-                      <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
-                        {prefix ? prefix : ' '}
-                        {config.showPercent ? dataPercentage : waffleNumerator}
-                        {suffix ? suffix + ' ' : ' '} {config.valueDescription}{' '}
-                        {config.showDenominator && waffleDenominator ? waffleDenominator : ' '}
-                      </div>
-                    </div>
-                    <div className='cove-gauge-chart__content flex-grow-1 d-flex flex-column min-w-0'>
-                      {content ? (
-                        <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
-                      ) : (
-                        <div className='cove-waffle-chart__data--text' aria-hidden='true'>
-                          &nbsp;
-                        </div>
-                      )}
+      {(config.visualizationType === 'Gauge' || config.visualizationType === 'TP5 Gauge') && (
+        <div className={`cove-gauge-chart${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
+          <div className='cove-gauge-chart__chart'>
+            {config.visualizationType === 'TP5 Gauge' ? (
+              <>
+                <div
+                  className={`cove-gauge-chart__body d-flex flex-row align-items-start flex-grow-1${
+                    !processedContent ? ' justify-content-center' : ''
+                  }`}
+                >
+                  <div className='cove-gauge-chart__value-section flex-shrink-0'>
+                    <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
+                      {prefix ? prefix : ' '}
+                      {config.showPercent ? dataPercentage : waffleNumerator}
+                      {suffix ? suffix + ' ' : ' '} {processedValueDescription}{' '}
+                      {config.showDenominator && waffleDenominator ? waffleDenominator : ' '}
                     </div>
                   </div>
-                  <svg
-                    height={config.gauge.height + 2}
-                    width={'100%'}
-                    className='mt-2'
-                    style={{ overflow: 'visible', padding: '1px' }}
-                  >
-                    <Group>
-                      <Bar
-                        x={0}
-                        y={0}
-                        width={config.gauge.width}
-                        height={config.gauge.height}
-                        fill='#dff2f6'
-                        stroke='#007A99'
-                        strokeWidth={1}
-                        rx={10}
-                        ry={10}
-                      />
-                      <Bar
-                        x={0}
-                        y={0}
-                        width={xScale(waffleNumerator)}
-                        height={config.gauge.height}
-                        fill='#007A99'
-                        rx={10}
-                        ry={10}
-                      />
-                    </Group>
-                  </svg>
-                  {subtext && (
-                    <div className='cove-waffle-chart__subtext subtext fst-italic mt-2'>{parse(subtext)}</div>
-                  )}
-                </>
-              ) : (
-                <>
-                  <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
-                    {prefix ? prefix : ' '}
-                    {config.showPercent ? dataPercentage : waffleNumerator}
-                    {suffix ? suffix + ' ' : ' '} {config.valueDescription}{' '}
-                    {config.showDenominator && waffleDenominator ? waffleDenominator : ' '}
-                  </div>
-                  <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
-                  <svg height={config.gauge.height} width={'100%'}>
-                    <Group>
-                      <Bar
-                        x={0}
-                        y={0}
-                        width={config.gauge.width}
-                        height={config.gauge.height}
-                        fill='#e0e0e0'
-                        stroke='#999'
-                        strokeWidth={1}
-                        rx={4}
-                        ry={4}
-                      />
-                      <Bar
-                        x={0}
-                        y={0}
-                        width={xScale(waffleNumerator)}
-                        height={config.gauge.height}
-                        fill={gaugeColor}
-                        rx={4}
-                        ry={4}
-                      />
-                    </Group>
-                  </svg>
-                  <div className={'cove-waffle-chart__subtext subtext'}>{parse(subtext)}</div>
-                </>
-              )}
-            </div>
-          </div>
-        )}
-        {config.visualizationType !== 'Gauge' && config.visualizationType !== 'TP5 Gauge' && (
-          <div
-            className={`cove-waffle-chart${orientation === 'vertical' ? ' cove-waffle-chart--verical' : ''}${
-              config.overallFontSize ? ' font-' + config.overallFontSize : ''
-            }`}
-          >
-            <div className='cove-waffle-chart__chart' style={{ width: setRatio() }}>
-              <svg width={setSvgSize()} height={setSvgSize()} style={{ display: 'block' }}>
-                <Group top={1} left={1}>
-                  {buildWaffle()}
-                </Group>
-              </svg>
-            </div>
-            {(dataPercentage || content) && (
-              <div className='cove-waffle-chart__data'>
-                {dataPercentage && (
-                  <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
-                    {prefix ? prefix : null}
-                    {dataPercentage}
-                    {suffix ? suffix : null}
+                  <div className='cove-gauge-chart__content flex-grow-1 d-flex flex-column min-w-0'>
+                    {processedContent ? (
+                      <div className='cove-waffle-chart__data--text'>{parse(processedContent)}</div>
+                    ) : (
+                      <div className='cove-waffle-chart__data--text' aria-hidden='true'>
+                        &nbsp;
+                      </div>
+                    )}
                   </div>
+                </div>
+                <svg
+                  height={config.gauge.height + 2}
+                  width={'100%'}
+                  className='mt-2'
+                  style={{ overflow: 'visible', padding: '1px' }}
+                >
+                  <Group>
+                    <Bar
+                      x={0}
+                      y={0}
+                      width={config.gauge.width}
+                      height={config.gauge.height}
+                      fill='#dff2f6'
+                      stroke='#007A99'
+                      strokeWidth={1}
+                      rx={10}
+                      ry={10}
+                    />
+                    <Bar
+                      x={0}
+                      y={0}
+                      width={xScale(waffleNumerator)}
+                      height={config.gauge.height}
+                      fill='#007A99'
+                      rx={10}
+                      ry={10}
+                    />
+                  </Group>
+                </svg>
+                {processedSubtext && (
+                  <div className='cove-waffle-chart__subtext subtext fst-italic mt-2'>{parse(processedSubtext)}</div>
                 )}
-                {content && <div className='cove-waffle-chart__data--text'>{parse(content)}</div>}
-
-                {subtext && <div className='cove-waffle-chart__subtext subtext fst-italic'>{parse(subtext)}</div>}
-              </div>
+              </>
+            ) : (
+              <>
+                <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
+                  {prefix ? prefix : ' '}
+                  {config.showPercent ? dataPercentage : waffleNumerator}
+                  {suffix ? suffix + ' ' : ' '} {processedValueDescription}{' '}
+                  {config.showDenominator && waffleDenominator ? waffleDenominator : ' '}
+                </div>
+                <div className='cove-waffle-chart__data--text'>{parse(processedContent)}</div>
+                <svg height={config.gauge.height} width={'100%'}>
+                  <Group>
+                    <Bar
+                      x={0}
+                      y={0}
+                      width={config.gauge.width}
+                      height={config.gauge.height}
+                      fill='#e0e0e0'
+                      stroke='#999'
+                      strokeWidth={1}
+                      rx={4}
+                      ry={4}
+                    />
+                    <Bar
+                      x={0}
+                      y={0}
+                      width={xScale(waffleNumerator)}
+                      height={config.gauge.height}
+                      fill={gaugeColor}
+                      rx={4}
+                      ry={4}
+                    />
+                  </Group>
+                </svg>
+                <div className={'cove-waffle-chart__subtext subtext'}>{parse(processedSubtext)}</div>
+              </>
             )}
           </div>
-        )}
-      </div>
+        </div>
+      )}
+      {config.visualizationType !== 'Gauge' && config.visualizationType !== 'TP5 Gauge' && (
+        <div
+          className={`cove-waffle-chart${orientation === 'vertical' ? ' cove-waffle-chart--verical' : ''}${
+            config.overallFontSize ? ' font-' + config.overallFontSize : ''
+          }`}
+        >
+          <div className='cove-waffle-chart__chart' style={{ width: setRatio() }}>
+            <svg width={setSvgSize()} height={setSvgSize()} style={{ display: 'block' }}>
+              <Group top={1} left={1}>
+                {buildWaffle()}
+              </Group>
+            </svg>
+          </div>
+          {(dataPercentage || processedContent) && (
+            <div className='cove-waffle-chart__data'>
+              {dataPercentage && (
+                <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
+                  {prefix ? prefix : null}
+                  {dataPercentage}
+                  {suffix ? suffix : null}
+                </div>
+              )}
+              {processedContent && <div className='cove-waffle-chart__data--text'>{parse(processedContent)}</div>}
+
+              {processedSubtext && (
+                <div className='cove-waffle-chart__subtext subtext fst-italic'>{parse(processedSubtext)}</div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
     </>
   )
 
-  // TP5 Style: render with callout wrapper inside cove-component__content
+  // TP5 Style: render with callout wrapper inside cove-visualization__body
   if (config.visualizationType === 'TP5 Waffle' || config.visualizationType === 'TP5 Gauge') {
     const calloutClasses = ['cdc-callout', 'd-flex', 'flex-column']
     if (!config.visual?.whiteBackground) {
@@ -539,34 +593,40 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
     }
 
     return (
-      <div className='cove-component__content border-0'>
+      <VisualizationContent
+        bodyClassName={['no-borders', ...contentClasses].filter(Boolean).join(' ')}
+        footer={link && link}
+      >
         <div className={calloutClasses.join(' ')}>
           {!config.visual?.whiteBackground && (
             <img src={CalloutFlag} alt='' className='cdc-callout__flag' aria-hidden='true' />
           )}
-          {config.showTitle && title && title.trim() && (
-            <h3 className='cdc-callout__heading fw-bold flex-shrink-0'>{parse(title)}</h3>
+          {config.showTitle && processedTitle && processedTitle.trim() && (
+            <h3 className='cdc-callout__heading fw-bold flex-shrink-0'>{parse(processedTitle)}</h3>
           )}
           <div className='w-100 mw-100 overflow-hidden'>{renderChartContent()}</div>
         </div>
-        {link && link}
-      </div>
+      </VisualizationContent>
     )
   }
 
   // Original Style: Regular title and content
   return (
-    <div className='cove-component__content'>
-      <Title
-        showTitle={config.showTitle}
-        title={title}
-        titleStyle='legacy'
-        config={config}
-        classes={['chart-title', `${config.theme}`, 'mb-0']}
-      />
-      <div className={contentClasses.join(' ')}>{renderChartContent()}</div>
-      {link && link}
-    </div>
+    <VisualizationContent
+      bodyClassName={contentClasses.join(' ')}
+      header={
+        <Title
+          showTitle={config.showTitle}
+          title={processedTitle}
+          titleStyle='legacy'
+          config={config}
+          classes={['chart-title', `${config.theme}`, 'mb-0']}
+        />
+      }
+      footer={link && link}
+    >
+      {renderChartContent()}
+    </VisualizationContent>
   )
 }
 
@@ -608,7 +668,9 @@ const CdcWaffleChart = ({
     let responseData = response.data ?? {}
 
     if (response.dataUrl) {
-      responseData = await fetchRemoteData(response.dataUrl)
+      const { data, dataMetadata } = await fetchRemoteData(response.dataUrl)
+      responseData = data
+      response.dataMetadata = dataMetadata
     }
 
     response.data = responseData
@@ -658,17 +720,12 @@ const CdcWaffleChart = ({
 
   if (loading === false) {
     content = (
-      <>
-        {isEditor && <EditorPanel showConfigConfirm={showConfigConfirm} />}
-        <Layout.Responsive isEditor={isEditor}>
-          <WaffleChart
-            config={config}
-            isEditor={isEditor}
-            showConfigConfirm={showConfigConfirm}
-            updateConfig={updateConfig}
-          />
-        </Layout.Responsive>
-      </>
+      <WaffleChart
+        config={config}
+        isEditor={isEditor}
+        showConfigConfirm={showConfigConfirm}
+        updateConfig={updateConfig}
+      />
     )
   }
 
@@ -677,14 +734,15 @@ const CdcWaffleChart = ({
       <ConfigContext.Provider
         value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard, outerContainerRef }}
       >
-        <Layout.VisualizationWrapper
+        <VisualizationContainer
           config={config}
           isEditor={isEditor}
+          currentViewport={currentViewport}
           ref={outerContainerRef}
-          showEditorPanel={config?.showEditorPanel}
+          editorPanel={<EditorPanel showConfigConfirm={showConfigConfirm} />}
         >
           {content}
-        </Layout.VisualizationWrapper>
+        </VisualizationContainer>
       </ConfigContext.Provider>
     </ErrorBoundary>
   )

package/src/_stories/WaffleChart.Editor.stories.tsx

@@ -87,12 +87,12 @@ export const GeneralSectionTests: Story = {
     // Poll for header text update
     await performAndAssert(
       'Title Update',
-      () => canvasElement.querySelector('.cove-component__header h2')?.textContent?.trim() || '',
+      () => canvasElement.querySelector('.cove-visualization__header h2')?.textContent?.trim() || '',
       async () => {}, // action already performed above
       (before, after) => after === 'Updated Waffle Chart Title E2E'
     )
 
-    const chartTitleHeader = canvasElement.querySelector('.cove-component__header h2')
+    const chartTitleHeader = canvasElement.querySelector('.cove-visualization__header h2')
     expect(chartTitleHeader).toBeTruthy()
     expect(chartTitleHeader.textContent.trim()).toBe('Updated Waffle Chart Title E2E')
 
@@ -120,7 +120,7 @@ export const GeneralSectionTests: Story = {
     )
     expect(showTitleCheckbox.checked).toBe(!wasChecked)
 
-    const chartTitleHeaderAfterToggle = canvasElement.querySelector('.cove-component__header')
+    const chartTitleHeaderAfterToggle = canvasElement.querySelector('.cove-visualization__header')
     if (showTitleCheckbox.checked) {
       expect(chartTitleHeaderAfterToggle).toBeTruthy()
       expect(chartTitleHeaderAfterToggle).not.toHaveStyle('display: none')
@@ -435,7 +435,7 @@ export const VisualSectionTests: Story = {
     await openAccordion(canvas, 'Chart Settings')
     // Core helper functions used throughout the visual tests
     const waffleRoot = () => canvasElement.querySelector('.cove-waffle-chart') as HTMLElement
-    const contentContainer = () => canvasElement.querySelector('.cove-component__content > div') as HTMLElement
+    const contentContainer = () => canvasElement.querySelector('.cove-visualization__body') as HTMLElement
     expect(waffleRoot()).toBeTruthy()
 
     // ============================================================================
@@ -658,7 +658,7 @@ export const VisualSectionTests: Story = {
 
     // ============================================================================
     // TEST 9: Theme Border Color Toggle
-    // Expectation: Class 'component--has-borderColorTheme' toggles.
+    // Expectation: Class 'component--has-border-color-theme' toggles.
     // ============================================================================
     // Find border color theme checkbox by exact label text
     const borderColorThemeCheckbox = canvas.getByLabelText('Use Border Color Theme') as HTMLInputElement
@@ -671,7 +671,8 @@ export const VisualSectionTests: Story = {
       async () => {
         await userEvent.click(borderColorThemeCheckbox)
       },
-      (before, after) => before !== after && (after.includes('borderColorTheme') || before.includes('borderColorTheme'))
+      (before, after) =>
+        before !== after && (after.includes('border-color-theme') || before.includes('border-color-theme'))
     )
 
     // ============================================================================
@@ -712,7 +713,7 @@ export const VisualSectionTests: Story = {
 
     // ============================================================================
     // TEST 12: Hide Background Color Toggle
-    // Expectation: Class 'component--hideBackgroundColor' toggles.
+    // Expectation: Class 'component--hide-background-color' toggles.
     // ============================================================================
     // Find hide background checkbox by exact label text
     const hideBackgroundCheckbox = canvas.getByLabelText('Hide Background Color') as HTMLInputElement

package/src/components/EditorPanel.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, memo, useContext } from 'react'
-import _ from 'lodash'
 
 import ConfigContext from '../ConfigContext'
 
@@ -14,8 +13,9 @@ import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 import { useFilterManagement } from '@cdc/core/hooks/useFilterManagement'
 import { useDataColumns } from '@cdc/core/hooks/useDataColumns'
 import { VisualSection } from '@cdc/core/components/EditorPanel/sections/VisualSection'
+import PanelMarkup from '@cdc/core/components/EditorPanel/components/PanelMarkup'
 
-import '@cdc/core/styles/v2/components/editor.scss'
+import '@cdc/core/components/EditorPanel/editor.scss'
 import WarningImage from '../images/warning.svg'
 
 import { DATA_OPERATORS, DATA_FUNCTIONS } from '../CdcWaffleChart'
@@ -120,6 +120,28 @@ const EditorPanel = memo(props => {
             </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
@@ -431,6 +453,18 @@ const EditorPanel = memo(props => {
           />
         </Accordion.Section>
       )}
+      <Accordion.Section title='Markup Variables'>
+        <PanelMarkup
+          name='Markup Variables'
+          markupVariables={config.markupVariables || []}
+          data={data}
+          enableMarkupVariables={config.enableMarkupVariables || false}
+          onMarkupVariablesChange={variables => updateField(null, null, 'markupVariables', variables)}
+          onToggleEnable={enabled => updateField(null, null, 'enableMarkupVariables', enabled)}
+          withAccordion={false}
+          dataMetadata={config.dataMetadata}
+        />
+      </Accordion.Section>
     </Accordion>
   )
 

package/src/data/initial-state.js

@@ -53,5 +53,7 @@ export default {
       'theme-green': '#4b830d',
       'theme-amber': '#fbab18'
     }
-  }
+  },
+  markupVariables: [],
+  enableMarkupVariables: false
 }

package/src/scss/main.scss

@@ -1,16 +1,9 @@
-@import '@cdc/core/styles/accessibility';
+@import '@cdc/core/styles/utils/accessibility';
 @import 'waffle-chart';
 
-.cdc-open-viz-module.type-waffle-chart {
-  .cove-component__content:not(.component--has-background, .component--hideBackgroundColor) {
+.cove-visualization.type-waffle-chart {
+  .cove-visualization__body:not(.component--has-background, .component--hide-background-color) {
     background-color: white;
   }
 
-  &.is-editor .cove-component {
-    padding-left: 350px;
-  }
-
-  &.is-editor .cove-editor__content .cove-component {
-    padding-left: 0px;
-  }
 }