primer_view_components 0.0.32 → 0.0.37
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/README.md +1 -1
- data/app/components/primer/{auto_complete_component.rb → auto_complete.rb} +13 -11
- data/app/components/primer/{auto_complete_component.d.ts → auto_complete/auto_complete.d.ts} +0 -0
- data/app/components/primer/{auto_complete_component.html.erb → auto_complete/auto_complete.html.erb} +0 -0
- data/app/components/primer/{auto_complete_component.js → auto_complete/auto_complete.js} +0 -0
- data/app/components/primer/{auto_complete_component.ts → auto_complete/auto_complete.ts} +0 -0
- data/app/components/primer/auto_complete/auto_component.d.ts +1 -0
- data/app/components/primer/auto_complete/auto_component.js +1 -0
- data/app/components/primer/auto_complete/item.rb +42 -0
- data/app/components/primer/avatar_stack_component.rb +2 -0
- data/app/components/primer/base_component.rb +115 -85
- data/app/components/primer/button_component.rb +37 -16
- data/app/components/primer/button_group_component.rb +3 -3
- data/app/components/primer/button_marketing_component.rb +12 -12
- data/app/components/primer/close_button.rb +30 -0
- data/app/components/primer/component.rb +1 -0
- data/app/components/primer/dropdown_component.rb +1 -1
- data/app/components/primer/dropdown_menu_component.rb +1 -1
- data/app/components/primer/flash_component.rb +10 -10
- data/app/components/primer/foo_bar.d.ts +1 -0
- data/app/components/primer/foo_bar.js +1 -0
- data/app/components/primer/hidden_text_expander.rb +43 -0
- data/app/components/primer/link_component.rb +9 -9
- data/app/components/primer/navigation/tab_component.html.erb +9 -7
- data/app/components/primer/navigation/tab_component.rb +27 -3
- data/app/components/primer/octicon_component.rb +0 -4
- data/app/components/primer/primer.d.ts +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.ts +1 -1
- data/app/components/primer/state_component.rb +13 -13
- data/app/components/primer/subhead_component.rb +1 -1
- data/app/components/primer/tab_nav_component.html.erb +2 -2
- data/app/components/primer/tab_nav_component.rb +22 -8
- data/app/components/primer/{truncate_component.rb → truncate.rb} +8 -6
- data/app/components/primer/underline_nav_component.rb +46 -14
- data/app/lib/primer/classify.rb +3 -12
- data/app/lib/primer/classify/cache.rb +14 -4
- data/app/lib/primer/classify/spacing.rb +63 -0
- data/app/lib/primer/tabbed_component_helper.rb +4 -2
- data/lib/primer/view_components/version.rb +1 -1
- data/static/statuses.json +1 -1
- metadata +107 -30
- data/app/assets/javascripts/primer_view_components.js.map.orig +0 -5
- data/app/assets/javascripts/primer_view_components.js.orig +0 -6
- data/app/components/primer/auto_complete_item_component.rb +0 -38
@@ -3,14 +3,19 @@
|
|
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 ButtonComponent < Primer::Component
|
6
|
-
|
7
|
-
|
8
|
-
|
6
|
+
status :beta
|
7
|
+
|
8
|
+
DEFAULT_SCHEME = :default
|
9
|
+
LINK_SCHEME = :link
|
10
|
+
SCHEME_MAPPINGS = {
|
11
|
+
DEFAULT_SCHEME => "",
|
9
12
|
:primary => "btn-primary",
|
10
13
|
:danger => "btn-danger",
|
11
|
-
:outline => "btn-outline"
|
14
|
+
:outline => "btn-outline",
|
15
|
+
:invisible => "btn-invisible",
|
16
|
+
LINK_SCHEME => "btn-link"
|
12
17
|
}.freeze
|
13
|
-
|
18
|
+
SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
|
14
19
|
|
15
20
|
DEFAULT_VARIANT = :medium
|
16
21
|
VARIANT_MAPPINGS = {
|
@@ -26,44 +31,54 @@ module Primer
|
|
26
31
|
DEFAULT_TYPE = :button
|
27
32
|
TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
|
28
33
|
|
29
|
-
# @example
|
34
|
+
# @example Schemes
|
30
35
|
# <%= render(Primer::ButtonComponent.new) { "Default" } %>
|
31
|
-
# <%= render(Primer::ButtonComponent.new(
|
32
|
-
# <%= render(Primer::ButtonComponent.new(
|
33
|
-
# <%= render(Primer::ButtonComponent.new(
|
36
|
+
# <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
|
37
|
+
# <%= render(Primer::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
|
38
|
+
# <%= render(Primer::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
|
39
|
+
# <%= render(Primer::ButtonComponent.new(scheme: :invisible)) { "Invisible" } %>
|
40
|
+
# <%= render(Primer::ButtonComponent.new(scheme: :link)) { "Link" } %>
|
34
41
|
#
|
35
42
|
# @example Variants
|
36
43
|
# <%= render(Primer::ButtonComponent.new(variant: :small)) { "Small" } %>
|
37
44
|
# <%= render(Primer::ButtonComponent.new(variant: :medium)) { "Medium" } %>
|
38
45
|
# <%= render(Primer::ButtonComponent.new(variant: :large)) { "Large" } %>
|
39
46
|
#
|
40
|
-
# @
|
47
|
+
# @example Block
|
48
|
+
# <%= render(Primer::ButtonComponent.new(block: :true)) { "Block" } %>
|
49
|
+
# <%= render(Primer::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>
|
50
|
+
#
|
51
|
+
# @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
|
41
52
|
# @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
|
42
53
|
# @param tag [Symbol] <%= one_of(Primer::ButtonComponent::TAG_OPTIONS) %>
|
43
54
|
# @param type [Symbol] <%= one_of(Primer::ButtonComponent::TYPE_OPTIONS) %>
|
44
55
|
# @param group_item [Boolean] Whether button is part of a ButtonGroup.
|
56
|
+
# @param block [Boolean] Whether button is full-width with `display: block`.
|
45
57
|
def initialize(
|
46
|
-
|
58
|
+
scheme: DEFAULT_SCHEME,
|
47
59
|
variant: DEFAULT_VARIANT,
|
48
60
|
tag: DEFAULT_TAG,
|
49
61
|
type: DEFAULT_TYPE,
|
50
62
|
group_item: false,
|
63
|
+
block: false,
|
51
64
|
**system_arguments
|
52
65
|
)
|
66
|
+
@scheme = scheme
|
53
67
|
@system_arguments = system_arguments
|
54
68
|
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
|
55
69
|
|
56
|
-
if @system_arguments[:tag] == :
|
57
|
-
@system_arguments[:role] = :button
|
58
|
-
else
|
70
|
+
if @system_arguments[:tag] == :button
|
59
71
|
@system_arguments[:type] = type
|
72
|
+
else
|
73
|
+
@system_arguments[:role] = :button
|
60
74
|
end
|
61
75
|
|
62
76
|
@system_arguments[:classes] = class_names(
|
63
|
-
"btn",
|
64
77
|
system_arguments[:classes],
|
65
|
-
|
78
|
+
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
|
66
79
|
VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
|
80
|
+
"btn" => !link?,
|
81
|
+
"btn-block" => block,
|
67
82
|
"BtnGroup-item" => group_item
|
68
83
|
)
|
69
84
|
end
|
@@ -71,5 +86,11 @@ module Primer
|
|
71
86
|
def call
|
72
87
|
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
73
88
|
end
|
89
|
+
|
90
|
+
private
|
91
|
+
|
92
|
+
def link?
|
93
|
+
@scheme == LINK_SCHEME
|
94
|
+
end
|
74
95
|
end
|
75
96
|
end
|
@@ -11,9 +11,9 @@ module Primer
|
|
11
11
|
# @example Default
|
12
12
|
# <%= render(Primer::ButtonGroupComponent.new) do |component|
|
13
13
|
# component.button { "Default" }
|
14
|
-
# component.button(
|
15
|
-
# component.button(
|
16
|
-
# component.button(
|
14
|
+
# component.button(scheme: :primary) { "Primary" }
|
15
|
+
# component.button(scheme: :danger) { "Danger" }
|
16
|
+
# component.button(scheme: :outline) { "Outline" }
|
17
17
|
# component.button(classes: "my-class") { "Custom class" }
|
18
18
|
# end %>
|
19
19
|
#
|
@@ -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
|
)
|
@@ -0,0 +1,30 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
# Use CloseButton to render an `×` without default button styles.
|
5
|
+
class CloseButton < Primer::Component
|
6
|
+
DEFAULT_TYPE = :button
|
7
|
+
TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
|
8
|
+
|
9
|
+
# @example Default
|
10
|
+
# <%= render(Primer::CloseButton.new) %>
|
11
|
+
#
|
12
|
+
# @param type [Symbol] <%= one_of(Primer::CloseButton::TYPE_OPTIONS) %>
|
13
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
14
|
+
def initialize(type: DEFAULT_TYPE, **system_arguments)
|
15
|
+
@system_arguments = system_arguments
|
16
|
+
@system_arguments[:tag] = :button
|
17
|
+
@system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
|
18
|
+
@system_arguments[:classes] = class_names(
|
19
|
+
"close-button",
|
20
|
+
system_arguments[:classes]
|
21
|
+
)
|
22
|
+
end
|
23
|
+
|
24
|
+
def call
|
25
|
+
render(Primer::BaseComponent.new(**@system_arguments)) do
|
26
|
+
render(Primer::OcticonComponent.new("x"))
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
30
|
+
end
|
@@ -11,7 +11,7 @@ module Primer
|
|
11
11
|
# Required context menu for the dropdown
|
12
12
|
#
|
13
13
|
# @param direction [Symbol] <%= one_of(Primer::Dropdown::MenuComponent::DIRECTION_OPTIONS) %>
|
14
|
-
# @param scheme [Symbol] Pass
|
14
|
+
# @param scheme [Symbol] Pass `:dark` for dark mode theming
|
15
15
|
# @param header [String] Optional string to display as the header
|
16
16
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
17
17
|
renders_one :menu, Primer::Dropdown::MenuComponent
|
@@ -36,7 +36,7 @@ module Primer
|
|
36
36
|
# </div>
|
37
37
|
#
|
38
38
|
# @param direction [Symbol] <%= one_of(Primer::DropdownMenuComponent::DIRECTION_OPTIONS) %>
|
39
|
-
# @param scheme [Symbol] Pass
|
39
|
+
# @param scheme [Symbol] Pass `:dark` for dark mode theming
|
40
40
|
# @param header [String] Optional string to display as the header
|
41
41
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
42
42
|
def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
|
@@ -15,18 +15,18 @@ module Primer
|
|
15
15
|
Primer::BaseComponent.new(**system_arguments)
|
16
16
|
}
|
17
17
|
|
18
|
-
|
19
|
-
|
20
|
-
|
18
|
+
DEFAULT_SCHEME = :default
|
19
|
+
SCHEME_MAPPINGS = {
|
20
|
+
DEFAULT_SCHEME => "",
|
21
21
|
:warning => "flash-warn",
|
22
22
|
:danger => "flash-error",
|
23
23
|
:success => "flash-success"
|
24
24
|
}.freeze
|
25
|
-
# @example
|
25
|
+
# @example Schemes
|
26
26
|
# <%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
|
27
|
-
# <%= render(Primer::FlashComponent.new(
|
28
|
-
# <%= render(Primer::FlashComponent.new(
|
29
|
-
# <%= 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!" } %>
|
30
30
|
#
|
31
31
|
# @example Full width
|
32
32
|
# <%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
|
@@ -49,9 +49,9 @@ module Primer
|
|
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
51
|
# @param icon [String] Name of Octicon icon to use.
|
52
|
-
# @param
|
52
|
+
# @param scheme [Symbol] <%= one_of(Primer::FlashComponent::SCHEME_MAPPINGS.keys) %>
|
53
53
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
54
|
-
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)
|
55
55
|
@icon = icon
|
56
56
|
@dismissible = dismissible
|
57
57
|
@system_arguments = system_arguments
|
@@ -59,7 +59,7 @@ module Primer
|
|
59
59
|
@system_arguments[:classes] = class_names(
|
60
60
|
@system_arguments[:classes],
|
61
61
|
"flash",
|
62
|
-
|
62
|
+
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
|
63
63
|
"flash-full": full
|
64
64
|
)
|
65
65
|
@system_arguments[:mb] ||= spacious ? 4 : nil
|
@@ -0,0 +1 @@
|
|
1
|
+
import '@github/details-menu-element';
|
@@ -0,0 +1 @@
|
|
1
|
+
import '@github/details-menu-element';
|
@@ -0,0 +1,43 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
# Use HiddenTextExpander to indicate and toggle hidden text.
|
5
|
+
class HiddenTextExpander < Primer::Component
|
6
|
+
# @example Default
|
7
|
+
# <%= render(Primer::HiddenTextExpander.new) %>
|
8
|
+
#
|
9
|
+
# @example Inline
|
10
|
+
# <%= render(Primer::HiddenTextExpander.new(inline: true)) %>
|
11
|
+
#
|
12
|
+
# @example Styling the button
|
13
|
+
# <%= render(Primer::HiddenTextExpander.new(button_arguments: { p: 1, classes: "my-custom-class" })) %>
|
14
|
+
#
|
15
|
+
# @param inline [Boolean] Whether or not the expander is inline.
|
16
|
+
# @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
|
17
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
18
|
+
def initialize(inline: false, button_arguments: {}, **system_arguments)
|
19
|
+
@system_arguments = system_arguments
|
20
|
+
@system_arguments[:tag] ||= :span
|
21
|
+
@system_arguments[:classes] = class_names(
|
22
|
+
"hidden-text-expander",
|
23
|
+
@system_arguments[:classes],
|
24
|
+
"inline" => inline
|
25
|
+
)
|
26
|
+
|
27
|
+
@button_arguments = button_arguments
|
28
|
+
@button_arguments[:tag] = :button
|
29
|
+
@button_arguments[:type] = :button
|
30
|
+
@button_arguments[:"aria-expanded"] = false
|
31
|
+
@button_arguments[:classes] = class_names(
|
32
|
+
"ellipsis-expander",
|
33
|
+
button_arguments[:classes]
|
34
|
+
)
|
35
|
+
end
|
36
|
+
|
37
|
+
def call
|
38
|
+
render(Primer::BaseComponent.new(**@system_arguments)) do
|
39
|
+
render(Primer::BaseComponent.new(**@button_arguments)) { "…" }
|
40
|
+
end
|
41
|
+
end
|
42
|
+
end
|
43
|
+
end
|
@@ -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
|
@@ -1,9 +1,11 @@
|
|
1
|
-
<%=
|
2
|
-
<%=
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
1
|
+
<%= wrapper do %>
|
2
|
+
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
3
|
+
<%= icon %>
|
4
|
+
<% if text.present? %>
|
5
|
+
<%= text %>
|
6
|
+
<% else %>
|
7
|
+
<%= content %>
|
8
|
+
<% end %>
|
9
|
+
<%= counter %>
|
7
10
|
<% end %>
|
8
|
-
<%= counter %>
|
9
11
|
<% end %>
|
@@ -65,30 +65,43 @@ module Primer
|
|
65
65
|
# <% c.counter(count: 10) %>
|
66
66
|
# <% end %>
|
67
67
|
#
|
68
|
+
# @example Inside a list
|
69
|
+
# <%= render(Primer::Navigation::TabComponent.new(list: true)) do |c| %>
|
70
|
+
# <% c.text { "Tab" } %>
|
71
|
+
# <% end %>
|
72
|
+
#
|
68
73
|
# @example With custom HTML
|
69
|
-
# <%= render(Primer::Navigation::TabComponent.new) do
|
74
|
+
# <%= render(Primer::Navigation::TabComponent.new) do %>
|
70
75
|
# <div>
|
71
76
|
# This is my <strong>custom HTML</strong>
|
72
77
|
# </div>
|
73
78
|
# <% end %>
|
74
79
|
#
|
80
|
+
# @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
|
75
81
|
# @param selected [Boolean] Whether the Tab is selected or not.
|
76
82
|
# @param with_panel [Boolean] Whether the Tab has an associated panel.
|
77
83
|
# @param icon_classes [Boolean] Classes that must always be applied to icons.
|
84
|
+
# @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
|
78
85
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
79
|
-
def initialize(selected: false, with_panel: false, icon_classes: "", **system_arguments)
|
86
|
+
def initialize(list: false, selected: false, with_panel: false, icon_classes: "", wrapper_arguments: {}, **system_arguments)
|
80
87
|
@selected = selected
|
81
88
|
@icon_classes = icon_classes
|
89
|
+
@list = list
|
90
|
+
|
82
91
|
@system_arguments = system_arguments
|
83
|
-
@system_arguments[:role] = :tab
|
84
92
|
|
85
93
|
if with_panel
|
86
94
|
@system_arguments[:tag] ||= :button
|
87
95
|
@system_arguments[:type] = :button
|
96
|
+
@system_arguments[:role] = :tab
|
88
97
|
else
|
89
98
|
@system_arguments[:tag] ||= :a
|
90
99
|
end
|
91
100
|
|
101
|
+
@wrapper_arguments = wrapper_arguments
|
102
|
+
@wrapper_arguments[:tag] = :li
|
103
|
+
@wrapper_arguments[:display] ||= :flex
|
104
|
+
|
92
105
|
return unless @selected
|
93
106
|
|
94
107
|
if @system_arguments[:tag] == :a
|
@@ -97,6 +110,17 @@ module Primer
|
|
97
110
|
@system_arguments[:"aria-selected"] = true
|
98
111
|
end
|
99
112
|
end
|
113
|
+
|
114
|
+
def wrapper
|
115
|
+
unless @list
|
116
|
+
yield
|
117
|
+
return # returning `yield` caused a double render
|
118
|
+
end
|
119
|
+
|
120
|
+
render(Primer::BaseComponent.new(**@wrapper_arguments)) do
|
121
|
+
yield
|
122
|
+
end
|
123
|
+
end
|
100
124
|
end
|
101
125
|
end
|
102
126
|
end
|