@cdc/data-bite 4.25.11 → 4.26.2
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/cdcdatabite.js +11709 -10828
- package/examples/default.json +59 -0
- package/examples/tp5-style.json +59 -0
- package/examples/tp5-white-background.json +60 -0
- package/index.html +1 -30
- package/package.json +33 -34
- package/src/CdcDataBite.tsx +100 -54
- package/src/_stories/DataBite.Editor.stories.tsx +6 -3
- package/src/_stories/DataBite.stories.tsx +50 -0
- package/src/components/EditorPanel/EditorPanel.tsx +542 -0
- package/src/components/EditorPanel/index.tsx +3 -0
- package/src/constants.ts +2 -1
- package/src/images/callout-flag.svg +7 -0
- package/src/scss/bite.scss +84 -1
- package/src/scss/editor-panel.scss +1 -1
- package/src/scss/main.scss +1 -0
- package/src/store/db.reducer.ts +1 -1
- package/src/test/CdcDataBite.test.jsx +1 -1
- package/src/types/Config.ts +1 -0
- package/LICENSE +0 -201
- package/src/components/EditorPanel.jsx +0 -705
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "data-bite",
|
|
3
|
+
"data": [
|
|
4
|
+
{
|
|
5
|
+
"Category": "Total",
|
|
6
|
+
"Value": 1234
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"Category": "Group A",
|
|
10
|
+
"Value": 5678
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"Category": "Group B",
|
|
14
|
+
"Value": 9012
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"Category": "Group C",
|
|
18
|
+
"Value": 3456
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"dataBite": "",
|
|
22
|
+
"dataFunction": "Mean (Average)",
|
|
23
|
+
"dataColumn": "Value",
|
|
24
|
+
"bitePosition": "Left",
|
|
25
|
+
"biteFontSize": 36,
|
|
26
|
+
"fontSize": "medium",
|
|
27
|
+
"biteBody": "Highlight a statistic, data point, or key fact about a topic using the relevant layout option:",
|
|
28
|
+
"imageData": {
|
|
29
|
+
"display": "none",
|
|
30
|
+
"url": "",
|
|
31
|
+
"alt": "",
|
|
32
|
+
"options": []
|
|
33
|
+
},
|
|
34
|
+
"dataFormat": {
|
|
35
|
+
"roundToPlace": 0,
|
|
36
|
+
"commas": true,
|
|
37
|
+
"prefix": "",
|
|
38
|
+
"suffix": ""
|
|
39
|
+
},
|
|
40
|
+
"biteStyle": "tp5",
|
|
41
|
+
"filters": [],
|
|
42
|
+
"subtext": "*This is an optional subtext or citation.",
|
|
43
|
+
"title": "Data / Fact",
|
|
44
|
+
"theme": "theme-blue",
|
|
45
|
+
"shadow": false,
|
|
46
|
+
"visual": {
|
|
47
|
+
"border": false,
|
|
48
|
+
"accent": false,
|
|
49
|
+
"background": false,
|
|
50
|
+
"hideBackgroundColor": false,
|
|
51
|
+
"borderColorTheme": false,
|
|
52
|
+
"showTitle": true
|
|
53
|
+
},
|
|
54
|
+
"general": {
|
|
55
|
+
"isCompactStyle": false
|
|
56
|
+
},
|
|
57
|
+
"markupVariables": [],
|
|
58
|
+
"enableMarkupVariables": false
|
|
59
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "data-bite",
|
|
3
|
+
"data": [
|
|
4
|
+
{
|
|
5
|
+
"Category": "Total",
|
|
6
|
+
"Value": 1234
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"Category": "Group A",
|
|
10
|
+
"Value": 5678
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"Category": "Group B",
|
|
14
|
+
"Value": 9012
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"Category": "Group C",
|
|
18
|
+
"Value": 3456
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"dataBite": "",
|
|
22
|
+
"dataFunction": "Mean (Average)",
|
|
23
|
+
"dataColumn": "Value",
|
|
24
|
+
"bitePosition": "Left",
|
|
25
|
+
"biteFontSize": 36,
|
|
26
|
+
"fontSize": "medium",
|
|
27
|
+
"biteBody": "Highlight a statistic, data point, or key fact about a topic using the relevant layout option:",
|
|
28
|
+
"imageData": {
|
|
29
|
+
"display": "none",
|
|
30
|
+
"url": "",
|
|
31
|
+
"alt": "",
|
|
32
|
+
"options": []
|
|
33
|
+
},
|
|
34
|
+
"dataFormat": {
|
|
35
|
+
"roundToPlace": 0,
|
|
36
|
+
"commas": true,
|
|
37
|
+
"prefix": "",
|
|
38
|
+
"suffix": ""
|
|
39
|
+
},
|
|
40
|
+
"biteStyle": "tp5",
|
|
41
|
+
"filters": [],
|
|
42
|
+
"subtext": "*This is an optional subtext or citation.",
|
|
43
|
+
"title": "Data / Fact",
|
|
44
|
+
"theme": "theme-blue",
|
|
45
|
+
"shadow": false,
|
|
46
|
+
"visual": {
|
|
47
|
+
"border": false,
|
|
48
|
+
"accent": false,
|
|
49
|
+
"background": false,
|
|
50
|
+
"hideBackgroundColor": false,
|
|
51
|
+
"borderColorTheme": false,
|
|
52
|
+
"showTitle": true
|
|
53
|
+
},
|
|
54
|
+
"general": {
|
|
55
|
+
"isCompactStyle": false
|
|
56
|
+
},
|
|
57
|
+
"markupVariables": [],
|
|
58
|
+
"enableMarkupVariables": false
|
|
59
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "data-bite",
|
|
3
|
+
"data": [
|
|
4
|
+
{
|
|
5
|
+
"Category": "Total",
|
|
6
|
+
"Value": 1234
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"Category": "Group A",
|
|
10
|
+
"Value": 5678
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"Category": "Group B",
|
|
14
|
+
"Value": 9012
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"Category": "Group C",
|
|
18
|
+
"Value": 3456
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"dataBite": "",
|
|
22
|
+
"dataFunction": "Mean (Average)",
|
|
23
|
+
"dataColumn": "Value",
|
|
24
|
+
"bitePosition": "Left",
|
|
25
|
+
"biteFontSize": 36,
|
|
26
|
+
"fontSize": "medium",
|
|
27
|
+
"biteBody": "Highlight a statistic, data point, or key fact about a topic using the relevant layout option:",
|
|
28
|
+
"imageData": {
|
|
29
|
+
"display": "none",
|
|
30
|
+
"url": "",
|
|
31
|
+
"alt": "",
|
|
32
|
+
"options": []
|
|
33
|
+
},
|
|
34
|
+
"dataFormat": {
|
|
35
|
+
"roundToPlace": 0,
|
|
36
|
+
"commas": true,
|
|
37
|
+
"prefix": "",
|
|
38
|
+
"suffix": ""
|
|
39
|
+
},
|
|
40
|
+
"biteStyle": "tp5",
|
|
41
|
+
"filters": [],
|
|
42
|
+
"subtext": "*This is an optional subtext or citation.",
|
|
43
|
+
"title": "Data / Fact",
|
|
44
|
+
"theme": "theme-blue",
|
|
45
|
+
"shadow": false,
|
|
46
|
+
"visual": {
|
|
47
|
+
"border": false,
|
|
48
|
+
"accent": false,
|
|
49
|
+
"background": false,
|
|
50
|
+
"hideBackgroundColor": false,
|
|
51
|
+
"borderColorTheme": false,
|
|
52
|
+
"showTitle": true,
|
|
53
|
+
"whiteBackground": true
|
|
54
|
+
},
|
|
55
|
+
"general": {
|
|
56
|
+
"isCompactStyle": false
|
|
57
|
+
},
|
|
58
|
+
"markupVariables": [],
|
|
59
|
+
"enableMarkupVariables": false
|
|
60
|
+
}
|
package/index.html
CHANGED
|
@@ -1,30 +1 @@
|
|
|
1
|
-
|
|
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
|
-
border-top: none !important;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.cdc-open-viz-module {
|
|
13
|
-
min-height: 100vh;
|
|
14
|
-
}
|
|
15
|
-
</style>
|
|
16
|
-
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
|
|
17
|
-
</head>
|
|
18
|
-
<body>
|
|
19
|
-
<!-- Original -->
|
|
20
|
-
<!-- <div class="react-container" data-config="/examples/sankey-example-data.json"></div> -->
|
|
21
|
-
|
|
22
|
-
<!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data_bites.html#examples -->
|
|
23
|
-
<div class="react-container" data-config="/examples/gallery/calculated-average.json"></div>
|
|
24
|
-
<!-- <div class="react-container" data-config="/examples/gallery/calculated-with-pic.json"></div> -->
|
|
25
|
-
<div class="react-container" data-config="/examples/gallery/max-value.json"></div>
|
|
26
|
-
<!-- <div class="react-container" data-config="/examples/gallery/sum-of-data.json"></div> -->
|
|
27
|
-
|
|
28
|
-
<script type="module" src="./src/index.jsx"></script>
|
|
29
|
-
</body>
|
|
30
|
-
</html>
|
|
1
|
+
<!-- index.html is generated by @cdc/core/generateViteConfig.js using the files in @cdc/core/devTemplate/ -->
|
package/package.json
CHANGED
|
@@ -1,48 +1,47 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/data-bite",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.26.2",
|
|
4
4
|
"description": "React component for displaying a single piece of data in a card module",
|
|
5
|
-
"moduleName": "CdcDataBite",
|
|
6
|
-
"main": "dist/cdcdatabite",
|
|
7
|
-
"type": "module",
|
|
8
|
-
"scripts": {
|
|
9
|
-
"start": "vite --open",
|
|
10
|
-
"build": "vite build",
|
|
11
|
-
"preview": "vite preview",
|
|
12
|
-
"graph": "nx graph",
|
|
13
|
-
"prepublishOnly": "lerna run --scope @cdc/data-bite build",
|
|
14
|
-
"test": "vitest run --reporter verbose",
|
|
15
|
-
"test-watch": "vitest watch --reporter verbose",
|
|
16
|
-
"test-watch:ui": "vitest --ui"
|
|
17
|
-
},
|
|
18
|
-
"repository": {
|
|
19
|
-
"type": "git",
|
|
20
|
-
"url": "git+https://github.com/CDCgov/cdc-open-viz",
|
|
21
|
-
"directory": "packages/data-bite"
|
|
22
|
-
},
|
|
23
|
-
"author": "cooms13 <dmo7@cdc.gov>",
|
|
24
|
-
"bugs": {
|
|
25
|
-
"url": "https://github.com/CDCgov/cdc-open-viz/issues"
|
|
26
|
-
},
|
|
27
5
|
"license": "Apache-2.0",
|
|
28
|
-
"
|
|
6
|
+
"author": "cooms13 <dmo7@cdc.gov>",
|
|
7
|
+
"bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
|
|
29
8
|
"dependencies": {
|
|
30
|
-
"@cdc/core": "^4.
|
|
31
|
-
"chroma-js": "3.1.2",
|
|
32
|
-
"html-react-parser": "5.2.3",
|
|
33
|
-
"lodash": "^4.17.
|
|
9
|
+
"@cdc/core": "^4.26.2",
|
|
10
|
+
"chroma-js": "^3.1.2",
|
|
11
|
+
"html-react-parser": "^5.2.3",
|
|
12
|
+
"lodash": "^4.17.23",
|
|
34
13
|
"react-accessible-accordion": "^5.0.1",
|
|
35
14
|
"resize-observer-polyfill": "^1.5.1"
|
|
36
15
|
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@rollup/plugin-dsv": "^3.0.2",
|
|
18
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
19
|
+
"sass": "^1.89.2",
|
|
20
|
+
"vite-plugin-css-injected-by-js": "^2.4.0",
|
|
21
|
+
"vite-plugin-svgr": "^4.2.0"
|
|
22
|
+
},
|
|
23
|
+
"gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
|
|
24
|
+
"homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
|
|
25
|
+
"main": "dist/cdcdatabite",
|
|
26
|
+
"moduleName": "CdcDataBite",
|
|
37
27
|
"peerDependencies": {
|
|
38
28
|
"react": "^18.2.0",
|
|
39
29
|
"react-dom": "^18.2.0"
|
|
40
30
|
},
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
|
|
31
|
+
"repository": {
|
|
32
|
+
"type": "git",
|
|
33
|
+
"url": "git+https://github.com/CDCgov/cdc-open-viz",
|
|
34
|
+
"directory": "packages/data-bite"
|
|
35
|
+
},
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "vite build",
|
|
38
|
+
"graph": "nx graph",
|
|
39
|
+
"prepublishOnly": "lerna run --scope @cdc/data-bite build",
|
|
40
|
+
"preview": "vite preview",
|
|
41
|
+
"start": "vite --open",
|
|
42
|
+
"test": "vitest run --reporter verbose",
|
|
43
|
+
"test-watch": "vitest watch --reporter verbose",
|
|
44
|
+
"test-watch:ui": "vitest --ui"
|
|
46
45
|
},
|
|
47
|
-
"
|
|
46
|
+
"type": "module"
|
|
48
47
|
}
|
package/src/CdcDataBite.tsx
CHANGED
|
@@ -33,6 +33,9 @@ import { Config } from './types/Config'
|
|
|
33
33
|
import dataBiteReducer from './store/db.reducer'
|
|
34
34
|
import { IMAGE_POSITION_LEFT, IMAGE_POSITION_RIGHT, IMAGE_POSITION_TOP, IMAGE_POSITION_BOTTOM } from './constants'
|
|
35
35
|
|
|
36
|
+
// images
|
|
37
|
+
import CalloutFlag from './images/callout-flag.svg?url'
|
|
38
|
+
|
|
36
39
|
import {
|
|
37
40
|
DATA_FUNCTION_COUNT,
|
|
38
41
|
DATA_FUNCTION_MAX,
|
|
@@ -595,70 +598,113 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
|
|
|
595
598
|
<>
|
|
596
599
|
{isEditor && <EditorPanel />}
|
|
597
600
|
<Layout.Responsive isEditor={isEditor}>
|
|
598
|
-
<div
|
|
601
|
+
<div
|
|
602
|
+
className={`cove-component__content ${showBite && 'tp5' === biteStyle ? 'bite__style--tp5' : ''} ${
|
|
603
|
+
showBite && 'tp5' === biteStyle && config.visual?.whiteBackground ? 'white-background-style' : ''
|
|
604
|
+
} ${
|
|
605
|
+
showBite && 'tp5' === biteStyle && config.visual?.whiteBackground && config.visual?.border
|
|
606
|
+
? 'display-border'
|
|
607
|
+
: ''
|
|
608
|
+
}`}
|
|
609
|
+
>
|
|
599
610
|
{!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
|
|
600
611
|
{(!config.dataColumn || !config.dataFunction) && <Confirm />}
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
{showBite && 'graphic' === biteStyle && isTop && (
|
|
611
|
-
<CircleCallout
|
|
612
|
-
theme={config.theme}
|
|
613
|
-
text={calculateDataBite()}
|
|
614
|
-
biteFontSize={biteFontSize}
|
|
615
|
-
dataFormat={dataFormat}
|
|
616
|
-
/>
|
|
612
|
+
{showBite && biteStyle === 'tp5' ? (
|
|
613
|
+
<div
|
|
614
|
+
className={`bite-content cdc-callout d-flex flex-column h-100 ${
|
|
615
|
+
!config.visual?.whiteBackground ? 'dfe-block cdc-callout--data' : ''
|
|
616
|
+
}`}
|
|
617
|
+
>
|
|
618
|
+
{/* Icon shows by default, hidden when white background is enabled */}
|
|
619
|
+
{!config.visual?.whiteBackground && (
|
|
620
|
+
<img src={CalloutFlag} alt='' className='cdc-callout__flag' aria-hidden='true' />
|
|
617
621
|
)}
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
<
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
{showBite &&
|
|
626
|
-
<div className='
|
|
627
|
-
{calculateDataBite()}
|
|
628
|
-
</div>
|
|
622
|
+
|
|
623
|
+
{config.visual?.showTitle && title && title.trim() && (
|
|
624
|
+
<h3 className='cdc-callout__heading fw-bold flex-shrink-0 d-flex align-items-start'>
|
|
625
|
+
<span>{parse(processContentWithMarkup(title))}</span>
|
|
626
|
+
</h3>
|
|
627
|
+
)}
|
|
628
|
+
<div className='cdc-callout__body d-flex flex-row align-content-start flex-grow-1'>
|
|
629
|
+
{showBite && (
|
|
630
|
+
<div className='cdc-callout__databite flex-shrink-0 me-3'>{calculateDataBite(true)}</div>
|
|
629
631
|
)}
|
|
630
|
-
<
|
|
631
|
-
<
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
{calculateDataBite()}
|
|
636
|
-
</span>
|
|
637
|
-
)}
|
|
638
|
-
{parse(processContentWithMarkup(biteBody))}
|
|
632
|
+
<div className='cdc-callout__content flex-grow-1 d-flex flex-column min-w-0'>
|
|
633
|
+
<p className='mb-0'>{parse(processContentWithMarkup(biteBody))}</p>
|
|
634
|
+
{subtext && !config.general.isCompactStyle && (
|
|
635
|
+
<p className='bite-subtext fst-italic flex-shrink-0 mt-3'>
|
|
636
|
+
{parse(processContentWithMarkup(subtext))}
|
|
639
637
|
</p>
|
|
640
|
-
|
|
641
|
-
|
|
638
|
+
)}
|
|
639
|
+
</div>
|
|
640
|
+
</div>
|
|
641
|
+
</div>
|
|
642
|
+
) : (
|
|
643
|
+
<>
|
|
644
|
+
<Title
|
|
645
|
+
showTitle={config.visual?.showTitle}
|
|
646
|
+
titleStyle='legacy'
|
|
647
|
+
config={config}
|
|
648
|
+
title={processContentWithMarkup(title)}
|
|
649
|
+
isDashboard={isDashboard}
|
|
650
|
+
classes={['bite-header', `${config.theme}`]}
|
|
651
|
+
/>
|
|
652
|
+
<div className={`bite ${biteClasses.join(' ')}`}>
|
|
653
|
+
<div className={`bite-content-container ${contentClasses.join(' ')}`}>
|
|
654
|
+
{showBite && 'graphic' === biteStyle && isTop && (
|
|
655
|
+
<CircleCallout
|
|
656
|
+
theme={config.theme}
|
|
657
|
+
text={calculateDataBite()}
|
|
658
|
+
biteFontSize={biteFontSize}
|
|
659
|
+
dataFormat={dataFormat}
|
|
660
|
+
/>
|
|
661
|
+
)}
|
|
662
|
+
{isTop && <DataImage />}
|
|
663
|
+
<div className={`bite-content`}>
|
|
664
|
+
{showBite && 'title' === biteStyle && (
|
|
665
|
+
<div className='bite-value' style={{ fontSize: biteFontSize + 'px' }}>
|
|
642
666
|
{calculateDataBite()}
|
|
643
|
-
</
|
|
667
|
+
</div>
|
|
644
668
|
)}
|
|
645
|
-
{
|
|
646
|
-
<
|
|
669
|
+
{showBite && 'split' === biteStyle && (
|
|
670
|
+
<div className='bite-value' style={{ fontSize: biteFontSize + 'px' }}>
|
|
671
|
+
{calculateDataBite()}
|
|
672
|
+
</div>
|
|
647
673
|
)}
|
|
674
|
+
<Fragment>
|
|
675
|
+
<div className='bite-content__text-wrap'>
|
|
676
|
+
<p className='bite-text'>
|
|
677
|
+
{showBite && 'body' === biteStyle && (
|
|
678
|
+
<span className='bite-value data-bite-body' style={{ fontSize: biteFontSize + 'px' }}>
|
|
679
|
+
{calculateDataBite()}
|
|
680
|
+
</span>
|
|
681
|
+
)}
|
|
682
|
+
{parse(processContentWithMarkup(biteBody))}
|
|
683
|
+
</p>
|
|
684
|
+
{showBite && 'end' === biteStyle && (
|
|
685
|
+
<span className='bite-value data-bite-body' style={{ fontSize: biteFontSize + 'px' }}>
|
|
686
|
+
{calculateDataBite()}
|
|
687
|
+
</span>
|
|
688
|
+
)}
|
|
689
|
+
{subtext && !config.general.isCompactStyle && (
|
|
690
|
+
<p className='bite-subtext'>{parse(processContentWithMarkup(subtext))}</p>
|
|
691
|
+
)}
|
|
692
|
+
</div>
|
|
693
|
+
</Fragment>
|
|
648
694
|
</div>
|
|
649
|
-
|
|
695
|
+
{isBottom && <DataImage />}
|
|
696
|
+
{showBite && 'graphic' === biteStyle && !isTop && (
|
|
697
|
+
<CircleCallout
|
|
698
|
+
theme={config.theme}
|
|
699
|
+
text={calculateDataBite()}
|
|
700
|
+
biteFontSize={biteFontSize}
|
|
701
|
+
dataFormat={dataFormat}
|
|
702
|
+
/>
|
|
703
|
+
)}
|
|
704
|
+
</div>
|
|
650
705
|
</div>
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
<CircleCallout
|
|
654
|
-
theme={config.theme}
|
|
655
|
-
text={calculateDataBite()}
|
|
656
|
-
biteFontSize={biteFontSize}
|
|
657
|
-
dataFormat={dataFormat}
|
|
658
|
-
/>
|
|
659
|
-
)}
|
|
660
|
-
</div>
|
|
661
|
-
</div>
|
|
706
|
+
</>
|
|
707
|
+
)}
|
|
662
708
|
</div>
|
|
663
709
|
{link && link}
|
|
664
710
|
</Layout.Responsive>
|
|
@@ -56,9 +56,12 @@ export const BasicEditorLoadingTests: Story = {
|
|
|
56
56
|
await waitForEditor(canvas)
|
|
57
57
|
|
|
58
58
|
// Verify all three main accordion sections are present
|
|
59
|
-
|
|
60
|
-
const
|
|
61
|
-
const
|
|
59
|
+
// Use waitFor to give VisualSection time to render
|
|
60
|
+
const generalButton = await canvas.findByRole('button', { name: /general/i })
|
|
61
|
+
const dataButton = await canvas.findByRole('button', { name: /data/i })
|
|
62
|
+
|
|
63
|
+
// Find Visual section accordion button
|
|
64
|
+
const visualButton = await canvas.findByRole('button', { name: /visual/i }, { timeout: 5000 })
|
|
62
65
|
|
|
63
66
|
await expect(generalButton).toBeVisible()
|
|
64
67
|
await expect(dataButton).toBeVisible()
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react-vite'
|
|
2
2
|
import DataBite from '../CdcDataBite'
|
|
3
|
+
import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
|
|
3
4
|
|
|
4
5
|
const meta: Meta<typeof DataBite> = {
|
|
5
6
|
title: 'Components/Templates/Data Bite',
|
|
@@ -21,24 +22,70 @@ type Story = StoryObj<typeof DataBite>
|
|
|
21
22
|
export const Data_Bite_Circle_Average: Story = {
|
|
22
23
|
args: {
|
|
23
24
|
configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Average.json'
|
|
25
|
+
},
|
|
26
|
+
play: async ({ canvasElement }) => {
|
|
27
|
+
await assertVisualizationRendered(canvasElement)
|
|
24
28
|
}
|
|
25
29
|
}
|
|
26
30
|
|
|
27
31
|
export const Data_Bite_Text_Max_Pic: Story = {
|
|
28
32
|
args: {
|
|
29
33
|
configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Max_Pic.json'
|
|
34
|
+
},
|
|
35
|
+
play: async ({ canvasElement }) => {
|
|
36
|
+
await assertVisualizationRendered(canvasElement)
|
|
30
37
|
}
|
|
31
38
|
}
|
|
32
39
|
|
|
33
40
|
export const Data_Bite_Circle_Sum: Story = {
|
|
34
41
|
args: {
|
|
35
42
|
configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Sum.json'
|
|
43
|
+
},
|
|
44
|
+
play: async ({ canvasElement }) => {
|
|
45
|
+
await assertVisualizationRendered(canvasElement)
|
|
36
46
|
}
|
|
37
47
|
}
|
|
38
48
|
|
|
39
49
|
export const Data_Bite_Text_Average_Pic: Story = {
|
|
40
50
|
args: {
|
|
41
51
|
configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Average_Pic.json'
|
|
52
|
+
},
|
|
53
|
+
play: async ({ canvasElement }) => {
|
|
54
|
+
await assertVisualizationRendered(canvasElement)
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export const Data_Bite_TP5_Style: Story = {
|
|
59
|
+
args: {
|
|
60
|
+
configUrl: '/packages/data-bite/examples/tp5-style.json'
|
|
61
|
+
},
|
|
62
|
+
parameters: {
|
|
63
|
+
docs: {
|
|
64
|
+
description: {
|
|
65
|
+
story:
|
|
66
|
+
'TP5 Style - A new layout style that displays the data value and message side by side, centered. The title appears above, and subtext appears below the message. On mobile devices, the message wraps below the data value. This style mimics the CDC Template Package 5.0 callout component design.'
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
play: async ({ canvasElement }) => {
|
|
71
|
+
await assertVisualizationRendered(canvasElement)
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export const Data_Bite_TP5_White_Background: Story = {
|
|
76
|
+
args: {
|
|
77
|
+
configUrl: '/packages/data-bite/examples/tp5-white-background.json'
|
|
78
|
+
},
|
|
79
|
+
parameters: {
|
|
80
|
+
docs: {
|
|
81
|
+
description: {
|
|
82
|
+
story:
|
|
83
|
+
'TP5 Style with White Background - This variant uses a white background with a 1px border and 6px border radius, providing a cleaner look while maintaining the TP5 layout style.'
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
play: async ({ canvasElement }) => {
|
|
88
|
+
await assertVisualizationRendered(canvasElement)
|
|
42
89
|
}
|
|
43
90
|
}
|
|
44
91
|
|
|
@@ -55,5 +102,8 @@ export const Editor_Mode_Basic: Story = {
|
|
|
55
102
|
'Basic editor mode rendering. For comprehensive editor testing with interactions, see "Data Bite/Editor Tests" stories.'
|
|
56
103
|
}
|
|
57
104
|
}
|
|
105
|
+
},
|
|
106
|
+
play: async ({ canvasElement }) => {
|
|
107
|
+
await assertVisualizationRendered(canvasElement)
|
|
58
108
|
}
|
|
59
109
|
}
|