playbook_ui 4.11.0.pre.alpha.pre.2 → 4.11.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (101) hide show
  1. checksums.yaml +4 -4
  2. data/app/controllers/playbook/pages_controller.rb +1 -1
  3. data/app/helpers/playbook/pb_doc_helper.rb +55 -7
  4. data/app/pb_kits/playbook/_playbook.scss +4 -1
  5. data/app/pb_kits/playbook/data/menu.yml +3 -0
  6. data/app/pb_kits/playbook/index.js +3 -0
  7. data/app/pb_kits/playbook/packs/examples.js +6 -0
  8. data/app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss +8 -5
  9. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
  10. data/app/pb_kits/playbook/pb_card/_card.html.erb +2 -1
  11. data/app/pb_kits/playbook/pb_card/_card.jsx +3 -0
  12. data/app/pb_kits/playbook/pb_card/_card.scss +2 -0
  13. data/app/pb_kits/playbook/pb_card/card.rb +8 -1
  14. data/app/pb_kits/playbook/pb_card/docs/_card_content.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_card/docs/_card_dark.html.erb +3 -0
  16. data/app/pb_kits/playbook/pb_card/docs/_card_dark.jsx +12 -0
  17. data/app/pb_kits/playbook/pb_card/docs/example.yml +2 -0
  18. data/app/pb_kits/playbook/pb_card/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_filter/_filter.jsx +192 -56
  20. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +2 -1
  21. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +47 -5
  22. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +52 -0
  24. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +40 -0
  25. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +48 -0
  26. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx +51 -0
  27. data/app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb +18 -0
  28. data/app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx +48 -0
  29. data/app/pb_kits/playbook/pb_filter/docs/example.yml +6 -0
  30. data/app/pb_kits/playbook/pb_filter/docs/index.js +4 -0
  31. data/app/pb_kits/playbook/pb_filter/filter.rb +12 -1
  32. data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +37 -26
  33. data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +13 -9
  34. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.html.erb +19 -15
  35. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +46 -45
  36. data/app/pb_kits/playbook/pb_flex/docs/_flex_horizontal.html.erb +54 -50
  37. data/app/pb_kits/playbook/pb_flex/docs/_flex_horizontal.jsx +172 -171
  38. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb +19 -15
  39. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx +48 -47
  40. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.html.erb +19 -15
  41. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +51 -50
  42. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +27 -23
  43. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +93 -92
  44. data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.html.erb +68 -64
  45. data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.jsx +192 -191
  46. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.html.erb +31 -27
  47. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +83 -82
  48. data/app/pb_kits/playbook/pb_kit/dateTime.js +23 -1
  49. data/app/pb_kits/playbook/pb_kit/pb_date_time.rb +17 -0
  50. data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb +19 -0
  51. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +96 -0
  52. data/app/pb_kits/playbook/pb_logistic/_logistic.scss +7 -0
  53. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.html.erb +27 -0
  54. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.jsx +39 -0
  55. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.html.erb +24 -0
  56. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.jsx +35 -0
  57. data/app/pb_kits/playbook/pb_logistic/docs/example.yml +11 -0
  58. data/app/pb_kits/playbook/pb_logistic/docs/index.js +2 -0
  59. data/app/pb_kits/playbook/pb_logistic/logistic.rb +31 -0
  60. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +8 -2
  61. data/app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss +9 -1
  62. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.html.erb +16 -0
  63. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +134 -0
  64. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +33 -0
  65. data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_dark.html.erb +72 -0
  66. data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_dark.jsx +81 -0
  67. data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.html.erb +64 -0
  68. data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx +73 -0
  69. data/app/pb_kits/playbook/pb_time_range_inline/docs/example.yml +11 -0
  70. data/app/pb_kits/playbook/pb_time_range_inline/docs/index.js +2 -0
  71. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb +72 -0
  72. data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +2 -1
  73. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +30 -9
  74. data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_with_context.html.erb → _typeahead_with_context_dark.html.erb} +2 -1
  75. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -1
  76. data/app/pb_kits/playbook/pb_typeahead/index.js +6 -4
  77. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +10 -2
  78. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.html.erb +7 -0
  79. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +66 -0
  80. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss +11 -0
  81. data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb +9 -0
  82. data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx +48 -0
  83. data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_dark.html.erb +1 -0
  84. data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_dark.jsx +14 -0
  85. data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_day_only.html.erb +1 -0
  86. data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_day_only.jsx +14 -0
  87. data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.html.erb +3 -0
  88. data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.jsx +14 -0
  89. data/app/pb_kits/playbook/pb_weekday_stacked/docs/example.yml +15 -0
  90. data/app/pb_kits/playbook/pb_weekday_stacked/docs/index.js +4 -0
  91. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb +61 -0
  92. data/app/pb_kits/playbook/tokens/_colors.scss +2 -2
  93. data/app/views/layouts/playbook/_sidebar.html.erb +26 -10
  94. data/app/views/playbook/pages/kit_category_show.html.erb +14 -0
  95. data/app/views/playbook/pages/kit_show.html.erb +33 -0
  96. data/app/views/playbook/pages/kits.html.erb +12 -0
  97. data/lib/playbook/version.rb +1 -1
  98. metadata +52 -24
  99. data/app/views/playbook/pages/kit_category_show.html.slim +0 -10
  100. data/app/views/playbook/pages/kit_show.html.slim +0 -23
  101. data/app/views/playbook/pages/kits.html.slim +0 -10
