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_inline.html.erb CHANGED
@@ -1,19 +1,23 @@
1
- <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
1
+ <div class="flex-doc-example">
2
2
 
3
- <%= pb_rails("flex", props: {inline: true}) 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 %>
3
+ <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
9
4
 
10
- <br/><br/>
5
+ <%= pb_rails("flex", props: {inline: true}) 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
11
 
12
- <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
12
+ <br/><br/>
13
13
 
14
- <%= pb_rails("flex", props: {orientation: "column", inline: true}) 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 %>
14
+ <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
15
+
16
+ <%= pb_rails("flex", props: {orientation: "column", inline: true}) do %>
17
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
18
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
19
+ <%= pb_rails("flex/flex_item") do %>3<% end %>
20
+ <%= pb_rails("flex/flex_item") do %>4<% end %>
21
+ <% end %>
22
+
23
+ </div>
data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx CHANGED
@@ -4,54 +4,55 @@ import { Flex, FlexItem, Title } from '../..'
4
4
  const FlexInline = () => {
5
5
  return (
6
6
  <>
7
- <Title
8
- size={4}
9
- text="Row"
10
- />
11
- <br />
12
- <Flex
13
- className="bg_light"
14
- inline
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>
29
-
30
- <br />
31
- <Title
32
- size={4}
33
- text="Column"
34
- />
35
- <br />
36
- <Flex
37
- className="bg_light"
38
- inline
39
- orientation="column"
40
- >
41
- <FlexItem>
42
- {'1'}
43
- </FlexItem>
44
- <FlexItem>
45
- {'2'}
46
- </FlexItem>
47
- <FlexItem>
48
- {'3'}
49
- </FlexItem>
50
- <FlexItem>
51
- {'4'}
52
- </FlexItem>
53
- </Flex>
7
+ <div className="flex-doc-example">
8
+ <Title
9
+ size={4}
10
+ text="Row"
11
+ />
12
+ <br />
13
+ <Flex
14
+ className="bg_light"
15
+ inline
16
+ >
17
+ <FlexItem>
18
+ {'1'}
19
+ </FlexItem>
20
+ <FlexItem>
21
+ {'2'}
22
+ </FlexItem>
23
+ <FlexItem>
24
+ {'3'}
25
+ </FlexItem>
26
+ <FlexItem>
27
+ {'4'}
28
+ </FlexItem>
29
+ </Flex>
54
30
 
31
+ <br />
32
+ <Title
33
+ size={4}
34
+ text="Column"
35
+ />
36
+ <br />
37
+ <Flex
38
+ className="bg_light"
39
+ inline
40
+ orientation="column"
41
+ >
42
+ <FlexItem>
43
+ {'1'}
44
+ </FlexItem>
45
+ <FlexItem>
46
+ {'2'}
47
+ </FlexItem>
48
+ <FlexItem>
49
+ {'3'}
50
+ </FlexItem>
51
+ <FlexItem>
52
+ {'4'}
53
+ </FlexItem>
54
+ </Flex>
55
+ </div>
55
56
  </>
56
57
  )
57
58
  }
