nhsuk-tools-chart-components-react 2.0.0-nhsuk-react-beta → 2.1.0

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.
@@ -16,50 +16,6 @@
16
16
  }
17
17
 
18
18
 
19
- .nhsuk-bar-slider-graph {
20
- position: relative;
21
- outline: 1px solid black;
22
- margin-top: 20px;
23
- display: flex;
24
- height: 28px;
25
- }
26
- @media (min-width: 320px) and (max-width: 641px) {
27
- .nhsuk-bar-slider-graph {
28
- height: 24px;
29
- }
30
- }
31
-
32
-
33
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
34
- background: #330072;
35
- }
36
-
37
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
38
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
39
- }
40
-
41
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
42
- background: #ffb81c;
43
- }
44
-
45
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
46
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
47
- }
48
-
49
- .nhsuk-bmi-graph {
50
- position: relative;
51
- outline: 1px solid black;
52
- display: flex;
53
- height: 28px;
54
- margin-bottom: nhsuk-spacing(4);
55
- }
56
- @media (min-width: 320px) and (max-width: 641px) {
57
- .nhsuk-bmi-graph {
58
- height: 24px;
59
- }
60
- }
61
-
62
-
63
19
  .nhsuk-bar-slider-arrow-marker {
64
20
  position: absolute;
65
21
  height: 16px;
@@ -104,109 +60,90 @@
104
60
  margin-right: 2px;
105
61
  }
106
62
 
107
-
108
- .nhsuk-bmi-chart-marker {
109
- position: absolute;
110
- z-index: 4;
111
- height: 24px;
112
- width: 24px;
113
- margin: 2px 0 -12px -12px;
114
- }
115
- @media (min-width: 320px) and (max-width: 641px) {
116
- .nhsuk-bmi-chart-marker {
117
- height: 20px;
118
- width: 20px;
119
- margin: 2px 0 -10px -10px;
120
- }
121
- }
122
-
123
-
124
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
63
+ .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
125
64
  background: #330072;
126
65
  }
127
66
 
128
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
67
+ .nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
129
68
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
130
69
  }
131
70
 
132
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
71
+ .nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
133
72
  background: #ffb81c;
134
73
  }
135
74
 
136
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
75
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
137
76
  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
138
77
  }
139
78
 
140
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
141
- position: absolute;
142
- bottom: 0%;
79
+ .nhsuk-bmi-legend-key-classification-obese {
80
+ border-bottom: none;
81
+ box-shadow: none;
82
+ }
83
+
84
+ .nhsuk-bmi-legend-key-marker {
85
+ border-bottom: none;
86
+ box-shadow: none;
87
+ }
88
+
89
+
90
+ .nhsuk-bar-slider-graph {
91
+ position: relative;
143
92
  outline: 1px solid black;
144
- border-right: 1px solid black;
145
- box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
93
+ margin-top: 20px;
94
+ display: flex;
146
95
  height: 28px;
147
96
  }
148
97
  @media (min-width: 320px) and (max-width: 641px) {
149
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
98
+ .nhsuk-bar-slider-graph {
150
99
  height: 24px;
151
100
  }
152
101
  }
153
102
 
154
- .nhsuk-bmi-classification-underweight {
155
- z-index: 3;
156
- }
157
-
158
- .nhsuk-bmi-classification-healthy {
159
- z-index: 2;
160
- }
161
-
162
- .nhsuk-bmi-classification-overweight {
163
- z-index: 1;
164
- }
165
-
166
- .nhsuk-bmi-classification-obese {
167
- border-right: none;
168
- box-shadow: none;
169
- }
170
103
 
171
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
104
+ .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
172
105
  background: #330072;
173
106
  }
174
107
 
175
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
108
+ .nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
176
109
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
177
110
  }
178
111
 
179
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
112
+ .nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
180
113
  background: #ffb81c;
181
114
  }
182
115
 
183
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
116
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
184
117
  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
185
118
  }
186
119
 
