playbook_ui 10.15.0 → 10.17.0
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/_playbook.scss +1 -0
- data/app/pb_kits/playbook/pb_background/background.test.js +22 -0
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb +26 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +37 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +17 -4
- data/app/pb_kits/playbook/pb_caption/_caption.scss +25 -8
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +17 -0
- data/app/pb_kits/playbook/pb_caption/caption.rb +5 -1
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.html.erb +3 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.jsx +27 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.md +1 -0
- data/app/pb_kits/playbook/pb_caption/docs/example.yml +7 -4
- data/app/pb_kits/playbook/pb_caption/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_card/_card.jsx +1 -3
- data/app/pb_kits/playbook/pb_card/_card.scss +0 -6
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -8
- data/app/pb_kits/playbook/pb_card/card.html.erb +2 -0
- data/app/pb_kits/playbook/pb_card/card.rb +0 -8
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +3 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +6 -0
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +4 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +4 -0
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +4 -0
- data/app/pb_kits/playbook/pb_flex/_flex.scss +17 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +6 -2
- data/app/pb_kits/playbook/pb_flex/_flex_item.scss +22 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +12 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.html.erb +89 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx +210 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.md +5 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +27 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_flex/flex.rb +14 -1
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +16 -1
- data/app/pb_kits/playbook/pb_icon/icon.rb +4 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -0
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +4 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb +26 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx +37 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.md +2 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +3 -0
- data/app/pb_kits/playbook/pb_list/list.rb +2 -0
- data/app/pb_kits/playbook/pb_select/select.rb +3 -0
- data/app/pb_kits/playbook/pb_source/source.rb +3 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -0
- data/app/pb_kits/playbook/plugins/pb_chart.js +4 -3
- data/app/pb_kits/playbook/utilities/_shadow.scss +11 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +7 -1
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/kit_base.rb +2 -0
- data/lib/playbook/markdown/helper.rb +2 -2
- data/lib/playbook/pb_doc_helper.rb +4 -0
- data/lib/playbook/props/base.rb +2 -2
- data/lib/playbook/shadow.rb +29 -0
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook.rb +1 -0
- metadata +40 -25
@@ -1,5 +1,16 @@
|
|
1
|
-
<%= pb_rails("title", props: {size: 4, text: "
|
1
|
+
<%= pb_rails("title", props: {size: 4, text: "Display Flex"}) %>
|
2
2
|
<br/>
|
3
|
+
<div class="flex-doc-example">
|
4
|
+
<%= pb_rails("flex/flex_item",props: { gap:"sm", display_flex: true }) do %>
|
5
|
+
<%= pb_rails("flex/flex_item") do %>We<% end %>
|
6
|
+
<%= pb_rails("flex/flex_item") do %>Are<% end %>
|
7
|
+
<%= pb_rails("flex/flex_item") do %>Being<% end %>
|
8
|
+
<%= pb_rails("flex/flex_item") do %>Flexed<% end %>
|
9
|
+
<% end %>
|
10
|
+
</div>
|
11
|
+
|
12
|
+
<br/><br/>
|
13
|
+
|
3
14
|
<div class="flex-doc-example">
|
4
15
|
<%= pb_rails("flex",props: { gap:"sm" }) do %>
|
5
16
|
<%= pb_rails("flex/flex_item", props: { grow: true }) do %>I'm growing<% end %>
|
@@ -1,5 +1,6 @@
|
|
1
1
|
##### Props
|
2
2
|
|
3
|
+
* `display_flex` | **Type**: Boolean
|
3
4
|
* `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
4
5
|
* `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
|
5
6
|
* `grow` | **Type**: Boolean
|
@@ -10,3 +11,4 @@
|
|
10
11
|
- Setting Flex to 1 is equal to setting the grow & shrink prop to true
|
11
12
|
- Setting Flex to 0 is equal to setting the grow & shrink prop to false
|
12
13
|
- If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
|
14
|
+
- display_flex will either be true or false. If true, then the class will be applied to the kit
|
@@ -0,0 +1,89 @@
|
|
1
|
+
<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
|
2
|
+
<br/>
|
3
|
+
<div class="flex-doc-example">
|
4
|
+
<%= pb_rails("flex") do %>
|
5
|
+
<%= pb_rails("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %>
|
6
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
|
7
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
|
8
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
|
9
|
+
<% end %>
|
10
|
+
</div>
|
11
|
+
|
12
|
+
<br/><br/>
|
13
|
+
|
14
|
+
<div class="flex-doc-example">
|
15
|
+
<%= pb_rails("flex") do %>
|
16
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"end"}) do %>1<% end %>
|
17
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
|
18
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
|
19
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
|
20
|
+
<% end %>
|
21
|
+
</div>
|
22
|
+
|
23
|
+
<br/><br/>
|
24
|
+
|
25
|
+
<div class="flex-doc-example">
|
26
|
+
<%= pb_rails("flex") do %>
|
27
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "center"}) do %>1<% end %>
|
28
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
|
29
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
|
30
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
|
31
|
+
<% end %>
|
32
|
+
</div>
|
33
|
+
|
34
|
+
<br/><br/>
|
35
|
+
|
36
|
+
<div class="flex-doc-example">
|
37
|
+
<%= pb_rails("flex") do %>
|
38
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"stretch"}) do %>1<% end %>
|
39
|
+
<%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>2<% end %>
|
40
|
+
<%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>3<% end %>
|
41
|
+
<%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>4<% end %>
|
42
|
+
<% end %>
|
43
|
+
</div>
|
44
|
+
|
45
|
+
<br/><br/>
|
46
|
+
|
47
|
+
<%= pb_rails("title", props: {size: 4, text: "Column"}) %>
|
48
|
+
<br/>
|
49
|
+
<div class="flex-doc-example">
|
50
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
51
|
+
<%= pb_rails("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %>
|
52
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
|
53
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
|
54
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
|
55
|
+
<% end %>
|
56
|
+
</div>
|
57
|
+
|
58
|
+
<br/><br/>
|
59
|
+
|
60
|
+
<div class="flex-doc-example">
|
61
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
62
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "end"}) do %>1<% end %>
|
63
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
|
64
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
|
65
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
|
66
|
+
<% end %>
|
67
|
+
</div>
|
68
|
+
|
69
|
+
<br/><br/>
|
70
|
+
|
71
|
+
<div class="flex-doc-example">
|
72
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
73
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"center"}) do %>1<% end %>
|
74
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
|
75
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
|
76
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
|
77
|
+
<% end %>
|
78
|
+
</div>
|
79
|
+
|
80
|
+
<br/><br/>
|
81
|
+
|
82
|
+
<div class="flex-doc-example">
|
83
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
84
|
+
<%= pb_rails("flex/flex_item", props:{padding: "sm", align_self:"stretch"}) do %>1<% end %>
|
85
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
|
86
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
|
87
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
|
88
|
+
<% end %>
|
89
|
+
</div>
|
@@ -0,0 +1,210 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Flex, FlexItem, Title } from '../..'
|
3
|
+
|
4
|
+
const FlexItemAlignSelf = (props) => {
|
5
|
+
return (
|
6
|
+
<>
|
7
|
+
<Title
|
8
|
+
size={4}
|
9
|
+
text="Row"
|
10
|
+
{...props}
|
11
|
+
/>
|
12
|
+
|
13
|
+
<br />
|
14
|
+
|
15
|
+
<div className="flex-doc-example ">
|
16
|
+
<Flex
|
17
|
+
{...props}
|
18
|
+
>
|
19
|
+
<FlexItem alignSelf="start">
|
20
|
+
{'1'}
|
21
|
+
</FlexItem>
|
22
|
+
<FlexItem padding="md">
|
23
|
+
{'2'}
|
24
|
+
</FlexItem>
|
25
|
+
<FlexItem padding="md">
|
26
|
+
{'3'}
|
27
|
+
</FlexItem>
|
28
|
+
<FlexItem padding="md">
|
29
|
+
{'4'}
|
30
|
+
</FlexItem>
|
31
|
+
</Flex>
|
32
|
+
</div>
|
33
|
+
|
34
|
+
<br />
|
35
|
+
|
36
|
+
<div className="flex-doc-example ">
|
37
|
+
<Flex
|
38
|
+
{...props}
|
39
|
+
>
|
40
|
+
<FlexItem alignSelf="end">
|
41
|
+
{'1'}
|
42
|
+
</FlexItem>
|
43
|
+
<FlexItem padding="md">
|
44
|
+
{'2'}
|
45
|
+
</FlexItem>
|
46
|
+
<FlexItem padding="md">
|
47
|
+
{'3'}
|
48
|
+
</FlexItem>
|
49
|
+
<FlexItem padding="md">
|
50
|
+
{'4'}
|
51
|
+
</FlexItem>
|
52
|
+
</Flex>
|
53
|
+
</div>
|
54
|
+
|
55
|
+
<br />
|
56
|
+
|
57
|
+
<div className="flex-doc-example ">
|
58
|
+
<Flex
|
59
|
+
{...props}
|
60
|
+
>
|
61
|
+
<FlexItem alignSelf="center">
|
62
|
+
{'1'}
|
63
|
+
</FlexItem>
|
64
|
+
<FlexItem padding="md">
|
65
|
+
{'2'}
|
66
|
+
</FlexItem>
|
67
|
+
<FlexItem padding="md">
|
68
|
+
{'3'}
|
69
|
+
</FlexItem>
|
70
|
+
<FlexItem padding="md">
|
71
|
+
{'4'}
|
72
|
+
</FlexItem>
|
73
|
+
</Flex>
|
74
|
+
</div>
|
75
|
+
|
76
|
+
<br />
|
77
|
+
|
78
|
+
<div className="flex-doc-example ">
|
79
|
+
<Flex
|
80
|
+
{...props}
|
81
|
+
>
|
82
|
+
<FlexItem alignSelf="stretch">
|
83
|
+
{'1'}
|
84
|
+
</FlexItem>
|
85
|
+
<FlexItem padding="md">
|
86
|
+
{'2'}
|
87
|
+
</FlexItem>
|
88
|
+
<FlexItem padding="md">
|
89
|
+
{'3'}
|
90
|
+
</FlexItem>
|
91
|
+
<FlexItem padding="md">
|
92
|
+
{'4'}
|
93
|
+
</FlexItem>
|
94
|
+
</Flex>
|
95
|
+
</div>
|
96
|
+
|
97
|
+
<br />
|
98
|
+
<br />
|
99
|
+
|
100
|
+
<Title
|
101
|
+
size={4}
|
102
|
+
text="Column"
|
103
|
+
{...props}
|
104
|
+
/>
|
105
|
+
|
106
|
+
<br />
|
107
|
+
|
108
|
+
<div className="flex-doc-example ">
|
109
|
+
<Flex
|
110
|
+
orientation="column"
|
111
|
+
{...props}
|
112
|
+
>
|
113
|
+
<FlexItem
|
114
|
+
alignSelf="start"
|
115
|
+
padding="sm"
|
116
|
+
>
|
117
|
+
{'1'}
|
118
|
+
</FlexItem>
|
119
|
+
<FlexItem padding="sm">
|
120
|
+
{'2'}
|
121
|
+
</FlexItem>
|
122
|
+
<FlexItem padding="sm">
|
123
|
+
{'3'}
|
124
|
+
</FlexItem>
|
125
|
+
<FlexItem padding="sm">
|
126
|
+
{'4'}
|
127
|
+
</FlexItem>
|
128
|
+
</Flex>
|
129
|
+
</div>
|
130
|
+
|
131
|
+
<br />
|
132
|
+
|
133
|
+
<div className="flex-doc-example ">
|
134
|
+
<Flex
|
135
|
+
orientation="column"
|
136
|
+
{...props}
|
137
|
+
>
|
138
|
+
<FlexItem
|
139
|
+
alignSelf="end"
|
140
|
+
padding="sm"
|
141
|
+
>
|
142
|
+
{'1'}
|
143
|
+
</FlexItem>
|
144
|
+
<FlexItem padding="sm">
|
145
|
+
{'2'}
|
146
|
+
</FlexItem>
|
147
|
+
<FlexItem padding="sm">
|
148
|
+
{'3'}
|
149
|
+
</FlexItem>
|
150
|
+
<FlexItem padding="sm">
|
151
|
+
{'4'}
|
152
|
+
</FlexItem>
|
153
|
+
</Flex>
|
154
|
+
</div>
|
155
|
+
|
156
|
+
<br />
|
157
|
+
|
158
|
+
<div className="flex-doc-example ">
|
159
|
+
<Flex
|
160
|
+
orientation="column"
|
161
|
+
{...props}
|
162
|
+
>
|
163
|
+
<FlexItem
|
164
|
+
alignSelf="center"
|
165
|
+
padding="sm"
|
166
|
+
>
|
167
|
+
{'1'}
|
168
|
+
</FlexItem>
|
169
|
+
<FlexItem padding="sm">
|
170
|
+
{'2'}
|
171
|
+
</FlexItem>
|
172
|
+
<FlexItem padding="sm">
|
173
|
+
{'3'}
|
174
|
+
</FlexItem>
|
175
|
+
<FlexItem padding="sm">
|
176
|
+
{'4'}
|
177
|
+
</FlexItem>
|
178
|
+
</Flex>
|
179
|
+
</div>
|
180
|
+
|
181
|
+
<br />
|
182
|
+
|
183
|
+
<div className="flex-doc-example ">
|
184
|
+
<Flex
|
185
|
+
orientation="column"
|
186
|
+
{...props}
|
187
|
+
>
|
188
|
+
<FlexItem
|
189
|
+
alignSelf="stretch"
|
190
|
+
padding="sm"
|
191
|
+
>
|
192
|
+
{'1'}
|
193
|
+
</FlexItem>
|
194
|
+
<FlexItem padding="sm">
|
195
|
+
{'2'}
|
196
|
+
</FlexItem>
|
197
|
+
<FlexItem padding="sm">
|
198
|
+
{'3'}
|
199
|
+
</FlexItem>
|
200
|
+
<FlexItem padding="sm">
|
201
|
+
{'4'}
|
202
|
+
</FlexItem>
|
203
|
+
</Flex>
|
204
|
+
</div>
|
205
|
+
|
206
|
+
</>
|
207
|
+
)
|
208
|
+
}
|
209
|
+
|
210
|
+
export default FlexItemAlignSelf
|
@@ -4,6 +4,33 @@ import { Flex, FlexItem, Title } from '../..'
|
|
4
4
|
const FlexItemExample = (props) => {
|
5
5
|
return (
|
6
6
|
<>
|
7
|
+
<Title
|
8
|
+
size={4}
|
9
|
+
text="Display Flex"
|
10
|
+
/>
|
11
|
+
<br />
|
12
|
+
<div className="flex-doc-example">
|
13
|
+
<FlexItem
|
14
|
+
displayFlex
|
15
|
+
gap="xs"
|
16
|
+
{...props}
|
17
|
+
>
|
18
|
+
<FlexItem>
|
19
|
+
{'We'}
|
20
|
+
</FlexItem>
|
21
|
+
<FlexItem>
|
22
|
+
{'Are'}
|
23
|
+
</FlexItem>
|
24
|
+
<FlexItem>
|
25
|
+
{'Being'}
|
26
|
+
</FlexItem>
|
27
|
+
<FlexItem>
|
28
|
+
{'Flexed'}
|
29
|
+
</FlexItem>
|
30
|
+
</FlexItem>
|
31
|
+
</div>
|
32
|
+
|
33
|
+
<br />
|
7
34
|
<Title
|
8
35
|
size={4}
|
9
36
|
text="Grow"
|
@@ -1,5 +1,6 @@
|
|
1
1
|
##### Props
|
2
2
|
|
3
|
+
* `display_flex` | **Type**: Boolean
|
3
4
|
* `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
4
5
|
* `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
|
5
6
|
* `grow` | **Type**: Boolean
|
@@ -10,3 +11,4 @@
|
|
10
11
|
- Setting Flex to 1 is equal to setting the grow & shrink prop to true
|
11
12
|
- Setting Flex to 0 is equal to setting the grow & shrink prop to false
|
12
13
|
- If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
|
14
|
+
- display_flex will either be true or false. If true, then the class will be applied to the kit
|
@@ -10,6 +10,7 @@ examples:
|
|
10
10
|
- flex_align: Align
|
11
11
|
- flex_gap: Gap
|
12
12
|
- flex_item: Flex Item
|
13
|
+
- flex_item_align_self: Flex Item - Align Self
|
13
14
|
|
14
15
|
|
15
16
|
|
@@ -24,3 +25,4 @@ examples:
|
|
24
25
|
- flex_align: Align
|
25
26
|
- flex_gap: Gap
|
26
27
|
- flex_item_example: Flex Item
|
28
|
+
- flex_item_align_self: Flex Item - Align Self
|
@@ -7,3 +7,4 @@ export { default as FlexJustify } from './_flex_justify.jsx'
|
|
7
7
|
export { default as FlexAlign } from './_flex_align.jsx'
|
8
8
|
export { default as FlexGap } from './_flex_gap.jsx'
|
9
9
|
export { default as FlexItemExample } from './_flex_item_example.jsx'
|
10
|
+
export { default as FlexItemAlignSelf } from './_flex_item_align_self.jsx'
|
@@ -48,6 +48,10 @@ module Playbook
|
|
48
48
|
values: %w[start center end stretch baseline none],
|
49
49
|
default: "none"
|
50
50
|
|
51
|
+
prop :align_self, type: Playbook::Props::Enum,
|
52
|
+
values: %w[start end center stretch none],
|
53
|
+
default: "none"
|
54
|
+
|
51
55
|
prop :wrap, type: Playbook::Props::Boolean,
|
52
56
|
default: false
|
53
57
|
|
@@ -62,7 +66,8 @@ module Playbook
|
|
62
66
|
spacing_class,
|
63
67
|
gap_class,
|
64
68
|
row_gap_class,
|
65
|
-
column_gap_class
|
69
|
+
column_gap_class,
|
70
|
+
align_self_class)
|
66
71
|
end
|
67
72
|
|
68
73
|
private
|
@@ -115,6 +120,14 @@ module Playbook
|
|
115
120
|
end
|
116
121
|
end
|
117
122
|
|
123
|
+
def align_self_class
|
124
|
+
if align_self == "none"
|
125
|
+
nil
|
126
|
+
else
|
127
|
+
"align_self_#{align_self}"
|
128
|
+
end
|
129
|
+
end
|
130
|
+
|
118
131
|
def wrap_class
|
119
132
|
wrap ? "wrap" : nil
|
120
133
|
end
|
@@ -19,8 +19,15 @@ module Playbook
|
|
19
19
|
values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
|
20
20
|
default: "none"
|
21
21
|
|
22
|
+
prop :align_self, type: Playbook::Props::Enum,
|
23
|
+
values: %w[start center end stretch] + [nil],
|
24
|
+
default: nil
|
25
|
+
|
26
|
+
prop :display_flex, type: Playbook::Props::Boolean,
|
27
|
+
default: false
|
28
|
+
|
22
29
|
def classname
|
23
|
-
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class + order_class
|
30
|
+
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class, display_flex_class) + overflow_class + order_class + align_self_class
|
24
31
|
end
|
25
32
|
|
26
33
|
def style_value
|
@@ -29,6 +36,14 @@ module Playbook
|
|
29
36
|
|
30
37
|
private
|
31
38
|
|
39
|
+
def align_self_class
|
40
|
+
align_self ? "align_self_#{align_self}" : ""
|
41
|
+
end
|
42
|
+
|
43
|
+
def display_flex_class
|
44
|
+
display_flex ? "display_flex" : nil
|
45
|
+
end
|
46
|
+
|
32
47
|
def fixed_size_class
|
33
48
|
fixed_size.present? ? "fixed_size" : nil
|
34
49
|
end
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
# rubocop:disable Style/StringConcatenation, Style/HashLikeCase
|
4
|
+
|
3
5
|
require "open-uri"
|
4
6
|
|
5
7
|
module Playbook
|
@@ -135,3 +137,5 @@ module Playbook
|
|
135
137
|
end
|
136
138
|
end
|
137
139
|
end
|
140
|
+
|
141
|
+
# rubocop:enable Style/StringConcatenation, Style/HashLikeCase
|
@@ -25,7 +25,8 @@ type LineGraphProps = {
|
|
25
25
|
legend?: boolean,
|
26
26
|
toggleLegendClick?: boolean,
|
27
27
|
height?: string,
|
28
|
-
|
28
|
+
colors: array,
|
29
|
+
}
|
29
30
|
|
30
31
|
export default class LineGraph extends React.Component<LineGraphProps> {
|
31
32
|
static defaultProps = {
|
@@ -52,11 +53,13 @@ export default class LineGraph extends React.Component<LineGraphProps> {
|
|
52
53
|
legend,
|
53
54
|
toggleLegendClick,
|
54
55
|
height,
|
56
|
+
colors = [],
|
55
57
|
} = this.props
|
56
58
|
|
57
59
|
new pbChart(`.${className}`, {
|
58
60
|
axisTitle: axisTitle,
|
59
61
|
chartData: chartData,
|
62
|
+
colors: colors,
|
60
63
|
id: id,
|
61
64
|
pointStart: pointStart,
|
62
65
|
subtitle: subTitle,
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<% data = [{
|
2
|
+
name: 'Installation',
|
3
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
|
4
|
+
}, {
|
5
|
+
name: 'Manufacturing',
|
6
|
+
data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434]
|
7
|
+
}, {
|
8
|
+
name: 'Sales & Distribution',
|
9
|
+
data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387]
|
10
|
+
}, {
|
11
|
+
name: 'Project Development',
|
12
|
+
data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227]
|
13
|
+
}, {
|
14
|
+
name: 'Other',
|
15
|
+
data: [nil, nil, nil, 3112, 4989, 5816, 15274, 18111]
|
16
|
+
}] %>
|
17
|
+
|
18
|
+
<%= pb_rails("line_graph", props: {
|
19
|
+
id: "line-colors",
|
20
|
+
gradient: false,
|
21
|
+
chart_data: data,
|
22
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
23
|
+
title: 'Line Graph with Custom Data Colors',
|
24
|
+
axis_title: 'Number of Employees',
|
25
|
+
colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
|
26
|
+
}) %>
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import LineGraph from '../_line_graph'
|
4
|
+
|
5
|
+
const data = [{
|
6
|
+
name: 'Installation',
|
7
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
|
8
|
+
}, {
|
9
|
+
name: 'Manufacturing',
|
10
|
+
data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434],
|
11
|
+
}, {
|
12
|
+
name: 'Sales & Distribution',
|
13
|
+
data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387],
|
14
|
+
}, {
|
15
|
+
name: 'Project Development',
|
16
|
+
data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227],
|
17
|
+
}, {
|
18
|
+
name: 'Other',
|
19
|
+
data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
|
20
|
+
}]
|
21
|
+
|
22
|
+
const LineGraphColors = (props) => (
|
23
|
+
<div>
|
24
|
+
<LineGraph
|
25
|
+
axisTitle="Number of Employees"
|
26
|
+
chartData={data}
|
27
|
+
colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
|
28
|
+
id="line-colors"
|
29
|
+
title="Line Graph with Custom Data Colors"
|
30
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
31
|
+
yAxisMin={0}
|
32
|
+
{...props}
|
33
|
+
/>
|
34
|
+
</div>
|
35
|
+
)
|
36
|
+
|
37
|
+
export default LineGraphColors
|
@@ -5,6 +5,7 @@ examples:
|
|
5
5
|
- line_graph_legend: Legend
|
6
6
|
- line_graph_legend_nonclickable: Legend Nonclickable
|
7
7
|
- line_graph_height: Height
|
8
|
+
- line_graph_colors: Color Overrides
|
8
9
|
|
9
10
|
|
10
11
|
react:
|
@@ -12,3 +13,4 @@ examples:
|
|
12
13
|
- line_graph_legend: Legend
|
13
14
|
- line_graph_legend_nonclickable: Legend Nonclickable
|
14
15
|
- line_graph_height: Height
|
16
|
+
- line_graph_colors: Color Overrides
|
@@ -2,3 +2,4 @@ export { default as LineGraphDefault } from './_line_graph_default.jsx'
|
|
2
2
|
export { default as LineGraphLegend } from './_line_graph_legend.jsx'
|
3
3
|
export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
|
4
4
|
export { default as LineGraphHeight } from './_line_graph_height.jsx'
|
5
|
+
export { default as LineGraphColors } from './_line_graph_colors.jsx'
|
@@ -20,6 +20,8 @@ module Playbook
|
|
20
20
|
prop :toggle_legend_click, type: Playbook::Props::Boolean,
|
21
21
|
default: true
|
22
22
|
prop :height
|
23
|
+
prop :colors, type: Playbook::Props::Array,
|
24
|
+
default: []
|
23
25
|
|
24
26
|
def chart_type
|
25
27
|
gradient ? "area" : "line"
|
@@ -41,6 +43,7 @@ module Playbook
|
|
41
43
|
legend: legend,
|
42
44
|
toggleLegendClick: toggle_legend_click,
|
43
45
|
height: height,
|
46
|
+
colors: colors,
|
44
47
|
}
|
45
48
|
end
|
46
49
|
|
@@ -43,6 +43,7 @@ module Playbook
|
|
43
43
|
dark ? "dark" : nil
|
44
44
|
end
|
45
45
|
|
46
|
+
# rubocop:disable Style/CaseLikeIf
|
46
47
|
def layout_class
|
47
48
|
if layout == "right"
|
48
49
|
"layout_right"
|
@@ -52,6 +53,7 @@ module Playbook
|
|
52
53
|
""
|
53
54
|
end
|
54
55
|
end
|
56
|
+
# rubocop:enable Style/CaseLikeIf
|
55
57
|
|
56
58
|
def size_class
|
57
59
|
size ? "large" : nil
|
@@ -1,5 +1,6 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
# rubocop:disable Style/SingleArgumentDig, Style/HashLikeCase
|
3
4
|
module Playbook
|
4
5
|
module PbSource
|
5
6
|
class Source < Playbook::KitBase
|
@@ -59,3 +60,5 @@ module Playbook
|
|
59
60
|
end
|
60
61
|
end
|
61
62
|
end
|
63
|
+
|
64
|
+
# rubocop:enable Style/SingleArgumentDig, Style/HashLikeCase
|