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_filter/templates/_default.html.erb CHANGED
@@ -6,14 +6,18 @@
6
6
  <%= render partial: 'pb_filter/templates/core', locals: { object: object} %>
7
7
  <% end %>
8
8
 
9
- <%= pb_rails("popover", props: {trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
10
- <%= capture(&object.children) %>
11
- <% end %>
9
+ <% if object.template != "sort_only"%>
10
+ <%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
11
+ <%= capture(&object.children) %>
12
+ <% end %>
13
+ <%end%>
12
14
 
13
- <%= pb_rails("popover", props: { trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom'}) do %>
14
- <%= pb_rails("list") do %>
15
- <% object.sort_menu.each do |item| %>
16
- <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
17
- <% end %>
18
- <% end %>
15
+ <% if object.template != "filter_only"%>
16
+ <%= pb_rails("popover", props: { close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom'}) do %>
17
+ <%= pb_rails("list") do %>
18
+ <% object.sort_menu.each do |item| %>
19
+ <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
20
+ <% end %>
21
+ <% end %>
22
+ <% end %>
19
23
  <% end %>
data/app/pb_kits/playbook/pb_flex/docs/_flex_default.html.erb CHANGED
@@ -1,19 +1,23 @@
1
- <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
1
+ <div class="flex-doc-example">
2
+
3
+ <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
2
4
 
3
- <%= pb_rails("flex") do %>
4
- <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
5
- <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
6
- <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
7
- <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
8
- <% end %>
5
+ <%= pb_rails("flex") do %>
6
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
7
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
8
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
9
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
10
+ <% end %>
9
11
 
10
- <br/><br/>
12
+ <br/><br/>
11
13
 
12
- <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
14
+ <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
13
15
 
14
- <%= pb_rails("flex", props: {orientation: "column"}) do %>
15
- <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
16
- <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
17
- <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
18
- <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
19
- <% end %>
16
+ <%= pb_rails("flex", props: {orientation: "column"}) do %>
17
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
18
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
19
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
20
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
21
+ <% end %>
22
+
23
+ </div>
data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx CHANGED
@@ -4,52 +4,53 @@ import { Flex, FlexItem, Title } from '../../'
4
4
  const FlexDefault = () => {
5
5
  return (
6
6
  <>
7
- <Title
8
- size={4}
9
- text="Row"
10
- />
11
- <br />
12
- <Flex
13
- orientation="row"
14
- >
15
- <FlexItem>
16
- {'1'}
17
- </FlexItem>
18
- <FlexItem>
19
- {'2'}
20
- </FlexItem>
21
- <FlexItem>
22
- {'3'}
23
- </FlexItem>
24
- <FlexItem>
25
- {'4'}
26
- </FlexItem>
27
- </Flex>
28
-
29
- <br />
30
- <Title
31
- size={4}
32
- text="Column"
33
- />
34
- <br />
35
- <Flex
36
- orientation="column"
37
- vertical="left"
38
- >
39
- <FlexItem>
40
- {'1'}
41
- </FlexItem>
42
- <FlexItem>
43
- {'2'}
44
- </FlexItem>
45
- <FlexItem>
46
- {'3'}
47
- </FlexItem>
48
- <FlexItem>
49
- {'4'}
50
- </FlexItem>
51
- </Flex>
7
+ <div className="flex-doc-example">
8
+ <Title
9
+ size={4}
10
+ text="Row"
11
+ />
12
+ <br />
13
+ <Flex
14
+ orientation="row"
15
+ >
16
+ <FlexItem>
17
+ {'1'}
18
+ </FlexItem>
19
+ <FlexItem>
20
+ {'2'}
21
+ </FlexItem>
22
+ <FlexItem>
23
+ {'3'}
24
+ </FlexItem>
25
+ <FlexItem>
26
+ {'4'}
27
+ </FlexItem>
28
+ </Flex>
52
29
 
30
+ <br />
31
+ <Title
32
+ size={4}
33
+ text="Column"
34
+ />
35
+ <br />
36
+ <Flex
37
+ orientation="column"
38
+ vertical="left"
39
+ >
40
+ <FlexItem>
41
+ {'1'}
42
+ </FlexItem>
43
+ <FlexItem>
44
+ {'2'}
45
+ </FlexItem>
46
+ <FlexItem>
47
+ {'3'}
48
+ </FlexItem>
49
+ <FlexItem>
50
+ {'4'}
51
+ </FlexItem>
52
+ </Flex>
53
+ </div>
53
54
  </>
54
55
  )
55
56
  }
data/app/pb_kits/playbook/pb_flex/docs/_flex_horizontal.html.erb CHANGED
@@ -1,64 +1,68 @@
1
- <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
1
+ <div class="flex-doc-example">
2
+
3
+ <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
2
4
 
3
- <%= pb_rails("flex", props: {horizontal: "left"}) 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 %>
5
+ <%= pb_rails("flex", props: {horizontal: "left"}) 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 %>
9
11
 
10
- <br/><br/>
12
+ <br/><br/>
11
13
 
12
- <%= pb_rails("flex", props: {horizontal: "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 %>
14
+ <%= pb_rails("flex", props: {horizontal: "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 %>
18
20
 
19
- <br/><br/>
21
+ <br/><br/>
20
22
 
21
- <%= pb_rails("flex", props: {horizontal: "right"}) 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 %>
23
+ <%= pb_rails("flex", props: {horizontal: "right"}) 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 %>
27
29
 
28
- <br/><br/>
30
+ <br/><br/>
29
31
 
30
- <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
32
+ <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
31
33
 
32
- <%= pb_rails("flex", props: {orientation: "column", horizontal: "left"}) 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 %>
34
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "left"}) do %>
35
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
36
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
37
+ <%= pb_rails("flex/flex_item") do %>3<% end %>
38
+ <%= pb_rails("flex/flex_item") do %>4<% end %>
39
+ <% end %>
38
40
 
39
- <br/><br/>
41
+ <br/><br/>
40
42
 
41
- <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) 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 %>
43
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) 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 %>
47
49
 
48
- <br/><br/>
50
+ <br/><br/>
49
51
 
50
- <%= pb_rails("flex", props: {orientation: "column", horizontal: "right"}) 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 %>
52
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "right"}) 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 %>
56
58
 
57
- <br/><br/>
59
+ <br/><br/>
58
60
 
59
- <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch"}) 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 %>
61
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch"}) 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_horizontal.jsx CHANGED
@@ -4,189 +4,190 @@ import { Flex, FlexItem, Title } from '../..'
4
4
  const FlexHorizontal = () => {
5
5
  return (
6
6
  <>
7
- <Title
8
- size={3}
9
- text="Row"
10
- />
11
- <br />
12
- <Title
13
- size={4}
14
- text="Left"
15
- />
16
- <br />
17
- <Flex
18
- horizontal="left"
19
- orientation="row"
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>
7
+ <div className="flex-doc-example">
8
+ <Title
9
+ size={3}
10
+ text="Row"
11
+ />
12
+ <br />
13
+ <Title
14
+ size={4}
15
+ text="Left"
16
+ />
17
+ <br />
18
+ <Flex
19
+ horizontal="left"
20
+ orientation="row"
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>
34
35
 
35
- <br />
36
+ <br />
36
37
 
37
- <Title
38
- size={4}
39
- text="Center"
40
- />
41
- <br />
42
- <Flex
43
- horizontal="center"
44
- orientation="row"
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>
38
+ <Title
39
+ size={4}
40
+ text="Center"
41
+ />
42
+ <br />
43
+ <Flex
44
+ horizontal="center"
45
+ orientation="row"
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>
59
60
 
60
- <br />
61
+ <br />
61
62
 
62
- <Title
63
- size={4}
64
- text="Right"
65
- />
66
- <br />
67
- <Flex
68
- horizontal="right"
69
- orientation="row"
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>
63
+ <Title
64
+ size={4}
65
+ text="Right"
66
+ />
67
+ <br />
68
+ <Flex
69
+ horizontal="right"
70
+ orientation="row"
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>
84
85
 
85
- <br />
86
+ <br />
86
87
 
87
- <Title
88
- size={3}
89
- text="Column"
90
- />
91
- <br />
92
- <Title
93
- size={4}
94
- text="Left"
95
- />
96
- <br />
97
- <Flex
98
- orientation="column"
99
- vertical="left"
100
- >
101
- <FlexItem>
102
- {'1'}
103
- </FlexItem>
104
- <FlexItem>
105
- {'2'}
106
- </FlexItem>
107
- <FlexItem>
108
- {'3'}
109
- </FlexItem>
110
- <FlexItem>
111
- {'4'}
112
- </FlexItem>
113
- </Flex>
88
+ <Title
89
+ size={3}
90
+ text="Column"
91
+ />
92
+ <br />
93
+ <Title
94
+ size={4}
95
+ text="Left"
96
+ />
97
+ <br />
98
+ <Flex
99
+ orientation="column"
100
+ vertical="left"
101
+ >
102
+ <FlexItem>
103
+ {'1'}
104
+ </FlexItem>
105
+ <FlexItem>
106
+ {'2'}
107
+ </FlexItem>
108
+ <FlexItem>
109
+ {'3'}
110
+ </FlexItem>
111
+ <FlexItem>
112
+ {'4'}
113
+ </FlexItem>
114
+ </Flex>
114
115
 
115
- <br />
116
+ <br />
116
117
 
117
- <Title
118
- size={4}
119
- text="Center"
120
- />
121
- <br />
122
- <Flex
123
- orientation="column"
124
- vertical="center"
125
- >
126
- <FlexItem>
127
- {'1'}
128
- </FlexItem>
129
- <FlexItem>
130
- {'2'}
131
- </FlexItem>
132
- <FlexItem>
133
- {'3'}
134
- </FlexItem>
135
- <FlexItem>
136
- {'4'}
137
- </FlexItem>
138
- </Flex>
118
+ <Title
119
+ size={4}
120
+ text="Center"
121
+ />
122
+ <br />
123
+ <Flex
124
+ orientation="column"
125
+ vertical="center"
126
+ >
127
+ <FlexItem>
128
+ {'1'}
129
+ </FlexItem>
130
+ <FlexItem>
131
+ {'2'}
132
+ </FlexItem>
133
+ <FlexItem>
134
+ {'3'}
135
+ </FlexItem>
136
+ <FlexItem>
137
+ {'4'}
138
+ </FlexItem>
139
+ </Flex>
139
140
 
140
- <br />
141
+ <br />
141
142
 
142
- <Title
143
- size={4}
144
- text="Right"
145
- />
146
- <br />
147
- <Flex
148
- orientation="column"
149
- vertical="right"
150
- >
151
- <FlexItem>
152
- {'1'}
153
- </FlexItem>
154
- <FlexItem>
155
- {'2'}
156
- </FlexItem>
157
- <FlexItem>
158
- {'3'}
159
- </FlexItem>
160
- <FlexItem>
161
- {'4'}
162
- </FlexItem>
163
- </Flex>
143
+ <Title
144
+ size={4}
145
+ text="Right"
146
+ />
147
+ <br />
148
+ <Flex
149
+ orientation="column"
150
+ vertical="right"
151
+ >
152
+ <FlexItem>
153
+ {'1'}
154
+ </FlexItem>
155
+ <FlexItem>
156
+ {'2'}
157
+ </FlexItem>
158
+ <FlexItem>
159
+ {'3'}
160
+ </FlexItem>
161
+ <FlexItem>
162
+ {'4'}
163
+ </FlexItem>
164
+ </Flex>
164
165
 
165
- <br />
166
-
167
- <Title
168
- size={4}
169
- text="Stretch"
170
- />
171
- <br />
172
- <Flex
173
- orientation="column"
174
- vertical="stretch"
175
- >
176
- <FlexItem>
177
- {'1'}
178
- </FlexItem>
179
- <FlexItem>
180
- {'2'}
181
- </FlexItem>
182
- <FlexItem>
183
- {'3'}
184
- </FlexItem>
185
- <FlexItem>
186
- {'4'}
187
- </FlexItem>
188
- </Flex>
166
+ <br />
189
167
 
168
+ <Title
169
+ size={4}
170
+ text="Stretch"
171
+ />
172
+ <br />
173
+ <Flex
174
+ orientation="column"
175
+ vertical="stretch"
176
+ >
177
+ <FlexItem>
178
+ {'1'}
179
+ </FlexItem>
180
+ <FlexItem>
181
+ {'2'}
182
+ </FlexItem>
183
+ <FlexItem>
184
+ {'3'}
185
+ </FlexItem>
186
+ <FlexItem>
187
+ {'4'}
188
+ </FlexItem>
189
+ </Flex>
190
+ </div>
190
191
  </>
191
192
  )
192
193
  }