@cdc/filtered-text 4.25.10 → 4.25.11

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.
Files changed (4) hide show
  1. package/dist/cdcfilteredtext.js +3908 -4003
  2. package/index.html +33 -26
  3. package/package.json +3 -4
  4. package/src/components/EditorPanel.jsx +58 -97
package/index.html CHANGED
@@ -1,29 +1,36 @@
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>
7
- body {
8
- margin: 0;
9
- }
10
- </style>
11
- <style>
12
- body {
13
- /* max-width: 1000px; */
14
- margin: 0 auto !important;
15
- display: flex;
16
- flex-direction: column;
17
- justify-content: center;
18
- }
19
3
 
20
- .react-container + .react-container {
21
- margin-top: 3rem;
22
- }
23
- </style>
24
- </head>
25
- <body>
26
- <div class="react-container" data-config="/examples/example-config.json"></div>
27
- <script type="module" src="./src/index.jsx"></script>
28
- </body>
29
- </html>
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
+ <style type="text/css">
8
+ body {
9
+ margin: 0;
10
+ border-top: none !important;
11
+ }
12
+
13
+ .cdc-map-outer-container {
14
+ min-height: 100vh;
15
+ }
16
+ </style>
17
+ <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
18
+
19
+ <!-- This is temporary and for testing until Nunito/900 is added to TP -->
20
+ <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap" rel="stylesheet" />
21
+ <style type="text/css">
22
+ @font-face {
23
+ font-family: 'Nunito';
24
+ font-weight: 900;
25
+ font-display: swap;
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
+ <div class="react-container" data-config="/examples/example-config.json"></div>
33
+ <script type="module" src="./src/index.jsx"></script>
34
+ </body>
35
+
36
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/filtered-text",
3
- "version": "4.25.10",
3
+ "version": "4.25.11",
4
4
  "description": "React component for adding filtered text on dashboards.",
5
5
  "moduleName": "CdcFilteredText",
6
6
  "main": "dist/cdcfilteredtext",
@@ -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.25.10",
29
+ "@cdc/core": "^4.25.11",
30
30
  "html-react-parser": "5.2.3",
31
31
  "lodash": "^4.17.21"
32
32
  },
@@ -35,11 +35,10 @@
35
35
  "react-dom": "^18.2.0"
36
36
  },
37
37
  "devDependencies": {
38
- "@rollup/plugin-dsv": "^3.0.2",
39
38
  "@vitejs/plugin-react": "^4.3.4",
40
39
  "vite": "^4.4.11",
41
40
  "vite-plugin-css-injected-by-js": "^2.4.0",
42
41
  "vite-plugin-svgr": "^2.4.0"
43
42
  },
44
- "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
43
+ "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
45
44
  }
package/src/components/EditorPanel.jsx CHANGED
@@ -5,31 +5,16 @@ import ConfigContext from '../ConfigContext'
5
5
 
6
6
  import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
7
7
  import Accordion from '@cdc/core/components/ui/Accordion'
8
- import InputText from '@cdc/core/components/inputs/InputText'
8
+ import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
9
9
  import Button from '@cdc/core/components/elements/Button'
10
10
  import Icon from '@cdc/core/components/ui/Icon'
11
11
  import Tooltip from '@cdc/core/components/ui/Tooltip'
12
- import InputSelect from '@cdc/core/components/inputs/InputSelect'
13
- import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox'
14
12
  import Layout from '@cdc/core/components/Layout'
13
+ import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
15
14
  import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
16
15
 
17
16
  import '@cdc/core/styles/v2/components/editor.scss'
18
17
 