data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.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", props: {reverse: true}) 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: {reverse: true}) 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("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", reverse: true}) 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 %>
16
+ <%= pb_rails("flex", props: {orientation: "column", reverse: true}) do %>
17
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
18
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
19
+ <%= pb_rails("flex/flex_item") do %>3<% end %>
20
+ <%= pb_rails("flex/flex_item") do %>4<% end %>
21
+ <% end %>
22
+
23
+ </div>
data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx CHANGED
@@ -4,57 +4,58 @@ import { Flex, FlexItem, Title } from '../..'
4
4
  const FlexReverse = () => {
5
5
  return (
6
6
  <>
7
- <Title
8
- size={4}
9
- text="Row"
10
- />
11
- <br />
12
- <Flex
13
- className="bg_light"
14
- horizontal="left"
15
- orientation="row"
16
- reverse
17
- >
18
- <FlexItem>
19
- {'1'}
20
- </FlexItem>
21
- <FlexItem>
22
- {'2'}
23
- </FlexItem>
24
- <FlexItem>
25
- {'3'}
26
- </FlexItem>
27
- <FlexItem>
28
- {'4'}
29
- </FlexItem>
30
- </Flex>
31
-
32
- <br />
33
- <Title
34
- size={4}
35
- text="Column"
36
- />
37
- <br />
38
- <Flex
39
- className="bg_light"
40
- orientation="column"
41
- reverse
42
- vertical="left"
43
- >
44
- <FlexItem>
45
- {'1'}
46
- </FlexItem>
47
- <FlexItem>
48
- {'2'}
49
- </FlexItem>
50
- <FlexItem>
51
- {'3'}
52
- </FlexItem>
53
- <FlexItem>
54
- {'4'}
55
- </FlexItem>
56
- </Flex>
7
+ <div className="flex-doc-example">
8
+ <Title
9
+ size={4}
10
+ text="Row"
11
+ />
12
+ <br />
13
+ <Flex
14
+ className="bg_light"
15
+ horizontal="left"
16
+ orientation="row"
17
+ reverse
18
+ >
19
+ <FlexItem>
20
+ {'1'}
21
+ </FlexItem>
22
+ <FlexItem>
23
+ {'2'}
24
+ </FlexItem>
25
+ <FlexItem>
26
+ {'3'}
27
+ </FlexItem>
28
+ <FlexItem>
29
+ {'4'}
30
+ </FlexItem>
31
+ </Flex>
57
32
 
33
+ <br />
34
+ <Title
35
+ size={4}
36
+ text="Column"
37
+ />
38
+ <br />
39
+ <Flex
40
+ className="bg_light"
41
+ orientation="column"
42
+ reverse
43
+ vertical="left"
44
+ >
45
+ <FlexItem>
46
+ {'1'}
47
+ </FlexItem>
48
+ <FlexItem>
49
+ {'2'}
50
+ </FlexItem>
51
+ <FlexItem>
52
+ {'3'}
53
+ </FlexItem>
54
+ <FlexItem>
55
+ {'4'}
56
+ </FlexItem>
57
+ </Flex>
58
+ </div>
58
59
  </>
59
60
  )
60
61
  }
data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb CHANGED
@@ -1,33 +1,37 @@
1
- <%= pb_rails("title", props: {size: 4, text: "None"}) %><br/>
1
+ <div class="flex-doc-example">
2
2
 
3
- <%= pb_rails("flex", props: {classname: "flex-container"}) do %>
4
- <%= pb_rails("flex/flex_item") do %>1<% end %>
5
- <%= pb_rails("flex/flex_item") do %>2<% end %>
6
- <% end %>
3
+ <%= pb_rails("title", props: {size: 4, text: "None"}) %><br/>
7
4
 
8
- <br/><br/>
5
+ <%= pb_rails("flex", props: {classname: "flex-container"}) do %>
6
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
7
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
8
+ <% end %>
9
9
 
10
- <%= pb_rails("title", props: {size: 4, text: "Around"}) %><br/>
10
+ <br/><br/>
11
11
 
12
- <%= pb_rails("flex", props: {classname: "flex-container", spacing: "around"}) do %>
13
- <%= pb_rails("flex/flex_item") do %>1<% end %>
14
- <%= pb_rails("flex/flex_item") do %>2<% end %>
15
- <% end %>
12
+ <%= pb_rails("title", props: {size: 4, text: "Around"}) %><br/>
16
13
 
17
- <br/><br/>
14
+ <%= pb_rails("flex", props: {classname: "flex-container", spacing: "around"}) do %>
15
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
16
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
17
+ <% end %>
18
18
 
19
- <%= pb_rails("title", props: {size: 4, text: "Evenly"}) %><br/>
19
+ <br/><br/>
20
20
 
21
- <%= pb_rails("flex", props: {classname: "flex-container", spacing: "evenly"}) do %>
22
- <%= pb_rails("flex/flex_item") do %>1<% end %>
23
- <%= pb_rails("flex/flex_item") do %>2<% end %>
24
- <% end %>
21
+ <%= pb_rails("title", props: {size: 4, text: "Evenly"}) %><br/>
25
22
 
26
- <br/><br/>
23
+ <%= pb_rails("flex", props: {classname: "flex-container", spacing: "evenly"}) do %>
24
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
25
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
26
+ <% end %>
27
27
 
28
- <%= pb_rails("title", props: {size: 4, text: "Between"}) %><br/>
28
+ <br/><br/>
29
29
 
