@cdc/markup-include 4.25.11 → 4.26.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdcmarkupinclude.js +8649 -13173
- package/index.html +24 -36
- package/package.json +6 -5
- package/src/CdcMarkupInclude.tsx +79 -4
- package/src/_stories/MarkupInclude.Editor.stories.tsx +9 -3
- package/src/components/EditorPanel/EditorPanel.styles.css +6 -0
- package/src/components/EditorPanel/EditorPanel.tsx +158 -0
- package/src/components/EditorPanel/index.tsx +3 -0
- package/src/data/initial-state.js +2 -1
- package/src/scss/main.scss +11 -4
- package/src/test/CdcMarkupInclude.test.jsx +1 -1
- package/LICENSE +0 -201
- package/src/components/EditorPanel.tsx +0 -211
- package/src/components/editorPanel.style.css +0 -17
package/index.html
CHANGED
|
@@ -1,41 +1,29 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
6
|
+
<style type="text/css">
|
|
7
|
+
body {
|
|
8
|
+
margin: 0;
|
|
9
|
+
border-top: none !important;
|
|
10
|
+
}
|
|
3
11
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
+
/* Add 1rem padding to mimic DFE when editor is not visible */
|
|
13
|
+
.cdc-open-viz-module:not(.isEditor) {
|
|
14
|
+
padding: 1rem;
|
|
15
|
+
}
|
|
16
|
+
</style>
|
|
17
|
+
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
|
|
18
|
+
</head>
|
|
12
19
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
</style>
|
|
17
|
-
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
|
|
20
|
+
<body>
|
|
21
|
+
<!-- Original -->
|
|
18
22
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
src: url('https://app.unpkg.com/@fontsource/nunito@5.0.18/files/files/nunito-latin-900-normal.woff2') format('woff2');
|
|
27
|
-
}
|
|
28
|
-
</style>
|
|
29
|
-
</head>
|
|
30
|
-
|
|
31
|
-
<body>
|
|
32
|
-
<!-- Original -->
|
|
33
|
-
|
|
34
|
-
<!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html#examples -->
|
|
35
|
-
<!-- <div class="react-container" data-config="/src/_stories/_mock/icon-no-text.json"></div> -->
|
|
36
|
-
<!-- <div class="react-container" data-config="/src/_stories/_mock/image-with-text.json"></div> -->
|
|
37
|
-
<div class="react-container" data-config="/src/_stories/_mock/button-and-text.json"></div>
|
|
38
|
-
<script type="module" src="./src/index.tsx"></script>
|
|
39
|
-
</body>
|
|
40
|
-
|
|
41
|
-
</html>
|
|
23
|
+
<!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html#examples -->
|
|
24
|
+
<!-- <div class="react-container" data-config="/src/_stories/_mock/icon-no-text.json"></div> -->
|
|
25
|
+
<!-- <div class="react-container" data-config="/src/_stories/_mock/image-with-text.json"></div> -->
|
|
26
|
+
<div class="react-container" data-config="/src/_stories/_mock/button-and-text.json"></div>
|
|
27
|
+
<script type="module" src="./src/index.tsx"></script>
|
|
28
|
+
</body>
|
|
29
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/markup-include",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.26.1",
|
|
4
4
|
"description": "React component for displaying HTML content from an outside link",
|
|
5
5
|
"moduleName": "CdcMarkupInclude",
|
|
6
6
|
"main": "dist/cdcmarkupinclude",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"license": "Apache-2.0",
|
|
28
28
|
"homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@cdc/core": "^4.
|
|
30
|
+
"@cdc/core": "^4.26.1",
|
|
31
31
|
"axios": "^1.9.0",
|
|
32
32
|
"chroma": "0.0.1",
|
|
33
33
|
"interweave": "^13.1.1",
|
|
@@ -39,10 +39,11 @@
|
|
|
39
39
|
"react-dom": "^18.2.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
+
"@rollup/plugin-dsv": "^3.0.2",
|
|
42
43
|
"@vitejs/plugin-react": "^4.3.4",
|
|
43
|
-
"
|
|
44
|
+
"sass": "^1.89.2",
|
|
44
45
|
"vite-plugin-css-injected-by-js": "^2.4.0",
|
|
45
|
-
"vite-plugin-svgr": "^2.
|
|
46
|
+
"vite-plugin-svgr": "^4.2.0"
|
|
46
47
|
},
|
|
47
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16"
|
|
48
49
|
}
|
package/src/CdcMarkupInclude.tsx
CHANGED
|
@@ -65,7 +65,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
|
|
|
65
65
|
const container = useRef()
|
|
66
66
|
|
|
67
67
|
const { innerContainerClasses, contentClasses } = useDataVizClasses(config || {})
|
|
68
|
-
const { contentEditor, theme } = config || {}
|
|
68
|
+
const { contentEditor, theme, visual } = config || {}
|
|
69
69
|
const {
|
|
70
70
|
showNoDataMessage,
|
|
71
71
|
allowHideSection,
|
|
@@ -79,6 +79,10 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
|
|
|
79
79
|
|
|
80
80
|
const { inlineHTML, srcUrl, title, useInlineHTML } = contentEditor || {}
|
|
81
81
|
|
|
82
|
+
const shouldApplyTopPadding =
|
|
83
|
+
visual?.border || visual?.background || (contentEditor?.title && contentEditor?.titleStyle === 'legacy')
|
|
84
|
+
const shouldApplySidePadding = visual?.border || visual?.accent || visual?.background
|
|
85
|
+
|
|
82
86
|
// Default Functions
|
|
83
87
|
const updateConfig = newConfig => {
|
|
84
88
|
Object.keys(defaults).forEach(key => {
|
|
@@ -198,6 +202,66 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
|
|
|
198
202
|
return hasBody ? parse[1] : parse
|
|
199
203
|
}
|
|
200
204
|
|
|
205
|
+
/**
|
|
206
|
+
* Transforms HTML by extracting <style> tags and applying their CSS rules as inline styles.
|
|
207
|
+
* This ensures that the CSS is applied only to this COVE visualization.
|
|
208
|
+
*/
|
|
209
|
+
const applyStyleTagsAsInlineStyles = (html: string): string => {
|
|
210
|
+
if (!html || typeof html !== 'string') return html
|
|
211
|
+
|
|
212
|
+
// Use DOMParser to parse HTML
|
|
213
|
+
const parser = new DOMParser()
|
|
214
|
+
const doc = parser.parseFromString(html, 'text/html')
|
|
215
|
+
|
|
216
|
+
// Extract all <style> elements
|
|
217
|
+
const styleElements = doc.querySelectorAll('style')
|
|
218
|
+
if (styleElements.length === 0) return html
|
|
219
|
+
|
|
220
|
+
// Parse CSS rules
|
|
221
|
+
const sheet = new CSSStyleSheet()
|
|
222
|
+
const cssRules: Array<{ selector: string; styles: string }> = []
|
|
223
|
+
|
|
224
|
+
styleElements.forEach(styleEl => {
|
|
225
|
+
try {
|
|
226
|
+
// replaceSync parses the CSS and throws if invalid
|
|
227
|
+
sheet.replaceSync(styleEl.textContent || '')
|
|
228
|
+
|
|
229
|
+
// Extract parsed rules from the stylesheet
|
|
230
|
+
for (let i = 0; i < sheet.cssRules.length; i++) {
|
|
231
|
+
const rule = sheet.cssRules[i]
|
|
232
|
+
if (rule instanceof CSSStyleRule) {
|
|
233
|
+
cssRules.push({
|
|
234
|
+
selector: rule.selectorText,
|
|
235
|
+
styles: rule.style.cssText
|
|
236
|
+
})
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
} catch (e) {
|
|
240
|
+
console.warn('Markup Include: Invalid CSS in style tag', e)
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
styleEl.remove()
|
|
244
|
+
})
|
|
245
|
+
|
|
246
|
+
// Apply each CSS rule to matching elements
|
|
247
|
+
for (const rule of cssRules) {
|
|
248
|
+
try {
|
|
249
|
+
const elements = doc.body.querySelectorAll(rule.selector)
|
|
250
|
+
|
|
251
|
+
elements.forEach(el => {
|
|
252
|
+
const existingStyle = el.getAttribute('style') || ''
|
|
253
|
+
const newStyle = existingStyle ? `${existingStyle}; ${rule.styles}` : rule.styles
|
|
254
|
+
el.setAttribute('style', newStyle)
|
|
255
|
+
})
|
|
256
|
+
} catch (e) {
|
|
257
|
+
// Skip invalid selectors (e.g., pseudo-selectors like :hover won't match)
|
|
258
|
+
console.warn(`Markup Include: Could not apply CSS rule for selector "${rule.selector}"`, e)
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
return doc.body.innerHTML
|
|
263
|
+
}
|
|
264
|
+
|
|
201
265
|
//Load initial config
|
|
202
266
|
useEffect(() => {
|
|
203
267
|
loadConfig().catch(err => console.error(err))
|
|
@@ -229,7 +293,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
|
|
|
229
293
|
})
|
|
230
294
|
: { processedContent: parseBodyMarkup(urlMarkup), shouldHideSection: false, shouldShowNoDataMessage: false }
|
|
231
295
|
|
|
232
|
-
const markup = processedMarkup.processedContent
|
|
296
|
+
const markup = applyStyleTagsAsInlineStyles(processedMarkup.processedContent)
|
|
233
297
|
|
|
234
298
|
const hideMarkupInclude = processedMarkup.shouldHideSection
|
|
235
299
|
const _showNoDataMessage = processedMarkup.shouldShowNoDataMessage
|
|
@@ -242,8 +306,15 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
|
|
|
242
306
|
{!hideMarkupInclude && (
|
|
243
307
|
<Layout.Responsive isEditor={isEditor}>
|
|
244
308
|
<div className='markup-include-content-container cove-component__content no-borders'>
|
|
309
|
+
<Title
|
|
310
|
+
title={title}
|
|
311
|
+
isDashboard={isDashboard}
|
|
312
|
+
titleStyle={contentEditor.titleStyle}
|
|
313
|
+
config={config}
|
|
314
|
+
classes={[`${theme}`, 'mb-0']}
|
|
315
|
+
noContent={!markup}
|
|
316
|
+
/>
|
|
245
317
|
<div className={`markup-include-component ${contentClasses.join(' ')}`}>
|
|
246
|
-
<Title title={title} isDashboard={isDashboard} classes={[`${theme}`, 'mb-0']} />
|
|
247
318
|
<div className={`${innerContainerClasses.join(' ')}`}>
|
|
248
319
|
{/* Filters */}
|
|
249
320
|
{config.filters && config.filters.length > 0 && (
|
|
@@ -255,7 +326,11 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
|
|
|
255
326
|
interactionLabel={interactionLabel || 'markup-include'}
|
|
256
327
|
/>
|
|
257
328
|
)}
|
|
258
|
-
<div
|
|
329
|
+
<div
|
|
330
|
+
className={`cove-component__content-wrap${shouldApplyTopPadding ? ' has-top-padding' : ''}${
|
|
331
|
+
shouldApplySidePadding ? ' has-side-padding' : ''
|
|
332
|
+
}`}
|
|
333
|
+
>
|
|
259
334
|
{_showNoDataMessage && (
|
|
260
335
|
<div className='no-data-message'>
|
|
261
336
|
<p>{`${noDataMessageText}`}</p>
|
|
@@ -89,6 +89,8 @@ const testConfig = {
|
|
|
89
89
|
legend: {},
|
|
90
90
|
newViz: true,
|
|
91
91
|
theme: 'theme-blue',
|
|
92
|
+
titleStyle: 'small',
|
|
93
|
+
showTitle: true,
|
|
92
94
|
type: 'markup-include',
|
|
93
95
|
visual: {
|
|
94
96
|
border: false,
|
|
@@ -135,8 +137,10 @@ export const GeneralSectionTests: Story = {
|
|
|
135
137
|
await performAndAssert(
|
|
136
138
|
'Title Update',
|
|
137
139
|
() => {
|
|
138
|
-
const
|
|
139
|
-
|
|
140
|
+
const modernTitle = canvasElement.querySelector('.cove-title')
|
|
141
|
+
const legacyTitle = canvasElement.querySelector('.cove-component__header h2')
|
|
142
|
+
const titleElement = modernTitle || legacyTitle
|
|
143
|
+
return titleElement?.textContent?.trim() || ''
|
|
140
144
|
},
|
|
141
145
|
async () => {
|
|
142
146
|
await userEvent.clear(titleInput)
|
|
@@ -145,7 +149,9 @@ export const GeneralSectionTests: Story = {
|
|
|
145
149
|
(before, after) => after === 'Updated Markup Include Title E2E' && after !== before
|
|
146
150
|
)
|
|
147
151
|
|
|
148
|
-
const
|
|
152
|
+
const modernHeader = canvasElement.querySelector('.cove-title')
|
|
153
|
+
const legacyHeader = canvasElement.querySelector('.cove-component__header h2')
|
|
154
|
+
const headerElement = modernHeader || legacyHeader
|
|
149
155
|
expect(headerElement).toBeTruthy()
|
|
150
156
|
expect(headerElement!.textContent?.trim()).toBe('Updated Markup Include Title E2E')
|
|
151
157
|
}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import { useContext, useRef } from 'react'
|
|
2
|
+
|
|
3
|
+
// Context
|
|
4
|
+
import ConfigContext from '../../ConfigContext'
|
|
5
|
+
|
|
6
|
+
// Helpers
|
|
7
|
+
import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
|
|
8
|
+
|
|
9
|
+
// Components
|
|
10
|
+
import { EditorPanel as BaseEditorPanel } from '@cdc/core/components/EditorPanel/EditorPanel'
|
|
11
|
+
import { TextField, CheckBox, Select } from '@cdc/core/components/EditorPanel/Inputs'
|
|
12
|
+
import Accordion from '@cdc/core/components/ui/Accordion'
|
|
13
|
+
import Icon from '@cdc/core/components/ui/Icon'
|
|
14
|
+
import Tooltip from '@cdc/core/components/ui/Tooltip'
|
|
15
|
+
import MarkupVariablesEditor from '@cdc/core/components/EditorPanel/components/MarkupVariablesEditor'
|
|
16
|
+
import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
|
|
17
|
+
import { VisualSection } from '@cdc/core/components/EditorPanel/sections/VisualSection'
|
|
18
|
+
import { Datasets } from '@cdc/core/types/DataSet'
|
|
19
|
+
|
|
20
|
+
// styles
|
|
21
|
+
import './EditorPanel.styles.css'
|
|
22
|
+
|
|
23
|
+
type MarkupIncludeEditorPanelProps = {
|
|
24
|
+
datasets?: Datasets
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
|
|
28
|
+
const { config, data, isDashboard, loading, setParentConfig, updateConfig } = useContext(ConfigContext)
|
|
29
|
+
const { contentEditor, theme, visual } = config
|
|
30
|
+
const { inlineHTML, srcUrl, title, useInlineHTML } = contentEditor || {}
|
|
31
|
+
const updateField = updateFieldFactory(config, updateConfig, true)
|
|
32
|
+
|
|
33
|
+
const textAreaInEditorContainer = useRef(null)
|
|
34
|
+
|
|
35
|
+
const handleMarkupVariablesChange = (variables: any[]) => {
|
|
36
|
+
updateConfig({
|
|
37
|
+
...config,
|
|
38
|
+
markupVariables: variables
|
|
39
|
+
})
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const handleToggleEnable = (enabled: boolean) => {
|
|
43
|
+
updateConfig({
|
|
44
|
+
...config,
|
|
45
|
+
enableMarkupVariables: enabled
|
|
46
|
+
})
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<BaseEditorPanel
|
|
51
|
+
config={config}
|
|
52
|
+
updateConfig={updateConfig as (config: any) => void}
|
|
53
|
+
loading={loading}
|
|
54
|
+
setParentConfig={setParentConfig as ((config: any) => void) | undefined}
|
|
55
|
+
isDashboard={isDashboard}
|
|
56
|
+
title='Configure Markup Include'
|
|
57
|
+
>
|
|
58
|
+
{() => (
|
|
59
|
+
<Accordion>
|
|
60
|
+
<Accordion.Section title='General'>
|
|
61
|
+
<TextField
|
|
62
|
+
value={title || ''}
|
|
63
|
+
section='contentEditor'
|
|
64
|
+
fieldName='title'
|
|
65
|
+
label='Title'
|
|
66
|
+
placeholder='Markup Include Title'
|
|
67
|
+
updateField={updateField}
|
|
68
|
+
/>
|
|
69
|
+
<Select
|
|
70
|
+
value={contentEditor.titleStyle || 'small'}
|
|
71
|
+
section='contentEditor'
|
|
72
|
+
fieldName='titleStyle'
|
|
73
|
+
label='Title Style'
|
|
74
|
+
updateField={updateField}
|
|
75
|
+
options={[
|
|
76
|
+
{ value: 'small', label: 'Small (h3)' },
|
|
77
|
+
{ value: 'large', label: 'Large (h2)' },
|
|
78
|
+
{ value: 'legacy', label: 'Legacy' }
|
|
79
|
+
]}
|
|
80
|
+
tooltip={
|
|
81
|
+
<Tooltip style={{ textTransform: 'none' }}>
|
|
82
|
+
<Tooltip.Target>
|
|
83
|
+
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
84
|
+
</Tooltip.Target>
|
|
85
|
+
<Tooltip.Content>
|
|
86
|
+
<p>Choose the visual style for the title.</p>
|
|
87
|
+
<p>
|
|
88
|
+
Consider heading order on your page when selecting the title style. For 508 reasons, ensure your
|
|
89
|
+
page follows a proper heading order.
|
|
90
|
+
</p>
|
|
91
|
+
</Tooltip.Content>
|
|
92
|
+
</Tooltip>
|
|
93
|
+
}
|
|
94
|
+
/>
|
|
95
|
+
</Accordion.Section>
|
|
96
|
+
<Accordion.Section title='Content Editor'>
|
|
97
|
+
<span className='divider-heading'>Enter Markup</span>
|
|
98
|
+
<CheckBox
|
|
99
|
+
value={useInlineHTML}
|
|
100
|
+
section='contentEditor'
|
|
101
|
+
fieldName='useInlineHTML'
|
|
102
|
+
label='Use Inline HTML'
|
|
103
|
+
updateField={updateField}
|
|
104
|
+
/>
|
|
105
|
+
<div className='column-edit'>
|
|
106
|
+
{useInlineHTML ? (
|
|
107
|
+
<>
|
|
108
|
+
{/* HTML Textbox */}
|
|
109
|
+
<div ref={textAreaInEditorContainer}>
|
|
110
|
+
<TextField
|
|
111
|
+
value={inlineHTML}
|
|
112
|
+
section='contentEditor'
|
|
113
|
+
fieldName='inlineHTML'
|
|
114
|
+
label='HTML'
|
|
115
|
+
placeholder='Add HTML here'
|
|
116
|
+
type='textarea'
|
|
117
|
+
updateField={updateField}
|
|
118
|
+
/>
|
|
119
|
+
</div>
|
|
120
|
+
</>
|
|
121
|
+
) : (
|
|
122
|
+
<TextField
|
|
123
|
+
value={srcUrl || ''}
|
|
124
|
+
section='contentEditor'
|
|
125
|
+
fieldName='srcUrl'
|
|
126
|
+
label='Source URL;'
|
|
127
|
+
placeholder='https://www.example.com/file.html'
|
|
128
|
+
updateField={updateField}
|
|
129
|
+
/>
|
|
130
|
+
)}
|
|
131
|
+
</div>
|
|
132
|
+
</Accordion.Section>
|
|
133
|
+
<Accordion.Section title='Visual'>
|
|
134
|
+
<VisualSection config={config} updateField={updateField} updateConfig={updateConfig} />
|
|
135
|
+
</Accordion.Section>
|
|
136
|
+
{isDashboard && (
|
|
137
|
+
<Accordion.Section title='Footnotes'>
|
|
138
|
+
<FootnotesEditor config={config} updateField={updateField} datasets={datasets} />
|
|
139
|
+
</Accordion.Section>
|
|
140
|
+
)}
|
|
141
|
+
<Accordion.Section title='Markup Variables'>
|
|
142
|
+
<MarkupVariablesEditor
|
|
143
|
+
markupVariables={config.markupVariables || []}
|
|
144
|
+
data={data || []}
|
|
145
|
+
datasets={datasets}
|
|
146
|
+
config={config}
|
|
147
|
+
onChange={handleMarkupVariablesChange}
|
|
148
|
+
enableMarkupVariables={config.enableMarkupVariables || false}
|
|
149
|
+
onToggleEnable={handleToggleEnable}
|
|
150
|
+
/>
|
|
151
|
+
</Accordion.Section>
|
|
152
|
+
</Accordion>
|
|
153
|
+
)}
|
|
154
|
+
</BaseEditorPanel>
|
|
155
|
+
)
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
export default EditorPanel
|
package/src/scss/main.scss
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
.markup-include {
|
|
2
2
|
.cove-component__content-wrap {
|
|
3
|
-
padding:
|
|
3
|
+
padding: 0;
|
|
4
|
+
|
|
5
|
+
&.has-top-padding {
|
|
6
|
+
padding-top: 1rem;
|
|
7
|
+
padding-bottom: 1rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&.has-side-padding {
|
|
11
|
+
padding-left: 1rem;
|
|
12
|
+
padding-right: 1rem;
|
|
13
|
+
}
|
|
4
14
|
|
|
5
15
|
h1,
|
|
6
16
|
h2,
|
|
@@ -14,9 +24,6 @@
|
|
|
14
24
|
}
|
|
15
25
|
}
|
|
16
26
|
|
|
17
|
-
.cove-component__content {
|
|
18
|
-
font-size: 14px;
|
|
19
|
-
}
|
|
20
27
|
.cove-component__content.component--hideBackgroundColor {
|
|
21
28
|
background: transparent;
|
|
22
29
|
}
|