primer_view_components 0.0.17 → 0.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +102 -0
  3. data/app/assets/javascripts/primer_view_components.js +2 -0
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -0
  5. data/app/components/primer/avatar_component.rb +27 -9
  6. data/app/components/primer/avatar_stack_component.html.erb +10 -0
  7. data/app/components/primer/avatar_stack_component.rb +81 -0
  8. data/app/components/primer/base_component.rb +8 -5
  9. data/app/components/primer/blankslate_component.html.erb +3 -3
  10. data/app/components/primer/blankslate_component.rb +18 -25
  11. data/app/components/primer/border_box_component.html.erb +4 -18
  12. data/app/components/primer/border_box_component.rb +75 -68
  13. data/app/components/primer/box_component.rb +10 -0
  14. data/app/components/primer/breadcrumb_component.rb +3 -2
  15. data/app/components/primer/button_component.rb +3 -3
  16. data/app/components/primer/button_group_component.html.erb +5 -0
  17. data/app/components/primer/button_group_component.rb +37 -0
  18. data/app/components/primer/button_marketing_component.rb +73 -0
  19. data/app/components/primer/component.rb +16 -0
  20. data/app/components/primer/counter_component.rb +16 -9
  21. data/app/components/primer/details_component.html.erb +2 -6
  22. data/app/components/primer/details_component.rb +28 -37
  23. data/app/components/primer/dropdown/menu_component.html.erb +12 -0
  24. data/app/components/primer/dropdown/menu_component.rb +48 -0
  25. data/app/components/primer/dropdown_component.html.erb +9 -0
  26. data/app/components/primer/dropdown_component.rb +75 -0
  27. data/app/components/primer/dropdown_menu_component.rb +35 -3
  28. data/app/components/primer/flash_component.html.erb +4 -7
  29. data/app/components/primer/flash_component.rb +18 -17
  30. data/app/components/primer/flex_component.rb +47 -9
  31. data/app/components/primer/flex_item_component.rb +16 -1
  32. data/app/components/primer/heading_component.rb +9 -0
  33. data/app/components/primer/label_component.rb +6 -6
  34. data/app/components/primer/layout_component.rb +2 -2
  35. data/app/components/primer/link_component.rb +6 -2
  36. data/app/components/primer/markdown_component.rb +293 -0
  37. data/app/components/primer/menu_component.html.erb +6 -0
  38. data/app/components/primer/menu_component.rb +71 -0
  39. data/app/components/primer/octicon_component.rb +13 -6
  40. data/app/components/primer/popover_component.rb +5 -3
  41. data/app/components/primer/primer.js +1 -0
  42. data/app/components/primer/primer.ts +1 -0
  43. data/app/components/primer/progress_bar_component.rb +6 -6
  44. data/app/components/primer/spinner_component.rb +8 -5
  45. data/app/components/primer/state_component.rb +23 -12
  46. data/app/components/primer/subhead_component.rb +6 -3
  47. data/app/components/primer/tab_container_component.js +1 -0
  48. data/app/components/primer/tab_container_component.rb +41 -0
  49. data/app/components/primer/tab_container_component.ts +1 -0
  50. data/app/components/primer/tab_nav_component.html.erb +17 -0
  51. data/app/components/primer/tab_nav_component.rb +108 -0
  52. data/app/components/primer/text_component.rb +1 -1
  53. data/app/components/primer/timeline_item_component.html.erb +4 -16
  54. data/app/components/primer/timeline_item_component.rb +41 -49
  55. data/app/components/primer/tooltip_component.rb +88 -0
  56. data/app/components/primer/truncate_component.rb +41 -0
  57. data/app/components/primer/underline_nav_component.rb +26 -1
  58. data/{lib → app/lib}/primer/class_name_helper.rb +1 -0
  59. data/app/lib/primer/classify.rb +280 -0
  60. data/app/lib/primer/classify/cache.rb +125 -0
  61. data/{lib → app/lib}/primer/fetch_or_fallback_helper.rb +1 -0
  62. data/{lib → app/lib}/primer/join_style_arguments_helper.rb +1 -0
  63. data/app/lib/primer/view_helper.rb +22 -0
  64. data/app/lib/primer/view_helper/dsl.rb +34 -0
  65. data/lib/primer/view_components.rb +32 -0
  66. data/lib/primer/view_components/engine.rb +11 -2
  67. data/lib/primer/view_components/version.rb +5 -1
  68. data/lib/yard/renders_many_handler.rb +19 -0
  69. data/lib/yard/renders_one_handler.rb +19 -0
  70. data/static/statuses.json +1 -0
  71. metadata +94 -24
  72. data/app/components/primer/view_components.rb +0 -52
  73. data/lib/primer/classify.rb +0 -250
