@cdc/markup-include 4.26.3 → 4.26.5

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/CONFIG.md ADDED
@@ -0,0 +1,113 @@
1
+ # `@cdc/markup-include` Configuration Reference
2
+
3
+ This document describes the supported configuration contract for `@cdc/markup-include`.
4
+
5
+ Shared nested types used by this package are documented in the [`@cdc/core` config reference](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md).
6
+
7
+ To follow those shared types locally, use `packages/core/CONFIG.md` in this monorepo or `node_modules/@cdc/core/CONFIG.md` in an installed app. If neither path is available, use the GitHub link above.
8
+
9
+ ## Organization
10
+
11
+ The config is documented in the order users usually build the component:
12
+
13
+ | Section | Covers |
14
+ | --- | --- |
15
+ | Identity and data source | How the component is identified and where it gets data/markup |
16
+ | Content editor | Inline HTML, remote HTML, titles, and editor-driven behavior |
17
+ | Shared core structures | Markup variables, filters, footnotes, and data-driven colors |
18
+ | Layout and appearance | Theme and shell styling flags |
19
+ | Fields You Can Ignore | Runtime, editor, and migration artifacts |
20
+
21
+ ## Minimum Working Config
22
+
23
+ Use the example in [README.md](./README.md) for the copy-pasteable minimum config. The source of truth lives at `packages/markup-include/examples/minimal-example.json`, and the README block is kept in sync with automated tests.
24
+
25
+ ## Identity and Data Source
26
+
27
+ | Field | Type | Required | Default | Description | Allowed values / Notes |
28
+ | --- | --- | --- | --- | --- | --- |
29
+ | `type` | `string` | Yes | None | Identifies the package. | Must be `markup-include`. |
30
+ | `version` | `string` | No | None | Saved COVE version used by migration logic. | Use a semantic version string. |
31
+ | `data` | `object[]` | No | `[]` in initial state; omitted values may normalize to `{}` during load | Inline row data used by markup variables and data-color mapping. | If `dataUrl` is present, fetched rows replace inline rows. `dataKey` dataset fallback applies to markup variables only when the data argument is absent/falsy or an actual empty array; normalized `{}` data prevents that fallback. Current data-color resolution reads only `config.data`. |
32
+ | `dataUrl` | `string` | No | None | Remote data source used by the package loader. | Present in runtime configs even though it is not part of the package type definition. |
33
+ | `dataKey` | `string` | No | None | Named dataset key used when the component is rendered inside a dashboard. | Resolved from `datasets[dataKey]` for markup variable processing when available and the data argument is absent/falsy or an actual empty array. If omitted `data` has already normalized to `{}`, the current fallback check does not run. Shared [`ConfigureData`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#configuredata) field documented in `@cdc/core`. |
34
+ | `dataMetadata` | `Record<string, string>` | No | None | Metadata dictionary exposed to markup variables and footnotes. | Often populated automatically when `dataUrl` is fetched. Shared [`ConfigureData`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#configuredata) field documented in `@cdc/core`. |
35
+ | `locale` | `string` | No | `en-US` for markup-variable formatting | Locale used when resolving markup variables and shared formatting helpers. | Any valid `Intl` locale is accepted. When omitted, shared markup-variable formatting falls back to `en-US`. Shared `Visualization` field documented in `@cdc/core`. |
36
+
37
+ ## Content Editor
38
+
39
+ The authored content lives inside `contentEditor`.
40
+
41
+ | Field | Type | Required | Default | Description | Allowed values / Notes |
42
+ | --- | --- | --- | --- | --- | --- |
43
+ | `contentEditor.inlineHTML` | `string` | No | `'<strong>Inline HTML</strong>'` | Authored HTML rendered directly inside the component. | Used when `contentEditor.useInlineHTML` is `true`. Supports inline markup and markup variables. |
44
+ | `contentEditor.srcUrl` | `string` | No | `'#example'` | Remote HTML source URL. | Used when `contentEditor.useInlineHTML` is `false`. The default `#example` value is an internal placeholder, not a consumer URL. |
45
+ | `contentEditor.useInlineHTML` | `boolean` | No | `true` | Switches between inline HTML and remote URL mode. | `true`, `false` |
46
+ | `contentEditor.title` | `string` | No | `''` | Title shown in the component shell or TP5 callout. | Hidden when empty. Markup variables in titles are processed when markup variables are enabled. |
47
+ | `contentEditor.titleStyle` | `string` | No | `small` | Title size/style in non-TP5 layouts. | `legacy`, `large`, `small` |
48
+ | `contentEditor.style` | `string` | No | `default` | Chooses the main content treatment. | `default`, `tp5` |
49
+ | `contentEditor.showNoDataMessage` | `boolean` | No | `false` | Shows a no-data message when markup variables cannot resolve. | Can show the configured message when `contentEditor.allowHideSection` is `false`. If both flags are `true` and a variable is unresolved, hide-section behavior wins and the component is not rendered. |
50
+ | `contentEditor.noDataMessageText` | `string` | No | `'No Data Available'` | Message shown when the component enters a no-data state. | Rendered verbatim. |
51
+ | `contentEditor.allowHideSection` | `boolean` | No | `false` | Allows markup processing to hide the entire section when values are missing. | Used by the shared markup-variable processor. |
52
+
53
+ ## Shared Core Structures
54
+
55
+ The package uses several shared config shapes that are documented in `@cdc/core`.
56
+
57
+ ### Markup Variables
58
+
59
+ | Field | Type | Required | Default | Description | Allowed values / Notes |
60
+ | --- | --- | --- | --- | --- | --- |
61
+ | `enableMarkupVariables` | `boolean` | No | `false` | Controls markup-variable processing for the title, footnotes, and editor flows; inline HTML body placeholders are processed whenever `markupVariables` are present. | Shared [`MarkupConfig`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#markupconfig) flag documented in core. |
62
+ | `markupVariables` | [`MarkupVariable[]`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#markupvariable) | No | `[]` | Root-level placeholder definitions available to authored text. | Shared type documented in core. This is the preferred location. |
63
+ | `contentEditor.markupVariables` | [`MarkupVariable[]`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#markupvariable) | No | `[]` | Legacy nested copy of the same variable list. | Accepted for backward compatibility; the migration helper moves it to root level. |
64
+
65
+ Column value variables support `selectionMode: 'first'` when authored in the Conditions area. This is mainly used by migrated `filtered-text` configs; the default remains the multi-match list output.
66
+
67
+ ### Filters
68
+
69
+ | Field | Type | Required | Default | Description | Allowed values / Notes |
70
+ | --- | --- | --- | --- | --- | --- |
71
+ | `filters` | [`VizFilter[]`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#vizfilter) | No | `[]` | Optional shared filters that also feed markup variable and footnote processing. | Shared filter shape documented in core. |
72
+
73
+ ### Footnotes
74
+
75
+ | Field | Type | Required | Default | Description | Allowed values / Notes |
76
+ | --- | --- | --- | --- | --- | --- |
77
+ | `footnotes` | [`Footnotes`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#footnotes) | No | None | Shared footnotes block rendered below the content. | Shared type documented in core. Markup include passes `filters`, `markupVariables`, and `dataMetadata` through to the shared footnotes renderer. |
78
+
79
+ ### Data-Driven Colors
80
+
81
+ | Behavior | Details |
82
+ | --- | --- |
83
+ | Rendered layouts | Only used when `contentEditor.style` is `tp5`. |
84
+ | Source selection | The editor builds mappings from `dataColors.column` using the active data rows. |
85
+ | Runtime row selection | Current runtime color resolution uses the first row of `config.data`; dashboard `dataKey` fallback is not applied to data-color resolution. |
86
+ | Color behavior | The callout background uses the resolved color and text color is computed automatically for contrast. |
87
+
88
+ `dataColors` itself is a shared [`DataColorConfig`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#datacolorconfig) documented in `@cdc/core`.
89
+
90
+ ## Layout and Appearance
91
+
92
+ Shared shell styling flags on `visual` follow core [`ComponentStyles`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#componentstyles). The package-specific fields below capture the authored shell choices consumers most often need; TP5 layouts suppress the normal accent/background shell treatment.
93
+
94
+ | Field | Type | Required | Default | Description | Allowed values / Notes |
95
+ | --- | --- | --- | --- | --- | --- |
96
+ | `theme` | `string` | No | `theme-blue` | Shared theme token for the shell. | See shared theme values in [`@cdc/core`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#componentthemes). |
97
+ | `visual.whiteBackground` | `boolean` | No | `false` | Uses the TP5 white-background treatment. | Only meaningful when `contentEditor.style` is `tp5`; shared TP5 option documented in [`@cdc/core`](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/core/CONFIG.md#sharedtp5visualoptions). |
98
+
99
+ ## Fields You Can Ignore
100
+
101
+ These fields often appear in saved configs, editor exports, or migration output, but consumers usually do not need to author them:
102
+
103
+ | Field or group | Why you can ignore it |
104
+ | --- | --- |
105
+ | `runtime.*` | Internal runtime state created during initialization. |
106
+ | `legend` | Legacy shell artifact retained in defaults and some exports. |
107
+ | `newViz` | Editor-only flag used by creation and preview flows. |
108
+ | `showEditorPanel` | Editor chrome flag, not consumer config. |
109
+ | `visualizationType` | Editor/runtime identifier injected by the wrapper. |
110
+ | `dataDescription` | Shared loader metadata that this package does not read directly. |
111
+ | `formattedData` | Normalized data generated by loader flows, not by package authors. |
112
+ | `dataFileName`, `dataFileSourceType`, `dataFileSize` | Runtime/file metadata from load and fetch flows. |
113
+ | `contentEditor.showHeader` | Present in some saved configs and examples, but the runtime does not read it. |
package/README.md CHANGED
@@ -2,28 +2,52 @@
2
2
 
3
3
  [![npm](https://img.shields.io/npm/v/@cdc/markup-include)](https://www.npmjs.com/package/@cdc/markup-include)
4
4
 
5
- `<CdcMarkupInclude />` is a React component produced by the CDC for importing HTML markup data from a separate source link.
5
+ `<CdcMarkupInclude />` renders authored HTML and optional markup variables inside the CDC shell.
6
+ The primary configuration reference is [CONFIG.md](./CONFIG.md).
6
7
 
7
- This package is part of the larger [CDC Open Visualization](https://github.com/CDCgov/cdc-open-viz) project.
8
+ ## Installation
8
9
 
9
- ### Installation and Usage
10
+ ```bash
11
+ npm install @cdc/markup-include
12
+ ```
13
+
14
+ ## Quick Start
10
15
 
11
- 1. Install the package in your React project `npm install @cdc/markup-include`
12
- 2. Import the component and begin using in your code.
16
+ Use the package by passing a `config` object directly:
13
17
 
14
- ```JSX
18
+ <!-- README_EXAMPLE_CONFIG_START -->
19
+ ```jsx
15
20
  import CdcMarkupInclude from '@cdc/markup-include'
16
21
 
17
- function App() {
22
+ const config = {
23
+ type: 'markup-include',
24
+ version: '4.26.4',
25
+ theme: 'theme-blue',
26
+ contentEditor: {
27
+ inlineHTML: '<p>Markup include minimum example.</p>',
28
+ srcUrl: '',
29
+ title: 'Markup Include',
30
+ useInlineHTML: true
31
+ }
32
+ }
18
33
 
19
- return (
20
- <div className="App">
21
- <CdcMarkupInclude config={configObj} />
22
- </div>
23
- );
34
+ function App() {
35
+ return <CdcMarkupInclude config={config} />
24
36
  }
25
37
 
26
- export default App;
38
+ export default App
27
39
  ```
40
+ <!-- README_EXAMPLE_CONFIG_END -->
41
+
42
+ ## Configuration
43
+
44
+ The primary reference for authoring configs is [CONFIG.md](./CONFIG.md).
45
+
46
+ If you are reading this in a context where relative Markdown links do not open correctly, use the [GitHub copy of the markup include config reference](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/markup-include/CONFIG.md).
47
+
48
+ ## Properties
28
49
 
29
- Note, you must pass in a configuration object. Configuration objects can be created with the [Editor package](https://github.com/CDCgov/cdc-open-viz/tree/main/packages/editor).
50
+ | Property | Type | Description |
51
+ | --- | --- | --- |
52
+ | `config` | `object` | Markup include configuration object. |
53
+ | `configUrl` | `string` | Optional URL to a JSON config file fetched at runtime. |