playbook_ui_docs 14.10.0.pre.rc.21 → 14.10.0.pre.rc.23
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +21 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +50 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +25 -5
- data/dist/playbook-doc.js +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 70e4b512e225beeef160740a4c62c59e2454d608ffa80297add37123dccdc056
|
|
4
|
+
data.tar.gz: 0d81405394dbac8097a897fbb87e3947d64a84b3f4c6a9c8a726f9ce8be867d2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2dac436372f714e58c8fa7f6bcefed3b1afde2d240cea655965db964095abad6d157018c16b5ad3cfe2f4b54f043b7d18f3e0a15bf6de92aaba87b790ad5c7ad
|
|
7
|
+
data.tar.gz: 3bbb9ff345a9474a3942f63eb5848efd5dff41e6a5d872d52464af5039f199fa343069ddf4102951be4d7bbfd3b0c386127566d9ca193e3e41532bd6deb37d77
|
|
@@ -67,4 +67,24 @@
|
|
|
67
67
|
<%= pb_rails("card/card_body", props: { padding: "md", }) do %>
|
|
68
68
|
Body
|
|
69
69
|
<% end %>
|
|
70
|
-
<% end %>
|
|
70
|
+
<% end %>
|
|
71
|
+
|
|
72
|
+
<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
|
|
73
|
+
|
|
74
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
|
75
|
+
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success" }) do %>
|
|
76
|
+
<%= pb_rails("body", props: { text: "Success", dark: true }) %>
|
|
77
|
+
<% end %>
|
|
78
|
+
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
|
79
|
+
Body
|
|
80
|
+
<% end %>
|
|
81
|
+
<% end %>
|
|
82
|
+
|
|
83
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
|
84
|
+
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error" }) do %>
|
|
85
|
+
<%= pb_rails("body", props: { text: "Error", dark: true }) %>
|
|
86
|
+
<% end %>
|
|
87
|
+
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
|
88
|
+
Body
|
|
89
|
+
<% end %>
|
|
90
|
+
<% end %>
|
|
@@ -181,6 +181,56 @@ const CardHeader = (props) => {
|
|
|
181
181
|
/>
|
|
182
182
|
</Card.Body>
|
|
183
183
|
</Card>
|
|
184
|
+
|
|
185
|
+
<Title
|
|
186
|
+
{...props}
|
|
187
|
+
marginBottom='sm'
|
|
188
|
+
size={4}
|
|
189
|
+
tag="h4"
|
|
190
|
+
text="Status Colors"
|
|
191
|
+
/>
|
|
192
|
+
|
|
193
|
+
<Card
|
|
194
|
+
{...props}
|
|
195
|
+
marginBottom='sm'
|
|
196
|
+
padding="none"
|
|
197
|
+
>
|
|
198
|
+
<Card.Header
|
|
199
|
+
headerColor="success"
|
|
200
|
+
>
|
|
201
|
+
<Body
|
|
202
|
+
dark
|
|
203
|
+
text="Success"
|
|
204
|
+
/>
|
|
205
|
+
</Card.Header>
|
|
206
|
+
<Card.Body>
|
|
207
|
+
<Body
|
|
208
|
+
{...props}
|
|
209
|
+
text="Body"
|
|
210
|
+
/>
|
|
211
|
+
</Card.Body>
|
|
212
|
+
</Card>
|
|
213
|
+
|
|
214
|
+
<Card
|
|
215
|
+
{...props}
|
|
216
|
+
marginBottom='sm'
|
|
217
|
+
padding="none"
|
|
218
|
+
>
|
|
219
|
+
<Card.Header
|
|
220
|
+
headerColor="error"
|
|
221
|
+
>
|
|
222
|
+
<Body
|
|
223
|
+
dark
|
|
224
|
+
text="Error"
|
|
225
|
+
/>
|
|
226
|
+
</Card.Header>
|
|
227
|
+
<Card.Body>
|
|
228
|
+
<Body
|
|
229
|
+
{...props}
|
|
230
|
+
text="Body"
|
|
231
|
+
/>
|
|
232
|
+
</Card.Body>
|
|
233
|
+
</Card>
|
|
184
234
|
</>
|
|
185
235
|
)
|
|
186
236
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
|
|
1
|
+
Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
|
|
@@ -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>
|