primer_view_components 0.0.14 → 0.0.19
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 +82 -0
- data/app/components/primer/avatar_component.rb +24 -6
- 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 +63 -15
- data/app/components/primer/blankslate_component.html.erb +4 -4
- data/app/components/primer/blankslate_component.rb +34 -8
- data/app/components/primer/border_box_component.rb +29 -13
- 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 +13 -0
- data/app/components/primer/counter_component.rb +21 -13
- data/app/components/primer/details_component.rb +10 -6
- 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 +77 -0
- data/app/components/primer/dropdown_menu_component.rb +35 -3
- data/app/components/primer/flash_component.rb +10 -7
- 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 +7 -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 +7 -3
- 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 +11 -6
- data/app/components/primer/popover_component.rb +6 -4
- data/app/components/primer/progress_bar_component.rb +9 -9
- data/app/components/primer/slot.rb +1 -0
- data/app/components/primer/spinner_component.rb +10 -7
- data/app/components/primer/state_component.rb +6 -6
- data/app/components/primer/subhead_component.rb +6 -3
- data/app/components/primer/text_component.rb +1 -1
- data/app/components/primer/timeline_item_component.rb +4 -1
- 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/app/components/primer/view_components.rb +9 -0
- data/lib/primer/class_name_helper.rb +1 -0
- data/lib/primer/classify.rb +141 -106
- data/lib/primer/classify/cache.rb +125 -0
- data/lib/primer/fetch_or_fallback_helper.rb +9 -0
- data/lib/primer/join_style_arguments_helper.rb +14 -0
- data/lib/primer/view_components.rb +32 -0
- data/lib/primer/view_components/engine.rb +1 -0
- data/lib/primer/view_components/version.rb +1 -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 +80 -19
@@ -0,0 +1,71 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
# Use menus to create vertical lists of navigational links.
|
5
|
+
class MenuComponent < Primer::Component
|
6
|
+
include ViewComponent::SlotableV2
|
7
|
+
|
8
|
+
# Optional menu heading
|
9
|
+
#
|
10
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
11
|
+
renders_one :heading, lambda { |**system_arguments|
|
12
|
+
system_arguments[:tag] ||= :span
|
13
|
+
system_arguments[:classes] = class_names(
|
14
|
+
"menu-heading",
|
15
|
+
system_arguments[:classes]
|
16
|
+
)
|
17
|
+
|
18
|
+
Primer::BaseComponent.new(**system_arguments)
|
19
|
+
}
|
20
|
+
|
21
|
+
# Required list of navigational links
|
22
|
+
#
|
23
|
+
# @param href [String] URL to be used for the Link
|
24
|
+
# @param selected [Boolean] Whether the item is the current selection
|
25
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
26
|
+
renders_many :items, lambda { |href:, selected: false, **system_arguments|
|
27
|
+
system_arguments[:tag] = :a
|
28
|
+
system_arguments[:href] = href
|
29
|
+
system_arguments[:"aria-current"] = :page if selected
|
30
|
+
system_arguments[:classes] = class_names(
|
31
|
+
"menu-item",
|
32
|
+
system_arguments[:classes]
|
33
|
+
)
|
34
|
+
|
35
|
+
Primer::BaseComponent.new(**system_arguments)
|
36
|
+
}
|
37
|
+
|
38
|
+
# @example auto|Default
|
39
|
+
# <%= render(Primer::MenuComponent.new) do |c| %>
|
40
|
+
# <% c.heading do %>
|
41
|
+
# Heading
|
42
|
+
# <% end %>
|
43
|
+
# <% c.item(selected: true, href: "#url") do %>
|
44
|
+
# Item 1
|
45
|
+
# <% end %>
|
46
|
+
# <% c.item(href: "#url") do %>
|
47
|
+
# <%= render(Primer::OcticonComponent.new(icon: "check")) %>
|
48
|
+
# With Icon
|
49
|
+
# <% end %>
|
50
|
+
# <% c.item(href: "#url") do %>
|
51
|
+
# <%= render(Primer::OcticonComponent.new(icon: "check")) %>
|
52
|
+
# With Icon and Counter
|
53
|
+
# <%= render(Primer::CounterComponent.new(count: 25)) %>
|
54
|
+
# <% end %>
|
55
|
+
# <% end %>
|
56
|
+
#
|
57
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
58
|
+
def initialize(**system_arguments)
|
59
|
+
@system_arguments = system_arguments
|
60
|
+
@system_arguments[:tag] = :nav
|
61
|
+
@system_arguments[:classes] = class_names(
|
62
|
+
"menu",
|
63
|
+
@system_arguments[:classes]
|
64
|
+
)
|
65
|
+
end
|
66
|
+
|
67
|
+
def render?
|
68
|
+
items.any?
|
69
|
+
end
|
70
|
+
end
|
71
|
+
end
|
@@ -10,24 +10,25 @@ module Primer
|
|
10
10
|
SIZE_MAPPINGS = {
|
11
11
|
SIZE_DEFAULT => 16,
|
12
12
|
:medium => 32,
|
13
|
-
:large => 64
|
13
|
+
:large => 64
|
14
14
|
}.freeze
|
15
15
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
16
16
|
|
17
|
-
# @example
|
17
|
+
# @example auto|Default
|
18
18
|
# <%= render(Primer::OcticonComponent.new(icon: "check")) %>
|
19
19
|
#
|
20
|
-
# @example
|
20
|
+
# @example auto|Medium
|
21
21
|
# <%= render(Primer::OcticonComponent.new(icon: "people", size: :medium)) %>
|
22
22
|
#
|
23
|
-
# @example
|
23
|
+
# @example auto|Large
|
24
24
|
# <%= render(Primer::OcticonComponent.new(icon: "x", size: :large)) %>
|
25
25
|
#
|
26
26
|
# @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
|
27
27
|
# @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
|
28
28
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
29
29
|
def initialize(icon:, size: SIZE_DEFAULT, **system_arguments)
|
30
|
-
@icon
|
30
|
+
@icon = icon
|
31
|
+
@system_arguments = system_arguments
|
31
32
|
|
32
33
|
@system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]
|
33
34
|
@system_arguments[:height] ||= SIZE_MAPPINGS[size]
|
@@ -39,7 +40,11 @@ module Primer
|
|
39
40
|
end
|
40
41
|
|
41
42
|
def call
|
42
|
-
octicon(@icon, **@system_arguments)
|
43
|
+
octicon(@icon, { **@system_arguments })
|
44
|
+
end
|
45
|
+
|
46
|
+
def self.status
|
47
|
+
Primer::Component::STATUSES[:beta]
|
43
48
|
end
|
44
49
|
end
|
45
50
|
end
|
@@ -10,7 +10,7 @@ module Primer
|
|
10
10
|
with_slot :heading, class_name: "Heading"
|
11
11
|
with_slot :body, class_name: "Body"
|
12
12
|
|
13
|
-
# @example
|
13
|
+
# @example auto|Default
|
14
14
|
# <%= render Primer::PopoverComponent.new do |component| %>
|
15
15
|
# <% component.slot(:heading) do %>
|
16
16
|
# Activity feed
|
@@ -20,7 +20,7 @@ module Primer
|
|
20
20
|
# <% end %>
|
21
21
|
# <% end %>
|
22
22
|
#
|
23
|
-
# @example
|
23
|
+
# @example auto|Large
|
24
24
|
# <%= render Primer::PopoverComponent.new do |component| %>
|
25
25
|
# <% component.slot(:heading) do %>
|
26
26
|
# Activity feed
|
@@ -30,7 +30,7 @@ module Primer
|
|
30
30
|
# <% end %>
|
31
31
|
# <% end %>
|
32
32
|
#
|
33
|
-
# @example
|
33
|
+
# @example auto|Caret position
|
34
34
|
# <%= render Primer::PopoverComponent.new do |component| %>
|
35
35
|
# <% component.slot(:heading) do %>
|
36
36
|
# Activity feed
|
@@ -57,7 +57,8 @@ module Primer
|
|
57
57
|
body.present?
|
58
58
|
end
|
59
59
|
|
60
|
-
|
60
|
+
# :nodoc:
|
61
|
+
class Heading < Primer::Slot
|
61
62
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
62
63
|
def initialize(**system_arguments)
|
63
64
|
@system_arguments = system_arguments
|
@@ -70,6 +71,7 @@ module Primer
|
|
70
71
|
end
|
71
72
|
end
|
72
73
|
|
74
|
+
# :nodoc:
|
73
75
|
class Body < Slot
|
74
76
|
CARET_DEFAULT = :top
|
75
77
|
CARET_MAPPINGS = {
|
@@ -12,26 +12,26 @@ module Primer
|
|
12
12
|
SIZE_MAPPINGS = {
|
13
13
|
SIZE_DEFAULT => "",
|
14
14
|
:small => "Progress--small",
|
15
|
-
:large => "Progress--large"
|
15
|
+
:large => "Progress--large"
|
16
16
|
}.freeze
|
17
17
|
|
18
18
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
19
|
-
# @example
|
19
|
+
# @example auto|Default
|
20
20
|
# <%= render(Primer::ProgressBarComponent.new) do |component| %>
|
21
21
|
# <% component.slot(:item, percentage: 25) %>
|
22
22
|
# <% end %>
|
23
23
|
#
|
24
|
-
# @example
|
24
|
+
# @example auto|Small
|
25
25
|
# <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
|
26
26
|
# <% component.slot(:item, bg: :blue_4, percentage: 50) %>
|
27
27
|
# <% end %>
|
28
28
|
#
|
29
|
-
# @example
|
29
|
+
# @example auto|Large
|
30
30
|
# <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
|
31
31
|
# <% component.slot(:item, bg: :red_4, percentage: 75) %>
|
32
32
|
# <% end %>
|
33
33
|
#
|
34
|
-
# @example
|
34
|
+
# @example auto|Multiple items
|
35
35
|
# <%= render(Primer::ProgressBarComponent.new) do |component| %>
|
36
36
|
# <% component.slot(:item, percentage: 10) %>
|
37
37
|
# <% component.slot(:item, bg: :blue_4, percentage: 20) %>
|
@@ -48,15 +48,14 @@ module Primer
|
|
48
48
|
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
|
49
49
|
)
|
50
50
|
@system_arguments[:tag] = :span
|
51
|
-
|
52
51
|
end
|
53
52
|
|
54
53
|
def render?
|
55
54
|
items.any?
|
56
55
|
end
|
57
56
|
|
58
|
-
|
59
|
-
|
57
|
+
# :nodoc:
|
58
|
+
class Item < Primer::Slot
|
60
59
|
attr_reader :system_arguments
|
61
60
|
|
62
61
|
# @param percentage [Integer] Percentage completion of item.
|
@@ -68,7 +67,8 @@ module Primer
|
|
68
67
|
|
69
68
|
@system_arguments[:tag] = :span
|
70
69
|
@system_arguments[:bg] = bg
|
71
|
-
@system_arguments[:style] =
|
70
|
+
@system_arguments[:style] =
|
71
|
+
join_style_arguments(@system_arguments[:style], "width: #{@percentage}%;")
|
72
72
|
@system_arguments[:classes] = class_names("Progress-item", @system_arguments[:classes])
|
73
73
|
end
|
74
74
|
end
|
@@ -3,12 +3,11 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use Primer::SpinnerComponent to let users know that content is being loaded.
|
5
5
|
class SpinnerComponent < Primer::Component
|
6
|
-
|
7
6
|
DEFAULT_SIZE = :medium
|
8
7
|
SIZE_MAPPINGS = {
|
9
8
|
:small => 16,
|
10
9
|
DEFAULT_SIZE => 32,
|
11
|
-
:large => 64
|
10
|
+
:large => 64
|
12
11
|
}.freeze
|
13
12
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
14
13
|
# Setting `box-sizing: content-box` allows consumers to add padding
|
@@ -16,24 +15,28 @@ module Primer
|
|
16
15
|
DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
|
17
16
|
|
18
17
|
#
|
19
|
-
# @example
|
18
|
+
# @example auto|Default
|
20
19
|
# <%= render(Primer::SpinnerComponent.new) %>
|
21
20
|
#
|
22
|
-
# @example
|
21
|
+
# @example auto|Small
|
23
22
|
# <%= render(Primer::SpinnerComponent.new(size: :small)) %>
|
24
23
|
#
|
25
|
-
# @example
|
24
|
+
# @example auto|Large
|
26
25
|
# <%= render(Primer::SpinnerComponent.new(size: :large)) %>
|
27
26
|
#
|
28
27
|
# @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
|
29
|
-
def initialize(size: DEFAULT_SIZE,
|
28
|
+
def initialize(size: DEFAULT_SIZE, **system_arguments)
|
30
29
|
@system_arguments = system_arguments
|
31
30
|
@system_arguments[:tag] = :svg
|
31
|
+
@system_arguments[:style] ||= DEFAULT_STYLE
|
32
32
|
@system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
|
33
33
|
@system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
|
34
34
|
@system_arguments[:viewBox] = "0 0 16 16"
|
35
35
|
@system_arguments[:fill] = :none
|
36
|
-
|
36
|
+
end
|
37
|
+
|
38
|
+
def self.status
|
39
|
+
Primer::Component::STATUSES[:beta]
|
37
40
|
end
|
38
41
|
end
|
39
42
|
end
|
@@ -8,30 +8,30 @@ module Primer
|
|
8
8
|
COLOR_DEFAULT => "",
|
9
9
|
:green => "State--green",
|
10
10
|
:red => "State--red",
|
11
|
-
:purple => "State--purple"
|
11
|
+
:purple => "State--purple"
|
12
12
|
}.freeze
|
13
13
|
COLOR_OPTIONS = COLOR_MAPPINGS.keys
|
14
14
|
|
15
15
|
SIZE_DEFAULT = :default
|
16
16
|
SIZE_MAPPINGS = {
|
17
17
|
SIZE_DEFAULT => "",
|
18
|
-
:small => "State--small"
|
18
|
+
:small => "State--small"
|
19
19
|
}.freeze
|
20
20
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
21
21
|
|
22
22
|
TAG_DEFAULT = :span
|
23
|
-
TAG_OPTIONS = [TAG_DEFAULT, :div, :a]
|
23
|
+
TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
|
24
24
|
|
25
|
-
# @example
|
25
|
+
# @example auto|Default
|
26
26
|
# <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
|
27
27
|
#
|
28
|
-
# @example
|
28
|
+
# @example auto|Colors
|
29
29
|
# <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
|
30
30
|
# <%= render(Primer::StateComponent.new(title: "title", color: :green)) { "Green" } %>
|
31
31
|
# <%= render(Primer::StateComponent.new(title: "title", color: :red)) { "Red" } %>
|
32
32
|
# <%= render(Primer::StateComponent.new(title: "title", color: :purple)) { "Purple" } %>
|
33
33
|
#
|
34
|
-
# @example
|
34
|
+
# @example auto|Sizes
|
35
35
|
# <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
|
36
36
|
# <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
|
37
37
|
#
|
@@ -9,7 +9,7 @@ module Primer
|
|
9
9
|
with_slot :actions, class_name: "Actions"
|
10
10
|
with_slot :description, class_name: "Description"
|
11
11
|
|
12
|
-
# @example
|
12
|
+
# @example auto|Default
|
13
13
|
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
14
14
|
# <% component.slot(:heading) do %>
|
15
15
|
# My Heading
|
@@ -19,7 +19,7 @@ module Primer
|
|
19
19
|
# <% end %>
|
20
20
|
# <% end %>
|
21
21
|
#
|
22
|
-
# @example
|
22
|
+
# @example auto|Without border
|
23
23
|
# <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
|
24
24
|
# <% component.slot(:heading) do %>
|
25
25
|
# My Heading
|
@@ -29,7 +29,7 @@ module Primer
|
|
29
29
|
# <% end %>
|
30
30
|
# <% end %>
|
31
31
|
#
|
32
|
-
# @example
|
32
|
+
# @example auto|With actions
|
33
33
|
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
34
34
|
# <% component.slot(:heading) do %>
|
35
35
|
# My Heading
|
@@ -67,6 +67,7 @@ module Primer
|
|
67
67
|
heading.present?
|
68
68
|
end
|
69
69
|
|
70
|
+
# :nodoc:
|
70
71
|
class Heading < ViewComponent::Slot
|
71
72
|
include ClassNameHelper
|
72
73
|
|
@@ -85,6 +86,7 @@ module Primer
|
|
85
86
|
end
|
86
87
|
end
|
87
88
|
|
89
|
+
# :nodoc:
|
88
90
|
class Actions < ViewComponent::Slot
|
89
91
|
include ClassNameHelper
|
90
92
|
|
@@ -98,6 +100,7 @@ module Primer
|
|
98
100
|
end
|
99
101
|
end
|
100
102
|
|
103
|
+
# :nodoc:
|
101
104
|
class Description < ViewComponent::Slot
|
102
105
|
include ClassNameHelper
|
103
106
|
|
@@ -3,7 +3,7 @@
|
|
3
3
|
module Primer
|
4
4
|
# The Text component is a wrapper component that will apply typography styles to the text inside.
|
5
5
|
class TextComponent < Primer::Component
|
6
|
-
# @example
|
6
|
+
# @example auto|Default
|
7
7
|
# <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
|
8
8
|
# <%= render(Primer::TextComponent.new(tag: :p, color: :red_5)) { "Red Text" } %>
|
9
9
|
#
|
@@ -11,7 +11,7 @@ module Primer
|
|
11
11
|
|
12
12
|
attr_reader :system_arguments
|
13
13
|
|
14
|
-
# @example
|
14
|
+
# @example auto|Default
|
15
15
|
# <div style="padding-left: 60px">
|
16
16
|
# <%= render(Primer::TimelineItemComponent.new) do |component| %>
|
17
17
|
# <% component.slot(:avatar, src: "https://github.com/github.png", alt: "github") %>
|
@@ -36,6 +36,7 @@ module Primer
|
|
36
36
|
avatar.present? || badge.present? || body.present?
|
37
37
|
end
|
38
38
|
|
39
|
+
# :nodoc:
|
39
40
|
class Avatar < Primer::Slot
|
40
41
|
attr_reader :system_arguments, :alt, :src, :size, :square
|
41
42
|
|
@@ -59,6 +60,7 @@ module Primer
|
|
59
60
|
end
|
60
61
|
end
|
61
62
|
|
63
|
+
# :nodoc:
|
62
64
|
class Badge < Primer::Slot
|
63
65
|
attr_reader :system_arguments, :icon
|
64
66
|
|
@@ -76,6 +78,7 @@ module Primer
|
|
76
78
|
end
|
77
79
|
end
|
78
80
|
|
81
|
+
# :nodoc:
|
79
82
|
class Body < Primer::Slot
|
80
83
|
attr_reader :system_arguments
|
81
84
|
|
@@ -0,0 +1,88 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
# The Tooltip component is a wrapper component that will apply a tooltip to the provided content.
|
5
|
+
class TooltipComponent < Primer::Component
|
6
|
+
DIRECTION_DEFAULT = :n
|
7
|
+
ALIGN_DEFAULT = :default
|
8
|
+
MULTILINE_DEFAULT = false
|
9
|
+
DELAY_DEFAULT = false
|
10
|
+
|
11
|
+
ALIGN_MAPPING = {
|
12
|
+
ALIGN_DEFAULT => "",
|
13
|
+
:left_1 => "tooltipped-align-left-1",
|
14
|
+
:right_1 => "tooltipped-align-right-1",
|
15
|
+
:left_2 => "tooltipped-align-left-2",
|
16
|
+
:right_2 => "tooltipped-align-right-2"
|
17
|
+
}.freeze
|
18
|
+
|
19
|
+
DIRECTION_OPTIONS = [DIRECTION_DEFAULT] + %i[
|
20
|
+
nw
|
21
|
+
ne
|
22
|
+
w
|
23
|
+
e
|
24
|
+
sw
|
25
|
+
s
|
26
|
+
se
|
27
|
+
]
|
28
|
+
|
29
|
+
# @example 55|Default
|
30
|
+
# <div class="pt-5">
|
31
|
+
# <%= render(Primer::TooltipComponent.new(label: "Even bolder")) { "Default Bold Text" } %>
|
32
|
+
# </div>
|
33
|
+
#
|
34
|
+
# @example 65|Wrapping another component
|
35
|
+
# <div class="pt-5">
|
36
|
+
# <%= render(Primer::TooltipComponent.new(label: "Even bolder")) do %>
|
37
|
+
# <%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
|
38
|
+
# <% end %>
|
39
|
+
# </div>
|
40
|
+
#
|
41
|
+
# @example 65|With a direction
|
42
|
+
# <div class="pt-5">
|
43
|
+
# <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
|
44
|
+
# </div>
|
45
|
+
#
|
46
|
+
# @example 65|With an alignment
|
47
|
+
# <div class="pt-5">
|
48
|
+
# <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
|
49
|
+
# </div>
|
50
|
+
#
|
51
|
+
# @example 65|Without a delay
|
52
|
+
# <div class="pt-5">
|
53
|
+
# <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
|
54
|
+
# </div>
|
55
|
+
#
|
56
|
+
# @param label [String] the text to appear in the tooltip
|
57
|
+
# @param direction [String] Direction of the tooltip. <%= one_of(Primer::TooltipComponent::DIRECTION_OPTIONS) %>
|
58
|
+
# @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Primer::TooltipComponent::ALIGN_MAPPING.keys) %>
|
59
|
+
# @param multiline [Boolean] Use this when you have long content
|
60
|
+
# @param no_delay [Boolean] By default the tooltips have a slight delay before appearing. Set true to override this
|
61
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
62
|
+
def initialize(
|
63
|
+
label:,
|
64
|
+
direction: DIRECTION_DEFAULT,
|
65
|
+
align: ALIGN_DEFAULT,
|
66
|
+
multiline: MULTILINE_DEFAULT,
|
67
|
+
no_delay: DELAY_DEFAULT,
|
68
|
+
**system_arguments
|
69
|
+
)
|
70
|
+
@system_arguments = system_arguments
|
71
|
+
@system_arguments[:tag] ||= :span
|
72
|
+
@system_arguments[:aria] = { label: label }
|
73
|
+
|
74
|
+
@system_arguments[:classes] = class_names(
|
75
|
+
@system_arguments[:classes],
|
76
|
+
"tooltipped",
|
77
|
+
"tooltipped-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
|
78
|
+
ALIGN_MAPPING[fetch_or_fallback(ALIGN_MAPPING.keys, align, ALIGN_DEFAULT)],
|
79
|
+
"tooltipped-no-delay" => fetch_or_fallback_boolean(no_delay, DELAY_DEFAULT),
|
80
|
+
"tooltipped-multiline" => fetch_or_fallback_boolean(multiline, MULTILINE_DEFAULT)
|
81
|
+
)
|
82
|
+
end
|
83
|
+
|
84
|
+
def call
|
85
|
+
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
86
|
+
end
|
87
|
+
end
|
88
|
+
end
|