playbook_ui 14.10.0.pre.rc.21 → 14.10.0.pre.rc.22
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_gauge/_gauge.scss +31 -1
- data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +3 -3
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +25 -5
- data/dist/chunks/{_typeahead-BvYY2O9n.js → _typeahead-C63YYbKQ.js} +1 -1
- data/dist/chunks/{_weekday_stacked-3oymMUFt.js → _weekday_stacked-Df46UIol.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ad9038fa0ac4d11cbf3a80ddbe6ffc79d05361f05f7c29d53313bb93d1e369d4
|
|
4
|
+
data.tar.gz: cb438e2f888326e3df9dc9fe8bb7f00114284e57b74bf95e7425c1c0f449768a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 27c3775b16e5b9dbfb037253c8cab3fb2c2b8658454249bba0bee3b19b2010fa4329e2c6c94046ad35655f7c2e2676a7ba0aef5cca6c734cb719b078f4a6e487
|
|
7
|
+
data.tar.gz: 909b33325ea6f7a48a7b4c6037428115d4f451a2bcd8faa814f2310b39cd4a57935aa88cb95ea904cd273c00b441b38f2fee15e3674208f0b892fcd3675a5e94
|
|
@@ -1,12 +1,33 @@
|
|
|
1
|
+
@import "../tokens/colors";
|
|
2
|
+
|
|
1
3
|
[class^=pb_gauge_kit] {
|
|
2
4
|
|
|
5
|
+
.fix {
|
|
6
|
+
fill: $text_lt_default;
|
|
7
|
+
stroke: none;
|
|
8
|
+
|
|
9
|
+
&[class*=dark] {
|
|
10
|
+
fill: $text_dk_default;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
3
14
|
.suffix {
|
|
4
15
|
fill: $text_lt_light;
|
|
16
|
+
stroke: none;
|
|
5
17
|
font: $regular $font_larger $font_family_base;
|
|
18
|
+
|
|
19
|
+
&[class*=dark] {
|
|
20
|
+
fill: $text_dk_light;
|
|
21
|
+
}
|
|
6
22
|
}
|
|
7
23
|
.prefix {
|
|
8
24
|
fill: $text_lt_light;
|
|
25
|
+
stroke: none;
|
|
9
26
|
font: $regular $font_base $font_family_base;
|
|
27
|
+
|
|
28
|
+
&[class*=dark] {
|
|
29
|
+
fill: $text_dk_light;
|
|
30
|
+
}
|
|
10
31
|
}
|
|
11
32
|
|
|
12
33
|
rect.highcharts-background {
|
|
@@ -16,4 +37,13 @@
|
|
|
16
37
|
.gauge-pane {
|
|
17
38
|
stroke-linejoin: round;
|
|
18
39
|
}
|
|
19
|
-
|
|
40
|
+
|
|
41
|
+
&[class*=dark] {
|
|
42
|
+
color: $text_dk_default;
|
|
43
|
+
|
|
44
|
+
.pb_title_kit_size_1,
|
|
45
|
+
.pb_caption_kit_xs {
|
|
46
|
+
color: $text_dk_light;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
@@ -164,9 +164,9 @@ const Gauge = ({
|
|
|
164
164
|
color: defaultColors.text_lt_default,
|
|
165
165
|
enabled: true,
|
|
166
166
|
format:
|
|
167
|
-
`<span class="prefix">${prefix}</span>` +
|
|
168
|
-
|
|
169
|
-
`<span class="suffix">${suffix}</span>`,
|
|
167
|
+
`<span class="prefix${dark ? " dark" : ""}">${prefix}</span>` +
|
|
168
|
+
`<span class="fix${dark ? " dark" : ""}">{y:,f}</span>` +
|
|
169
|
+
`<span class="suffix${dark ? " dark" : ""}">${suffix}</span>`,
|
|
170
170
|
style: {
|
|
171
171
|
fontFamily: typography.font_family_base,
|
|
172
172
|
fontWeight: typography.regular,
|
|
@@ -17,47 +17,60 @@ const GaugeComplex = (props) => (
|
|
|
17
17
|
gap="sm"
|
|
18
18
|
padding="xl"
|
|
19
19
|
wrap
|
|
20
|
+
{...props}
|
|
20
21
|
>
|
|
21
22
|
<FlexItem
|
|
22
23
|
flex={1}
|
|
23
24
|
grow
|
|
25
|
+
{...props}
|
|
24
26
|
>
|
|
25
27
|
<Card
|
|
26
28
|
maxWidth="xs"
|
|
27
29
|
padding="md"
|
|
30
|
+
{...props}
|
|
28
31
|
>
|
|
29
32
|
<Title
|
|
30
33
|
paddingBottom="sm"
|
|
31
34
|
size={4}
|
|
32
35
|
text="Abandoned Calls"
|
|
36
|
+
{...props}
|
|
33
37
|
/>
|
|
34
|
-
<Flex
|
|
38
|
+
<Flex
|
|
39
|
+
align="stretch"
|
|
40
|
+
{...props}
|
|
41
|
+
>
|
|
35
42
|
<Flex
|
|
36
43
|
marginRight="sm"
|
|
37
44
|
orientation="column"
|
|
45
|
+
{...props}
|
|
38
46
|
>
|
|
39
47
|
<Body
|
|
40
48
|
color="light"
|
|
41
49
|
paddingBottom="sm"
|
|
42
50
|
text="Total Abandoned"
|
|
51
|
+
{...props}
|
|
43
52
|
/>
|
|
44
53
|
<Flex
|
|
45
54
|
align="baseline"
|
|
46
55
|
paddingBottom="xs"
|
|
56
|
+
{...props}
|
|
47
57
|
>
|
|
48
58
|
<Title
|
|
49
59
|
size={1}
|
|
50
60
|
text="39"
|
|
61
|
+
{...props}
|
|
51
62
|
/>
|
|
52
63
|
<Title
|
|
53
64
|
color="light"
|
|
54
65
|
size={3}
|
|
55
66
|
text="calls"
|
|
67
|
+
{...props}
|
|
56
68
|
/>
|
|
57
69
|
</Flex>
|
|
58
70
|
<Caption
|
|
59
71
|
size="xs"
|
|
60
72
|
text="of 390"
|
|
73
|
+
{...props}
|
|
61
74
|
/>
|
|
62
75
|
</Flex>
|
|
63
76
|
|
|
@@ -65,22 +78,29 @@ const GaugeComplex = (props) => (
|
|
|
65
78
|
alignSelf="stretch"
|
|
66
79
|
marginRight="sm"
|
|
67
80
|
orientation="vertical"
|
|
81
|
+
{...props}
|
|
68
82
|
/>
|
|
69
83
|
|
|
70
84
|
<Flex
|
|
71
85
|
orientation="column"
|
|
72
86
|
wrap
|
|
87
|
+
{...props}
|
|
73
88
|
>
|
|
74
89
|
<Body
|
|
75
90
|
color="light"
|
|
76
91
|
text="% Abandoned"
|
|
77
|
-
|
|
78
|
-
|
|
92
|
+
{...props}
|
|
93
|
+
/>
|
|
94
|
+
<Flex
|
|
95
|
+
wrap
|
|
96
|
+
{...props}
|
|
97
|
+
>
|
|
79
98
|
<FlexItem
|
|
80
99
|
fixedSize="150px"
|
|
81
100
|
overflow="hidden"
|
|
82
101
|
shrink
|
|
83
|
-
|
|
102
|
+
{...props}
|
|
103
|
+
>
|
|
84
104
|
<Gauge
|
|
85
105
|
chartData={data}
|
|
86
106
|
disableAnimation
|
|
@@ -90,7 +110,7 @@ const GaugeComplex = (props) => (
|
|
|
90
110
|
{...props}
|
|
91
111
|
/>
|
|
92
112
|
</FlexItem>
|
|
93
|
-
</Flex>
|
|
113
|
+
</Flex>
|
|
94
114
|
</Flex>
|
|
95
115
|
</Flex>
|
|
96
116
|
</Card>
|