@cdc/markup-include 4.24.3 → 4.24.4
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 +8102 -4265
- package/examples/example-config.json +6 -2
- package/examples/test.json +61 -0
- package/index.html +3 -0
- package/package.json +3 -3
- package/src/CdcMarkupInclude.tsx +53 -11
- package/src/components/EditorPanel.jsx +9 -17
- package/src/scss/main.scss +30 -1
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "markup-include",
|
|
3
|
+
"theme": "theme-blue",
|
|
4
|
+
"data": [
|
|
5
|
+
{
|
|
6
|
+
"Race": "Hispanic or Latino",
|
|
7
|
+
"Age-adjusted rate": "644.2"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"Race": "Non-Hispanic American Indian",
|
|
11
|
+
"Age-adjusted rate": "636.1"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"Race": "Non-Hispanic Black",
|
|
15
|
+
"Age-adjusted rate": "563.7"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"Race": "Non-Hispanic Asian or Pacific Islander",
|
|
19
|
+
"Age-adjusted rate": "202.5"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"Race": "Non-Hispanic White",
|
|
23
|
+
"Age-adjusted rate": "183.6"
|
|
24
|
+
}
|
|
25
|
+
],
|
|
26
|
+
"dataFileName": "valid-data-chart.csv",
|
|
27
|
+
"dataFileSourceType": "file",
|
|
28
|
+
"version": "4.24.4",
|
|
29
|
+
"contentEditor": {
|
|
30
|
+
"inlineHTML": "<h3>Inline HTML {{test}} </h3>",
|
|
31
|
+
"markupVariables": [
|
|
32
|
+
{
|
|
33
|
+
"columnName": "Race",
|
|
34
|
+
"conditions": [
|
|
35
|
+
{
|
|
36
|
+
"columnName": "Age-adjusted rate",
|
|
37
|
+
"isOrIsNotEqualTo": "is",
|
|
38
|
+
"value": "636.1"
|
|
39
|
+
}
|
|
40
|
+
],
|
|
41
|
+
"name": "test",
|
|
42
|
+
"tag": "{{test}}"
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
|
+
"showHeader": false,
|
|
46
|
+
"srcUrl": "https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/SSI-Example-Markup-Include.html",
|
|
47
|
+
"title": "",
|
|
48
|
+
"useInlineHTML": true
|
|
49
|
+
},
|
|
50
|
+
"visual": {
|
|
51
|
+
"border": false,
|
|
52
|
+
"accent": false,
|
|
53
|
+
"background": false,
|
|
54
|
+
"hideBackgroundColor": false,
|
|
55
|
+
"borderColorTheme": false
|
|
56
|
+
},
|
|
57
|
+
"runtime": {
|
|
58
|
+
"uniqueId": 1715107460743,
|
|
59
|
+
"editorErrorMessage": ""
|
|
60
|
+
}
|
|
61
|
+
}
|
package/index.html
CHANGED
|
@@ -10,12 +10,15 @@
|
|
|
10
10
|
display: flex;
|
|
11
11
|
flex-direction: column;
|
|
12
12
|
justify-content: center;
|
|
13
|
+
border-top: none !important;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
.react-container + .react-container {
|
|
16
17
|
margin-top: 3rem;
|
|
17
18
|
}
|
|
18
19
|
</style>
|
|
20
|
+
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/contrib/libs/bootstrap/latest/css/bootstrap.min.css?_=39423" />
|
|
21
|
+
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/4.0/assets/css/app.min.css?_=39423" />
|
|
19
22
|
</head>
|
|
20
23
|
<body>
|
|
21
24
|
<!-- Original -->
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/markup-include",
|
|
3
|
-
"version": "4.24.
|
|
3
|
+
"version": "4.24.4",
|
|
4
4
|
"description": "React component for displaying HTML content from an outside link",
|
|
5
5
|
"moduleName": "CdcMarkupInclude",
|
|
6
6
|
"main": "dist/cdcmarkupinclude",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"license": "Apache-2.0",
|
|
27
27
|
"homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@cdc/core": "^4.24.
|
|
29
|
+
"@cdc/core": "^4.24.4",
|
|
30
30
|
"axios": "^1.6.0",
|
|
31
31
|
"chroma": "0.0.1",
|
|
32
32
|
"chroma-js": "^2.1.0",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"react": "^18.2.0",
|
|
39
39
|
"react-dom": "^18.2.0"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "1843b4632140d582af6a87606374cbd4fe25ad5c"
|
|
42
42
|
}
|
package/src/CdcMarkupInclude.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useCallback, useRef, useReducer } from 'react'
|
|
1
|
+
import { useEffect, useCallback, useRef, useReducer, useState } from 'react'
|
|
2
2
|
|
|
3
3
|
// external
|
|
4
4
|
import { Markup } from 'interweave'
|
|
@@ -16,7 +16,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
|
|
|
16
16
|
import Loading from '@cdc/core/components/Loading'
|
|
17
17
|
import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
|
|
18
18
|
import markupIncludeReducer from './store/mi.reducer'
|
|
19
|
-
|
|
19
|
+
import Layout from '@cdc/core/components/Layout'
|
|
20
20
|
// styles
|
|
21
21
|
import './scss/main.scss'
|
|
22
22
|
|
|
@@ -35,6 +35,7 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
35
35
|
const initialState = { config: configObj ?? defaults, loading: true, urlMarkup: '', markupError: null, errorMessage: null, coveLoadedHasRan: false }
|
|
36
36
|
|
|
37
37
|
const [state, dispatch] = useReducer(markupIncludeReducer, initialState)
|
|
38
|
+
const [showConfigConfirm, setShowConfigConfirm] = useState(false)
|
|
38
39
|
|
|
39
40
|
const { config, loading, urlMarkup, markupError, errorMessage, coveLoadedHasRan } = state
|
|
40
41
|
|
|
@@ -173,13 +174,11 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
173
174
|
|
|
174
175
|
let content = <Loading />
|
|
175
176
|
|
|
176
|
-
let bodyClasses = ['markup-include']
|
|
177
|
-
|
|
178
177
|
if (loading === false) {
|
|
179
178
|
let body = (
|
|
180
|
-
<
|
|
181
|
-
<Title title={title} isDashboard={isDashboard} classes={[`${config.theme}`, 'mb-0']} />
|
|
179
|
+
<Layout.Responsive isEditor={isEditor}>
|
|
182
180
|
<div className={`cove-component__content ${contentClasses.join(' ')}`}>
|
|
181
|
+
<Title title={title} isDashboard={isDashboard} classes={[`${config.theme}`, 'mb-0']} />
|
|
183
182
|
<div className={`${innerContainerClasses.join(' ')}`}>
|
|
184
183
|
<div className='cove-component__content-wrap'>
|
|
185
184
|
{!markupError && urlMarkup && <Markup content={parseBodyMarkup(urlMarkup)} />}
|
|
@@ -187,20 +186,63 @@ const CdcMarkupInclude = (props: CdcMarkupIncludeProps) => {
|
|
|
187
186
|
</div>
|
|
188
187
|
</div>
|
|
189
188
|
</div>
|
|
190
|
-
</
|
|
189
|
+
</Layout.Responsive>
|
|
191
190
|
)
|
|
192
191
|
|
|
193
192
|
content = (
|
|
194
|
-
|
|
195
|
-
{isEditor &&
|
|
193
|
+
<>
|
|
194
|
+
{isEditor && (
|
|
195
|
+
<>
|
|
196
|
+
<EditorPanel />
|
|
197
|
+
{body}
|
|
198
|
+
</>
|
|
199
|
+
)}
|
|
196
200
|
{!isEditor && body}
|
|
197
|
-
|
|
201
|
+
</>
|
|
202
|
+
)
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
const Error = () => {
|
|
206
|
+
return (
|
|
207
|
+
<section className='waiting'>
|
|
208
|
+
<section className='waiting-container'>
|
|
209
|
+
<h3>Error With Configuration</h3>
|
|
210
|
+
<p>{config.runtime.editorErrorMessage}</p>
|
|
211
|
+
</section>
|
|
212
|
+
</section>
|
|
213
|
+
)
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
const Confirm = () => {
|
|
217
|
+
const confirmDone = e => {
|
|
218
|
+
e.preventDefault()
|
|
219
|
+
let newConfig = { ...config }
|
|
220
|
+
delete newConfig.newViz
|
|
221
|
+
updateConfig(newConfig)
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
return (
|
|
225
|
+
<section className='waiting'>
|
|
226
|
+
<section className='waiting-container'>
|
|
227
|
+
<h3>Finish Configuring</h3>
|
|
228
|
+
<p>Set all required options to the left and confirm below to display a preview of the markup.</p>
|
|
229
|
+
<button className='btn' style={{ margin: '1em auto' }} onClick={confirmDone}>
|
|
230
|
+
I'm Done
|
|
231
|
+
</button>
|
|
232
|
+
</section>
|
|
233
|
+
</section>
|
|
198
234
|
)
|
|
199
235
|
}
|
|
200
236
|
|
|
201
237
|
return (
|
|
202
238
|
<ErrorBoundary component='CdcMarkupInclude'>
|
|
203
|
-
<ConfigContext.Provider value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard }}>
|
|
239
|
+
<ConfigContext.Provider value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard, showConfigConfirm }}>
|
|
240
|
+
{!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
|
|
241
|
+
{config.newViz && showConfigConfirm && <Confirm />}
|
|
242
|
+
<Layout.VisualizationWrapper config={config} isEditor={isEditor} ref={container} showEditorPanel={config?.showEditorPanel}>
|
|
243
|
+
{content}
|
|
244
|
+
</Layout.VisualizationWrapper>
|
|
245
|
+
</ConfigContext.Provider>
|
|
204
246
|
</ErrorBoundary>
|
|
205
247
|
)
|
|
206
248
|
}
|
|
@@ -7,16 +7,15 @@ import ConfigContext from '../ConfigContext'
|
|
|
7
7
|
import Accordion from '@cdc/core/components/ui/Accordion'
|
|
8
8
|
import InputText from '@cdc/core/components/inputs/InputText'
|
|
9
9
|
import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
|
|
10
|
-
|
|
10
|
+
import Layout from '@cdc/core/components/Layout'
|
|
11
11
|
import '@cdc/core/styles/v2/components/editor.scss'
|
|
12
12
|
|
|
13
13
|
const headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
|
|
14
14
|
|
|
15
15
|
const EditorPanel = memo(props => {
|
|
16
|
-
const { config, updateConfig, loading, data, setParentConfig, isDashboard } = useContext(ConfigContext)
|
|
16
|
+
const { config, updateConfig, loading, data, setParentConfig, isDashboard, showConfigConfirm } = useContext(ConfigContext)
|
|
17
17
|
|
|
18
18
|
const [displayPanel, setDisplayPanel] = useState(true)
|
|
19
|
-
const [showConfigConfirm, setShowConfigConfirm] = useState(false)
|
|
20
19
|
|
|
21
20
|
const updateField = updateFieldFactory(config, updateConfig, true)
|
|
22
21
|
|
|
@@ -43,6 +42,10 @@ const EditorPanel = memo(props => {
|
|
|
43
42
|
|
|
44
43
|
const onBackClick = () => {
|
|
45
44
|
setDisplayPanel(!displayPanel)
|
|
45
|
+
updateConfig({
|
|
46
|
+
...config,
|
|
47
|
+
showEditorPanel: !displayPanel
|
|
48
|
+
})
|
|
46
49
|
|
|
47
50
|
// if (isDashboard) {
|
|
48
51
|
// updateConfig({ ...config, editing: false })
|
|
@@ -146,20 +149,9 @@ const EditorPanel = memo(props => {
|
|
|
146
149
|
|
|
147
150
|
return (
|
|
148
151
|
<ErrorBoundary component='EditorPanel'>
|
|
149
|
-
<
|
|
150
|
-
{
|
|
151
|
-
|
|
152
|
-
<button className={`cove-editor--toggle` + (!displayPanel ? ` collapsed` : ``)} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick} />
|
|
153
|
-
<section className={`cove-editor__panel` + (displayPanel ? `` : ' hidden')}>
|
|
154
|
-
<div className='cove-editor__panel-container'>
|
|
155
|
-
<h2 className='cove-editor__heading'>Configure Markup Include</h2>
|
|
156
|
-
<section className='cove-editor__content'>{editorContent}</section>
|
|
157
|
-
</div>
|
|
158
|
-
</section>
|
|
159
|
-
<div className='cove-editor__content'>
|
|
160
|
-
<div className='cove-editor__content-wrap'>{props.children}</div>
|
|
161
|
-
</div>
|
|
162
|
-
</div>
|
|
152
|
+
<Layout.Sidebar displayPanel={displayPanel} onBackClick={onBackClick} isDashboard={isDashboard} title='Configure Markup Include'>
|
|
153
|
+
{editorContent}
|
|
154
|
+
</Layout.Sidebar>
|
|
163
155
|
</ErrorBoundary>
|
|
164
156
|
)
|
|
165
157
|
})
|
package/src/scss/main.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import '@cdc/core/styles/
|
|
1
|
+
@import '@cdc/core/styles/base';
|
|
2
2
|
|
|
3
3
|
.markup-include {
|
|
4
4
|
.checkbox-group {
|
|
@@ -9,6 +9,21 @@
|
|
|
9
9
|
margin-bottom: 24px;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
.cove-component__content-wrap {
|
|
13
|
+
padding: 1rem;
|
|
14
|
+
|
|
15
|
+
h1,
|
|
16
|
+
h2,
|
|
17
|
+
h3 {
|
|
18
|
+
margin-top: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
p {
|
|
22
|
+
margin-top: auto;
|
|
23
|
+
margin-bottom: auto;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
12
27
|
.cove-component__content {
|
|
13
28
|
background-color: #f2f2f2;
|
|
14
29
|
font-size: 14px;
|
|
@@ -16,6 +31,16 @@
|
|
|
16
31
|
.cove-component__content.component--hideBackgroundColor {
|
|
17
32
|
background: transparent;
|
|
18
33
|
}
|
|
34
|
+
|
|
35
|
+
.cove-editor__content .cove-editor__content-wrap {
|
|
36
|
+
margin: 0 auto;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.cove-editor .cove-editor__content {
|
|
40
|
+
position: unset;
|
|
41
|
+
left: unset;
|
|
42
|
+
width: 100%;
|
|
43
|
+
}
|
|
19
44
|
}
|
|
20
45
|
|
|
21
46
|
.cove-accordion__panel-section {
|
|
@@ -26,3 +51,7 @@
|
|
|
26
51
|
float: left;
|
|
27
52
|
}
|
|
28
53
|
}
|
|
54
|
+
.cove-editor .cove-editor__content {
|
|
55
|
+
padding-left: 350px;
|
|
56
|
+
display: flex;
|
|
57
|
+
}
|