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.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +66 -0
  3. data/README.md +2 -2
  4. data/app/components/primer/auto_complete_component.rb +0 -2
  5. data/app/components/primer/auto_complete_item_component.rb +0 -2
  6. data/app/components/primer/avatar_stack_component.rb +0 -2
  7. data/app/components/primer/base_component.rb +115 -83
  8. data/app/components/primer/blankslate_component.html.erb +1 -1
  9. data/app/components/primer/blankslate_component.rb +0 -2
  10. data/app/components/primer/border_box_component.rb +0 -2
  11. data/app/components/primer/breadcrumb_component.rb +0 -1
  12. data/app/components/primer/button_component.rb +11 -11
  13. data/app/components/primer/button_group_component.rb +3 -5
  14. data/app/components/primer/button_marketing_component.rb +12 -12
  15. data/app/components/primer/component.rb +2 -0
  16. data/app/components/primer/details_component.rb +0 -1
  17. data/app/components/primer/dropdown/menu_component.rb +0 -2
  18. data/app/components/primer/dropdown_component.rb +0 -2
  19. data/app/components/primer/flash_component.html.erb +2 -2
  20. data/app/components/primer/flash_component.rb +10 -12
  21. data/app/components/primer/layout_component.rb +0 -2
  22. data/app/components/primer/link_component.rb +9 -9
  23. data/app/components/primer/menu_component.rb +2 -4
  24. data/app/components/primer/navigation/tab_component.html.erb +9 -0
  25. data/app/components/primer/navigation/tab_component.rb +102 -0
  26. data/app/components/primer/octicon_component.rb +5 -4
  27. data/app/components/primer/popover_component.rb +19 -3
  28. data/app/components/primer/progress_bar_component.rb +0 -1
  29. data/app/components/primer/spinner_component.html.erb +1 -3
  30. data/app/components/primer/spinner_component.rb +1 -0
  31. data/app/components/primer/state_component.rb +13 -13
  32. data/app/components/primer/subhead_component.rb +1 -3
  33. data/app/components/primer/tab_nav_component.html.erb +9 -11
  34. data/app/components/primer/tab_nav_component.rb +46 -73
  35. data/app/components/primer/time_ago_component.rb +2 -1
  36. data/app/components/primer/timeline_item_component.rb +1 -2
  37. data/app/components/primer/underline_nav_component.html.erb +19 -7
  38. data/app/components/primer/underline_nav_component.rb +80 -14
  39. data/app/lib/primer/classify.rb +5 -14
  40. data/app/lib/primer/classify/cache.rb +14 -4
  41. data/app/lib/primer/classify/functional_colors.rb +8 -6
  42. data/app/lib/primer/classify/spacing.rb +63 -0
  43. data/app/lib/primer/tabbed_component_helper.rb +35 -0
  44. data/app/lib/primer/view_helper.rb +2 -2
  45. data/lib/primer/view_components/version.rb +1 -1
  46. data/static/statuses.json +1 -1
  47. metadata +6 -3
  48. data/app/components/primer/slot.rb +0 -10
@@ -31,6 +31,7 @@ module Primer
31
31
  @system_arguments = system_arguments
32
32
  @system_arguments[:tag] = :svg
33
33
  @system_arguments[:style] ||= DEFAULT_STYLE
34
+ @system_arguments[:animation] = :rotate
34
35
  @system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
35
36
  @system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
36
37
  @system_arguments[:viewBox] = "0 0 16 16"
@@ -5,21 +5,21 @@ module Primer
5
5
  class StateComponent < Primer::Component
6
6
  status :beta
7
7
 