187
- .nhsuk-bmi-legend-key-classification-obese {
188
- border-bottom: none;
189
- box-shadow: none;
120
+ .nhsuk-bmi-graph {
121
+ position: relative;
122
+ outline: 1px solid black;
123
+ display: flex;
124
+ height: 28px;
125
+ margin-bottom: nhsuk-spacing(4);
190
126
  }
191
-
192
- .nhsuk-bmi-legend-key-marker {
193
- border-bottom: none;
194
- box-shadow: none;
127
+ @media (min-width: 320px) and (max-width: 641px) {
128
+ .nhsuk-bmi-graph {
129
+ height: 24px;
130
+ }
195
131
  }
196
132
 
197
- .nhsuk-bmi-axis-marker {
198
- position: absolute;
199
- outline: 0.5px solid black;
200
- height: 5px;
201
- bottom: -5px;
202
- }
203
133
 
204
- .nhsuk-bmi-axis-marker-label {
134
+ .nhsuk-bmi-chart-marker {
205
135
  position: absolute;
206
- bottom: -25px;
207
- left: -10px;
208
- width: 20px;
209
- text-align: center;
136
+ z-index: 4;
137
+ height: 24px;
138
+ width: 24px;
139
+ margin: 2px 0 -12px -12px;
140
+ }
141
+ @media (min-width: 320px) and (max-width: 641px) {
142
+ .nhsuk-bmi-chart-marker {
143
+ height: 20px;
144
+ width: 20px;
145
+ margin: 2px 0 -10px -10px;
146
+ }
210
147
  }
211
148
 
212
149
  .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
@@ -252,29 +189,6 @@
252
189
  }
253
190
 
254
191
 
255
- .nhsuk-bp-graph-marker {
256
- position: absolute;
257
- z-index: 6;
258
- height: 24px;
259
- width: 24px;
260
- margin: 0 0 -12px -12px;
261
- }
262
- @media (max-width: 320px) {
263
- .nhsuk-bp-graph-marker {
264
- height: 20px;
265
- width: 20px;
266
- margin: 0 0 -10px -10px;
267
- }
268
- }
269
- @media (min-width: 320px) and (max-width: 641px) {
270
- .nhsuk-bp-graph-marker {
271
- height: 22px;
272
- width: 22px;
273
- margin: 0 0 -11px -11px;
274
- }
275
- }
276
-
277
-
278
192
  .nhsuk-bp-diastolic-axis-marker, .nhsuk-bp-systolic-axis-marker {
279
193
  position: absolute;
280
194
  outline: 0.5px solid black;
@@ -390,44 +304,6 @@
390
304
  border-bottom: 2px solid black;
391
305
  }
392
306
 
393
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
394
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
395
- }
396
-
397
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
398
- background: #ffb81c;
399
- }
400
-
401
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
402
- background: #330072;
403
- }
404
-
405
- .nhsuk-cbmi-legend-key-classification-overweight {
406
- border-bottom: none;
407
- box-shadow: none;
408
- }
409
-
410
- .nhsuk-cbmi-legend-key, .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-legend-key-classification-overweight {
411
- border-bottom: 2px solid white;
412
- margin-bottom: 2px;
413
- }
414
-
415
- .nhsuk-cbmi-legend-marker {
416
- margin-bottom: 2px;
417
- }
418
-
419
- .nhsuk-cbmi-classification-underweight-heading {
420
- border-left: 8px solid #330072;
421
- }
422
-
423
- .nhsuk-cbmi-classification-healthy-heading {
424
- border-left: 8px solid #30b4ab;
425
- }
426
-
427
- .nhsuk-cbmi-classification-overweight-heading {
428
- border-left: 8px solid #ffb81c;
429
- }
430
-
431
307
  .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
432
308
  background: #330072;
433
309
  }
@@ -522,6 +398,116 @@
522
398
  }
523
399
 
524
400
 