@@ -1,8 +1,4 @@
1
1
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
- <%= render summary.component do %>
3
- <%= summary.content %>
4
- <% end %>
5
- <%= render body.component do %>
6
- <%= body.content %>
7
- <% end %>
2
+ <%= summary %>
3
+ <%= body %>
8
4
  <% end %>
@@ -1,24 +1,42 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- #
5
- # overlay - options are `none`, `default` and `dark`. Dictates the type of overlay to render with.
6
- # button - options are `default` and `reset`. default will make the target a default primer ``.btn`
7
- # reset will remove all styles from the <summary> element.
8
- #
4
+ # Use DetailsComponent to reveal content after clicking a button.
9
5
  class DetailsComponent < Primer::Component
10
- include ViewComponent::Slotable
6
+ include ViewComponent::SlotableV2
11
7
 
12
8
  NO_OVERLAY = :none
13
9
  OVERLAY_MAPPINGS = {
14
10
  NO_OVERLAY => "",
15
11
  :default => "details-overlay",
16
- :dark => "details-overlay details-overlay-dark",
12
+ :dark => "details-overlay details-overlay-dark"
17
13
  }.freeze
18
14
 
19
- with_slot :body, class_name: "Body"
20
- with_slot :summary, class_name: "Summary"
21
-
15
+ # Use the Summary slot as a trigger to reveal the content.
16
+ #
17
+ # @param button [Boolean] Whether to render the Summary as a button or not.
18
+ # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
19
+ renders_one :summary, lambda { |button = true, **system_arguments|
20
+ system_arguments = system_arguments
21
+ system_arguments[:tag] = :summary
22
+ system_arguments[:role] = "button"
23
+
24
+ Primer::BaseComponent.new(**system_arguments) unless button
25
+
26
+ Primer::ButtonComponent.new(**system_arguments)
27
+ }
28
+
29
+ # Use the Body slot as the main content to be shown when triggered by the Summary.
30
+ #
31
+ # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
32
+ renders_one :body, lambda { |**system_arguments|
33
+ system_arguments[:tag] ||= :div
34
+ Primer::BaseComponent.new(**system_arguments)
35
+ }
36
+
37
+ # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
38
+ # @param reset [Boolean] Defatuls to false. If set to true, it will remove the default caret and remove style from the summary element
39
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
22
40
  def initialize(overlay: NO_OVERLAY, reset: false, **system_arguments)
23
41
  @system_arguments = system_arguments
24
42
  @system_arguments[:tag] = :details
@@ -32,32 +50,5 @@ module Primer
32
50
  def render?
33
51
  summary.present? && body.present?
34
52
  end
35
-
36
- class Summary < Primer::Slot
37
- def initialize(button: true, **system_arguments)
38
- @button = button
39
-
40
- @system_arguments = system_arguments
41
- @system_arguments[:tag] = :summary
42
- @system_arguments[:role] = "button"
43
- end
44
-
45
- def component
46
- return Primer::BaseComponent.new(**@system_arguments) unless @button
47
-
48
- Primer::ButtonComponent.new(**@system_arguments)
49
- end
50
- end
51
-
52
- class Body < Primer::Slot
53
- def initialize(**system_arguments)
54
- @system_arguments = system_arguments
55
- @system_arguments[:tag] ||= :div
56
- end
57
-
58
- def component
59
- Primer::BaseComponent.new(**@system_arguments)
60
- end
61
- end
62
53
  end
