@cdc/markup-include 4.24.12-2 → 4.25.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 +1526 -1468
- package/index.html +1 -2
- package/package.json +3 -3
- package/src/components/Conditions.tsx +4 -4
- package/src/components/Variables.tsx +29 -7
- package/src/index.jsx +1 -0
- package/src/scss/main.scss +1 -1
- package/src/types/Config.ts +2 -0
package/index.html
CHANGED
|
@@ -16,8 +16,7 @@
|
|
|
16
16
|
margin-top: 3rem;
|
|
17
17
|
}
|
|
18
18
|
</style>
|
|
19
|
-
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/
|
|
20
|
-
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/4.0/assets/css/app.min.css?_=39423" />
|
|
19
|
+
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
|
|
21
20
|
</head>
|
|
22
21
|
<body>
|
|
23
22
|
<!-- Original -->
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/markup-include",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.25.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.25.1",
|
|
31
31
|
"axios": "^1.6.0",
|
|
32
32
|
"chroma": "0.0.1",
|
|
33
33
|
"chroma-js": "^2.1.0",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"react": "^18.2.0",
|
|
40
40
|
"react-dom": "^18.2.0"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "c32d727f516fe3525178e3a6480abbe70b2a20d6"
|
|
43
43
|
}
|
|
@@ -69,7 +69,7 @@ const Conditions: React.FC<CondtionsProps> = ({
|
|
|
69
69
|
>
|
|
70
70
|
<Icon display='caretDown' />
|
|
71
71
|
</button>
|
|
72
|
-
<button className='btn btn-warn btn-sm mt-0
|
|
72
|
+
<button className='btn btn-warn btn-sm mt-0 ms-2' onClick={() => removeCondition(conditionIndex)}>
|
|
73
73
|
Remove
|
|
74
74
|
</button>
|
|
75
75
|
</div>
|
|
@@ -78,7 +78,7 @@ const Conditions: React.FC<CondtionsProps> = ({
|
|
|
78
78
|
<span>Condition : </span>
|
|
79
79
|
<div className='pt-1'>
|
|
80
80
|
<select
|
|
81
|
-
className='
|
|
81
|
+
className='ms-1'
|
|
82
82
|
value={columnName}
|
|
83
83
|
onChange={e => handleConditionChange(e.target.value, 'columnName')}
|
|
84
84
|
>
|
|
@@ -90,14 +90,14 @@ const Conditions: React.FC<CondtionsProps> = ({
|
|
|
90
90
|
))}
|
|
91
91
|
</select>
|
|
92
92
|
<select
|
|
93
|
-
className='
|
|
93
|
+
className='ms-1'
|
|
94
94
|
value={isOrIsNotEqualTo}
|
|
95
95
|
onChange={e => handleConditionChange(e.target.value, 'isOrIsNotEqualTo')}
|
|
96
96
|
>
|
|
97
97
|
<option value='is'>is</option>
|
|
98
98
|
<option value='isNot'>is not</option>
|
|
99
99
|
</select>
|
|
100
|
-
<select className='
|
|
100
|
+
<select className='ms-1' value={value} onChange={e => handleConditionChange(e.target.value, 'value')}>
|
|
101
101
|
<option value=''>Select</option>
|
|
102
102
|
|
|
103
103
|
{conditionLookup[columnName]?.map(valueItem => {
|
|
@@ -18,7 +18,14 @@ type VariableSectionProps = {
|
|
|
18
18
|
variableIndex: number
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
const VariableSection: React.FC<VariableSectionProps> = ({
|
|
21
|
+
const VariableSection: React.FC<VariableSectionProps> = ({
|
|
22
|
+
controls,
|
|
23
|
+
data,
|
|
24
|
+
deleteVariable,
|
|
25
|
+
updateVariableArray,
|
|
26
|
+
variableConfig,
|
|
27
|
+
variableIndex
|
|
28
|
+
}) => {
|
|
22
29
|
const [openVariableControls, setOpenVariableControls] = controls
|
|
23
30
|
const show = openVariableControls[variableIndex]
|
|
24
31
|
const setShow = (key, value) => {
|
|
@@ -84,7 +91,9 @@ const VariableSection: React.FC<VariableSectionProps> = ({ controls, data, delet
|
|
|
84
91
|
}
|
|
85
92
|
|
|
86
93
|
const handleVariableDoneClick = () => {
|
|
87
|
-
const filteredConditionsList = conditionsList.filter(
|
|
94
|
+
const filteredConditionsList = conditionsList.filter(
|
|
95
|
+
condition => condition.columnName !== '' && condition.value !== ''
|
|
96
|
+
)
|
|
88
97
|
const newVariable = {
|
|
89
98
|
columnName: selectedColumn,
|
|
90
99
|
conditions: filteredConditionsList,
|
|
@@ -117,7 +126,7 @@ const VariableSection: React.FC<VariableSectionProps> = ({ controls, data, delet
|
|
|
117
126
|
<Icon display='caretUp' />
|
|
118
127
|
</button>
|
|
119
128
|
<button
|
|
120
|
-
className='btn btn-danger btn-sm mt-0
|
|
129
|
+
className='btn btn-danger btn-sm mt-0 ms-2'
|
|
121
130
|
onClick={event => {
|
|
122
131
|
event.preventDefault()
|
|
123
132
|
deleteVariable(variableIndex)
|
|
@@ -128,12 +137,22 @@ const VariableSection: React.FC<VariableSectionProps> = ({ controls, data, delet
|
|
|
128
137
|
</div>
|
|
129
138
|
<label className='d-block'>
|
|
130
139
|
<span className='edit-label column-heading'>Variable Name:</span>
|
|
131
|
-
<input
|
|
140
|
+
<input
|
|
141
|
+
className={`variable-${variableIndex} ms-1`}
|
|
142
|
+
type='text'
|
|
143
|
+
value={variableName}
|
|
144
|
+
onChange={e => setVariableName(e.target.value)}
|
|
145
|
+
/>
|
|
132
146
|
</label>
|
|
133
147
|
<div className='pt-2'>
|
|
134
148
|
<label className='d-block'>
|
|
135
149
|
<span className='edit-label column-heading'>Column:</span>
|
|
136
|
-
<select
|
|
150
|
+
<select
|
|
151
|
+
className={`variable-${variableIndex} ms-1`}
|
|
152
|
+
onChange={e => handleVariableColumnChange(e.target.value)}
|
|
153
|
+
value={selectedColumn}
|
|
154
|
+
disabled={columnSelectDisabled}
|
|
155
|
+
>
|
|
137
156
|
<option value=''>Select</option>
|
|
138
157
|
{columnNames.map(columnName => (
|
|
139
158
|
<option key={columnName} value={columnName}>
|
|
@@ -151,7 +170,10 @@ const VariableSection: React.FC<VariableSectionProps> = ({ controls, data, delet
|
|
|
151
170
|
tooltip={
|
|
152
171
|
<Tooltip style={{ textTransform: 'none' }}>
|
|
153
172
|
<Tooltip.Target>
|
|
154
|
-
<Icon
|
|
173
|
+
<Icon
|
|
174
|
+
display='question'
|
|
175
|
+
style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
|
|
176
|
+
/>
|
|
155
177
|
</Tooltip.Target>
|
|
156
178
|
<Tooltip.Content>
|
|
157
179
|
<p>{`Selecting this option will add commas to the numeric value.`}</p>
|
|
@@ -183,7 +205,7 @@ const VariableSection: React.FC<VariableSectionProps> = ({ controls, data, delet
|
|
|
183
205
|
<button onClick={handleAddConditionClick} disabled={addConditionDisabled}>
|
|
184
206
|
Add Condition
|
|
185
207
|
</button>
|
|
186
|
-
<button className='
|
|
208
|
+
<button className='ms-2' onClick={handleVariableDoneClick} disabled={addConditionDisabled}>
|
|
187
209
|
Done
|
|
188
210
|
</button>
|
|
189
211
|
</div>
|
package/src/index.jsx
CHANGED
|
@@ -5,6 +5,7 @@ import { GlobalContextProvider } from '@cdc/core/components/GlobalContext'
|
|
|
5
5
|
|
|
6
6
|
import CdcMarkupInclude from './CdcMarkupInclude'
|
|
7
7
|
|
|
8
|
+
import '@cdc/core/styles/cove-main.scss'
|
|
8
9
|
import './coreStyles_markupinclude.scss'
|
|
9
10
|
|
|
10
11
|
let isEditor = window.location.href.includes('editor=true')
|
package/src/scss/main.scss
CHANGED
package/src/types/Config.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Runtime } from '@cdc/core/types/Runtime'
|
|
2
2
|
import { Variable } from './Variable'
|
|
3
|
+
import { Version } from '@cdc/core/types/Version'
|
|
3
4
|
|
|
4
5
|
export type Config = {
|
|
5
6
|
contentEditor: {
|
|
@@ -25,4 +26,5 @@ export type Config = {
|
|
|
25
26
|
hideBackgroundColor: boolean
|
|
26
27
|
borderColorTheme: boolean
|
|
27
28
|
}
|
|
29
|
+
version: Version
|
|
28
30
|
}
|