19
- const headerColors = [
20
- 'theme-blue',
21
- 'theme-purple',
22
- 'theme-brown',
23
- 'theme-teal',
24
- 'theme-pink',
25
- 'theme-orange',
26
- 'theme-slate',
27
- 'theme-indigo',
28
- 'theme-cyan',
29
- 'theme-green',
30
- 'theme-amber'
31
- ]
32
-
33
18
  const EditorPanel = memo(props => {
34
19
  const { config, updateConfig, loading, stateData: data, setParentConfig, isDashboard } = useContext(ConfigContext)
35
20
 
@@ -157,7 +142,7 @@ const EditorPanel = memo(props => {
157
142
  const editorContent = (
158
143
  <Accordion>
159
144
  <Accordion.Section title='General'>
160
- <InputText
145
+ <TextField
161
146
  value={config.title}
162
147
  fieldName='title'
163
148
  label='Title'
@@ -166,33 +151,30 @@ const EditorPanel = memo(props => {
166
151
  />
167
152
  </Accordion.Section>
168
153
  <Accordion.Section title='Data'>
169
- <div className='cove-accordion__panel-section'>
170
- <div className='cove-input-group'>
171
- <InputSelect
172
- value={config.textColumn || ''}
173
- fieldName='textColumn'
174
- label='Text Column'
175
- updateField={updateField}
176
- initial='Select'
177
- options={getColumns()}
178
- />
179
- </div>
180
- </div>
181
- <hr className='cove-accordion__divider' />
154
+ <Select
155
+ value={config.textColumn || ''}
156
+ fieldName='textColumn'
157
+ label='Text Column'
158
+ updateField={updateField}
159
+ initial='Select'
160
+ options={getColumns()}
161
+ />
182
162
 
183
163
  <label style={{ marginBottom: '1rem' }}>
184
- <span className='edit-label'>Data Point Filters</span>
185
- <Tooltip style={{ textTransform: 'none' }}>
186
- <Tooltip.Target>
187
- <Icon display='question' style={{ marginLeft: '0.5rem' }} />
188
- </Tooltip.Target>
189
- <Tooltip.Content>
190
- <p>
191
- To refine the highlighted data point, specify one or more filters (e.g., "Male" and "Female" for a
192
- column called "Sex").
193
- </p>
194
- </Tooltip.Content>
195
- </Tooltip>
164
+ <span className='edit-label'>
165
+ Data Point Filters
166
+ <Tooltip style={{ textTransform: 'none' }}>
167
+ <Tooltip.Target>
168
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
169
+ </Tooltip.Target>
170
+ <Tooltip.Content>
171
+ <p>
172
+ To refine the highlighted data point, specify one or more filters (e.g., "Male" and "Female" for a
173
+ column called "Sex").
174
+ </p>
175
+ </Tooltip.Content>
176
+ </Tooltip>
177
+ </span>
196
178
  </label>
197
179
  {config.filters && (
198
180
  <ul className='filters-list' style={{ paddingLeft: 0, marginBottom: '1rem' }}>
@@ -207,38 +189,28 @@ const EditorPanel = memo(props => {
207
189
  >
208
190
  Remove
209
191
  </button>
210
- <label>
211
- <span className='edit-label column-heading'>Column</span>
212
- <select
213
- value={filter.columnName}
214
- onChange={e => {
215
- updateFilterProp('columnName', index, e.target.value)
216
- }}
217
- >
218
- <option value=''>- Select Option -</option>
219
- {getColumns().map((dataKey, index) => (
220
- <option value={dataKey} key={index}>
221
- {dataKey}
222
- </option>
223
- ))}
224
- </select>
225
- </label>
226
- <label>
227
- <span className='edit-label column-heading'>Column Value</span>
228
- <select
229
- value={filter.columnValue}
230
- onChange={e => {
231
- updateFilterProp('columnValue', index, e.target.value)
232
- }}
233
- >
234
- <option value=''>- Select Option -</option>
235
- {getFilterColumnValues(index).map((dataKey, index) => (
236
- <option value={dataKey} key={index}>
237
- {dataKey}
238
- </option>
239
- ))}
240
- </select>
241
- </label>
192
+ <Select
193
+ label='Column'
194
+ value={filter.columnName || ''}
195
+ options={[
196
+ { value: '', label: '- Select Option -' },
197
+ ...getColumns().map(col => ({ value: col, label: col }))
198
+ ]}
199
+ onChange={e => {
200
+ updateFilterProp('columnName', index, e.target.value)
201
+ }}
202
+ />
203
+ <Select
204
+ label='Column Value'
205
+ value={filter.columnValue || ''}
206
+ options={[
207
+ { value: '', label: '- Select Option -' },
208
+ ...getFilterColumnValues(index).map(val => ({ value: val, label: val }))
209
+ ]}
210
+ onChange={e => {
211
+ updateFilterProp('columnValue', index, e.target.value)
212
+ }}
213
+ />
242
214
  </fieldset>
243
215
  ))}
244
216
  </ul>
@@ -248,32 +220,21 @@ const EditorPanel = memo(props => {
248
220
  </Button>
249
221
  </Accordion.Section>
250
222
  <Accordion.Section title='Visual'>
251
- <InputSelect
223
+ <Select
252
224
  value={config.fontSize}
253
225
  fieldName='fontSize'
254
226
  label='Font Size'
255
227
  updateField={updateField}
256
228
  options={['small', 'medium', 'large']}
257
229
  />
258
- <br />
259
- <label>
260
- <span className='edit-label'>Theme</span>
261
- <ul className='color-palette'>
262
- {headerColors.map(palette => (
263
- <li
264
- title={palette}
265
- key={palette}
266
- onClick={() => {
267
- updateConfig({ ...config, theme: palette })
268
- }}
269
- className={config.theme === palette ? 'selected ' + palette : palette}
270
- ></li>
271
- ))}
272
- </ul>
273
- </label>
230
+ <HeaderThemeSelector
231
+ selectedTheme={config.theme}
232
+ onThemeSelect={theme => updateConfig({ ...config, theme })}
233
+ label='Theme'
234
+ />
274
235
 
275
236
  <div className='cove-accordion__panel-section checkbox-group'>
276
- <InputCheckbox
237
+ <CheckBox
277
238
  inline
278
239
  size='small'
279
240
  value={config.visual.border}
@@ -282,7 +243,7 @@ const EditorPanel = memo(props => {
282
243
  label='Display Border'
283
244
  updateField={updateField}
284
245
  />
285
- <InputCheckbox
246
+ <CheckBox
286
247
  inline
287
248
  size='small'
288
249
  value={config.visual.borderColorTheme}
@@ -291,7 +252,7 @@ const EditorPanel = memo(props => {
291
252
  label='Use theme border color'
292
253
  updateField={updateField}
293
254
  />
294
- <InputCheckbox
255
+ <CheckBox
295
256
  size='small'
296
257
  value={config.visual.accent}
297
258
  section='visual'
@@ -299,7 +260,7 @@ const EditorPanel = memo(props => {
299
260
  label='Use Accent Style'
300
261
  updateField={updateField}
301
262
  />
302
- <InputCheckbox
263
+ <CheckBox
303
264
  size='small'
304
265
  value={config.visual.background}
305
266
  section='visual'
@@ -307,7 +268,7 @@ const EditorPanel = memo(props => {
307
268
  label='Use Theme Background Color'
308
269
  updateField={updateField}
309
270
  />
310
- <InputCheckbox
271
+ <CheckBox
311
272
  size='small'
312
273
  value={config.visual.hideBackgroundColor}
313
274
  section='visual'