63
54
  end
@@ -0,0 +1,12 @@
1
+ <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
+ <% if @header.present? %>
3
+ <div class="dropdown-header">
4
+ <%= @header %>
5
+ </div>
6
+ <% end %>
7
+ <ul>
8
+ <% items.each do |item| %>
9
+ <%= item %>
10
+ <% end %>
11
+ </ul>
12
+ <% end %>
@@ -0,0 +1,48 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Dropdown
5
+ # This component is part of `Primer::DropdownComponent` and should not be
6
+ # used as a standalone component.
7
+ class MenuComponent < Primer::Component
8
+ include ViewComponent::SlotableV2
9
+
10
+ SCHEME_DEFAULT = :default
11
+ SCHEME_MAPPINGS = {
12
+ SCHEME_DEFAULT => "",
13
+ :dark => "dropdown-menu-dark"
14
+ }.freeze
15
+
16
+ DIRECTION_DEFAULT = :se
17
+ DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
18
+
19
+ renders_many :items, lambda { |divider: false, **system_arguments|
20
+ system_arguments[:tag] = :li
21
+ system_arguments[:role] = :none if divider
22
+ system_arguments[:classes] = class_names(
23
+ system_arguments[:classes],
24
+ "dropdown-item" => !divider,
25
+ "dropdown-divider" => divider
26
+ )
27
+
28
+ Primer::BaseComponent.new(**system_arguments)
29
+ }
30
+
31
+ def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
32
+ @header = header
33
+ @direction = direction
34
+ @system_arguments = system_arguments
35
+
36
+ @system_arguments[:tag] = "details-menu"
37
+ @system_arguments[:role] = "menu"
38
+
39
+ @system_arguments[:classes] = class_names(
40
+ @system_arguments[:classes],
41
+ "dropdown-menu",
42
+ "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
43
+ SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
44
+ )
45
+ end
46
+ end
47
+ end
48
+ end
@@ -0,0 +1,9 @@
1
+ <%= render(Primer::DetailsComponent.new(**@system_arguments)) do |c| %>
2
+ <% c.summary(classes: @summary_classes) do %>
3
+ <%= button %>
4
+ <% end %>
5
+
6
+ <% c.body do %>
7
+ <%= menu %>
8
+ <% end %>
9
+ <% end %>
@@ -0,0 +1,75 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ # Dropdowns are lightweight context menus for housing navigation and actions.
5
+ # They're great for instances where you don't need the full power (and code) of the select menu.
6
+ class DropdownComponent < Primer::Component
7
+ include ViewComponent::SlotableV2
8
+
9
+ # Required trigger for the dropdown. Only accepts a content.
10
+ # Its classes can be customized by the `summary_classes` param in the parent component
11
+ renders_one :button
12
+
13
+ # Required context menu for the dropdown
14
+ #
15
+ # @param direction [Symbol] <%= one_of(Primer::Dropdown::MenuComponent::DIRECTION_OPTIONS) %>
16
+ # @param scheme [Symbol] Pass :dark for dark mode theming
17
+ # @param header [String] Optional string to display as the header
18
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
19
+ renders_one :menu, Primer::Dropdown::MenuComponent
20
+
21
+ # @example Default
22
+ # <div>
23
+ # <%= render(Primer::DropdownComponent.new) do |c| %>
24
+ # <% c.button do %>
25
+ # Dropdown
26
+ # <% end %>
27
+ #
28
+ # <%= c.menu(header: "Options") do |menu|
29
+ # menu.item { "Item 1" }
30
+ # menu.item { "Item 2" }
31
+ # menu.item(divider: true)
32
+ # menu.item { "Item 3" }
33
+ # menu.item { "Item 4" }
34
+ # end %>
35
+ # <% end %>
36
+ # </div>
37
+ #
38
+ # @example With Direction
39
+ # <div>
40
+ # <%= render(Primer::DropdownComponent.new) do |c| %>
41
+ # <% c.button do %>
42
+ # Dropdown
43
+ # <% end %>
44
+ #
45
+ # <%= c.menu(header: "Options", direction: :s) do |menu|
46
+ # menu.item { "Item 1" }
47
+ # menu.item { "Item 2" }
48
+ # menu.item(divider: true)
49
+ # menu.item { "Item 3" }
50
+ # menu.item { "Item 4" }
51
+ # end %>
52
+ # <% end %>
53
+ # </div>
54
+ #
55
+ # @param overlay [Symbol] <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
56
+ # @param reset [Boolean] Whether to hide the default caret on the button
57
+ # @param summary_classes [String] Custom classes to add to the button
58
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
59
+ def initialize(overlay: :default, reset: true, summary_classes: "", **system_arguments)
60
+ @system_arguments = system_arguments
61
+ @system_arguments[:overlay] = overlay
62
+ @system_arguments[:reset] = reset
63
+ @system_arguments[:position] = :relative
64
+ @system_arguments[:classes] = class_names(
65
+ @system_arguments[:classes],
66
+ "dropdown"
67
+ )
68
+ @summary_classes = summary_classes
69
+ end
70
+
71
+ def render?
72
+ button.present? && menu.present?
73
+ end
74
+ end
75
+ end
@@ -1,18 +1,50 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
+ # DropdownMenus are lightweight context menus for housing navigation and actions.
5
+ # They're great for instances where you don't need the full power (and code)
6
+ # of the select menu.
4
7
  class DropdownMenuComponent < Primer::Component
