@cdc/data-bite 1.1.4 → 9.22.9
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 +8 -8
- package/examples/gallery/calculated-average.json +3167 -0
- package/examples/gallery/calculated-with-pic.json +3173 -0
- package/examples/gallery/max-value.json +3167 -0
- package/examples/gallery/sum-of-data.json +3161 -0
- package/examples/private/double.json +0 -0
- package/examples/private/totals.json +1 -0
- package/package.json +3 -3
- package/src/CdcDataBite.tsx +66 -81
- package/src/components/EditorPanel.js +547 -166
- package/src/index.html +11 -2
- package/src/scss/bite.scss +99 -37
- package/src/scss/editor-panel.scss +0 -1
- package/src/scss/main.scss +2 -2
package/src/index.html
CHANGED
|
@@ -13,7 +13,16 @@
|
|
|
13
13
|
</style>
|
|
14
14
|
</head>
|
|
15
15
|
<body>
|
|
16
|
-
|
|
16
|
+
<!-- Original -->
|
|
17
|
+
<div class="react-container" data-config="/examples/example-config.json"></div>
|
|
18
|
+
|
|
19
|
+
<!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data_bites.html#examples -->
|
|
20
|
+
<!-- <div class="react-container" data-config="/examples/gallery/calculated-average.json"></div> -->
|
|
21
|
+
<!-- <div class="react-container" data-config="/examples/gallery/calculated-with-pic.json"></div> -->
|
|
22
|
+
<!-- <div class="react-container" data-config="/examples/gallery/max-value.json"></div> -->
|
|
23
|
+
<!-- <div class="react-container" data-config="/examples/gallery/sum-of-data.json"></div> -->
|
|
24
|
+
|
|
25
|
+
|
|
17
26
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
18
27
|
</body>
|
|
19
|
-
</html>
|
|
28
|
+
</html>
|
package/src/scss/bite.scss
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
&.is-editor {
|
|
4
4
|
position: relative;
|
|
5
|
-
.
|
|
5
|
+
.cove-component__inner {
|
|
6
6
|
margin: 3em auto 0;
|
|
7
7
|
max-width: 35em;
|
|
8
8
|
}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
color: $primary;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.
|
|
15
|
+
.cove-component__header {
|
|
16
16
|
background-color: $primary;
|
|
17
17
|
}
|
|
18
18
|
}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
.bite-value {
|
|
22
22
|
color: $purple-primary;
|
|
23
23
|
}
|
|
24
|
-
.
|
|
24
|
+
.cove-component__header {
|
|
25
25
|
background-color: $purple-primary;
|
|
26
26
|
}
|
|
27
27
|
}
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
.bite-value {
|
|
31
31
|
color: $amber-primary;
|
|
32
32
|
}
|
|
33
|
-
.
|
|
33
|
+
.cove-component__header {
|
|
34
34
|
background-color: $amber-primary;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
.bite-value {
|
|
40
40
|
color: $orange-primary;
|
|
41
41
|
}
|
|
42
|
-
.
|
|
42
|
+
.cove-component__header {
|
|
43
43
|
background-color: $orange-primary;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
.bite-value {
|
|
49
49
|
color: $brown-primary;
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.cove-component__header {
|
|
52
52
|
background-color: $brown-primary;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
.bite-value {
|
|
58
58
|
color: $teal-primary;
|
|
59
59
|
}
|
|
60
|
-
.
|
|
60
|
+
.cove-component__header {
|
|
61
61
|
background-color: $teal-primary;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
.bite-value {
|
|
67
67
|
color: $pink-primary;
|
|
68
68
|
}
|
|
69
|
-
.
|
|
69
|
+
.cove-component__header {
|
|
70
70
|
background-color: $pink-primary;
|
|
71
71
|
}
|
|
72
72
|
}
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
.bite-value {
|
|
76
76
|
color: $slate-primary;
|
|
77
77
|
}
|
|
78
|
-
.
|
|
78
|
+
.cove-component__header {
|
|
79
79
|
background-color: $slate-primary;
|
|
80
80
|
}
|
|
81
81
|
}
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
.bite-value {
|
|
85
85
|
color: $indigo-primary;
|
|
86
86
|
}
|
|
87
|
-
.
|
|
87
|
+
.cove-component__header {
|
|
88
88
|
background-color: $indigo-primary;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
.bite-value {
|
|
94
94
|
color: $cyan-primary;
|
|
95
95
|
}
|
|
96
|
-
.
|
|
96
|
+
.cove-component__header {
|
|
97
97
|
background-color: $cyan-primary;
|
|
98
98
|
}
|
|
99
99
|
}
|
|
@@ -102,11 +102,11 @@
|
|
|
102
102
|
.bite-value {
|
|
103
103
|
color: $green-primary;
|
|
104
104
|
}
|
|
105
|
-
.
|
|
105
|
+
.cove-component__header {
|
|
106
106
|
background-color: $green-primary;
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
|
-
.
|
|
109
|
+
.cove-component__header {
|
|
110
110
|
padding: 0 1em;
|
|
111
111
|
left: 0;
|
|
112
112
|
top: 0;
|
|
@@ -118,16 +118,56 @@
|
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
+
// TODO after v2 refactor remove header reference colors
|
|
122
|
+
// Use .font-color/.bg-color, etc. in color definitions or something similar
|
|
123
|
+
// Remove box shadows if we're no longer using them
|
|
124
|
+
.cove-component__inner {
|
|
121
125
|
|
|
126
|
+
// Visual: Shadow
|
|
127
|
+
&.shadow {
|
|
128
|
+
box-shadow: rgba(0, 0, 0, 0.2) 0 3px 10px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// General: Bite Style > Graphic
|
|
132
|
+
.bite__style--graphic {
|
|
133
|
+
.bite-content { flex: 1; }
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// General: Bite Style > End
|
|
137
|
+
&.bite__style--end .bite-text { margin-bottom: 0 !important; }
|
|
138
|
+
|
|
139
|
+
// General: Bite Style > Split
|
|
140
|
+
&.bite__style--split {
|
|
141
|
+
.bite-content {
|
|
142
|
+
flex-direction: row !important;
|
|
143
|
+
}
|
|
144
|
+
.bite-value {
|
|
145
|
+
flex-basis: 25%;
|
|
146
|
+
align-self: center;
|
|
147
|
+
text-align: center;
|
|
148
|
+
}
|
|
149
|
+
.bite-content__text-wrap {
|
|
150
|
+
flex: 75% !important;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// General: Compact View
|
|
155
|
+
&.bite--isCompactStyle .bite .cove-component__content .bite-content {
|
|
156
|
+
align-items: center;
|
|
157
|
+
p.bite-text {
|
|
158
|
+
margin-bottom: 0;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&.bite--isCompactStyle .bite .cove-component__content {
|
|
163
|
+
align-items: center;
|
|
164
|
+
}
|
|
122
165
|
|
|
123
|
-
.
|
|
124
|
-
.bite-header + .bite { border-top: 0; }
|
|
166
|
+
.cove-component__header + .bite { border-top: 0; }
|
|
125
167
|
.bite {
|
|
126
168
|
position: relative;
|
|
127
169
|
overflow: hidden;
|
|
128
170
|
border-top: none;
|
|
129
|
-
background: $lightestGray;
|
|
130
|
-
border: solid 1px $lightGray;
|
|
131
171
|
border-bottom-left-radius: 3px;
|
|
132
172
|
border-bottom-right-radius: 3px;
|
|
133
173
|
|
|
@@ -136,19 +176,28 @@
|
|
|
136
176
|
border-top-right-radius: 3px;
|
|
137
177
|
}
|
|
138
178
|
|
|
179
|
+
.bite-content-container.component--hideBackgroundColor {
|
|
180
|
+
background: transparent;
|
|
181
|
+
}
|
|
182
|
+
|
|
139
183
|
&.no-borders {
|
|
140
184
|
border: none;
|
|
141
185
|
}
|
|
142
186
|
|
|
143
|
-
|
|
144
|
-
|
|
187
|
+
|
|
188
|
+
&-content__text-wrap {
|
|
189
|
+
height: 100%;
|
|
190
|
+
display: flex;
|
|
191
|
+
flex-wrap: wrap;
|
|
192
|
+
width: 100%;
|
|
145
193
|
}
|
|
194
|
+
|
|
146
195
|
&.theme-blue {
|
|
147
196
|
.bite-value {
|
|
148
197
|
color: $primary;
|
|
149
198
|
}
|
|
150
199
|
|
|
151
|
-
.
|
|
200
|
+
.cove-component__header {
|
|
152
201
|
background-color: $primary;
|
|
153
202
|
}
|
|
154
203
|
}
|
|
@@ -157,7 +206,7 @@
|
|
|
157
206
|
.bite-value {
|
|
158
207
|
color: $purple-primary;
|
|
159
208
|
}
|
|
160
|
-
.
|
|
209
|
+
.cove-component__header {
|
|
161
210
|
background-color: $purple-primary;
|
|
162
211
|
}
|
|
163
212
|
}
|
|
@@ -166,7 +215,7 @@
|
|
|
166
215
|
.bite-value {
|
|
167
216
|
color: $amber-primary;
|
|
168
217
|
}
|
|
169
|
-
.
|
|
218
|
+
.cove-component__header {
|
|
170
219
|
background-color: $amber-primary;
|
|
171
220
|
}
|
|
172
221
|
}
|
|
@@ -175,7 +224,7 @@
|
|
|
175
224
|
.bite-value {
|
|
176
225
|
color: $orange-primary;
|
|
177
226
|
}
|
|
178
|
-
.
|
|
227
|
+
.cove-component__header {
|
|
179
228
|
background-color: $orange-primary;
|
|
180
229
|
}
|
|
181
230
|
}
|
|
@@ -184,7 +233,7 @@
|
|
|
184
233
|
.bite-value {
|
|
185
234
|
color: $brown-primary;
|
|
186
235
|
}
|
|
187
|
-
.
|
|
236
|
+
.cove-component__header {
|
|
188
237
|
background-color: $brown-primary;
|
|
189
238
|
}
|
|
190
239
|
}
|
|
@@ -193,7 +242,7 @@
|
|
|
193
242
|
.bite-value {
|
|
194
243
|
color: $teal-primary;
|
|
195
244
|
}
|
|
196
|
-
.
|
|
245
|
+
.cove-component__header {
|
|
197
246
|
background-color: $teal-primary;
|
|
198
247
|
}
|
|
199
248
|
}
|
|
@@ -202,7 +251,7 @@
|
|
|
202
251
|
.bite-value {
|
|
203
252
|
color: $pink-primary;
|
|
204
253
|
}
|
|
205
|
-
.
|
|
254
|
+
.cove-component__header {
|
|
206
255
|
background-color: $pink-primary;
|
|
207
256
|
}
|
|
208
257
|
}
|
|
@@ -211,7 +260,7 @@
|
|
|
211
260
|
.bite-value {
|
|
212
261
|
color: $slate-primary;
|
|
213
262
|
}
|
|
214
|
-
.
|
|
263
|
+
.cove-component__header {
|
|
215
264
|
background-color: $slate-primary;
|
|
216
265
|
}
|
|
217
266
|
}
|
|
@@ -220,7 +269,7 @@
|
|
|
220
269
|
.bite-value {
|
|
221
270
|
color: $indigo-primary;
|
|
222
271
|
}
|
|
223
|
-
.
|
|
272
|
+
.cove-component__header {
|
|
224
273
|
background-color: $indigo-primary;
|
|
225
274
|
}
|
|
226
275
|
}
|
|
@@ -229,7 +278,7 @@
|
|
|
229
278
|
.bite-value {
|
|
230
279
|
color: $cyan-primary;
|
|
231
280
|
}
|
|
232
|
-
.
|
|
281
|
+
.cove-component__header {
|
|
233
282
|
background-color: $cyan-primary;
|
|
234
283
|
}
|
|
235
284
|
}
|
|
@@ -238,7 +287,7 @@
|
|
|
238
287
|
.bite-value {
|
|
239
288
|
color: $green-primary;
|
|
240
289
|
}
|
|
241
|
-
.
|
|
290
|
+
.cove-component__header {
|
|
242
291
|
background-color: $green-primary;
|
|
243
292
|
}
|
|
244
293
|
}
|
|
@@ -255,9 +304,9 @@
|
|
|
255
304
|
border-radius: .3em;
|
|
256
305
|
}
|
|
257
306
|
|
|
258
|
-
.
|
|
307
|
+
.cove-component__content {
|
|
259
308
|
display: flex;
|
|
260
|
-
padding: 1em
|
|
309
|
+
padding: 1em;
|
|
261
310
|
justify-content: space-between;
|
|
262
311
|
|
|
263
312
|
.bite-content {
|
|
@@ -278,12 +327,14 @@
|
|
|
278
327
|
.bite-text {
|
|
279
328
|
margin-bottom: 15px;
|
|
280
329
|
color: #222;
|
|
281
|
-
flex: 1 0 auto;
|
|
282
330
|
}
|
|
283
331
|
|
|
284
332
|
.bite-subtext {
|
|
285
333
|
font-size: .9em;
|
|
286
334
|
font-style: italic;
|
|
335
|
+
flex-basis: 100%;
|
|
336
|
+
width: 100%;
|
|
337
|
+
align-self: flex-end;
|
|
287
338
|
}
|
|
288
339
|
}
|
|
289
340
|
}
|
|
@@ -302,13 +353,13 @@
|
|
|
302
353
|
width: 33%;
|
|
303
354
|
margin-left: 1.5em;
|
|
304
355
|
}
|
|
305
|
-
.
|
|
356
|
+
.cove-component__content {
|
|
306
357
|
flex-direction: row-reverse;
|
|
307
358
|
}
|
|
308
359
|
}
|
|
309
360
|
|
|
310
361
|
&.bite-top {
|
|
311
|
-
.
|
|
362
|
+
.cove-component__content {
|
|
312
363
|
flex-direction: column;
|
|
313
364
|
|
|
314
365
|
.bite-image {
|
|
@@ -327,7 +378,7 @@
|
|
|
327
378
|
}
|
|
328
379
|
|
|
329
380
|
&.bite-bottom {
|
|
330
|
-
.
|
|
381
|
+
.cove-component__content {
|
|
331
382
|
flex-direction: column;
|
|
332
383
|
|
|
333
384
|
.bite-image {
|
|
@@ -346,7 +397,7 @@
|
|
|
346
397
|
}
|
|
347
398
|
|
|
348
399
|
&.bite-back {
|
|
349
|
-
.
|
|
400
|
+
.cove-component__content {
|
|
350
401
|
.bite-image {
|
|
351
402
|
border-radius: 0 0 0.3em 0.3em;
|
|
352
403
|
position: absolute;
|
|
@@ -372,3 +423,14 @@
|
|
|
372
423
|
.cove-component__header + .bite { border-top: 0; }
|
|
373
424
|
}
|
|
374
425
|
}
|
|
426
|
+
|
|
427
|
+
|
|
428
|
+
.cove-component__content {
|
|
429
|
+
background: $lightestGray;
|
|
430
|
+
|
|
431
|
+
&:not(.no-borders) {
|
|
432
|
+
border-color: $lightGray;
|
|
433
|
+
border-width: 1px;
|
|
434
|
+
border-style: solid;
|
|
435
|
+
}
|
|
436
|
+
}
|
package/src/scss/main.scss
CHANGED
|
@@ -62,10 +62,10 @@
|
|
|
62
62
|
opacity: 1;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
&.font-small .
|
|
65
|
+
&.font-small .bite-content-container {
|
|
66
66
|
font-size: .9em !important;
|
|
67
67
|
}
|
|
68
|
-
&.font-large .
|
|
68
|
+
&.font-large .bite-content-container {
|
|
69
69
|
font-size: 1.1em !important;
|
|
70
70
|
}
|
|
71
71
|
// Medium is just the default
|