primer_view_components 0.0.40 → 0.0.45
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +239 -1
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/components/primer/alpha/button_marketing.rb +70 -0
- data/app/components/primer/auto_complete.rb +99 -41
- data/app/components/primer/auto_complete/auto_complete.html.erb +1 -0
- data/app/components/primer/{auto_complete/auto_component.d.ts → auto_complete_component.d.ts} +0 -0
- data/app/components/primer/{auto_complete/auto_component.js → auto_complete_component.js} +0 -0
- data/app/components/primer/avatar_stack_component.rb +2 -2
- data/app/components/primer/base_component.rb +31 -21
- data/app/components/primer/beta/text.rb +27 -0
- data/app/components/primer/blankslate_component.html.erb +1 -0
- data/app/components/primer/blankslate_component.rb +65 -46
- data/app/components/primer/button_component.rb +3 -2
- data/app/components/primer/button_group.rb +1 -1
- data/app/components/primer/clipboard_copy.rb +25 -7
- data/app/components/primer/clipboard_copy_component.js +13 -2
- data/app/components/primer/clipboard_copy_component.ts +15 -2
- data/app/components/primer/component.rb +1 -1
- data/app/components/primer/details_component.rb +12 -1
- data/app/components/primer/details_menu_component.d.ts +1 -0
- data/app/components/primer/details_menu_component.js +1 -0
- data/app/components/primer/dropdown.d.ts +1 -0
- data/app/components/primer/{dropdown_component.html.erb → dropdown.html.erb} +2 -1
- data/app/components/primer/dropdown.js +1 -0
- data/app/components/primer/dropdown.rb +149 -0
- data/app/components/primer/dropdown.ts +1 -0
- data/app/components/primer/dropdown/menu.d.ts +1 -0
- data/app/components/primer/dropdown/menu.html.erb +25 -0
- data/app/components/primer/dropdown/menu.js +1 -0
- data/app/components/primer/dropdown/menu.rb +99 -0
- data/app/components/primer/dropdown/menu.ts +1 -0
- data/app/components/primer/flash_component.rb +2 -2
- data/app/components/primer/heading_component.rb +1 -1
- data/app/components/primer/hidden_text_expander.rb +2 -2
- data/app/components/primer/icon_button.rb +1 -1
- data/app/components/primer/image.rb +46 -0
- data/app/components/primer/image_crop.rb +2 -2
- data/app/components/primer/label_component.rb +6 -2
- data/app/components/primer/local_time.d.ts +1 -0
- data/app/components/primer/local_time.js +1 -0
- data/app/components/primer/local_time.rb +59 -0
- data/app/components/primer/local_time.ts +1 -0
- data/app/components/primer/markdown.rb +6 -2
- data/app/components/primer/navigation/tab_component.rb +10 -3
- data/app/components/primer/octicon_component.rb +15 -12
- data/app/components/primer/primer.d.ts +2 -0
- data/app/components/primer/primer.js +2 -0
- data/app/components/primer/primer.ts +2 -0
- data/app/components/primer/spinner_component.rb +2 -0
- data/app/components/primer/tab_nav_component.html.erb +5 -1
- data/app/components/primer/tab_nav_component.rb +62 -9
- data/app/components/primer/{tooltip_component.rb → tooltip.rb} +10 -8
- data/app/components/primer/truncate.rb +6 -2
- data/app/components/primer/underline_nav_component.html.erb +1 -1
- data/app/components/primer/underline_nav_component.rb +17 -1
- data/app/lib/primer/classify.rb +35 -12
- data/app/lib/primer/classify/cache.rb +12 -17
- data/app/lib/primer/classify/grid.rb +45 -0
- data/app/lib/primer/classify/utilities.rb +137 -0
- data/app/lib/primer/classify/utilities.yml +1147 -0
- data/app/lib/primer/tabbed_component_helper.rb +2 -2
- data/app/lib/primer/view_helper.rb +2 -1
- data/lib/primer/view_components/engine.rb +2 -0
- data/lib/primer/view_components/linters.rb +3 -0
- data/lib/primer/view_components/linters/argument_mappers/button.rb +82 -0
- data/lib/primer/view_components/linters/argument_mappers/conversion_error.rb +10 -0
- data/lib/primer/view_components/linters/argument_mappers/system_arguments.rb +48 -0
- data/lib/primer/view_components/linters/button_component_migration_counter.rb +39 -0
- data/lib/primer/view_components/linters/flash_component_migration_counter.rb +16 -0
- data/lib/primer/view_components/linters/helpers.rb +191 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +184 -109
- data/lib/tasks/utilities.rake +99 -0
- data/lib/yard/docs_helper.rb +12 -2
- data/static/statuses.json +10 -6
- metadata +65 -14
- data/app/components/primer/button_marketing_component.rb +0 -68
- data/app/components/primer/dropdown/menu_component.html.erb +0 -12
- data/app/components/primer/dropdown/menu_component.rb +0 -46
- data/app/components/primer/dropdown_component.rb +0 -73
- data/app/components/primer/text_component.rb +0 -25
- data/app/lib/primer/classify/spacing.rb +0 -63
@@ -0,0 +1 @@
|
|
1
|
+
import '@github/details-menu-element';
|
@@ -0,0 +1 @@
|
|
1
|
+
import '@github/details-menu-element';
|
@@ -0,0 +1 @@
|
|
1
|
+
import './dropdown/menu';
|
@@ -1,6 +1,7 @@
|
|
1
1
|
<%= render(Primer::DetailsComponent.new(**@system_arguments)) do |c| %>
|
2
|
-
<% c.summary(
|
2
|
+
<% c.summary(**@button_arguments) do %>
|
3
3
|
<%= button %>
|
4
|
+
<% if @with_caret %><div class="dropdown-caret"></div><% end %>
|
4
5
|
<% end %>
|
5
6
|
|
6
7
|
<% c.body do %>
|
@@ -0,0 +1 @@
|
|
1
|
+
import './dropdown/menu';
|
@@ -0,0 +1,149 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
# `Dropdown` is a lightweight context menu for housing navigation and actions.
|
5
|
+
# They're great for instances where you don't need the full power (and code) of the SelectMenu.
|
6
|
+
class Dropdown < Primer::Component
|
7
|
+
# Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Primer::ButtonComponent) %>,
|
8
|
+
# but it is locked as a `summary` tag.
|
9
|
+
renders_one :button, lambda { |**system_arguments, &block|
|
10
|
+
@button_arguments = system_arguments
|
11
|
+
@button_arguments[:button] = true
|
12
|
+
|
13
|
+
view_context.capture { block&.call }
|
14
|
+
}
|
15
|
+
|
16
|
+
# Required context menu for the dropdown.
|
17
|
+
#
|
18
|
+
# @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
|
19
|
+
# @param direction [Symbol] <%= one_of(Primer::Dropdown::Menu::DIRECTION_OPTIONS) %>
|
20
|
+
# @param scheme [Symbol] Pass `:dark` for dark mode theming
|
21
|
+
# @param header [String] Optional string to display as the header
|
22
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
23
|
+
renders_one :menu, "Primer::Dropdown::Menu"
|
24
|
+
|
25
|
+
# @example Default
|
26
|
+
# <%= render(Primer::Dropdown.new) do |c| %>
|
27
|
+
# <% c.button do %>
|
28
|
+
# Dropdown
|
29
|
+
# <% end %>
|
30
|
+
#
|
31
|
+
# <%= c.menu(header: "Options") do |menu|
|
32
|
+
# menu.item { "Item 1" }
|
33
|
+
# menu.item { "Item 2" }
|
34
|
+
# menu.item { "Item 3" }
|
35
|
+
# end %>
|
36
|
+
# <% end %>
|
37
|
+
#
|
38
|
+
# @example With dividers
|
39
|
+
#
|
40
|
+
# @description
|
41
|
+
# Dividers can be used to separate a group of items. They don't have any content.
|
42
|
+
# @code
|
43
|
+
# <%= render(Primer::Dropdown.new) do |c| %>
|
44
|
+
# <% c.button do %>
|
45
|
+
# Dropdown
|
46
|
+
# <% end %>
|
47
|
+
#
|
48
|
+
# <%= c.menu(header: "Options") do |menu|
|
49
|
+
# menu.item { "Item 1" }
|
50
|
+
# menu.item { "Item 2" }
|
51
|
+
# menu.item(divider: true)
|
52
|
+
# menu.item { "Item 3" }
|
53
|
+
# menu.item { "Item 4" }
|
54
|
+
# menu.item(divider: true)
|
55
|
+
# menu.item { "Item 5" }
|
56
|
+
# menu.item { "Item 6" }
|
57
|
+
# end %>
|
58
|
+
# <% end %>
|
59
|
+
#
|
60
|
+
# @example With direction
|
61
|
+
# <%= render(Primer::Dropdown.new(display: :inline_block)) do |c| %>
|
62
|
+
# <% c.button do %>
|
63
|
+
# Dropdown
|
64
|
+
# <% end %>
|
65
|
+
#
|
66
|
+
# <%= c.menu(header: "Options", direction: :s) do |menu|
|
67
|
+
# menu.item { "Item 1" }
|
68
|
+
# menu.item { "Item 2" }
|
69
|
+
# menu.item { "Item 3" }
|
70
|
+
# menu.item { "Item 4" }
|
71
|
+
# end %>
|
72
|
+
# <% end %>
|
73
|
+
#
|
74
|
+
# @example With caret
|
75
|
+
# <%= render(Primer::Dropdown.new(with_caret: true)) do |c| %>
|
76
|
+
# <% c.button do %>
|
77
|
+
# Dropdown
|
78
|
+
# <% end %>
|
79
|
+
#
|
80
|
+
# <%= c.menu(header: "Options") do |menu|
|
81
|
+
# menu.item { "Item 1" }
|
82
|
+
# menu.item { "Item 2" }
|
83
|
+
# menu.item { "Item 3" }
|
84
|
+
# menu.item { "Item 4" }
|
85
|
+
# end %>
|
86
|
+
# <% end %>
|
87
|
+
#
|
88
|
+
# @example Customizing the button
|
89
|
+
# <%= render(Primer::Dropdown.new) do |c| %>
|
90
|
+
# <% c.button(scheme: :primary, variant: :small) do %>
|
91
|
+
# Dropdown
|
92
|
+
# <% end %>
|
93
|
+
#
|
94
|
+
# <%= c.menu(header: "Options") do |menu|
|
95
|
+
# menu.item { "Item 1" }
|
96
|
+
# menu.item { "Item 2" }
|
97
|
+
# menu.item { "Item 3" }
|
98
|
+
# menu.item { "Item 4" }
|
99
|
+
# end %>
|
100
|
+
# <% end %>
|
101
|
+
#
|
102
|
+
# @example Menu as list
|
103
|
+
# <%= render(Primer::Dropdown.new) do |c| %>
|
104
|
+
# <% c.button do %>
|
105
|
+
# Dropdown
|
106
|
+
# <% end %>
|
107
|
+
#
|
108
|
+
# <%= c.menu(as: :list, header: "Options") do |menu|
|
109
|
+
# menu.item { "Item 1" }
|
110
|
+
# menu.item { "Item 2" }
|
111
|
+
# menu.item(divider: true)
|
112
|
+
# menu.item { "Item 3" }
|
113
|
+
# menu.item { "Item 4" }
|
114
|
+
# end %>
|
115
|
+
# <% end %>
|
116
|
+
#
|
117
|
+
# @example Customizing menu items
|
118
|
+
# <%= render(Primer::Dropdown.new) do |c| %>
|
119
|
+
# <% c.button do %>
|
120
|
+
# Dropdown
|
121
|
+
# <% end %>
|
122
|
+
#
|
123
|
+
# <%= c.menu(header: "Options") do |menu|
|
124
|
+
# menu.item(tag: :button) { "Item 1" }
|
125
|
+
# menu.item(classes: "custom-class") { "Item 2" }
|
126
|
+
# menu.item { "Item 3" }
|
127
|
+
# end %>
|
128
|
+
# <% end %>
|
129
|
+
#
|
130
|
+
# @param overlay [Symbol] <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
|
131
|
+
# @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
|
132
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
133
|
+
def initialize(overlay: :default, with_caret: false, **system_arguments)
|
134
|
+
@with_caret = with_caret
|
135
|
+
|
136
|
+
@system_arguments = system_arguments
|
137
|
+
@system_arguments[:overlay] = overlay
|
138
|
+
@system_arguments[:reset] = true
|
139
|
+
@system_arguments[:classes] = class_names(
|
140
|
+
@system_arguments[:classes],
|
141
|
+
"dropdown"
|
142
|
+
)
|
143
|
+
end
|
144
|
+
|
145
|
+
def render?
|
146
|
+
button.present? && menu.present?
|
147
|
+
end
|
148
|
+
end
|
149
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
import './dropdown/menu'
|
@@ -0,0 +1 @@
|
|
1
|
+
import '@github/details-menu-element';
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
2
|
+
<% if @header.present? %>
|
3
|
+
<div class="dropdown-header">
|
4
|
+
<%= @header %>
|
5
|
+
</div>
|
6
|
+
<% end %>
|
7
|
+
|
8
|
+
<% if list? %>
|
9
|
+
<ul>
|
10
|
+
<% items.each do |item| %>
|
11
|
+
<% if item.divider? %>
|
12
|
+
<%= item %>
|
13
|
+
<% else %>
|
14
|
+
<li>
|
15
|
+
<%= item %>
|
16
|
+
</li>
|
17
|
+
<% end %>
|
18
|
+
<% end %>
|
19
|
+
</ul>
|
20
|
+
<% else %>
|
21
|
+
<% items.each do |item| %>
|
22
|
+
<%= item %>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
25
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
import '@github/details-menu-element';
|
@@ -0,0 +1,99 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
class Dropdown
|
5
|
+
# This component is part of `Dropdown` and should not be
|
6
|
+
# used as a standalone component.
|
7
|
+
class Menu < Primer::Component
|
8
|
+
AS_DEFAULT = :default
|
9
|
+
AS_OPTIONS = [AS_DEFAULT, :list].freeze
|
10
|
+
|
11
|
+
SCHEME_DEFAULT = :default
|
12
|
+
SCHEME_MAPPINGS = {
|
13
|
+
SCHEME_DEFAULT => "",
|
14
|
+
:dark => "dropdown-menu-dark"
|
15
|
+
}.freeze
|
16
|
+
|
17
|
+
DIRECTION_DEFAULT = :se
|
18
|
+
DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
|
19
|
+
|
20
|
+
# @param tag [Symbol] <%= one_of(Primer::Dropdown::Menu::Item::TAG_OPTIONS) %>.
|
21
|
+
# @param divider [Boolean] Whether the item is a divider without any function.
|
22
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
23
|
+
renders_many :items, lambda { |divider: false, **system_arguments|
|
24
|
+
Primer::Dropdown::Menu::Item.new(as: @as, divider: divider, **system_arguments)
|
25
|
+
}
|
26
|
+
|
27
|
+
# @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
|
28
|
+
# @param direction [Symbol] <%= one_of(Primer::Dropdown::Menu::DIRECTION_OPTIONS) %>.
|
29
|
+
# @param header [String] Header to be displayed above the menu.
|
30
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
31
|
+
def initialize(as: AS_DEFAULT, direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
|
32
|
+
@header = header
|
33
|
+
@direction = direction
|
34
|
+
@as = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
|
35
|
+
|
36
|
+
@system_arguments = system_arguments
|
37
|
+
@system_arguments[:tag] = "details-menu"
|
38
|
+
@system_arguments[:role] = "menu"
|
39
|
+
|
40
|
+
@system_arguments[:classes] = class_names(
|
41
|
+
@system_arguments[:classes],
|
42
|
+
"dropdown-menu",
|
43
|
+
"dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
|
44
|
+
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
|
45
|
+
)
|
46
|
+
end
|
47
|
+
|
48
|
+
private
|
49
|
+
|
50
|
+
def list?
|
51
|
+
@as == :list
|
52
|
+
end
|
53
|
+
|
54
|
+
# Items to be rendered in the `Dropdown` menu.
|
55
|
+
class Item < Primer::Component
|
56
|
+
TAG_DEFAULT = :a
|
57
|
+
BUTTON_TAGS = [:button, :summary].freeze
|
58
|
+
TAG_OPTIONS = [TAG_DEFAULT, *BUTTON_TAGS].freeze
|
59
|
+
|
60
|
+
def initialize(as:, tag: TAG_DEFAULT, divider: false, **system_arguments)
|
61
|
+
@divider = divider
|
62
|
+
@as = as
|
63
|
+
|
64
|
+
@system_arguments = system_arguments
|
65
|
+
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
|
66
|
+
@system_arguments[:tag] = :li if list? && divider?
|
67
|
+
@system_arguments[:role] ||= :menuitem
|
68
|
+
@system_arguments[:role] = :separator if divider
|
69
|
+
@system_arguments[:classes] = class_names(
|
70
|
+
@system_arguments[:classes],
|
71
|
+
"dropdown-item" => !divider,
|
72
|
+
"dropdown-divider" => divider
|
73
|
+
)
|
74
|
+
end
|
75
|
+
|
76
|
+
def call
|
77
|
+
component = if BUTTON_TAGS.include?(@system_arguments[:tag])
|
78
|
+
Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
|
79
|
+
else
|
80
|
+
Primer::BaseComponent.new(**@system_arguments)
|
81
|
+
end
|
82
|
+
|
83
|
+
# divider has no content
|
84
|
+
render(component) if divider?
|
85
|
+
|
86
|
+
render(component) { content }
|
87
|
+
end
|
88
|
+
|
89
|
+
def divider?
|
90
|
+
@divider
|
91
|
+
end
|
92
|
+
|
93
|
+
def list?
|
94
|
+
@as == :list
|
95
|
+
end
|
96
|
+
end
|
97
|
+
end
|
98
|
+
end
|
99
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
import '@github/details-menu-element'
|
@@ -35,7 +35,7 @@ module Primer
|
|
35
35
|
# <%= render(Primer::FlashComponent.new(dismissible: true)) { "This is a dismissible flash message!" } %>
|
36
36
|
#
|
37
37
|
# @example Icon
|
38
|
-
# <%= render(Primer::FlashComponent.new(icon:
|
38
|
+
# <%= render(Primer::FlashComponent.new(icon: :people)) { "This is a flash message with an icon!" } %>
|
39
39
|
#
|
40
40
|
# @example With actions
|
41
41
|
# <%= render(Primer::FlashComponent.new) do |component| %>
|
@@ -48,7 +48,7 @@ module Primer
|
|
48
48
|
# @param full [Boolean] Whether the component should take up the full width of the screen.
|
49
49
|
# @param spacious [Boolean] Whether to add margin to the bottom of the component.
|
50
50
|
# @param dismissible [Boolean] Whether the component can be dismissed with an X button.
|
51
|
-
# @param icon [
|
51
|
+
# @param icon [Symbol] Name of Octicon icon to use.
|
52
52
|
# @param scheme [Symbol] <%= one_of(Primer::FlashComponent::SCHEME_MAPPINGS.keys) %>
|
53
53
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
54
54
|
def initialize(full: false, spacious: false, dismissible: false, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
|
@@ -5,7 +5,7 @@ module Primer
|
|
5
5
|
#
|
6
6
|
# - Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.
|
7
7
|
# - Use `Heading` as the title of a section or sub section.
|
8
|
-
# - Do not use `Heading` for styling alone. For simply styling text, consider using <%= link_to_component(Primer::
|
8
|
+
# - Do not use `Heading` for styling alone. For simply styling text, consider using <%= link_to_component(Primer::Beta::Text) %> with relevant <%= link_to_typography_docs %>
|
9
9
|
# such as `font_size` and `font_weight`.
|
10
10
|
# - Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.
|
11
11
|
#
|
@@ -10,14 +10,14 @@ module Primer
|
|
10
10
|
# <%= render(Primer::HiddenTextExpander.new(inline: true)) %>
|
11
11
|
#
|
12
12
|
# @example Styling the button
|
13
|
-
# <%= render(Primer::HiddenTextExpander.new(button_arguments: { p: 1, classes: "
|
13
|
+
# <%= render(Primer::HiddenTextExpander.new(button_arguments: { p: 1, classes: "custom-class" })) %>
|
14
14
|
#
|
15
15
|
# @param inline [Boolean] Whether or not the expander is inline.
|
16
16
|
# @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
|
17
17
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
18
18
|
def initialize(inline: false, button_arguments: {}, **system_arguments)
|
19
19
|
@system_arguments = system_arguments
|
20
|
-
@system_arguments[:tag]
|
20
|
+
@system_arguments[:tag] = :span
|
21
21
|
@system_arguments[:classes] = class_names(
|
22
22
|
"hidden-text-expander",
|
23
23
|
@system_arguments[:classes],
|
@@ -31,7 +31,7 @@ module Primer
|
|
31
31
|
#
|
32
32
|
# <%= render(Primer::BorderBoxComponent.new) do |component| %>
|
33
33
|
# <% component.body do %>
|
34
|
-
# <%= render(Primer::
|
34
|
+
# <%= render(Primer::Beta::Text.new(pr: 2)) { "Body" } %>
|
35
35
|
# <%= render(Primer::IconButton.new(icon: :pencil, box: true, "aria-label": "Edit")) %>
|
36
36
|
# <% end %>
|
37
37
|
# <% end %>
|
@@ -0,0 +1,46 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
# Use `Image` to render images.
|
5
|
+
#
|
6
|
+
# @accessibility
|
7
|
+
# Always provide a meaningful `alt`.
|
8
|
+
class Image < Primer::Component
|
9
|
+
# @example Default
|
10
|
+
#
|
11
|
+
# <%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub")) %>
|
12
|
+
#
|
13
|
+
# @example Helper
|
14
|
+
#
|
15
|
+
# <%= primer_image(src: "https://github.com/github.png", alt: "GitHub") %>
|
16
|
+
#
|
17
|
+
# @example Lazy loading
|
18
|
+
#
|
19
|
+
# <%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub", lazy: true)) %>
|
20
|
+
#
|
21
|
+
# @example Custom size
|
22
|
+
#
|
23
|
+
# <%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub", height: 100, width: 100)) %>
|
24
|
+
#
|
25
|
+
# @param src [String] The source url of the image.
|
26
|
+
# @param alt [String] Specifies an alternate text for the image.
|
27
|
+
# @param lazy [Boolean] Whether or not to lazily load the image.
|
28
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
29
|
+
def initialize(src:, alt:, lazy: false, **system_arguments)
|
30
|
+
@system_arguments = system_arguments
|
31
|
+
|
32
|
+
@system_arguments[:tag] = :img
|
33
|
+
@system_arguments[:src] = src
|
34
|
+
@system_arguments[:alt] = alt
|
35
|
+
|
36
|
+
return unless lazy
|
37
|
+
|
38
|
+
@system_arguments[:loading] = :lazy
|
39
|
+
@system_arguments[:decoding] = :async
|
40
|
+
end
|
41
|
+
|
42
|
+
def call
|
43
|
+
render(Primer::BaseComponent.new(**@system_arguments))
|
44
|
+
end
|
45
|
+
end
|
46
|
+
end
|
@@ -20,7 +20,7 @@ module Primer
|
|
20
20
|
#
|
21
21
|
# @example Cropper with a custom loader
|
22
22
|
# <%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png", rounded: false)) do |cropper| %>
|
23
|
-
# <% cropper.loading(style: "width: 120px"
|
23
|
+
# <% cropper.loading(style: "width: 120px").with_content("Loading...") %>
|
24
24
|
# <% end %>
|
25
25
|
#
|
26
26
|
# @param src [String] The path of the image to crop.
|
@@ -30,7 +30,7 @@ module Primer
|
|
30
30
|
@system_arguments = system_arguments
|
31
31
|
@system_arguments[:tag] = "image-crop"
|
32
32
|
@system_arguments[:src] = src
|
33
|
-
@system_arguments[:rounded] = rounded
|
33
|
+
@system_arguments[:rounded] = true if rounded
|
34
34
|
end
|
35
35
|
end
|
36
36
|
end
|
@@ -5,6 +5,9 @@ module Primer
|
|
5
5
|
class LabelComponent < Primer::Component
|
6
6
|
status :beta
|
7
7
|
|
8
|
+
DEFAULT_TAG = :span
|
9
|
+
TAG_OPTIONS = [DEFAULT_TAG, :summary, :a, :div].freeze
|
10
|
+
|
8
11
|
SCHEME_MAPPINGS = {
|
9
12
|
primary: "Label--primary",
|
10
13
|
secondary: "Label--secondary",
|
@@ -38,13 +41,14 @@ module Primer
|
|
38
41
|
# <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "Default" } %>
|
39
42
|
# <%= render(Primer::LabelComponent.new(title: "Label: Label", variant: :large)) { "Large" } %>
|
40
43
|
#
|
44
|
+
# @param tag [Symbol] <%= one_of(Primer::LabelComponent::TAG_OPTIONS) %>
|
41
45
|
# @param title [String] `title` attribute for the component element.
|
42
46
|
# @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>
|
43
47
|
# @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
|
44
48
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
45
|
-
def initialize(title:, scheme: nil, variant: nil, **system_arguments)
|
49
|
+
def initialize(tag: DEFAULT_TAG, title:, scheme: nil, variant: nil, **system_arguments)
|
46
50
|
@system_arguments = system_arguments
|
47
|
-
@system_arguments[:tag]
|
51
|
+
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
|
48
52
|
@system_arguments[:title] = title
|
49
53
|
@system_arguments[:classes] = class_names(
|
50
54
|
"Label",
|