5
8
  SCHEME_DEFAULT = :default
6
9
  SCHEME_MAPPINGS = {
7
10
  SCHEME_DEFAULT => "",
8
- :dark => "dropdown-menu-dark",
11
+ :dark => "dropdown-menu-dark"
9
12
  }.freeze
10
13
 
11
14
  DIRECTION_DEFAULT = :se
12
- DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s]
15
+ DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
13
16
 
17
+ def self.status
18
+ STATUSES[:deprecated]
19
+ end
20
+
21
+ # @example With a header
22
+ # <div>
23
+ # <%= render(Primer::DetailsComponent.new(overlay: :default, reset: true, position: :relative)) do |c| %>
24
+ # <% c.summary do %>
25
+ # Dropdown
26
+ # <% end %>
27
+ #
28
+ # <% c.body do %>
29
+ # <%= render(Primer::DropdownMenuComponent.new(header: "Options")) do %>
30
+ # <ul>
31
+ # <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
32
+ # <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
33
+ # <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
34
+ # </ul>
35
+ # <% end %>
36
+ # <% end %>
37
+ # <% end %>
38
+ # </div>
39
+ #
40
+ # @param direction [Symbol] <%= one_of(Primer::DropdownMenuComponent::DIRECTION_OPTIONS) %>
41
+ # @param scheme [Symbol] Pass :dark for dark mode theming
42
+ # @param header [String] Optional string to display as the header
43
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
14
44
  def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
15
- @header, @direction, @system_arguments = header, direction, system_arguments
45
+ @header = header
46
+ @direction = direction
47
+ @system_arguments = system_arguments
16
48
 
17
49
  @system_arguments[:tag] = "details-menu"
18
50
  @system_arguments[:role] = "menu"
@@ -1,14 +1,11 @@
1
1
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
- <%= render(Primer::OcticonComponent.new(icon: @icon)) if @icon %>
2
+ <%= primer(:octicon, icon: @icon) if @icon %>
3
3
  <%= content %>
4
4
  <% if @dismissible %>
5
5
  <button class="flash-close js-flash-close" type="button" aria-label="Close">
6
- <%= render(Primer::OcticonComponent.new(icon: "x")) %>
6
+ <%= primer(:octicon, icon: "x") %>
7
7
  </button>