401
+ .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
402
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
403
+ }
404
+
405
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
406
+ background: #ffb81c;
407
+ }
408
+
409
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
410
+ background: #330072;
411
+ }
412
+
413
+ .nhsuk-cbmi-chart-arrow-marker {
414
+ position: absolute;
415
+ z-index: 4;
416
+ height: 16px;
417
+ width: 16px;
418
+ margin: -9px 0 -8px -8px;
419
+ }
420
+ @media (min-width: 320px) and (max-width: 641px) {
421
+ .nhsuk-cbmi-chart-arrow-marker {
422
+ height: 12px;
423
+ width: 12px;
424
+ margin: -9px 0 -6px -6px;
425
+ }
426
+ }
427
+
428
+ .nhsuk-cbmi-chart-label-align-left {
429
+ display: flex;
430
+ justify-content: left;
431
+ }
432
+
433
+ .nhsuk-cbmi-chart-label-align-center {
434
+ display: flex;
435
+ justify-content: center;
436
+ }
437
+
438
+ .nhsuk-cbmi-chart-label-align-right {
439
+ display: flex;
440
+ justify-content: right;
441
+ }
442
+
443
+ .nhsuk-cbmi-chart-label-marker {
444
+ position: relative;
445
+ height: 25px;
446
+ width: auto;
447
+ white-space: nowrap;
448
+ margin-top: -30px;
449
+ z-index: 4;
450
+ }
451
+
452
+ .nhsuk-cbmi-chart-centile-marker {
453
+ position: relative;
454
+ font-weight: bold;
455
+ margin-left: 5px;
456
+ }
457
+
458
+ .nhsuk-cbmi-chart-axis-marker {
459
+ position: absolute;
460
+ margin-left: -1px;
461
+ border: 1.5px solid black;
462
+ box-shadow: 0px 0px white inset, 2px 0px white, -2px 0px white;
463
+ z-index: 4;
464
+ height: 28px;
465
+ }
466
+ @media (min-width: 320px) and (max-width: 641px) {
467
+ .nhsuk-cbmi-chart-axis-marker {
468
+ height: 24px;
469
+ }
470
+ }
471
+
472
+ .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
473
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
474
+ }
475
+
476
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
477
+ background: #ffb81c;
478
+ }
479
+
480
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
481
+ background: #330072;
482
+ }
483
+
484
+ .nhsuk-cbmi-legend-key-classification-overweight {
485
+ border-bottom: none;
486
+ box-shadow: none;
487
+ }
488
+
489
+ .nhsuk-cbmi-legend-key, .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-legend-key-classification-overweight {
490
+ border-bottom: 2px solid white;
491
+ margin-bottom: 2px;
492
+ }
493
+
494
+ .nhsuk-cbmi-legend-marker {
495
+ margin-bottom: 2px;
496
+ }
497
+
498
+ .nhsuk-cbmi-classification-underweight-heading {
499
+ border-left: 8px solid #330072;
500
+ }
501
+
502
+ .nhsuk-cbmi-classification-healthy-heading {
503
+ border-left: 8px solid #30b4ab;
504
+ }
505
+
506
+ .nhsuk-cbmi-classification-overweight-heading {
507
+ border-left: 8px solid #ffb81c;
508
+ }
509
+
510
+
525
511
  .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
526
512
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
527
513
  }
@@ -558,6 +544,44 @@
558
544
  z-index: 1;
559
545
  }
560
546
 
547
+ .nhsuk-bmi-axis-marker {
548
+ position: absolute;
549
+ outline: 0.5px solid black;
550
+ height: 5px;
551
+ bottom: -5px;
552
+ }
553
+
554
+ .nhsuk-bmi-axis-marker-label {
555
+ position: absolute;
556
+ bottom: -25px;
557
+ left: -10px;
558
+ width: 20px;
559
+ text-align: center;
560
+ }
561
+
562
+
563
+ .nhsuk-bp-graph-marker {
564
+ position: absolute;
565
+ z-index: 6;
566
+ height: 24px;
567
+ width: 24px;
568
+ margin: 0 0 -12px -12px;
569
+ }
570
+ @media (max-width: 320px) {
571
+ .nhsuk-bp-graph-marker {
572
+ height: 20px;
573
+ width: 20px;
574
+ margin: 0 0 -10px -10px;
575
+ }
576
+ }
577
+ @media (min-width: 320px) and (max-width: 641px) {
578
+ .nhsuk-bp-graph-marker {
579
+ height: 22px;
580
+ width: 22px;
581
+ margin: 0 0 -11px -11px;
582
+ }
583
+ }
584
+
561
585
  .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
562
586
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
563
587
  }
@@ -595,73 +619,49 @@
595
619
  }
596
620
 
597
621
 
598
- .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
622
+ .nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
623
+ background: #330072;
624
+ }
625
+
626
+ .nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
599
627
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
600
628
  }
601
629
 
602
- .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
630
+ .nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
603
631
  background: #ffb81c;
