primer_view_components 0.0.16 → 0.0.21
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 +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 -4
- data/app/components/primer/blankslate_component.html.erb +1 -1
- data/app/components/primer/blankslate_component.rb +18 -25
- 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 +16 -9
- 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.html.erb +2 -5
- data/app/components/primer/flash_component.rb +18 -19
- 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.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/app/components/primer/view_components.rb +9 -0
- data/lib/primer/class_name_helper.rb +1 -0
- data/lib/primer/classify.rb +139 -107
- 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
|
#
|
@@ -1,17 +1,5 @@
|
|
1
|
-
<%= render Primer::BaseComponent.new(
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
<% if badge %>
|
7
|
-
<%= render Primer::BaseComponent.new(**badge.system_arguments) do %>
|
8
|
-
<%= octicon badge.icon %>
|
9
|
-
<% end %>
|
10
|
-
<% end %>
|
11
|
-
|
12
|
-
<% if body %>
|
13
|
-
<%= render Primer::BaseComponent.new(**body.system_arguments) do %>
|
14
|
-
<%= body.content %>
|
15
|
-
<% end %>
|
16
|
-
<% end %>
|
1
|
+
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
2
|
+
<%= avatar %>
|
3
|
+
<%= badge %>
|
4
|
+
<%= body %>
|
17
5
|
<% end %>
|
@@ -3,20 +3,45 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
|
5
5
|
class TimelineItemComponent < Primer::Component
|
6
|
-
include ViewComponent::
|
6
|
+
include ViewComponent::SlotableV2
|
7
7
|
|
8
|
-
|
9
|
-
|
10
|
-
|
8
|
+
# Avatar to be rendered to the left of the Badge.
|
9
|
+
#
|
10
|
+
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
|
11
|
+
renders_one :avatar, lambda { |src:, size: 40, square: true, **system_arguments|
|
12
|
+
system_arguments[:classes] = class_names(
|
13
|
+
"TimelineItem-avatar",
|
14
|
+
system_arguments[:classes]
|
15
|
+
)
|
16
|
+
|
17
|
+
Primer::AvatarComponent.new(src: src, size: size, square: square, **system_arguments)
|
18
|
+
}
|
11
19
|
|
12
|
-
|
20
|
+
# Badge that will be connected to other TimelineItems.
|
21
|
+
#
|
22
|
+
# @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
|
23
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
24
|
+
renders_one :badge, "BadgeComponent"
|
13
25
|
|
14
|
-
#
|
26
|
+
# Body to be rendered to the left of the Badge.
|
27
|
+
#
|
28
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
29
|
+
renders_one :body, lambda { |**system_arguments|
|
30
|
+
system_arguments[:tag] = :div
|
31
|
+
system_arguments[:classes] = class_names(
|
32
|
+
"TimelineItem-body",
|
33
|
+
system_arguments[:classes]
|
34
|
+
)
|
35
|
+
|
36
|
+
Primer::BaseComponent.new(**system_arguments)
|
37
|
+
}
|
38
|
+
|
39
|
+
# @example auto|Default
|
15
40
|
# <div style="padding-left: 60px">
|
16
41
|
# <%= render(Primer::TimelineItemComponent.new) do |component| %>
|
17
|
-
# <% component.
|
18
|
-
# <% component.
|
19
|
-
# <% component.
|
42
|
+
# <% component.avatar(src: "https://github.com/github.png", alt: "github") %>
|
43
|
+
# <% component.badge(bg: :green, color: :white, icon: :check) %>
|
44
|
+
# <% component.body { "Success!" } %>
|
20
45
|
# <% end %>
|
21
46
|
# </div>
|
22
47
|
#
|
@@ -36,34 +61,9 @@ module Primer
|
|
36
61
|
avatar.present? || badge.present? || body.present?
|
37
62
|
end
|
38
63
|
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
# @param alt [String] Alt text for avatar image.
|
43
|
-
# @param src [String] Src attribute for avatar image.
|
44
|
-
# @param size [Integer] Image size.
|
45
|
-
# @param square [Boolean] Whether to round the edges of the image.
|
46
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
47
|
-
def initialize(alt: nil, src: nil, size: 40, square: true, **system_arguments)
|
48
|
-
@alt = alt
|
49
|
-
@src = src
|
50
|
-
@size = size
|
51
|
-
@square = square
|
52
|
-
|
53
|
-
@system_arguments = system_arguments
|
54
|
-
@system_arguments[:tag] = :div
|
55
|
-
@system_arguments[:classes] = class_names(
|
56
|
-
"TimelineItem-avatar",
|
57
|
-
system_arguments[:classes]
|
58
|
-
)
|
59
|
-
end
|
60
|
-
end
|
61
|
-
|
62
|
-
class Badge < Primer::Slot
|
63
|
-
attr_reader :system_arguments, :icon
|
64
|
-
|
65
|
-
# @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
|
66
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
64
|
+
# This component is part of `Primer::TimelineItemComponent` and should not be
|
65
|
+
# used as a standalone component.
|
66
|
+
class BadgeComponent < Primer::Component
|
67
67
|
def initialize(icon: nil, **system_arguments)
|
68
68
|
@icon = icon
|
69
69
|
|
@@ -74,19 +74,11 @@ module Primer
|
|
74
74
|
system_arguments[:classes]
|
75
75
|
)
|
76
76
|
end
|
77
|
-
end
|
78
|
-
|
79
|
-
class Body < Primer::Slot
|
80
|
-
attr_reader :system_arguments
|
81
77
|
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
@system_arguments[:classes] = class_names(
|
87
|
-
"TimelineItem-body",
|
88
|
-
system_arguments[:classes]
|
89
|
-
)
|
78
|
+
def call
|
79
|
+
render(Primer::BaseComponent.new(**@system_arguments)) do
|
80
|
+
render(Primer::OcticonComponent.new(icon: @icon))
|
81
|
+
end
|
90
82
|
end
|
91
83
|
end
|
92
84
|
end
|