8
8
  <% end %>
9
- <% if actions.present? %>
10
- <%= render Primer::BaseComponent.new(**actions.system_arguments) do %>
11
- <%= actions.content %>
12
- <% end %>
13
- <% end %>
9
+
10
+ <%= action %>
14
11
  <% end %>
@@ -3,9 +3,17 @@
3
3
  module Primer
4
4
  # Use the Flash component to inform users of successful or pending actions.
5
5
  class FlashComponent < Primer::Component
6
- include ViewComponent::Slotable
6
+ include ViewComponent::SlotableV2
7
7
 
8
- with_slot :actions, class_name: "Actions"
8
+ # Optional action content showed on the right side of the component.
9
+ #
10
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
11
+ renders_one :action, lambda { |**system_arguments|
12
+ system_arguments[:tag] = :div
13
+ system_arguments[:classes] = class_names(system_arguments[:classes], "flash-action")
14
+
15
+ Primer::BaseComponent.new(**system_arguments)
16
+ }
9
17
 
10
18
  DEFAULT_VARIANT = :default
11
19
  VARIANT_MAPPINGS = {
@@ -14,25 +22,25 @@ module Primer
14
22
  :danger => "flash-error",
15
23
  :success => "flash-success"
16
24
  }.freeze
17
- # @example 280|Variants
25
+ # @example Variants
18
26
  # <%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
19
27
  # <%= render(Primer::FlashComponent.new(variant: :warning)) { "This is a warning flash message!" } %>
20
28
  # <%= render(Primer::FlashComponent.new(variant: :danger)) { "This is a danger flash message!" } %>
21
29
  # <%= render(Primer::FlashComponent.new(variant: :success)) { "This is a success flash message!" } %>
22
30
  #
23
- # @example 80|Full width
31
+ # @example Full width
24
32
  # <%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
25
33
  #
26
- # @example 80|Dismissible
34
+ # @example Dismissible
27
35
  # <%= render(Primer::FlashComponent.new(dismissible: true)) { "This is a dismissible flash message!" } %>
28
36
  #
29
- # @example 80|Icon
37
+ # @example Icon
30
38
  # <%= render(Primer::FlashComponent.new(icon: "people")) { "This is a flash message with an icon!" } %>
31
39
  #
32
- # @example 80|With actions
40
+ # @example With actions
33
41
  # <%= render(Primer::FlashComponent.new) do |component| %>
34
42
  # This is a flash message with actions!
35
- # <% component.slot(:actions) do %>
43
+ # <% component.action do %>
36
44
  # <%= render(Primer::ButtonComponent.new(variant: :small)) { "Take action" } %>
37
45
  # <% end %>
38
46
  # <% end %>
@@ -57,15 +65,8 @@ module Primer
57
65
  @system_arguments[:mb] ||= spacious ? 4 : nil
58
66
  end
59
67
 
60
- class Actions < Primer::Slot
61
- attr_reader :system_arguments
62
-
63
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
64
- def initialize(**system_arguments)
65
- @system_arguments = system_arguments
66
- @system_arguments[:tag] = :div
67
- @system_arguments[:classes] = class_names(@system_arguments[:classes], "flash-action")
68
- end
68
+ def self.status
69
+ Primer::Component::STATUSES[:beta]
69
70
  end
70
71
  end
71
72
  end
@@ -1,6 +1,10 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
+ # Use FlexComponent to make an element lay out its content using the flexbox model.
5
+ # Before using these utilities, you should be familiar with CSS3 Flexible Box
6
+ # spec. If you are not, check out MDN's guide [Using CSS Flexible
7
+ # Boxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
4
8
  class FlexComponent < Primer::Component
5
9
  JUSTIFY_CONTENT_DEFAULT = nil