604
632
  }
605
633
 
606
- .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
607
- background: #330072;
634
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
635
+ background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
608
636
  }
609
637
 
610
- .nhsuk-cbmi-chart-arrow-marker {
638
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
611
639
  position: absolute;
612
- z-index: 4;
613
- height: 16px;
614
- width: 16px;
615
- margin: -9px 0 -8px -8px;
640
+ bottom: 0%;
641
+ outline: 1px solid black;
642
+ border-right: 1px solid black;
643
+ box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
644
+ height: 28px;
616
645
  }
617
646
  @media (min-width: 320px) and (max-width: 641px) {
618
- .nhsuk-cbmi-chart-arrow-marker {
619
- height: 12px;
620
- width: 12px;
621
- margin: -9px 0 -6px -6px;
647
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
648
+ height: 24px;
622
649
  }
623
650
  }
624
651
 
625
- .nhsuk-cbmi-chart-label-align-left {
626
- display: flex;
627
- justify-content: left;
628
- }
629
-
630
- .nhsuk-cbmi-chart-label-align-center {
631
- display: flex;
632
- justify-content: center;
633
- }
634
-
635
- .nhsuk-cbmi-chart-label-align-right {
636
- display: flex;
637
- justify-content: right;
652
+ .nhsuk-bmi-classification-underweight {
653
+ z-index: 3;
638
654
  }
639
655
 
640
- .nhsuk-cbmi-chart-label-marker {
641
- position: relative;
642
- height: 25px;
643
- width: auto;
644
- white-space: nowrap;
645
- margin-top: -30px;
646
- z-index: 4;
656
+ .nhsuk-bmi-classification-healthy {
657
+ z-index: 2;
647
658
  }
648
659
 
649
- .nhsuk-cbmi-chart-centile-marker {
650
- position: relative;
651
- font-weight: bold;
652
- margin-left: 5px;
660
+ .nhsuk-bmi-classification-overweight {
661
+ z-index: 1;
653
662
  }
654
663
 
655
- .nhsuk-cbmi-chart-axis-marker {
656
- position: absolute;
657
- margin-left: -1px;
658
- border: 1.5px solid black;
659
- box-shadow: 0px 0px white inset, 2px 0px white, -2px 0px white;
660
- z-index: 4;
661
- height: 28px;
662
- }
663
- @media (min-width: 320px) and (max-width: 641px) {
664
- .nhsuk-cbmi-chart-axis-marker {
665
- height: 24px;
666
- }
664
+ .nhsuk-bmi-classification-obese {
665
+ border-right: none;
666
+ box-shadow: none;
667
667
  }
@@ -32,19 +32,37 @@
32
32
  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
33
33
  }
34
34
 
35
- .nhsuk-bmi-graph {
36
- position: relative;
35
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
36
+ position: absolute;
37
+ bottom: 0%;
37
38
  outline: 1px solid black;
38
- display: flex;
39
+ border-right: 1px solid black;
40
+ box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
39
41
  height: 28px;
40
- margin-bottom: nhsuk-spacing(4);
41
42
  }
42
43
  @media (min-width: 320px) and (max-width: 641px) {
43
- .nhsuk-bmi-graph {
44
+ .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
44
45
  height: 24px;
45
46
  }
46
47
  }
47
48
 
49
+ .nhsuk-bmi-classification-underweight {
50
+ z-index: 3;
51
+ }
52
+
53
+ .nhsuk-bmi-classification-healthy {
54
+ z-index: 2;
55
+ }
56
+
57
+ .nhsuk-bmi-classification-overweight {
58
+ z-index: 1;
59
+ }
60
+
61
+ .nhsuk-bmi-classification-obese {
62
+ border-right: none;
63
+ box-shadow: none;
64
+ }
65
+
48
66
 
49
67
  .nhsuk-bmi-chart-marker {
50
68
  position: absolute;
@@ -77,91 +95,64 @@
77
95
  }
78
96
 
79
97
 
80
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
81
- background: #330072;
82
- }
83
-
84
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
85
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
86
- }
87
-
88
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
89
- background: #ffb81c;
90
- }
91
-
92
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
93
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
94
- }
95
-
96
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
98
+ .nhsuk-bp-diastolic-axis-marker, .nhsuk-bp-systolic-axis-marker {
97
99
  position: absolute;
98
- bottom: 0%;
99
- outline: 1px solid black;
100
- border-right: 1px solid black;
101
- box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
102
- height: 28px;
103
- }
104
- @media (min-width: 320px) and (max-width: 641px) {
105
- .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
106
- height: 24px;
107
- }
100
+ outline: 0.5px solid black;
108
101
  }
