primer_view_components 0.0.29 → 0.0.34
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 +66 -0
- data/README.md +2 -2
- data/app/components/primer/auto_complete_component.rb +0 -2
- data/app/components/primer/auto_complete_item_component.rb +0 -2
- data/app/components/primer/avatar_stack_component.rb +0 -2
- data/app/components/primer/base_component.rb +115 -83
- data/app/components/primer/blankslate_component.html.erb +1 -1
- data/app/components/primer/blankslate_component.rb +0 -2
- data/app/components/primer/border_box_component.rb +0 -2
- data/app/components/primer/breadcrumb_component.rb +0 -1
- data/app/components/primer/button_component.rb +11 -11
- data/app/components/primer/button_group_component.rb +3 -5
- data/app/components/primer/button_marketing_component.rb +12 -12
- data/app/components/primer/component.rb +2 -0
- data/app/components/primer/details_component.rb +0 -1
- data/app/components/primer/dropdown/menu_component.rb +0 -2
- data/app/components/primer/dropdown_component.rb +0 -2
- data/app/components/primer/flash_component.html.erb +2 -2
- data/app/components/primer/flash_component.rb +10 -12
- data/app/components/primer/layout_component.rb +0 -2
- data/app/components/primer/link_component.rb +9 -9
- data/app/components/primer/menu_component.rb +2 -4
- data/app/components/primer/navigation/tab_component.html.erb +9 -0
- data/app/components/primer/navigation/tab_component.rb +102 -0
- data/app/components/primer/octicon_component.rb +5 -4
- data/app/components/primer/popover_component.rb +19 -3
- data/app/components/primer/progress_bar_component.rb +0 -1
- data/app/components/primer/spinner_component.html.erb +1 -3
- data/app/components/primer/spinner_component.rb +1 -0
- data/app/components/primer/state_component.rb +13 -13
- data/app/components/primer/subhead_component.rb +1 -3
- data/app/components/primer/tab_nav_component.html.erb +9 -11
- data/app/components/primer/tab_nav_component.rb +46 -73
- data/app/components/primer/time_ago_component.rb +2 -1
- data/app/components/primer/timeline_item_component.rb +1 -2
- data/app/components/primer/underline_nav_component.html.erb +19 -7
- data/app/components/primer/underline_nav_component.rb +80 -14
- data/app/lib/primer/classify.rb +5 -14
- data/app/lib/primer/classify/cache.rb +14 -4
- data/app/lib/primer/classify/functional_colors.rb +8 -6
- data/app/lib/primer/classify/spacing.rb +63 -0
- data/app/lib/primer/tabbed_component_helper.rb +35 -0
- data/app/lib/primer/view_helper.rb +2 -2
- data/lib/primer/view_components/version.rb +1 -1
- data/static/statuses.json +1 -1
- metadata +6 -3
- data/app/components/primer/slot.rb +0 -10
@@ -3,14 +3,14 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
|
5
5
|
class ButtonMarketingComponent < Primer::Component
|
6
|
-
|
7
|
-
|
8
|
-
|
6
|
+
DEFAULT_SCHEME = :default
|
7
|
+
SCHEME_MAPPINGS = {
|
8
|
+
DEFAULT_SCHEME => "",
|
9
9
|
:primary => "btn-primary-mktg",
|
10
10
|
:outline => "btn-outline-mktg",
|
11
11
|
:transparent => "btn-transparent"
|
12
12
|
}.freeze
|
13
|
-
|
13
|
+
SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
|
14
14
|
|
15
15
|
DEFAULT_VARIANT = :default
|
16
16
|
VARIANT_MAPPINGS = {
|
@@ -25,25 +25,25 @@ module Primer
|
|
25
25
|
DEFAULT_TYPE = :button
|
26
26
|
TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
|
27
27
|
|
28
|
-
# @example
|
28
|
+
# @example Schemes
|
29
29
|
# <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
|
30
|
-
# <%= render(Primer::ButtonMarketingComponent.new(
|
31
|
-
# <%= render(Primer::ButtonMarketingComponent.new(
|
32
|
-
# <div class="bg-
|
33
|
-
# <%= render(Primer::ButtonMarketingComponent.new(
|
30
|
+
# <%= render(Primer::ButtonMarketingComponent.new(scheme: :primary, mr: 2)) { "Primary" } %>
|
31
|
+
# <%= render(Primer::ButtonMarketingComponent.new(scheme: :outline)) { "Outline" } %>
|
32
|
+
# <div class="color-bg-canvas-inverse">
|
33
|
+
# <%= render(Primer::ButtonMarketingComponent.new(scheme: :transparent)) { "Transparent" } %>
|
34
34
|
# </div>
|
35
35
|
#
|
36
36
|
# @example Sizes
|
37
37
|
# <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
|
38
38
|
# <%= render(Primer::ButtonMarketingComponent.new(variant: :large)) { "Large" } %>
|
39
39
|
#
|
40
|
-
# @param
|
40
|
+
# @param scheme [Symbol] <%= one_of(Primer::ButtonMarketingComponent::SCHEME_OPTIONS) %>
|
41
41
|
# @param variant [Symbol] <%= one_of(Primer::ButtonMarketingComponent::VARIANT_OPTIONS) %>
|
42
42
|
# @param tag [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TAG_OPTIONS) %>
|
43
43
|
# @param type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TYPE_OPTIONS) %>
|
44
44
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
45
45
|
def initialize(
|
46
|
-
|
46
|
+
scheme: DEFAULT_SCHEME,
|
47
47
|
variant: DEFAULT_VARIANT,
|
48
48
|
tag: DEFAULT_TAG,
|
49
49
|
type: DEFAULT_TYPE,
|
@@ -60,7 +60,7 @@ module Primer
|
|
60
60
|
|
61
61
|
@system_arguments[:classes] = class_names(
|
62
62
|
"btn-mktg",
|
63
|
-
|
63
|
+
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
|
64
64
|
VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
|
65
65
|
system_arguments[:classes]
|
66
66
|
)
|
@@ -1,10 +1,12 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
require "octicons_helper/helper"
|
4
|
+
require "view_component/version"
|
4
5
|
|
5
6
|
module Primer
|
6
7
|
# @private
|
7
8
|
class Component < ViewComponent::Base
|
9
|
+
include ViewComponent::SlotableV2 unless ViewComponent::VERSION::STRING.to_f >= 2.28
|
8
10
|
include ClassNameHelper
|
9
11
|
include FetchOrFallbackHelper
|
10
12
|
include OcticonsHelper
|
@@ -5,8 +5,6 @@ module Primer
|
|
5
5
|
# This component is part of `Primer::DropdownComponent` and should not be
|
6
6
|
# used as a standalone component.
|
7
7
|
class MenuComponent < Primer::Component
|
8
|
-
include ViewComponent::SlotableV2
|
9
|
-
|
10
8
|
SCHEME_DEFAULT = :default
|
11
9
|
SCHEME_MAPPINGS = {
|
12
10
|
SCHEME_DEFAULT => "",
|
@@ -4,8 +4,6 @@ module Primer
|
|
4
4
|
# Dropdowns are lightweight context menus for housing navigation and actions.
|
5
5
|
# They're great for instances where you don't need the full power (and code) of the select menu.
|
6
6
|
class DropdownComponent < Primer::Component
|
7
|
-
include ViewComponent::SlotableV2
|
8
|
-
|
9
7
|
# Required trigger for the dropdown. Only accepts a content.
|
10
8
|
# Its classes can be customized by the `summary_classes` param in the parent component
|
11
9
|
renders_one :button
|
@@ -1,9 +1,9 @@
|
|
1
1
|
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
2
|
-
<%= primer_octicon
|
2
|
+
<%= primer_octicon @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
|
-
<%= primer_octicon
|
6
|
+
<%= primer_octicon "x" %>
|
7
7
|
</button>
|
8
8
|
<% end %>
|
9
9
|
|
@@ -5,8 +5,6 @@ module Primer
|
|
5
5
|
class FlashComponent < Primer::Component
|
6
6
|
status :beta
|
7
7
|
|
8
|
-
include ViewComponent::SlotableV2
|
9
|
-
|
10
8
|
# Optional action content showed on the right side of the component.
|
11
9
|
#
|
12
10
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
@@ -17,18 +15,18 @@ module Primer
|
|
17
15
|
Primer::BaseComponent.new(**system_arguments)
|
18
16
|
}
|
19
17
|
|
20
|
-
|
21
|
-
|
22
|
-
|
18
|
+
DEFAULT_SCHEME = :default
|
19
|
+
SCHEME_MAPPINGS = {
|
20
|
+
DEFAULT_SCHEME => "",
|
23
21
|
:warning => "flash-warn",
|
24
22
|
:danger => "flash-error",
|
25
23
|
:success => "flash-success"
|
26
24
|
}.freeze
|
27
|
-
# @example
|
25
|
+
# @example Schemes
|
28
26
|
# <%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
|
29
|
-
# <%= render(Primer::FlashComponent.new(
|
30
|
-
# <%= render(Primer::FlashComponent.new(
|
31
|
-
# <%= render(Primer::FlashComponent.new(
|
27
|
+
# <%= render(Primer::FlashComponent.new(scheme: :warning)) { "This is a warning flash message!" } %>
|
28
|
+
# <%= render(Primer::FlashComponent.new(scheme: :danger)) { "This is a danger flash message!" } %>
|
29
|
+
# <%= render(Primer::FlashComponent.new(scheme: :success)) { "This is a success flash message!" } %>
|
32
30
|
#
|
33
31
|
# @example Full width
|
34
32
|
# <%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
|
@@ -51,9 +49,9 @@ module Primer
|
|
51
49
|
# @param spacious [Boolean] Whether to add margin to the bottom of the component.
|
52
50
|
# @param dismissible [Boolean] Whether the component can be dismissed with an X button.
|
53
51
|
# @param icon [String] Name of Octicon icon to use.
|
54
|
-
# @param
|
52
|
+
# @param scheme [Symbol] <%= one_of(Primer::FlashComponent::SCHEME_MAPPINGS.keys) %>
|
55
53
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
56
|
-
def initialize(full: false, spacious: false, dismissible: false, icon: nil,
|
54
|
+
def initialize(full: false, spacious: false, dismissible: false, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
|
57
55
|
@icon = icon
|
58
56
|
@dismissible = dismissible
|
59
57
|
@system_arguments = system_arguments
|
@@ -61,7 +59,7 @@ module Primer
|
|
61
59
|
@system_arguments[:classes] = class_names(
|
62
60
|
@system_arguments[:classes],
|
63
61
|
"flash",
|
64
|
-
|
62
|
+
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
|
65
63
|
"flash-full": full
|
66
64
|
)
|
67
65
|
@system_arguments[:mb] ||= spacious ? 4 : nil
|
@@ -5,9 +5,9 @@ module Primer
|
|
5
5
|
class LinkComponent < Primer::Component
|
6
6
|
status :beta
|
7
7
|
|
8
|
-
|
9
|
-
|
10
|
-
|
8
|
+
DEFAULT_SCHEME = :default
|
9
|
+
SCHEME_MAPPINGS = {
|
10
|
+
DEFAULT_SCHEME => "",
|
11
11
|
:primary => "Link--primary",
|
12
12
|
:secondary => "Link--secondary"
|
13
13
|
}.freeze
|
@@ -21,9 +21,9 @@ module Primer
|
|
21
21
|
# @example Muted
|
22
22
|
# <%= render(Primer::LinkComponent.new(href: "#", muted: true)) { "Link" } %>
|
23
23
|
#
|
24
|
-
# @example
|
25
|
-
# <%= render(Primer::LinkComponent.new(href: "#",
|
26
|
-
# <%= render(Primer::LinkComponent.new(href: "#",
|
24
|
+
# @example Schemes
|
25
|
+
# <%= render(Primer::LinkComponent.new(href: "#", scheme: :primary)) { "Primary" } %>
|
26
|
+
# <%= render(Primer::LinkComponent.new(href: "#", scheme: :secondary)) { "Secondary" } %>
|
27
27
|
#
|
28
28
|
# @example Without underline
|
29
29
|
# <%= render(Primer::LinkComponent.new(href: "#", underline: false)) { "Link" } %>
|
@@ -33,17 +33,17 @@ module Primer
|
|
33
33
|
#
|
34
34
|
# @param tag [String] <%= one_of(Primer::LinkComponent::TAG_OPTIONS) %>
|
35
35
|
# @param href [String] URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
|
36
|
-
# @param
|
36
|
+
# @param scheme [Symbol] <%= one_of(Primer::LinkComponent::SCHEME_MAPPINGS.keys) %>
|
37
37
|
# @param muted [Boolean] Uses light gray for Link color, and blue on hover.
|
38
38
|
# @param underline [Boolean] Whether or not to underline the link.
|
39
39
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
40
|
-
def initialize(href: nil, tag: DEFAULT_TAG,
|
40
|
+
def initialize(href: nil, tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, muted: false, underline: true, **system_arguments)
|
41
41
|
@system_arguments = system_arguments
|
42
42
|
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
|
43
43
|
@system_arguments[:href] = href
|
44
44
|
@system_arguments[:classes] = class_names(
|
45
45
|
@system_arguments[:classes],
|
46
|
-
|
46
|
+
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
|
47
47
|
"Link" => tag == :span,
|
48
48
|
"Link--muted" => muted,
|
49
49
|
"no-underline" => !underline
|
@@ -3,8 +3,6 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use menus to create vertical lists of navigational links.
|
5
5
|
class MenuComponent < Primer::Component
|
6
|
-
include ViewComponent::SlotableV2
|
7
|
-
|
8
6
|
# Optional menu heading
|
9
7
|
#
|
10
8
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
@@ -44,11 +42,11 @@ module Primer
|
|
44
42
|
# Item 1
|
45
43
|
# <% end %>
|
46
44
|
# <% c.item(href: "#url") do %>
|
47
|
-
# <%= render(Primer::OcticonComponent.new(
|
45
|
+
# <%= render(Primer::OcticonComponent.new("check")) %>
|
48
46
|
# With Icon
|
49
47
|
# <% end %>
|
50
48
|
# <% c.item(href: "#url") do %>
|
51
|
-
# <%= render(Primer::OcticonComponent.new(
|
49
|
+
# <%= render(Primer::OcticonComponent.new("check")) %>
|
52
50
|
# With Icon and Counter
|
53
51
|
# <%= render(Primer::CounterComponent.new(count: 25)) %>
|
54
52
|
# <% end %>
|
@@ -0,0 +1,102 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module Navigation
|
5
|
+
# This component is part of navigation components such as `Primer::TabNavComponent`
|
6
|
+
# and `Primer::UnderlineNavComponent` and should not be used by itself.
|
7
|
+
class TabComponent < Primer::Component
|
8
|
+
# Panel controlled by the Tab. This will not render anything in the tab itself.
|
9
|
+
# It will provide a accessor for the Tab's parent to call and render the panel
|
10
|
+
# content in the appropriate place.
|
11
|
+
# Refer to `UnderlineNavComponent` and `TabNavComponent` implementations for examples.
|
12
|
+
#
|
13
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
14
|
+
renders_one :panel, lambda { |**system_arguments|
|
15
|
+
system_arguments[:tag] ||= :div
|
16
|
+
system_arguments[:role] ||= :tabpanel
|
17
|
+
system_arguments[:hidden] = true unless @selected
|
18
|
+
|
19
|
+
Primer::BaseComponent.new(**system_arguments)
|
20
|
+
}
|
21
|
+
|
22
|
+
# Icon to be rendered in the Tab left.
|
23
|
+
#
|
24
|
+
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
|
25
|
+
renders_one :icon, lambda { |icon = nil, **system_arguments|
|
26
|
+
system_arguments[:classes] = class_names(
|
27
|
+
@icon_classes,
|
28
|
+
system_arguments[:classes]
|
29
|
+
)
|
30
|
+
Primer::OcticonComponent.new(icon, **system_arguments)
|
31
|
+
}
|
32
|
+
|
33
|
+
# The Tab's text.
|
34
|
+
#
|
35
|
+
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::TextComponent) %>.
|
36
|
+
renders_one :text, Primer::TextComponent
|
37
|
+
|
38
|
+
# Counter to be rendered in the Tab right.
|
39
|
+
#
|
40
|
+
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::CounterComponent) %>.
|
41
|
+
renders_one :counter, Primer::CounterComponent
|
42
|
+
|
43
|
+
attr_reader :selected
|
44
|
+
|
45
|
+
# @example Default
|
46
|
+
# <%= render(Primer::Navigation::TabComponent.new(selected: true)) do |c| %>
|
47
|
+
# <% c.text { "Selected" } %>
|
48
|
+
# <% end %>
|
49
|
+
# <%= render(Primer::Navigation::TabComponent.new) do |c| %>
|
50
|
+
# <% c.text { "Not selected" } %>
|
51
|
+
# <% end %>
|
52
|
+
#
|
53
|
+
# @example With icons and counters
|
54
|
+
# <%= render(Primer::Navigation::TabComponent.new) do |c| %>
|
55
|
+
# <% c.icon(:star) %>
|
56
|
+
# <% c.text { "Tab" } %>
|
57
|
+
# <% end %>
|
58
|
+
# <%= render(Primer::Navigation::TabComponent.new) do |c| %>
|
59
|
+
# <% c.icon(:star) %>
|
60
|
+
# <% c.text { "Tab" } %>
|
61
|
+
# <% c.counter(count: 10) %>
|
62
|
+
# <% end %>
|
63
|
+
# <%= render(Primer::Navigation::TabComponent.new) do |c| %>
|
64
|
+
# <% c.text { "Tab" } %>
|
65
|
+
# <% c.counter(count: 10) %>
|
66
|
+
# <% end %>
|
67
|
+
#
|
68
|
+
# @example With custom HTML
|
69
|
+
# <%= render(Primer::Navigation::TabComponent.new) do |c| %>
|
70
|
+
# <div>
|
71
|
+
# This is my <strong>custom HTML</strong>
|
72
|
+
# </div>
|
73
|
+
# <% end %>
|
74
|
+
#
|
75
|
+
# @param selected [Boolean] Whether the Tab is selected or not.
|
76
|
+
# @param with_panel [Boolean] Whether the Tab has an associated panel.
|
77
|
+
# @param icon_classes [Boolean] Classes that must always be applied to icons.
|
78
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
79
|
+
def initialize(selected: false, with_panel: false, icon_classes: "", **system_arguments)
|
80
|
+
@selected = selected
|
81
|
+
@icon_classes = icon_classes
|
82
|
+
@system_arguments = system_arguments
|
83
|
+
@system_arguments[:role] = :tab
|
84
|
+
|
85
|
+
if with_panel
|
86
|
+
@system_arguments[:tag] ||= :button
|
87
|
+
@system_arguments[:type] = :button
|
88
|
+
else
|
89
|
+
@system_arguments[:tag] ||= :a
|
90
|
+
end
|
91
|
+
|
92
|
+
return unless @selected
|
93
|
+
|
94
|
+
if @system_arguments[:tag] == :a
|
95
|
+
@system_arguments[:"aria-current"] = :page
|
96
|
+
else
|
97
|
+
@system_arguments[:"aria-selected"] = true
|
98
|
+
end
|
99
|
+
end
|
100
|
+
end
|
101
|
+
end
|
102
|
+
end
|
@@ -18,19 +18,20 @@ module Primer
|
|
18
18
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
19
19
|
|
20
20
|
# @example Default
|
21
|
+
# <%= render(Primer::OcticonComponent.new("check")) %>
|
21
22
|
# <%= render(Primer::OcticonComponent.new(icon: "check")) %>
|
22
23
|
#
|
23
24
|
# @example Medium
|
24
|
-
# <%= render(Primer::OcticonComponent.new(
|
25
|
+
# <%= render(Primer::OcticonComponent.new("people", size: :medium)) %>
|
25
26
|
#
|
26
27
|
# @example Large
|
27
|
-
# <%= render(Primer::OcticonComponent.new(
|
28
|
+
# <%= render(Primer::OcticonComponent.new("x", size: :large)) %>
|
28
29
|
#
|
29
30
|
# @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
|
30
31
|
# @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
|
31
32
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
32
|
-
def initialize(icon
|
33
|
-
@icon = icon
|
33
|
+
def initialize(icon_name = nil, icon: nil, size: SIZE_DEFAULT, **system_arguments)
|
34
|
+
@icon = icon_name || icon
|
34
35
|
@system_arguments = system_arguments
|
35
36
|
|
36
37
|
@system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]
|
@@ -5,7 +5,6 @@ module Primer
|
|
5
5
|
#
|
6
6
|
# By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
|
7
7
|
class PopoverComponent < Primer::Component
|
8
|
-
include ViewComponent::SlotableV2
|
9
8
|
status :beta
|
10
9
|
|
11
10
|
CARET_DEFAULT = :top
|
@@ -54,7 +53,7 @@ module Primer
|
|
54
53
|
|
55
54
|
# This is a hack to allow the parent to set the slot's content
|
56
55
|
@body_arguments = system_arguments
|
57
|
-
block&.call
|
56
|
+
view_context.capture { block&.call }
|
58
57
|
}
|
59
58
|
|
60
59
|
# @example Default
|
@@ -83,7 +82,24 @@ module Primer
|
|
83
82
|
# Activity feed
|
84
83
|
# <% end %>
|
85
84
|
# <% component.body(caret: :left) do %>
|
86
|
-
# This is the
|
85
|
+
# This is the Popover body.
|
86
|
+
# <% end %>
|
87
|
+
# <% end %>
|
88
|
+
#
|
89
|
+
# @example With HTML body
|
90
|
+
# <%= render Primer::PopoverComponent.new do |component| %>
|
91
|
+
# <% component.heading do %>
|
92
|
+
# Activity feed
|
93
|
+
# <% end %>
|
94
|
+
# <% component.body(caret: :left) do %>
|
95
|
+
# <p> This is the Popover body.</p>
|
96
|
+
# <div>
|
97
|
+
# This is using HTML.
|
98
|
+
# <ul>
|
99
|
+
# <li>Thing #1</li>
|
100
|
+
# <li>Thing #2</li>
|
101
|
+
# </ul>
|
102
|
+
# </div>
|
87
103
|
# <% end %>
|
88
104
|
# <% end %>
|
89
105
|
#
|
@@ -1,6 +1,4 @@
|
|
1
1
|
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
2
2
|
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
|
3
|
-
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"
|
4
|
-
<animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="1s" repeatCount="indefinite" />
|
5
|
-
</path>
|
3
|
+
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
|
6
4
|
<% end %>
|