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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +102 -0
- data/app/assets/javascripts/primer_view_components.js +2 -0
- data/app/assets/javascripts/primer_view_components.js.map +1 -0
- data/app/components/primer/avatar_component.rb +27 -9
- data/app/components/primer/avatar_stack_component.html.erb +10 -0
- data/app/components/primer/avatar_stack_component.rb +81 -0
- data/app/components/primer/base_component.rb +8 -5
- data/app/components/primer/blankslate_component.html.erb +3 -3
- data/app/components/primer/blankslate_component.rb +18 -25
- data/app/components/primer/border_box_component.html.erb +4 -18
- data/app/components/primer/border_box_component.rb +75 -68
- data/app/components/primer/box_component.rb +10 -0
- data/app/components/primer/breadcrumb_component.rb +3 -2
- data/app/components/primer/button_component.rb +3 -3
- data/app/components/primer/button_group_component.html.erb +5 -0
- data/app/components/primer/button_group_component.rb +37 -0
- data/app/components/primer/button_marketing_component.rb +73 -0
- data/app/components/primer/component.rb +16 -0
- data/app/components/primer/counter_component.rb +16 -9
- data/app/components/primer/details_component.html.erb +2 -6
- data/app/components/primer/details_component.rb +28 -37
- data/app/components/primer/dropdown/menu_component.html.erb +12 -0
- data/app/components/primer/dropdown/menu_component.rb +48 -0
- data/app/components/primer/dropdown_component.html.erb +9 -0
- data/app/components/primer/dropdown_component.rb +75 -0
- data/app/components/primer/dropdown_menu_component.rb +35 -3
- data/app/components/primer/flash_component.html.erb +4 -7
- data/app/components/primer/flash_component.rb +18 -17
- data/app/components/primer/flex_component.rb +47 -9
- data/app/components/primer/flex_item_component.rb +16 -1
- data/app/components/primer/heading_component.rb +9 -0
- data/app/components/primer/label_component.rb +6 -6
- data/app/components/primer/layout_component.rb +2 -2
- data/app/components/primer/link_component.rb +6 -2
- data/app/components/primer/markdown_component.rb +293 -0
- data/app/components/primer/menu_component.html.erb +6 -0
- data/app/components/primer/menu_component.rb +71 -0
- data/app/components/primer/octicon_component.rb +13 -6
- data/app/components/primer/popover_component.rb +5 -3
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.ts +1 -0
- data/app/components/primer/progress_bar_component.rb +6 -6
- data/app/components/primer/spinner_component.rb +8 -5
- data/app/components/primer/state_component.rb +23 -12
- data/app/components/primer/subhead_component.rb +6 -3
- data/app/components/primer/tab_container_component.js +1 -0
- data/app/components/primer/tab_container_component.rb +41 -0
- data/app/components/primer/tab_container_component.ts +1 -0
- data/app/components/primer/tab_nav_component.html.erb +17 -0
- data/app/components/primer/tab_nav_component.rb +108 -0
- data/app/components/primer/text_component.rb +1 -1
- data/app/components/primer/timeline_item_component.html.erb +4 -16
- data/app/components/primer/timeline_item_component.rb +41 -49
- data/app/components/primer/tooltip_component.rb +88 -0
- data/app/components/primer/truncate_component.rb +41 -0
- data/app/components/primer/underline_nav_component.rb +26 -1
- data/{lib → app/lib}/primer/class_name_helper.rb +1 -0
- data/app/lib/primer/classify.rb +280 -0
- data/app/lib/primer/classify/cache.rb +125 -0
- data/{lib → app/lib}/primer/fetch_or_fallback_helper.rb +1 -0
- data/{lib → app/lib}/primer/join_style_arguments_helper.rb +1 -0
- data/app/lib/primer/view_helper.rb +22 -0
- data/app/lib/primer/view_helper/dsl.rb +34 -0
- data/lib/primer/view_components.rb +32 -0
- data/lib/primer/view_components/engine.rb +11 -2
- data/lib/primer/view_components/version.rb +5 -1
- data/lib/yard/renders_many_handler.rb +19 -0
- data/lib/yard/renders_one_handler.rb +19 -0
- data/static/statuses.json +1 -0
- metadata +94 -24
- data/app/components/primer/view_components.rb +0 -52
- data/lib/primer/classify.rb +0 -250
@@ -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::
|
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
|
-
|
20
|
-
|
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,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,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
|
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
|
-
<%=
|
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
|
-
<%=
|
6
|
+
<%= primer(:octicon, icon: "x") %>
|
7
7
|
</button>
|
8
8
|
<% end %>
|
9
|
-
|
10
|
-
|
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::
|
6
|
+
include ViewComponent::SlotableV2
|
7
7
|
|
8
|
-
|
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
|
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
|
31
|
+
# @example Full width
|
24
32
|
# <%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
|
25
33
|
#
|
26
|
-
# @example
|
34
|
+
# @example Dismissible
|
27
35
|
# <%= render(Primer::FlashComponent.new(dismissible: true)) { "This is a dismissible flash message!" } %>
|
28
36
|
#
|
29
|
-
# @example
|
37
|
+
# @example Icon
|
30
38
|
# <%= render(Primer::FlashComponent.new(icon: "people")) { "This is a flash message with an icon!" } %>
|
31
39
|
#
|
32
|
-
# @example
|
40
|
+
# @example With actions
|
33
41
|
# <%= render(Primer::FlashComponent.new) do |component| %>
|
34
42
|
# This is a flash message with actions!
|
35
|
-
# <% component.
|
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
|
-
|
61
|
-
|
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,
|