8
- COLOR_DEFAULT = :default
9
- NEW_COLOR_MAPPINGS = {
8
+ SCHEME_DEFAULT = :default
9
+ NEW_SCHEME_MAPPINGS = {
10
10
  open: "State--open",
11
11
  closed: "State--closed",
12
12
  merged: "State--merged"
13
13
  }.freeze
14
14
 
15
- DEPRECATED_COLOR_MAPPINGS = {
16
- COLOR_DEFAULT => "",
15
+ DEPRECATED_SCHEME_MAPPINGS = {
16
+ SCHEME_DEFAULT => "",
17
17
  :green => "State--open",
18
18
  :red => "State--closed",
19
19
  :purple => "State--merged"
20
20
  }.freeze
21
- COLOR_MAPPINGS = NEW_COLOR_MAPPINGS.merge(DEPRECATED_COLOR_MAPPINGS)
22
- COLOR_OPTIONS = COLOR_MAPPINGS.keys
21
+ SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
22
+ SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
23
23
 
24
24
  SIZE_DEFAULT = :default
25
25
  SIZE_MAPPINGS = {
@@ -34,24 +34,24 @@ module Primer
34
34
  # @example Default
35
35
  # <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
36
36
  #
37
- # @example Colors
37
+ # @example Schemes
38
38
  # <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
39
- # <%= render(Primer::StateComponent.new(title: "title", color: :open)) { "Open" } %>
40
- # <%= render(Primer::StateComponent.new(title: "title", color: :closed)) { "Closed" } %>
41
- # <%= render(Primer::StateComponent.new(title: "title", color: :merged)) { "Merged" } %>
39
+ # <%= render(Primer::StateComponent.new(title: "title", scheme: :open)) { "Open" } %>
40
+ # <%= render(Primer::StateComponent.new(title: "title", scheme: :closed)) { "Closed" } %>
41
+ # <%= render(Primer::StateComponent.new(title: "title", scheme: :merged)) { "Merged" } %>
42
42
  #
43
43
  # @example Sizes
44
44
  # <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
45
45
  # <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
46
46
  #
47
47
  # @param title [String] `title` HTML attribute.
48
- # @param color [Symbol] Background color. <%= one_of(Primer::StateComponent::COLOR_OPTIONS) %>
48
+ # @param scheme [Symbol] Background color. <%= one_of(Primer::StateComponent::SCHEME_OPTIONS) %>
49
49
  # @param tag [Symbol] HTML tag for element. <%= one_of(Primer::StateComponent::TAG_OPTIONS) %>
50
50
  # @param size [Symbol] <%= one_of(Primer::StateComponent::SIZE_OPTIONS) %>
51
51
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
52
52
  def initialize(
53
53
  title:,
54
- color: COLOR_DEFAULT,
54
+ scheme: SCHEME_DEFAULT,
55
55
  tag: TAG_DEFAULT,
56
56
  size: SIZE_DEFAULT,
57
57
  **system_arguments
@@ -62,7 +62,7 @@ module Primer
62
62
  @system_arguments[:classes] = class_names(
63
63
  @system_arguments[:classes],
64
64
  "State",
65
- COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
65
+ SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, SCHEME_DEFAULT)],
66
66
  SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
67
67
  )
68
68
  end
@@ -5,8 +5,6 @@ module Primer
5
5
  class SubheadComponent < Primer::Component
6
6
  status :beta
7
7
 
8
- include ViewComponent::SlotableV2
9
-
10
8
  # The heading
11
9
  #
12
10
  # @param danger [Boolean] Whether to style the heading as dangerous.
@@ -73,7 +71,7 @@ module Primer
73
71
  # <% component.actions do %>
74
72
  # <%= render(
75
73
  # Primer::ButtonComponent.new(
76
- # tag: :a, href: "http://www.google.com", button_type: :danger
74
+ # tag: :a, href: "http://www.google.com", scheme: :danger
77
75
  # )
78
76
  # ) { "Action" } %>
79
77
  # <% end %>
@@ -1,17 +1,15 @@
1
- <%= render wrapper.new(**@system_arguments) do %>
2
- <nav role="tablist" aria-label="<%= @aria_label %>" class="tabnav-tabs">
3
- <% tabs.each do |tab| %>
4
- <%= tab %>
5
- <% end %>
6
- </nav >
1
+ <%= wrapper do %>
2
+ <%= render Primer::BaseComponent.new(**@system_arguments) do %>
3
+ <nav role="tablist" aria-label="<%= @aria_label %>" class="tabnav-tabs">
4
+ <% tabs.each do |tab| %>
5
+ <%= tab %>
6
+ <% end %>
7
+ </nav>
8
+ <% end %>
7
9
 
8
10
  <% if @with_panel %>
9
11
  <% tabs.each do |tab| %>
10
- <% if tab.panel.present? %>
11
- <div role="tabpanel" <%= "hidden" if tab.hidden? %>>
12
- <%= tab.panel %>
13
- </div>
14
- <% end %>
12
+ <%= tab.panel %>
15
13
  <% end %>
16
14
  <% end %>
17
15
  <% end %>
@@ -3,34 +3,64 @@
3
3
  module Primer
4
4
  # Use TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
5
5
  class TabNavComponent < Primer::Component
6
- include ViewComponent::SlotableV2
6
+ include Primer::TabbedComponentHelper
7
7
 
8
- class MultipleSelectedTabsError < StandardError; end
9
- class NoSelectedTabsError < StandardError; end
10
-
11
- # Tabs to be rendered.
8
+ # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
12
9
  #
13
- # @param title [String] Text to be rendered by the tab.
14
10
  # @param selected [Boolean] Whether the tab is selected.
15
11
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
16
- renders_many :tabs, lambda { |**system_arguments|
17
- return TabComponent.new(**system_arguments) unless @with_panel
18
-
19
- TabComponent.new(tag: :button, type: :button, **system_arguments)
12
+ renders_many :tabs, lambda { |selected: false, **system_arguments|
13
+ system_arguments[:classes] = class_names(
14
+ "tabnav-tab",
15
+ system_arguments[:classes]
16
+ )
17
+ Primer::Navigation::TabComponent.new(selected: selected, with_panel: @with_panel, **system_arguments)
20
18
  }
21
19
 
22
20
  # @example Default
23
21
  # <%= render(Primer::TabNavComponent.new) do |c| %>
24
- # <% c.tab(selected: true, title: "Tab 1", href: "#") %>
25
- # <% c.tab(title: "Tab 2", href: "#") %>
26
- # <% c.tab(title: "Tab 3", href: "#") %>
22
+ # <% c.tab(selected: true, href: "#") { "Tab 1" }%>
23
+ # <% c.tab(href: "#") { "Tab 2" } %>
24
+ # <% c.tab(href: "#") { "Tab 3" } %>
25
+ # <% end %>
26
+ #
27
+ # @example With icons and counters
28
+ # <%= render(Primer::TabNavComponent.new) do |component| %>
29
+ # <% component.tab(href: "#", selected: true) do |t| %>
30
+ # <% t.icon(icon: :star) %>
31
+ # <% t.text { "Item 1" } %>
32
+ # <% end %>
33
+ # <% component.tab(href: "#") do |t| %>
34
+ # <% t.icon(icon: :star) %>
35
+ # <% t.text { "Item 2" } %>
36
+ # <% t.counter(count: 10) %>
37
+ # <% end %>
38
+ # <% component.tab(href: "#") do |t| %>
39
+ # <% t.text { "Item 3" } %>
40
+ # <% t.counter(count: 10) %>
41
+ # <% end %>
27
42
  # <% end %>
28
43
  #
29
44
  # @example With panels
30
45
  # <%= render(Primer::TabNavComponent.new(with_panel: true)) do |c| %>
31
- # <% c.tab(selected: true, title: "Tab 1") { "Panel 1" } %>
32
- # <% c.tab(title: "Tab 2") { "Panel 1" } %>
33
- # <% c.tab(title: "Tab 3") { "Panel 1" } %>
46
+ # <% c.tab(selected: true) do |t| %>
47
+ # <% t.text { "Tab 1" } %>
48
+ # <% t.panel do %>
49
+ # Panel 1
50
+ # <% end %>
51
+ # <% end %>
52
+ # <% c.tab do |t| %>
53
+ # <% t.text { "Tab 2" } %>
54
+ # <% t.panel do %>
55
+ # Panel 2
56
+ # <% end %>
57
+ # <% end %>
58
+ # <% c.tab do |t| %>
59
+ # <% t.text { "Tab 3" } %>
60
+ # <% t.panel do %>
61
+ # Panel 3
62
+ # <% end %>
63
+ # <% end %>
34
64
  # <% end %>
35
65
  #
36
66
  # @param aria_label [String] Used to set the `aria-label` on the top level `<nav>` element.
@@ -47,62 +77,5 @@ module Primer
47
77
  system_arguments[:classes]
48
78
  )
49
79
  end
50
-
51
- def before_render
52
- validate_single_selected_tab
53
- end
54
-
55
- private
56
-
57
- def wrapper
58
- @with_panel ? Primer::TabContainerComponent : Primer::BaseComponent
59
- end
60
-
61
- def validate_single_selected_tab
62
- raise MultipleSelectedTabsError, "only one tab can be selected" if selected_tabs_count > 1
63
- raise NoSelectedTabsError, "a tab must be selected" if selected_tabs_count != 1
64
- end
65
-
66
- def selected_tabs_count
67
- @selected_tabs_count ||= tabs.count(&:selected)
68
- end
69
-
70
- # Tabs to be rendered.
71
- class TabComponent < Primer::Component
72
- attr_reader :selected
73
-
74
- def initialize(title:, selected: false, **system_arguments)
75
- @title = title
76
- @selected = selected
77
- @system_arguments = system_arguments
78
- @system_arguments[:tag] ||= :a
79
- @system_arguments[:role] = :tab
80
-
81
- if selected
82
- if @system_arguments[:tag] == :a
83
- @system_arguments[:"aria-current"] = :page
84
- else
85
- @system_arguments[:"aria-selected"] = true
86
- end
87
- end
88
-
89
- @system_arguments[:classes] = class_names(
90
- "tabnav-tab",
91
- system_arguments[:classes]
92
- )
93
- end
94
-
95
- def call
96
- render(Primer::BaseComponent.new(**@system_arguments)) { @title }
97
- end
98
-
99
- def panel
100
- content
101
- end
102
-
103
- def hidden?
104
- !@selected
105
- end
106
- end
107
80
  end
108
81
  end
@@ -3,7 +3,8 @@
3
3
  module Primer
4
4
  # Use Primer::TimeAgoComponent to display a time relative to how long ago it was. This component requires JavaScript.
5
5
  class TimeAgoComponent < Primer::Component
6
- #
6
+ status :beta
7
+
7
8
  # @example Default
8
9
  # <%= render(Primer::TimeAgoComponent.new(time: Time.at(628232400))) %>
9
10
  #
@@ -3,7 +3,6 @@
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::SlotableV2
7
6
  status :beta
8
7
 
9
8
  # Avatar to be rendered to the left of the Badge.
@@ -78,7 +77,7 @@ module Primer
78
77
 
79
78
  def call
80
79
  render(Primer::BaseComponent.new(**@system_arguments)) do
81
- render(Primer::OcticonComponent.new(icon: @icon))
80
+ render(Primer::OcticonComponent.new(@icon))
82
81
  end
83
82
  end
84
83
  end
@@ -1,11 +1,23 @@
1
- <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
- <% if @align == :right %>
3
- <%= actions %>
4
- <% end %>
1
+ <%= wrapper do %>
2
+ <%= render Primer::BaseComponent.new(**@system_arguments) do %>
3
+ <% if @align == :right %>
4
+ <%= actions %>
5
+ <% end %>
6
+
7
+ <%= render body do %>
8
+ <% tabs.each do |tab| %>
9
+ <%= tab %>
10
+ <% end %>
11
+ <% end %>
5
12
 
6
- <%= body %>
13
+ <% if @align == :left %>
14
+ <%= actions %>
15
+ <% end %>
16
+ <% end %>
7
17
 
8
- <% if @align == :left %>
9
- <%= actions %>
18
+ <% if @with_panel %>
19
+ <% tabs.each do |tab| %>
20
+ <%= tab.panel %>
21
+ <% end %>
10
22
  <% end %>
11
23
  <% end %>
@@ -5,34 +5,61 @@ module Primer
5
5
  # underlined selected state, typically used for navigation placed at the top
6
6
  # of the page.
7
7
  class UnderlineNavComponent < Primer::Component
8
- include ViewComponent::SlotableV2
8
+ include Primer::TabbedComponentHelper
9
9
 
10
10
  ALIGN_DEFAULT = :left
11
11
  ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
12
12
 
13
- # Use the body for the navigation items
13
+ # Use the tabs to list navigation items. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
14
14
  #
15
+ # @param selected [Boolean] Whether the tab is selected.
15
16
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
16
- renders_one :body, lambda { |**system_arguments|
17
- system_arguments[:classes] = class_names("UnderlineNav-body", "list-style-none", system_arguments[:classes])
18
- system_arguments[:tag] ||= :ul
19
-
20
- Primer::BaseComponent.new(**system_arguments) { content }
17
+ renders_many :tabs, lambda { |selected: false, **system_arguments|
18
+ system_arguments[:classes] = class_names(
19
+ "UnderlineNav-item",
20
+ system_arguments[:classes]
21
+ )
22
+ Primer::Navigation::TabComponent.new(
23
+ selected: selected,
24
+ with_panel: @with_panel,
25
+ icon_classes: "UnderlineNav-octicon",
26
+ **system_arguments
27
+ )
21
28
  }
22
29
 
23
- # Use actions for a call to action
30
+ # Use actions for a call to action.
24
31
  #
25
32
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
26
33
  renders_one :actions, lambda { |**system_arguments|
27
34
  system_arguments[:tag] ||= :div
28
35
  system_arguments[:classes] = class_names("UnderlineNav-actions", system_arguments[:classes])
29
- Primer::BaseComponent.new(**system_arguments) { content }
36
+
37
+ Primer::BaseComponent.new(**system_arguments)
30
38
  }
31
39
 
32
40
  # @example Default
33
41
  # <%= render(Primer::UnderlineNavComponent.new) do |component| %>
34
- # <% component.body do %>
35
- # <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
42
+ # <% component.tab(href: "#", selected: true) { "Item 1" } %>
43
+ # <% component.tab(href: "#") { "Item 2" } %>
44
+ # <% component.actions do %>
45
+ # <%= render(Primer::ButtonComponent.new) { "Button!" } %>
46
+ # <% end %>
47
+ # <% end %>
48
+ #
49
+ # @example With icons and counters
50
+ # <%= render(Primer::UnderlineNavComponent.new) do |component| %>
51
+ # <% component.tab(href: "#", selected: true) do |t| %>
52
+ # <% t.icon(icon: :star) %>
53
+ # <% t.text { "Item 1" } %>
54
+ # <% end %>
55
+ # <% component.tab(href: "#") do |t| %>
56
+ # <% t.icon(icon: :star) %>
57
+ # <% t.text { "Item 2" } %>
58
+ # <% t.counter(count: 10) %>
59
+ # <% end %>
60
+ # <% component.tab(href: "#") do |t| %>
61
+ # <% t.text { "Item 3" } %>
62
+ # <% t.counter(count: 10) %>
36
63
  # <% end %>
37
64
  # <% component.actions do %>
38
65
  # <%= render(Primer::ButtonComponent.new) { "Button!" } %>
@@ -41,26 +68,65 @@ module Primer
41
68
  #
42
69
  # @example Align right
43
70
  # <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
44
- # <% component.body do %>
45
- # <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
71
+ # <% component.tab(href: "#", selected: true) do |t| %>
72
+ # <% t.text { "Item 1" } %>
73
+ # <% end %>
74
+ # <% component.tab(href: "#") do |t| %>
75
+ # <% t.text { "Item 2" } %>
76
+ # <% end %>
77
+ # <% component.actions do %>
78
+ # <%= render(Primer::ButtonComponent.new) { "Button!" } %>
79
+ # <% end %>
80
+ # <% end %>
81
+ #
82
+ # @example With panels
83
+ # <%= render(Primer::UnderlineNavComponent.new(with_panel: true)) do |component| %>
84
+ # <% component.tab(selected: true) do |t| %>
85
+ # <% t.text { "Item 1" } %>
86
+ # <% t.panel do %>
87
+ # Panel 1
88
+ # <% end %>
89
+ # <% end %>
90
+ # <% component.tab do |t| %>
91
+ # <% t.text { "Item 2" } %>
92
+ # <% t.panel do %>
93
+ # Panel 2
94
+ # <% end %>
46
95
  # <% end %>
47
96
  # <% component.actions do %>
48
97
  # <%= render(Primer::ButtonComponent.new) { "Button!" } %>
49
98
  # <% end %>
50
99
  # <% end %>
51
100
  #
101
+ # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
52
102
  # @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::ALIGN_DEFAULT %>
53
103
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
54
- def initialize(align: ALIGN_DEFAULT, **system_arguments)
104
+ def initialize(with_panel: false, align: ALIGN_DEFAULT, body_classes: "", **system_arguments)
105
+ @with_panel = with_panel
55
106
  @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
56
107
 
57
108
  @system_arguments = system_arguments
58
109
  @system_arguments[:tag] = :nav
110
+ @system_arguments[:role] = :tablist
59
111
  @system_arguments[:classes] = class_names(
60
112
  @system_arguments[:classes],
61
113
  "UnderlineNav",
62
114
  "UnderlineNav--right" => @align == :right
63
115
  )
116
+
117
+ @body_arguments = {
118
+ tag: :div,
119
+ classes: class_names(
120
+ "UnderlineNav-body",
121
+ body_classes
122
+ )
123
+ }
124
+ end
125
+
126
+ private
127
+
128
+ def body
129
+ Primer::BaseComponent.new(**@body_arguments)
64
130
  end
65
131
  end
66
132
  end