6
10
  JUSTIFY_CONTENT_MAPPINGS = {
@@ -8,9 +12,9 @@ module Primer
8
12
  flex_end: "flex-justify-end",
9
13
  center: "flex-justify-center",
10
14
  space_between: "flex-justify-between",
11
- space_around: "flex-justify-around",
12
- }
13
- JUSTIFY_CONTENT_OPTIONS = [JUSTIFY_CONTENT_DEFAULT, *JUSTIFY_CONTENT_MAPPINGS.keys]
15
+ space_around: "flex-justify-around"
16
+ }.freeze
17
+ JUSTIFY_CONTENT_OPTIONS = [JUSTIFY_CONTENT_DEFAULT, *JUSTIFY_CONTENT_MAPPINGS.keys].freeze
14
18
 
15
19
  ALIGN_ITEMS_DEFAULT = nil
16
20
  ALIGN_ITEMS_MAPPINGS = {
@@ -18,19 +22,53 @@ module Primer
18
22
  end: "flex-items-end",
19
23
  center: "flex-items-center",
20
24
  baseline: "flex-items-baseline",
21
- stretch: "flex-items-stretch",
22
- }
23
- ALIGN_ITEMS_OPTIONS = [ALIGN_ITEMS_DEFAULT, *ALIGN_ITEMS_MAPPINGS.keys]
25
+ stretch: "flex-items-stretch"
26
+ }.freeze
27
+ ALIGN_ITEMS_OPTIONS = [ALIGN_ITEMS_DEFAULT, *ALIGN_ITEMS_MAPPINGS.keys].freeze
24
28
 
25
29
  INLINE_DEFAULT = false
26
- INLINE_OPTIONS = [INLINE_DEFAULT, true]
30
+ INLINE_OPTIONS = [INLINE_DEFAULT, true].freeze
27
31
 
28
32
  FLEX_WRAP_DEFAULT = nil
29
- FLEX_WRAP_OPTIONS = [FLEX_WRAP_DEFAULT, true, false]
33
+ FLEX_WRAP_OPTIONS = [FLEX_WRAP_DEFAULT, true, false].freeze
30
34
 
31
35
  DEFAULT_DIRECTION = nil
32
- ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse]
36
+ ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse].freeze
33
37
 
38
+ # @example Default
39
+ # <%= render(Primer::FlexComponent.new(bg: :gray)) do %>
40
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
41
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>
42
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
43
+ # <% end %>
44
+ #
45
+ # @example Justify center
46
+ # <%= render(Primer::FlexComponent.new(justify_content: :center, bg: :gray)) do %>
47
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
48
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>
49
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
50
+ # <% end %>
51
+ #
52
+ # @example Align end
53
+ # <%= render(Primer::FlexComponent.new(align_items: :end, bg: :gray)) do %>
54
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
55
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>
56
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
57
+ # <% end %>
58
+ #
59
+ # @example Direction column
60
+ # <%= render(Primer::FlexComponent.new(direction: :column, bg: :gray)) do %>
61
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 1" } %>
62
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 2" } %>
63
+ # <%= render(Primer::BoxComponent.new(p: 5, bg: :gray_light, classes: "border")) { "Item 3" } %>
64
+ # <% end %>
65
+ #
66
+ # @param justify_content [Symbol] Use this param to distribute space between and around flex items along the main axis of the container. <%= one_of(Primer::FlexComponent::JUSTIFY_CONTENT_OPTIONS) %>
67
+ # @param inline [Boolean] Defaults to false.
68
+ # @param flex_wrap [Boolean] Defaults to nil.
69
+ # @param align_items [Symbol] Use this param to align items on the cross axis. <%= one_of(Primer::FlexComponent::ALIGN_ITEMS_OPTIONS) %>
70
+ # @param direction [Symbol] Use this param to define the orientation of the main axis (row or column). By default, flex items will display in a row. <%= one_of(Primer::FlexComponent::ALLOWED_DIRECTIONS) %>
71
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
34
72
  def initialize(
35
73
  justify_content: JUSTIFY_CONTENT_DEFAULT,
36
74
  inline: INLINE_DEFAULT,