30
- <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
31
- <%= pb_rails("flex/flex_item") do %>1<% end %>
32
- <%= pb_rails("flex/flex_item") do %>2<% end %>
33
- <% end %>
30
+ <%= pb_rails("title", props: {size: 4, text: "Between"}) %><br/>
31
+
32
+ <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
33
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
34
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
35
+ <% end %>
36
+
37
+ </div>
data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx CHANGED
@@ -4,104 +4,105 @@ import { Flex, FlexItem, Title } from '../..'
4
4
  const FlexSpacing = () => {
5
5
  return (
6
6
  <>
7
- <Title
8
- size={4}
9
- text="None"
10
- />
11
- <br />
12
- <Flex
13
- className="bg_light"
14
- spacing="none"
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>
7
+ <div className="flex-doc-example">
8
+ <Title
9
+ size={4}
10
+ text="None"
11
+ />
12
+ <br />
13
+ <Flex
14
+ className="bg_light"
15
+ spacing="none"
16
+ >
17
+ <FlexItem>
18
+ {'1'}
19
+ </FlexItem>
20
+ <FlexItem>
21
+ {'2'}
22
+ </FlexItem>
23
+ <FlexItem>
24
+ {'3'}
25
+ </FlexItem>
26
+ <FlexItem>
27
+ {'4'}
28
+ </FlexItem>
29
+ </Flex>
29
30
 
30
- <br />
31
+ <br />
31
32
 
32
- <Title
33
- size={4}
34
- text="Around"
35
- />
36
- <br />
37
- <Flex
38
- className="bg_light"
39
- spacing="around"
40
- >
41
- <FlexItem>
42
- {'1'}
43
- </FlexItem>
44
- <FlexItem>
45
- {'2'}
46
- </FlexItem>
47
- <FlexItem>
48
- {'3'}
49
- </FlexItem>
50
- <FlexItem>
51
- {'4'}
52
- </FlexItem>
53
- </Flex>
33
+ <Title
34
+ size={4}
35
+ text="Around"
36
+ />
37
+ <br />
38
+ <Flex
39
+ className="bg_light"
40
+ spacing="around"
41
+ >
42
+ <FlexItem>
43
+ {'1'}
44
+ </FlexItem>
45
+ <FlexItem>
46
+ {'2'}
47
+ </FlexItem>
48
+ <FlexItem>
49
+ {'3'}
50
+ </FlexItem>
51
+ <FlexItem>
52
+ {'4'}
53
+ </FlexItem>
54
+ </Flex>
54
55
 
55
- <br />
56
+ <br />
56
57
 
57
- <Title
58
- size={4}
59
- text="Between"
60
- />
61
- <br />
62
- <Flex
63
- className="bg_light"
64
- spacing="between"
65
- >
66
- <FlexItem>
67
- {'1'}
68
- </FlexItem>
69
- <FlexItem>
70
- {'2'}
71
- </FlexItem>
72
- <FlexItem>
73
- {'3'}
74
- </FlexItem>
75
- <FlexItem>
76
- {'4'}
77
- </FlexItem>
78
- </Flex>
58
+ <Title
59
+ size={4}
60
+ text="Between"
61
+ />
62
+ <br />
63
+ <Flex
64
+ className="bg_light"
65
+ spacing="between"
66
+ >
67
+ <FlexItem>
68
+ {'1'}
69
+ </FlexItem>
70
+ <FlexItem>
71
+ {'2'}
72
+ </FlexItem>
73
+ <FlexItem>
74
+ {'3'}
75
+ </FlexItem>
76
+ <FlexItem>
77
+ {'4'}
78
+ </FlexItem>
79
+ </Flex>
79
80
 
80
- <br />
81
-
82
- <Title
83
- size={4}
84
- text="Evenly"
85
- />
86
- <br />
87
- <Flex
88
- className="bg_light"
89
- spacing="evenly"
90
- >
91
- <FlexItem>
92
- {'1'}
93
- </FlexItem>
94
- <FlexItem>
95
- {'2'}
96
- </FlexItem>
97
- <FlexItem>
98
- {'3'}
99
- </FlexItem>
100
- <FlexItem>
101
- {'4'}
102
- </FlexItem>
103
- </Flex>
81
+ <br />
104
82
 
83
+ <Title
84
+ size={4}
85
+ text="Evenly"
86
+ />
87
+ <br />
88
+ <Flex
89
+ className="bg_light"
90
+ spacing="evenly"
91
+ >
92
+ <FlexItem>
93
+ {'1'}
94
+ </FlexItem>
95
+ <FlexItem>
96
+ {'2'}
97
+ </FlexItem>
98
+ <FlexItem>
99
+ {'3'}
100
+ </FlexItem>
101
+ <FlexItem>
102
+ {'4'}
103
+ </FlexItem>
104
+ </Flex>
105
+ </div>
105
106
  </>
106
107
  )
107
108
  }