109
102
 
110
- .nhsuk-bmi-classification-underweight {
111
- z-index: 3;
103
+ .nhsuk-bp-diastolic-axis-label, .nhsuk-bp-systolic-axis-label {
104
+ position: absolute;
112
105
  }
113
106
 
114
- .nhsuk-bmi-classification-healthy {
115
- z-index: 2;
107
+ .nhsuk-bp-systolic-axis-marker {
108
+ width: 5px;
109
+ left: -5px;
116
110
  }
117
-
118
- .nhsuk-bmi-classification-overweight {
119
- z-index: 1;
111
+ .nhsuk-bp-systolic-axis-marker:first-child {
112
+ bottom: -1px !important;
120
113
  }
121
-
122
- .nhsuk-bmi-classification-obese {
123
- border-right: none;
124
- box-shadow: none;
114
+ .nhsuk-bp-systolic-axis-marker:last-child {
115
+ bottom: calc(100% + 1px) !important;
125
116
  }
126
117
 
127
-
128
- .nhsuk-bar-slider-graph {
129
- position: relative;
130
- outline: 1px solid black;
131
- margin-top: 20px;
132
- display: flex;
133
- height: 28px;
118
+ .nhsuk-bp-diastolic-axis-marker {
119
+ height: 5px;
120
+ bottom: -5px;
134
121
  }
135
- @media (min-width: 320px) and (max-width: 641px) {
136
- .nhsuk-bar-slider-graph {
137
- height: 24px;
138
- }
122
+ .nhsuk-bp-diastolic-axis-marker:first-child {
123
+ left: -1px !important;
139
124
  }
140
-
141
- .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
142
- background: #330072;
125
+ .nhsuk-bp-diastolic-axis-marker:last-child {
126
+ left: calc(100% + 1px) !important;
143
127
  }
144
128
 
145
- .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
146
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
129
+ @media (max-width: 450px) {
130
+ .nhsuk-bp-diastolic-axis-marker-85 {
131
+ display: none;
132
+ }
147
133
  }
148
134
 
149
- .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
150
- background: #ffb81c;
135
+ .nhsuk-bp-diastolic-axis-marker-90 {
136
+ display: none;
151
137
  }
152
-
153
- .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
154
- background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
138
+ @media (max-width: 450px) {
139
+ .nhsuk-bp-diastolic-axis-marker-90 {
140
+ display: block;
141
+ }
155
142
  }
156
143
 
157
- .nhsuk-bmi-legend-key-classification-obese {
158
- border-bottom: none;
159
- box-shadow: none;
144
+ .nhsuk-bp-systolic-axis-label {
145
+ left: -30px;
146
+ top: -10px;
147
+ width: 26px;
148
+ text-align: end;
160
149
  }
161
150
 
162
- .nhsuk-bmi-legend-key-marker {
163
- border-bottom: none;
164
- box-shadow: none;
151
+ .nhsuk-bp-diastolic-axis-label {
152
+ bottom: -25px;
153
+ left: -10px;
154
+ width: 20px;
155
+ text-align: center;
165
156
  }
166
157
 
167
158
  .nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
@@ -207,51 +198,6 @@
207
198
  }
208
199
 
209
200
 
210
- .nhsuk-bar-slider-arrow-marker {
211
- position: absolute;
212
- height: 16px;
213
- width: 16px;
214
- margin: -9px 0 -8px -8px;
215
- }
216
- @media (min-width: 320px) and (max-width: 641px) {
217
- .nhsuk-bar-slider-arrow-marker {
218
- height: 12px;
219
- width: 12px;
220
- margin: -9px 0 -6px -6px;
221
- }
222
- }
223
-
224
- .nhsuk-bar-slider-label-align-left {
225
- display: flex;
226
- justify-content: left;
227
- }
228
-
229
- .nhsuk-bar-slider-label-align-center {
230
- display: flex;
231
- justify-content: center;
232
- }
233
-
234
- .nhsuk-bar-slider-label-align-right {
235
- display: flex;
236
- justify-content: right;
237
- }
238
-
239
- .nhsuk-bar-slider-label-marker {
240
- position: relative;
241
- height: 25px;
242
- width: auto;
243
- white-space: nowrap;
244
- margin-top: -30px;
245
- }
246
-
247
- .nhsuk-bar-slider-value-marker {
248
- position: relative;
249
- font-weight: bold;
250
- margin-left: 5px;
251
- margin-right: 2px;
252
- }
253
-
254
-
255
201
  .nhsuk-bp-graph {
256
202
  position: relative;
257
203
  margin-left: 20px;
@@ -306,87 +252,63 @@
306
252
  border-bottom: 2px solid black;
307
253
  }
308
254
 
309
-
310
- .nhsuk-bp-diastolic-axis-marker, .nhsuk-bp-systolic-axis-marker {
311
- position: absolute;
312
- outline: 0.5px solid black;
255
+ .nhsuk-bp-graph-cell {
256
+ flex-grow: 1;
257
+ border-bottom: 1px solid white;
258
+ border-left: 1px solid white;
259
+ background: transparent;
260
+ z-index: 4;
313
261
  }
314
262
 
315
- .nhsuk-bp-diastolic-axis-label, .nhsuk-bp-systolic-axis-label {
316
- position: absolute;
263
+ .nhsuk-bp-first-in-column {
264
+ border-bottom: none;
317
265
  }
318
266
 
319
- .nhsuk-bp-systolic-axis-marker {
320
- width: 5px;
321
- left: -5px;
322
- }
323
- .nhsuk-bp-systolic-axis-marker:first-child {
324
- bottom: -1px !important;
325
- }
326
- .nhsuk-bp-systolic-axis-marker:last-child {
327
- bottom: calc(100% + 1px) !important;
267
+ .nhsuk-bp-first-in-row {
268
+ border-left: none;
328
269
  }
329
270
 
330
- .nhsuk-bp-diastolic-axis-marker {
331
- height: 5px;
332
- bottom: -5px;
333
- }
334
- .nhsuk-bp-diastolic-axis-marker:first-child {
335
- left: -1px !important;
336
- }
337
- .nhsuk-bp-diastolic-axis-marker:last-child {
338
- left: calc(100% + 1px) !important;
339
- }
340
271
 
341
- @media (max-width: 450px) {
342
- .nhsuk-bp-diastolic-axis-marker-85 {
343
- display: none;
344
- }
272
+ .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
273
+ background: #330072;
345
274
  }
346
275
 
347
- .nhsuk-bp-diastolic-axis-marker-90 {
348
- display: none;
349
- }
350
- @media (max-width: 450px) {
351
- .nhsuk-bp-diastolic-axis-marker-90 {
352
- display: block;
353
- }
276
+ .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
277
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
354
278
  }
355
279
 
356
- .nhsuk-bp-systolic-axis-label {
357
- left: -30px;
358
- top: -10px;
359
- width: 26px;
360
- text-align: end;
280
+ .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
281
+ background: #ffb81c;
361
282
  }
362
283
 
363
- .nhsuk-bp-diastolic-axis-label {
364
- bottom: -25px;
365
- left: -10px;
366
- width: 20px;
367
- text-align: center;
284
+ .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
285
+ background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
368
286
  }
369
287
 
370
-
371
- .nhsuk-bp-graph-marker {
372
- position: absolute;
373
- z-index: 6;
374
- height: 24px;
375
- width: 24px;
376
- margin: 0 0 -12px -12px;
288
+ .nhsuk-bmi-graph {
289
+ position: relative;
290
+ outline: 1px solid black;
291
+ display: flex;
292
+ height: 28px;
293
+ margin-bottom: nhsuk-spacing(4);
377
294
  }
378
- @media (max-width: 320px) {
379
- .nhsuk-bp-graph-marker {
380
- height: 20px;
381
- width: 20px;
382
- margin: 0 0 -10px -10px;
295
+ @media (min-width: 320px) and (max-width: 641px) {
296
+ .nhsuk-bmi-graph {
297
+ height: 24px;
383
298
  }
384
299
  }
300
+
301
+
302
+ .nhsuk-bar-slider-graph {
303
+ position: relative;
304
+ outline: 1px solid black;
305
+ margin-top: 20px;
306
+ display: flex;
307
+ height: 28px;
308
+ }
385
309
  @media (min-width: 320px) and (max-width: 641px) {
386
- .nhsuk-bp-graph-marker {
387
- height: 22px;
388
- width: 22px;
389
- margin: 0 0 -11px -11px;
310
+ .nhsuk-bar-slider-graph {
311
+ height: 24px;
390
312
  }
391
313
  }
392
314
 
@@ -441,70 +363,110 @@
441
363
  z-index: 0;
442
364
  }
443
365
 
444
- .nhsuk-bp-graph-cell {
445
- flex-grow: 1;
446
- border-bottom: 1px solid white;
447
- border-left: 1px solid white;
448
- background: transparent;
449
- z-index: 4;
450
- }
451
366
 
452
- .nhsuk-bp-first-in-column {
453
- border-bottom: none;
367
+ .nhsuk-bp-graph-marker {
368
+ position: absolute;
369
+ z-index: 6;
370
+ height: 24px;
371
+ width: 24px;
372
+ margin: 0 0 -12px -12px;
373
+ }
374
+ @media (max-width: 320px) {
375
+ .nhsuk-bp-graph-marker {
376
+ height: 20px;
377
+ width: 20px;
378
+ margin: 0 0 -10px -10px;
379
+ }
380
+ }
381
+ @media (min-width: 320px) and (max-width: 641px) {
382
+ .nhsuk-bp-graph-marker {
383
+ height: 22px;
384
+ width: 22px;
385
+ margin: 0 0 -11px -11px;
386
+ }
454
387
  }
455
388
 
456
- .nhsuk-bp-first-in-row {
457
- border-left: none;
389
+
390
+ .nhsuk-bar-slider-arrow-marker {
391
+ position: absolute;
392
+ height: 16px;
393
+ width: 16px;
394
+ margin: -9px 0 -8px -8px;
395
+ }
396
+ @media (min-width: 320px) and (max-width: 641px) {
397
+ .nhsuk-bar-slider-arrow-marker {
398
+ height: 12px;
399
+ width: 12px;
400
+ margin: -9px 0 -6px -6px;
401
+ }
458
402
  }
459
403
 
460
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
461
- background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
404
+ .nhsuk-bar-slider-label-align-left {
405
+ display: flex;
406
+ justify-content: left;
462
407
  }
463
408
 
464
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
465
- background: #ffb81c;
409
+ .nhsuk-bar-slider-label-align-center {
410
+ display: flex;
411
+ justify-content: center;
466
412
  }
467
413
 
468
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
469
- background: #330072;
414
+ .nhsuk-bar-slider-label-align-right {
415
+ display: flex;
416
+ justify-content: right;
470
417
  }
471
418
 
472
- .nhsuk-cbmi-legend-key-classification-overweight {
473
- border-bottom: none;
474
- box-shadow: none;
419
+ .nhsuk-bar-slider-label-marker {
420
+ position: relative;
421
+ height: 25px;
422
+ width: auto;
423
+ white-space: nowrap;
424
+ margin-top: -30px;
475
425
  }
476
426
 
477
- .nhsuk-cbmi-legend-key, .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-legend-key-classification-overweight {
478
- border-bottom: 2px solid white;
479
- margin-bottom: 2px;
427
+ .nhsuk-bar-slider-value-marker {
428
+ position: relative;
429
+ font-weight: bold;
430
+ margin-left: 5px;
431
+ margin-right: 2px;
480
432
  }
481
433
 
482
- .nhsuk-cbmi-legend-marker {
483
- margin-bottom: 2px;
434
+
435
+ .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
436
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
484
437
  }
485
438
 
486
- .nhsuk-cbmi-classification-underweight-heading {
487
- border-left: 8px solid #330072;
439
+ .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
440
+ background: #ffb81c;
488
441
  }
489
442
 
490
- .nhsuk-cbmi-classification-healthy-heading {
491
- border-left: 8px solid #30b4ab;
443
+ .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
444
+ background: #330072;
492
445
  }
493
446
 
494
- .nhsuk-cbmi-classification-overweight-heading {
495
- border-left: 8px solid #ffb81c;
447
+ .nhsuk-cbmi-graph {
448
+ position: relative;
449
+ outline: 1px solid black;
450
+ margin-top: 20px;
451
+ display: flex;
452
+ height: 28px;
453
+ }
454
+ @media (min-width: 320px) and (max-width: 641px) {
455
+ .nhsuk-cbmi-graph {
456
+ height: 24px;
457
+ }
496
458
  }
497
459
 
498
460
 
499
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
461
+ .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
500
462
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
501
463
  }
502
464
 
503
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
465
+ .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
504
466
  background: #ffb81c;
505
467
  }
506
468
 
507
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
469
+ .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
508
470
  background: #330072;
509
471
  }
510
472
 
@@ -567,42 +529,42 @@
567
529
  }
568
530
  }
569
531
 
532
+ .nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
533
+ background: #330072;
534
+ }
570
535
 
571
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
536
+ .nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
572
537
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
573
538
  }
574
539
 
575
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
540
+ .nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
576
541
  background: #ffb81c;
577
542
  }
578
543
 
579
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
580
- background: #330072;
544
+ .nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
545
+ background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
581
546
  }
582
547
 
583
- .nhsuk-cbmi-graph {
584
- position: relative;
585
- outline: 1px solid black;
586
- margin-top: 20px;
587
- display: flex;
588
- height: 28px;
548
+ .nhsuk-bmi-legend-key-classification-obese {
549
+ border-bottom: none;
550
+ box-shadow: none;
589
551
  }
590
- @media (min-width: 320px) and (max-width: 641px) {
591
- .nhsuk-cbmi-graph {
592
- height: 24px;
593
- }
552
+
553
+ .nhsuk-bmi-legend-key-marker {
554
+ border-bottom: none;
555
+ box-shadow: none;
594
556
  }
595
557
 
596
558
 
597
- .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
559
+ .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
598
560
  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
599
561
  }
600
562
 
601
- .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
563
+ .nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
602
564
  background: #ffb81c;
603
565
  }
604
566
 
605
- .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
567
+ .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
606
568
  background: #330072;
607
569
  }
608
570
 
@@ -642,6 +604,44 @@
642
604
  background: #330072;
643
605
  }
644
606
 
607
+ .nhsuk-cbmi-legend-key-classification-overweight {
608
+ border-bottom: none;
609
+ box-shadow: none;
610
+ }
611
+
612
+ .nhsuk-cbmi-legend-key, .nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-legend-key-classification-overweight {
613
+ border-bottom: 2px solid white;
614
+ margin-bottom: 2px;
615
+ }
616
+
617
+ .nhsuk-cbmi-legend-marker {
618
+ margin-bottom: 2px;
619
+ }
620
+
621
+ .nhsuk-cbmi-classification-underweight-heading {
622
+ border-left: 8px solid #330072;
623
+ }
624
+
625
+ .nhsuk-cbmi-classification-healthy-heading {
626
+ border-left: 8px solid #30b4ab;
627
+ }
628
+
629
+ .nhsuk-cbmi-classification-overweight-heading {
630
+ border-left: 8px solid #ffb81c;
631
+ }
632
+
633
+ .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
634
+ background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
635
+ }
636
+
637
+ .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
638
+ background: #ffb81c;
639
+ }
640
+
641
+ .nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
642
+ background: #330072;
643
+ }
644
+
645
645
 
646
646
  .nhsuk-cbmi-axis-marker {
647
647
  border: 1px solid black;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nhsuk-tools-chart-components-react",
3
- "version": "2.0.0-nhsuk-react-beta",
3
+ "version": "2.1.0",
4
4
  "description": "",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",
@@ -83,8 +83,8 @@
83
83
  "big.js": "^6.2.2",
84
84
  "nhsuk-frontend": ">=10.0.0 <11.0.0",
85
85
  "nhsuk-react-components": ">=6.0.0-beta.5 <7.0.0",
86
- "react": ">=16.8.0",
87
- "react-dom": ">=16.8.0"
86
+ "react": "^18.2.0",
87
+ "react-dom": "^18.2.0"
88
88
  },
89
89
  "overrides": {
90
90
  "rollup": "^4.22.4"