@cdc/markup-include 1.0.1 → 4.22.10
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 +2 -2
- package/examples/example-config.json +2 -1
- package/examples/gallery/button-and-text.json +31 -0
- package/examples/gallery/icon-no-text.json +31 -0
- package/examples/gallery/image-with-text.json +31 -0
- package/package.json +3 -3
- package/src/CdcMarkupInclude.jsx +3 -12
- package/src/components/EditorPanel.js +3 -2
- package/src/index.html +20 -0
- package/src/scss/main.scss +17 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "",
|
|
3
|
+
"showHeader": false,
|
|
4
|
+
"type": "markup-include",
|
|
5
|
+
"srcUrl": "https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Markup-Include-Button-and-Text.html",
|
|
6
|
+
"theme": "theme-blue",
|
|
7
|
+
"data": [
|
|
8
|
+
{
|
|
9
|
+
"Race": "Hispanic or Latino",
|
|
10
|
+
"Age-adjusted rate": "644.2"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"Race": "Non-Hispanic American Indian",
|
|
14
|
+
"Age-adjusted rate": "636.1"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"Race": "Non-Hispanic Black",
|
|
18
|
+
"Age-adjusted rate": "563.7"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"Race": "Non-Hispanic Asian or Pacific Islander",
|
|
22
|
+
"Age-adjusted rate": "202.5"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"Race": "Non-Hispanic White",
|
|
26
|
+
"Age-adjusted rate": "183.6"
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"dataFileName": "valid-data-chart.csv",
|
|
30
|
+
"dataFileSourceType": "file"
|
|
31
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "",
|
|
3
|
+
"showHeader": false,
|
|
4
|
+
"type": "markup-include",
|
|
5
|
+
"srcUrl": "https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/SSI-Example-Markup-Include.html",
|
|
6
|
+
"theme": "theme-blue",
|
|
7
|
+
"data": [
|
|
8
|
+
{
|
|
9
|
+
"Race": "Hispanic or Latino",
|
|
10
|
+
"Age-adjusted rate": "644.2"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"Race": "Non-Hispanic American Indian",
|
|
14
|
+
"Age-adjusted rate": "636.1"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"Race": "Non-Hispanic Black",
|
|
18
|
+
"Age-adjusted rate": "563.7"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"Race": "Non-Hispanic Asian or Pacific Islander",
|
|
22
|
+
"Age-adjusted rate": "202.5"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"Race": "Non-Hispanic White",
|
|
26
|
+
"Age-adjusted rate": "183.6"
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"dataFileName": "valid-data-chart.csv",
|
|
30
|
+
"dataFileSourceType": "file"
|
|
31
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "<strong>Markup Include</strong> - Image with Text",
|
|
3
|
+
"showHeader": false,
|
|
4
|
+
"type": "markup-include",
|
|
5
|
+
"srcUrl": "/wcms/4.0/cdc-wp/data-presentation/examples/SSI-Image-With-Text.html",
|
|
6
|
+
"theme": "theme-slate",
|
|
7
|
+
"data": [
|
|
8
|
+
{
|
|
9
|
+
"Race": "Hispanic or Latino",
|
|
10
|
+
"Age-adjusted rate": "644.2"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"Race": "Non-Hispanic American Indian",
|
|
14
|
+
"Age-adjusted rate": "636.1"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"Race": "Non-Hispanic Black",
|
|
18
|
+
"Age-adjusted rate": "563.7"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"Race": "Non-Hispanic Asian or Pacific Islander",
|
|
22
|
+
"Age-adjusted rate": "202.5"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"Race": "Non-Hispanic White",
|
|
26
|
+
"Age-adjusted rate": "183.6"
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"dataFileName": "valid-data-chart.csv",
|
|
30
|
+
"dataFileSourceType": "file"
|
|
31
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/markup-include",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.22.10",
|
|
4
4
|
"description": "React component for displaying HTML content from an outside link",
|
|
5
5
|
"main": "dist/cdcmarkupinclude",
|
|
6
6
|
"scripts": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"license": "Apache-2.0",
|
|
21
21
|
"homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@cdc/core": "^
|
|
23
|
+
"@cdc/core": "^4.22.10",
|
|
24
24
|
"axios": "^0.26.1",
|
|
25
25
|
"chroma": "0.0.1",
|
|
26
26
|
"chroma-js": "^2.1.0",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"resolutions": {
|
|
36
36
|
"@types/react": "17.x"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "a7eb551a98c7363d3be58cb81dfc8bbc00522804"
|
|
39
39
|
}
|
package/src/CdcMarkupInclude.jsx
CHANGED
|
@@ -14,6 +14,8 @@ import './scss/main.scss'
|
|
|
14
14
|
|
|
15
15
|
import { publish } from '@cdc/core/helpers/events';
|
|
16
16
|
|
|
17
|
+
import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses';
|
|
18
|
+
|
|
17
19
|
const CdcMarkupInclude = (
|
|
18
20
|
{
|
|
19
21
|
configUrl,
|
|
@@ -35,18 +37,7 @@ const CdcMarkupInclude = (
|
|
|
35
37
|
const [ coveLoadedHasRan, setCoveLoadedHasRan ] = useState(false)
|
|
36
38
|
const container = useRef();
|
|
37
39
|
|
|
38
|
-
|
|
39
|
-
config.title && innerContainerClasses.push('component--has-title')
|
|
40
|
-
config.subtext && innerContainerClasses.push('component--has-subtext')
|
|
41
|
-
config.biteStyle && innerContainerClasses.push(`bite__style--${config.biteStyle}`)
|
|
42
|
-
config.general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
|
|
43
|
-
|
|
44
|
-
let contentClasses = ['cove-component__content'];
|
|
45
|
-
!config.visual?.border && contentClasses.push('no-borders');
|
|
46
|
-
config.visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme');
|
|
47
|
-
config.visual?.accent && contentClasses.push('component--has-accent');
|
|
48
|
-
config.visual?.background && contentClasses.push('component--has-background');
|
|
49
|
-
config.visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor');
|
|
40
|
+
const {innerContainerClasses, contentClasses} = useDataVizClasses(config)
|
|
50
41
|
|
|
51
42
|
let {
|
|
52
43
|
title
|
|
@@ -161,13 +161,14 @@ const EditorPanel = memo((props) => {
|
|
|
161
161
|
</ul>
|
|
162
162
|
</div>
|
|
163
163
|
|
|
164
|
-
|
|
164
|
+
<div className="cove-accordion__panel-section checkbox-group">
|
|
165
165
|
<CheckBox value={config.visual.border} section="visual" fieldName="border" label="Display Border" updateField={updateField} />
|
|
166
166
|
<CheckBox value={config.visual.borderColorTheme} section="visual" fieldName="borderColorTheme" label="Use Border Color Theme" updateField={updateField} />
|
|
167
167
|
<CheckBox value={config.visual.accent} section="visual" fieldName="accent" label="Use Accent Style" updateField={updateField} />
|
|
168
168
|
<CheckBox value={config.visual.background} section="visual" fieldName="background" label="Use Theme Background Color" updateField={updateField} />
|
|
169
169
|
<CheckBox value={config.visual.hideBackgroundColor} section="visual" fieldName="hideBackgroundColor" label="Hide Background Color" updateField={updateField} />
|
|
170
|
-
</div>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
171
172
|
</Accordion.Section>
|
|
172
173
|
</Accordion>
|
|
173
174
|
)
|
package/src/index.html
CHANGED
|
@@ -3,9 +3,29 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8"/>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
|
|
6
|
+
<style>
|
|
7
|
+
body {
|
|
8
|
+
/* max-width: 1000px; */
|
|
9
|
+
margin: 0 auto !important;
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.react-container+.react-container {
|
|
16
|
+
margin-top: 3rem;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
6
19
|
</head>
|
|
7
20
|
<body>
|
|
21
|
+
|
|
22
|
+
<!-- Original -->
|
|
8
23
|
<div class="react-container" data-config="/examples/example-config.json"></div>
|
|
24
|
+
|
|
25
|
+
<!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html#examples -->
|
|
26
|
+
<!-- <div class="react-container" data-config="/examples/gallery/icon-no-text.json"></div> -->
|
|
27
|
+
<!-- <div class="react-container" data-config="/examples/gallery/image-with-text.json"></div> -->
|
|
28
|
+
<!-- <div class="react-container" data-config="/examples/gallery/button-and-text.json"></div> -->
|
|
9
29
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
10
30
|
</body>
|
|
11
31
|
</html>
|
package/src/scss/main.scss
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
.markup-include {
|
|
4
4
|
|
|
5
|
+
.checkbox-group {
|
|
6
|
+
padding: 16px;
|
|
7
|
+
border: 1px solid #c4c4c4;
|
|
8
|
+
border-radius: 8px;
|
|
9
|
+
margin-top: 8px;
|
|
10
|
+
margin-bottom: 24px;
|
|
11
|
+
}
|
|
12
|
+
|
|
5
13
|
.cove-component__header {
|
|
6
14
|
font-size: unset;
|
|
7
15
|
}
|
|
@@ -14,3 +22,12 @@
|
|
|
14
22
|
background: transparent;
|
|
15
23
|
}
|
|
16
24
|
}
|
|
25
|
+
|
|
26
|
+
.cove-accordion__panel-section {
|
|
27
|
+
overflow: auto;
|
|
28
|
+
|
|
29
|
+
label {
|
|
30
|
+
display: block;
|
|
31
|
+
float: left;
|
|
32
|
+
}
|
|
33
|
+
}
|