data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.html.erb CHANGED
@@ -1,64 +1,68 @@
1
- <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
2
-
3
- <%= pb_rails("flex", props: {classname: "tall", vertical: "top"}) do %>
4
- <%= pb_rails("flex/flex_item") do %>1<% end %>
5
- <%= pb_rails("flex/flex_item") do %>2<% end %>
6
- <%= pb_rails("flex/flex_item") do %>3<% end %>
7
- <%= pb_rails("flex/flex_item") do %>4<% end %>
8
- <% end %>
9
-
10
- <br/><br/>
11
-
12
- <%= pb_rails("flex", props: {classname: "tall", vertical: "center"}) do %>
13
- <%= pb_rails("flex/flex_item") do %>1<% end %>
14
- <%= pb_rails("flex/flex_item") do %>2<% end %>
15
- <%= pb_rails("flex/flex_item") do %>3<% end %>
16
- <%= pb_rails("flex/flex_item") do %>4<% end %>
17
- <% end %>
18
-
19
- <br/><br/>
20
-
21
- <%= pb_rails("flex", props: {classname: "tall", vertical: "bottom"}) do %>
22
- <%= pb_rails("flex/flex_item") do %>1<% end %>
23
- <%= pb_rails("flex/flex_item") do %>2<% end %>
24
- <%= pb_rails("flex/flex_item") do %>3<% end %>
25
- <%= pb_rails("flex/flex_item") do %>4<% end %>
26
- <% end %>
27
-
28
- <br/><br/>
29
-
30
- <%= pb_rails("flex", props: {classname: "tall", vertical: "stretch"}) do %>
31
- <%= pb_rails("flex/flex_item") do %>1<% end %>
32
- <%= pb_rails("flex/flex_item") do %>2<% end %>
33
- <%= pb_rails("flex/flex_item") do %>3<% end %>
34
- <%= pb_rails("flex/flex_item") do %>4<% end %>
35
- <% end %>
36
-
37
- <br/><br/>
38
-
39
- <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
40
-
41
- <%= pb_rails("flex", props: {classname: "tall", orientation: "column", vertical: "top"}) do %>
42
- <%= pb_rails("flex/flex_item") do %>1<% end %>
43
- <%= pb_rails("flex/flex_item") do %>2<% end %>
44
- <%= pb_rails("flex/flex_item") do %>3<% end %>
45
- <%= pb_rails("flex/flex_item") do %>4<% end %>
46
- <% end %>
47
-
48
- <br/><br/>
49
-
50
- <%= pb_rails("flex", props: {classname: "tall", orientation: "column", vertical: "center"}) do %>
51
- <%= pb_rails("flex/flex_item") do %>1<% end %>
52
- <%= pb_rails("flex/flex_item") do %>2<% end %>
53
- <%= pb_rails("flex/flex_item") do %>3<% end %>
54
- <%= pb_rails("flex/flex_item") do %>4<% end %>
55
- <% end %>
56
-
57
- <br/><br/>
58
-
59
- <%= pb_rails("flex", props: {classname: "tall", orientation: "column", vertical: "bottom"}) do %>
60
- <%= pb_rails("flex/flex_item") do %>1<% end %>
61
- <%= pb_rails("flex/flex_item") do %>2<% end %>
62
- <%= pb_rails("flex/flex_item") do %>3<% end %>
63
- <%= pb_rails("flex/flex_item") do %>4<% end %>
64
- <% end %>
1
+ <div class="flex-doc-example">
2
+
3
+ <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
4
+
5
+ <%= pb_rails("flex", props: {classname: "tall", vertical: "top"}) do %>
6
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
7
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
8
+ <%= pb_rails("flex/flex_item") do %>3<% end %>
9
+ <%= pb_rails("flex/flex_item") do %>4<% end %>
10
+ <% end %>
11
+
12
+ <br/><br/>
13
+
14
+ <%= pb_rails("flex", props: {classname: "tall", vertical: "center"}) do %>
15
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
16
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
17
+ <%= pb_rails("flex/flex_item") do %>3<% end %>
18
+ <%= pb_rails("flex/flex_item") do %>4<% end %>
19
+ <% end %>
20
+
21
+ <br/><br/>
22
+
23
+ <%= pb_rails("flex", props: {classname: "tall", vertical: "bottom"}) do %>
24
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
25
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
26
+ <%= pb_rails("flex/flex_item") do %>3<% end %>
27
+ <%= pb_rails("flex/flex_item") do %>4<% end %>
28
+ <% end %>
29
+
30
+ <br/><br/>
31
+
32
+ <%= pb_rails("flex", props: {classname: "tall", vertical: "stretch"}) do %>
33
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
34
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
35
+ <%= pb_rails("flex/flex_item") do %>3<% end %>
36
+ <%= pb_rails("flex/flex_item") do %>4<% end %>
37
+ <% end %>
38
+
39
+ <br/><br/>
40
+
41
+ <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
42
+
43
+ <%= pb_rails("flex", props: {classname: "tall", orientation: "column", vertical: "top"}) do %>
44
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
45
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
46
+ <%= pb_rails("flex/flex_item") do %>3<% end %>
47
+ <%= pb_rails("flex/flex_item") do %>4<% end %>
48
+ <% end %>
49
+
50
+ <br/><br/>
51
+
52
+ <%= pb_rails("flex", props: {classname: "tall", orientation: "column", vertical: "center"}) do %>
53
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
54
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
55
+ <%= pb_rails("flex/flex_item") do %>3<% end %>
56
+ <%= pb_rails("flex/flex_item") do %>4<% end %>
57
+ <% end %>
58
+
59
+ <br/><br/>
60
+
61
+ <%= pb_rails("flex", props: {classname: "tall", orientation: "column", vertical: "bottom"}) do %>
62
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
63
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
64
+ <%= pb_rails("flex/flex_item") do %>3<% end %>
65
+ <%= pb_rails("flex/flex_item") do %>4<% end %>
66
+ <% end %>
67
+
68
+ </div>
data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.jsx CHANGED
@@ -4,197 +4,198 @@ import { Flex, FlexItem, Title } from '../..'
4
4
  const FlexVertical = () => {
5
5
  return (
6
6
  <>
7
- <Title
8
- size={3}
9
- text="Row"
10
- />
11
- <br />
12
- <Title
13
- size={4}
14
- text="Top"
15
- />
16
- <br />
17
- <Flex
18
- className="bg_light tall"
19
- vertical="top"
20
- >
21
- <FlexItem>
22
- {'1'}
23
- </FlexItem>
24
- <FlexItem>
25
- {'2'}
26
- </FlexItem>
27
- <FlexItem>
28
- {'3'}
29
- </FlexItem>
30
- <FlexItem>
31
- {'4'}
32
- </FlexItem>
33
- </Flex>
34
-
35
- <br />
36
-
37
- <Title
38
- size={4}
39
- text="Center"
40
- />
41
- <br />
42
- <Flex
43
- className="bg_light tall"
44
- vertical="center"
45
- >
46
- <FlexItem>
47
- {'1'}
48
- </FlexItem>
49
- <FlexItem>
50
- {'2'}
51
- </FlexItem>
52
- <FlexItem>
53
- {'3'}
54
- </FlexItem>
55
- <FlexItem>
56
- {'4'}
57
- </FlexItem>
58
- </Flex>
59
-
60
- <br />
61
-
62
- <Title
63
- size={4}
64
- text="Bottom"
65
- />
66
- <br />
67
- <Flex
68
- className="bg_light tall"
69
- vertical="bottom"
70
- >
71
- <FlexItem>
72
- {'1'}
73
- </FlexItem>
74
- <FlexItem>
75
- {'2'}
76
- </FlexItem>
77
- <FlexItem>
78
- {'3'}
79
- </FlexItem>
80
- <FlexItem>
81
- {'4'}
82
- </FlexItem>
83
- </Flex>
84
-
85
- <br />
86
-
87
- <Title
88
- size={4}
89
- text="Stretch"
90
- />
91
- <br />
92
- <Flex
93
- className="bg_light tall"
94
- horizontal="stretch"
95
- orientation="row"
96
-
97
- >
98
- <FlexItem>
99
- {'1'}
100
- </FlexItem>
101
- <FlexItem>
102
- {'2'}
103
- </FlexItem>
104
- <FlexItem>
105
- {'3'}
106
- </FlexItem>
107
- <FlexItem>
108
- {'4'}
109
- </FlexItem>
110
- </Flex>
111
-
112
- <br />
113
- <Title
114
- size={3}
115
- text="Column"
116
- />
117
- <br />
118
- <Title
119
- size={4}
120
- text="Top"
121
- />
122
- <br />
123
- <Flex
124
- className="bg_light tall"
125
- horizontal="left"
126
- orientation="column"
127
- vertical="top"
128
-
129
- >
130
- <FlexItem>
131
- {'1'}
132
- </FlexItem>
133
- <FlexItem>
134
- {'2'}
135
- </FlexItem>
136
- <FlexItem>
137
- {'3'}
138
- </FlexItem>
139
- <FlexItem>
140
- {'4'}
141
- </FlexItem>
142
- </Flex>
143
-
144
- <br />
145
- <Title
146
- size={4}
147
- text="Center"
148
- />
149
- <br />
150
- <Flex
151
- className="bg_light tall"
152
- horizontal="center"
153
- orientation="column"
154
- vertical="left"
155
-
156
- >
157
- <FlexItem>
158
- {'1'}
159
- </FlexItem>
160
- <FlexItem>
161
- {'2'}
162
- </FlexItem>
163
- <FlexItem>
164
- {'3'}
165
- </FlexItem>
166
- <FlexItem>
167
- {'4'}
168
- </FlexItem>
169
- </Flex>
170
-
171
- <br />
172
- <Title
173
- size={4}
174
- text="Bottom"
175
- />
176
- <br />
177
- <Flex
178
- className="bg_light tall"
179
- horizontal="bottom"
180
- orientation="column"
181
- vertical="left"
182
-
183
- >
184
- <FlexItem>
185
- {'1'}
186
- </FlexItem>
187
- <FlexItem>
188
- {'2'}
189
- </FlexItem>
190
- <FlexItem>
191
- {'3'}
192
- </FlexItem>
193
- <FlexItem>
194
- {'4'}
195
- </FlexItem>
196
- </Flex>
197
-
7
+ <div className="flex-doc-example">
8
+ <Title
9
+ size={3}
10
+ text="Row"
11
+ />
12
+ <br />
13
+ <Title
14
+ size={4}
15
+ text="Top"
16
+ />
17
+ <br />
18
+ <Flex
19
+ className="bg_light tall"
20
+ vertical="top"
21
+ >
22
+ <FlexItem>
23
+ {'1'}
24
+ </FlexItem>
25
+ <FlexItem>
26
+ {'2'}
27
+ </FlexItem>
28
+ <FlexItem>
29
+ {'3'}
30
+ </FlexItem>
31
+ <FlexItem>
32
+ {'4'}
33
+ </FlexItem>
34
+ </Flex>
35
+
36
+ <br />
37
+
38
+ <Title
39
+ size={4}
40
+ text="Center"
41
+ />
42
+ <br />
43
+ <Flex
44
+ className="bg_light tall"
45
+ vertical="center"
46
+ >
47
+ <FlexItem>
48
+ {'1'}
49
+ </FlexItem>
50
+ <FlexItem>
51
+ {'2'}
52
+ </FlexItem>
53
+ <FlexItem>
54
+ {'3'}
55
+ </FlexItem>
56
+ <FlexItem>
57
+ {'4'}
58
+ </FlexItem>
59
+ </Flex>
60
+
61
+ <br />
62
+
63
+ <Title
64
+ size={4}
65
+ text="Bottom"
66
+ />
67
+ <br />
68
+ <Flex
69
+ className="bg_light tall"
70
+ vertical="bottom"
71
+ >
72
+ <FlexItem>
73
+ {'1'}
74
+ </FlexItem>
75
+ <FlexItem>
76
+ {'2'}
77
+ </FlexItem>
78
+ <FlexItem>
79
+ {'3'}
80
+ </FlexItem>
81
+ <FlexItem>
82
+ {'4'}
83
+ </FlexItem>
84
+ </Flex>
85
+
86
+ <br />
87
+
88
+ <Title
89
+ size={4}
90
+ text="Stretch"
91
+ />
92
+ <br />
93
+ <Flex
94
+ className="bg_light tall"
95
+ horizontal="stretch"
96
+ orientation="row"
97
+
98
+ >
99
+ <FlexItem>
100
+ {'1'}
101
+ </FlexItem>
102
+ <FlexItem>
103
+ {'2'}
104
+ </FlexItem>
105
+ <FlexItem>
106
+ {'3'}
107
+ </FlexItem>
108
+ <FlexItem>
109
+ {'4'}
110
+ </FlexItem>
111
+ </Flex>
112
+
113
+ <br />
114
+ <Title
115
+ size={3}
116
+ text="Column"
117
+ />
118
+ <br />
119
+ <Title
120
+ size={4}
121
+ text="Top"
122
+ />
123
+ <br />
124
+ <Flex
125
+ className="bg_light tall"
126
+ horizontal="left"
127
+ orientation="column"
128
+ vertical="top"
129
+
130
+ >
131
+ <FlexItem>
132
+ {'1'}
133
+ </FlexItem>
134
+ <FlexItem>
135
+ {'2'}
136
+ </FlexItem>
137
+ <FlexItem>
138
+ {'3'}
139
+ </FlexItem>
140
+ <FlexItem>
141
+ {'4'}
142
+ </FlexItem>
143
+ </Flex>
144
+
145
+ <br />
146
+ <Title
147
+ size={4}
148
+ text="Center"
149
+ />
150
+ <br />
151
+ <Flex
152
+ className="bg_light tall"
153
+ horizontal="center"
154
+ orientation="column"
155
+ vertical="left"
156
+
157
+ >
158
+ <FlexItem>
159
+ {'1'}
160
+ </FlexItem>
161
+ <FlexItem>
162
+ {'2'}
163
+ </FlexItem>
164
+ <FlexItem>
165
+ {'3'}
166
+ </FlexItem>
167
+ <FlexItem>
168
+ {'4'}
169
+ </FlexItem>
170
+ </Flex>
171
+
172
+ <br />
173
+ <Title
174
+ size={4}
175
+ text="Bottom"
176
+ />
177
+ <br />
178
+ <Flex
179
+ className="bg_light tall"
180
+ horizontal="bottom"
181
+ orientation="column"
182
+ vertical="left"
183
+
184
+ >
185
+ <FlexItem>
186
+ {'1'}
187
+ </FlexItem>
188
+ <FlexItem>
189
+ {'2'}
190
+ </FlexItem>
191
+ <FlexItem>
192
+ {'3'}
193
+ </FlexItem>
194
+ <FlexItem>
195
+ {'4'}
196
+ </FlexItem>
197
+ </Flex>
198
+ </div>
198
199
  </>
199
200
  )
200
201
  }