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.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +82 -0
  3. data/README.md +1 -1
  4. data/app/components/primer/{auto_complete_component.rb → auto_complete.rb} +13 -11
  5. data/app/components/primer/{auto_complete_component.d.ts → auto_complete/auto_complete.d.ts} +0 -0
  6. data/app/components/primer/{auto_complete_component.html.erb → auto_complete/auto_complete.html.erb} +0 -0
  7. data/app/components/primer/{auto_complete_component.js → auto_complete/auto_complete.js} +0 -0
  8. data/app/components/primer/{auto_complete_component.ts → auto_complete/auto_complete.ts} +0 -0
  9. data/app/components/primer/auto_complete/auto_component.d.ts +1 -0
  10. data/app/components/primer/auto_complete/auto_component.js +1 -0
  11. data/app/components/primer/auto_complete/item.rb +42 -0
  12. data/app/components/primer/avatar_stack_component.rb +2 -0
  13. data/app/components/primer/base_component.rb +115 -85
  14. data/app/components/primer/button_component.rb +37 -16
  15. data/app/components/primer/button_group_component.rb +3 -3
  16. data/app/components/primer/button_marketing_component.rb +12 -12
  17. data/app/components/primer/close_button.rb +30 -0
  18. data/app/components/primer/component.rb +1 -0
  19. data/app/components/primer/dropdown_component.rb +1 -1
  20. data/app/components/primer/dropdown_menu_component.rb +1 -1
  21. data/app/components/primer/flash_component.rb +10 -10
  22. data/app/components/primer/foo_bar.d.ts +1 -0
  23. data/app/components/primer/foo_bar.js +1 -0
  24. data/app/components/primer/hidden_text_expander.rb +43 -0
  25. data/app/components/primer/link_component.rb +9 -9
  26. data/app/components/primer/navigation/tab_component.html.erb +9 -7
  27. data/app/components/primer/navigation/tab_component.rb +27 -3
  28. data/app/components/primer/octicon_component.rb +0 -4
  29. data/app/components/primer/primer.d.ts +1 -1
  30. data/app/components/primer/primer.js +1 -1
  31. data/app/components/primer/primer.ts +1 -1
  32. data/app/components/primer/state_component.rb +13 -13
  33. data/app/components/primer/subhead_component.rb +1 -1
  34. data/app/components/primer/tab_nav_component.html.erb +2 -2
  35. data/app/components/primer/tab_nav_component.rb +22 -8
  36. data/app/components/primer/{truncate_component.rb → truncate.rb} +8 -6
  37. data/app/components/primer/underline_nav_component.rb +46 -14
  38. data/app/lib/primer/classify.rb +3 -12
  39. data/app/lib/primer/classify/cache.rb +14 -4
  40. data/app/lib/primer/classify/spacing.rb +63 -0
  41. data/app/lib/primer/tabbed_component_helper.rb +4 -2
  42. data/lib/primer/view_components/version.rb +1 -1
  43. data/static/statuses.json +1 -1
  44. metadata +107 -30
  45. data/app/assets/javascripts/primer_view_components.js.map.orig +0 -5
  46. data/app/assets/javascripts/primer_view_components.js.orig +0 -6
  47. 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
- DEFAULT_BUTTON_TYPE = :default
7
- BUTTON_TYPE_MAPPINGS = {
8
- DEFAULT_BUTTON_TYPE => "",
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
- BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
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 Button types
34
+ # @example Schemes
30
35
  # <%= render(Primer::ButtonComponent.new) { "Default" } %>
31
- # <%= render(Primer::ButtonComponent.new(button_type: :primary)) { "Primary" } %>
32
- # <%= render(Primer::ButtonComponent.new(button_type: :danger)) { "Danger" } %>
33
- # <%= render(Primer::ButtonComponent.new(button_type: :outline)) { "Outline" } %>
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
- # @param button_type [Symbol] <%= one_of(Primer::ButtonComponent::BUTTON_TYPE_OPTIONS) %>
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
- button_type: DEFAULT_BUTTON_TYPE,
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] == :a
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
- BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
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(button_type: :primary) { "Primary" }
15
- # component.button(button_type: :danger) { "Danger" }
16
- # component.button(button_type: :outline) { "Outline" }
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
- DEFAULT_BUTTON_TYPE = :default
7
- BUTTON_TYPE_MAPPINGS = {
8
- DEFAULT_BUTTON_TYPE => "",
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
- BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
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 Button types
28
+ # @example Schemes
29
29
  # <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
30
- # <%= render(Primer::ButtonMarketingComponent.new(button_type: :primary, mr: 2)) { "Primary" } %>
31
- # <%= render(Primer::ButtonMarketingComponent.new(button_type: :outline)) { "Outline" } %>
32
- # <div class="bg-gray-dark">
33
- # <%= render(Primer::ButtonMarketingComponent.new(button_type: :transparent)) { "Transparent" } %>
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 button_type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::BUTTON_TYPE_OPTIONS) %>
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
- button_type: DEFAULT_BUTTON_TYPE,
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
- BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
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
@@ -10,6 +10,7 @@ module Primer
10
10
  include ClassNameHelper
11
11
  include FetchOrFallbackHelper
12
12
  include OcticonsHelper
13
+ include TestSelectorHelper
13
14
  include JoinStyleArgumentsHelper
14
15
  include ViewHelper
15
16
  include Status::Dsl
@@ -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 :dark for dark mode theming
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 :dark for dark mode theming
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
- DEFAULT_VARIANT = :default
19
- VARIANT_MAPPINGS = {
20
- DEFAULT_VARIANT => "",
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 Variants
25
+ # @example Schemes
26
26
  # <%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
27
- # <%= render(Primer::FlashComponent.new(variant: :warning)) { "This is a warning flash message!" } %>
28
- # <%= render(Primer::FlashComponent.new(variant: :danger)) { "This is a danger flash message!" } %>
29
- # <%= render(Primer::FlashComponent.new(variant: :success)) { "This is a success flash message!" } %>
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 variant [Symbol] <%= one_of(Primer::FlashComponent::VARIANT_MAPPINGS.keys) %>
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, variant: DEFAULT_VARIANT, **system_arguments)
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
- VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
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)) { "&hellip;" }
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
- DEFAULT_VARIANT = :default
9
- VARIANT_MAPPINGS = {
10
- DEFAULT_VARIANT => "",
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 Variants
25
- # <%= render(Primer::LinkComponent.new(href: "#", variant: :primary)) { "Primary" } %>
26
- # <%= render(Primer::LinkComponent.new(href: "#", variant: :secondary)) { "Secondary" } %>
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 variant [Symbol] <%= one_of(Primer::LinkComponent::VARIANT_MAPPINGS.keys) %>
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, variant: DEFAULT_VARIANT, muted: false, underline: true, **system_arguments)
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
- VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
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
- <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
- <%= icon %>
3
- <% if text.present? %>
4
- <%= text %>
5
- <% else %>
6
- <%= content %>
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 |c| %>
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