primer_view_components 0.0.18 → 0.0.23

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 (72) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +101 -0
  3. data/app/assets/javascripts/primer_view_components.js +2 -0
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -0
  5. data/app/components/primer/avatar_component.rb +27 -9
  6. data/app/components/primer/avatar_stack_component.html.erb +10 -0
  7. data/app/components/primer/avatar_stack_component.rb +81 -0
  8. data/app/components/primer/base_component.rb +4 -4
  9. data/app/components/primer/blankslate_component.html.erb +3 -3
  10. data/app/components/primer/blankslate_component.rb +16 -24
  11. data/app/components/primer/border_box_component.html.erb +4 -18
  12. data/app/components/primer/border_box_component.rb +75 -72
  13. data/app/components/primer/box_component.rb +2 -2
  14. data/app/components/primer/breadcrumb_component.rb +1 -1
  15. data/app/components/primer/button_component.rb +2 -2
  16. data/app/components/primer/button_group_component.rb +4 -1
  17. data/app/components/primer/button_marketing_component.rb +2 -2
  18. data/app/components/primer/component.rb +9 -6
  19. data/app/components/primer/counter_component.rb +5 -1
  20. data/app/components/primer/details_component.html.erb +2 -6
  21. data/app/components/primer/details_component.rb +22 -35
  22. data/app/components/primer/dropdown/menu_component.html.erb +12 -0
  23. data/app/components/primer/dropdown/menu_component.rb +48 -0
  24. data/app/components/primer/dropdown_component.html.erb +9 -0
  25. data/app/components/primer/dropdown_component.rb +75 -0
  26. data/app/components/primer/dropdown_menu_component.rb +8 -4
  27. data/app/components/primer/flash_component.html.erb +4 -7
  28. data/app/components/primer/flash_component.rb +18 -18
  29. data/app/components/primer/flex_component.rb +38 -1
  30. data/app/components/primer/flex_item_component.rb +15 -1
  31. data/app/components/primer/heading_component.rb +3 -1
  32. data/app/components/primer/label_component.rb +15 -25
  33. data/app/components/primer/layout_component.rb +2 -2
  34. data/app/components/primer/link_component.rb +6 -2
  35. data/app/components/primer/markdown_component.rb +293 -0
  36. data/app/components/primer/menu_component.html.erb +6 -0
  37. data/app/components/primer/menu_component.rb +71 -0
  38. data/app/components/primer/octicon_component.rb +9 -3
  39. data/app/components/primer/popover_component.rb +5 -5
  40. data/app/components/primer/primer.js +1 -0
  41. data/app/components/primer/primer.ts +1 -0
  42. data/app/components/primer/progress_bar_component.rb +5 -5
  43. data/app/components/primer/spinner_component.rb +7 -3
  44. data/app/components/primer/state_component.rb +21 -10
  45. data/app/components/primer/subhead_component.html.erb +3 -15
  46. data/app/components/primer/subhead_component.rb +45 -61
  47. data/app/components/primer/tab_container_component.js +1 -0
  48. data/app/components/primer/tab_container_component.rb +41 -0
  49. data/app/components/primer/tab_container_component.ts +1 -0
  50. data/app/components/primer/tab_nav_component.html.erb +17 -0
  51. data/app/components/primer/tab_nav_component.rb +108 -0
  52. data/app/components/primer/text_component.rb +1 -1
  53. data/app/components/primer/timeline_item_component.html.erb +4 -16
  54. data/app/components/primer/timeline_item_component.rb +41 -52
  55. data/app/components/primer/tooltip_component.rb +5 -5
  56. data/app/components/primer/truncate_component.rb +4 -4
  57. data/app/components/primer/underline_nav_component.rb +2 -2
  58. data/{lib → app/lib}/primer/class_name_helper.rb +0 -0
  59. data/{lib → app/lib}/primer/classify.rb +21 -10
  60. data/app/lib/primer/classify/cache.rb +125 -0
  61. data/{lib → app/lib}/primer/fetch_or_fallback_helper.rb +1 -1
  62. data/{lib → app/lib}/primer/join_style_arguments_helper.rb +1 -1
  63. data/app/lib/primer/view_helper.rb +22 -0
  64. data/app/lib/primer/view_helper/dsl.rb +34 -0
  65. data/lib/primer/view_components.rb +32 -1
  66. data/lib/primer/view_components/engine.rb +11 -3
  67. data/lib/primer/view_components/version.rb +5 -1
  68. data/lib/yard/renders_many_handler.rb +19 -0
  69. data/lib/yard/renders_one_handler.rb +19 -0
  70. data/static/statuses.json +1 -0
  71. metadata +61 -10
  72. data/app/components/primer/view_components.rb +0 -56
@@ -0,0 +1,6 @@
1
+ <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
2
+ <%= heading %>
3
+ <% items.each do |item| %>
4
+ <%= item %>
5
+ <% end %>
6
+ <% end %>
@@ -0,0 +1,71 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ # Use menus to create vertical lists of navigational links.
5
+ class MenuComponent < Primer::Component
6
+ include ViewComponent::SlotableV2
7
+
8
+ # Optional menu heading
9
+ #
10
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
11
+ renders_one :heading, lambda { |**system_arguments|
12
+ system_arguments[:tag] ||= :span
13
+ system_arguments[:classes] = class_names(
14
+ "menu-heading",
15
+ system_arguments[:classes]
16
+ )
17
+
18
+ Primer::BaseComponent.new(**system_arguments)
19
+ }
20
+
21
+ # Required list of navigational links
22
+ #
23
+ # @param href [String] URL to be used for the Link
24
+ # @param selected [Boolean] Whether the item is the current selection
25
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
26
+ renders_many :items, lambda { |href:, selected: false, **system_arguments|
27
+ system_arguments[:tag] = :a
28
+ system_arguments[:href] = href
29
+ system_arguments[:"aria-current"] = :page if selected
30
+ system_arguments[:classes] = class_names(
31
+ "menu-item",
32
+ system_arguments[:classes]
33
+ )
34
+
35
+ Primer::BaseComponent.new(**system_arguments)
36
+ }
37
+
38
+ # @example Default
39
+ # <%= render(Primer::MenuComponent.new) do |c| %>
40
+ # <% c.heading do %>
41
+ # Heading
42
+ # <% end %>
43
+ # <% c.item(selected: true, href: "#url") do %>
44
+ # Item 1
45
+ # <% end %>
46
+ # <% c.item(href: "#url") do %>
47
+ # <%= render(Primer::OcticonComponent.new(icon: "check")) %>
48
+ # With Icon
49
+ # <% end %>
50
+ # <% c.item(href: "#url") do %>
51
+ # <%= render(Primer::OcticonComponent.new(icon: "check")) %>
52
+ # With Icon and Counter
53
+ # <%= render(Primer::CounterComponent.new(count: 25)) %>
54
+ # <% end %>
55
+ # <% end %>
56
+ #
57
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
58
+ def initialize(**system_arguments)
59
+ @system_arguments = system_arguments
60
+ @system_arguments[:tag] = :nav
61
+ @system_arguments[:classes] = class_names(
62
+ "menu",
63
+ @system_arguments[:classes]
64
+ )
65
+ end
66
+
67
+ def render?
68
+ items.any?
69
+ end
70
+ end
71
+ end
@@ -3,6 +3,8 @@
3
3
  module Primer
4
4
  # Renders an [Octicon](https://primer.style/octicons/) with <%= link_to_system_arguments_docs %>.
5
5
  class OcticonComponent < Primer::Component
6
+ view_helper :octicon
7
+
6
8
  include Primer::ClassNameHelper
7
9
  include OcticonsHelper
8
10
 
@@ -14,13 +16,13 @@ module Primer
14
16
  }.freeze
15
17
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
16
18
 
17
- # @example 25|Default
19
+ # @example Default
18
20
  # <%= render(Primer::OcticonComponent.new(icon: "check")) %>
19
21
  #
20
- # @example 40|Medium
22
+ # @example Medium
21
23
  # <%= render(Primer::OcticonComponent.new(icon: "people", size: :medium)) %>
22
24
  #
23
- # @example 80|Large
25
+ # @example Large
24
26
  # <%= render(Primer::OcticonComponent.new(icon: "x", size: :large)) %>
25
27
  #
26
28
  # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
@@ -42,5 +44,9 @@ module Primer
42
44
  def call
43
45
  octicon(@icon, { **@system_arguments })
44
46
  end
47
+
48
+ def self.status
49
+ Primer::Component::STATUSES[:beta]
50
+ end
45
51
  end
46
52
  end
@@ -10,7 +10,7 @@ module Primer
10
10
  with_slot :heading, class_name: "Heading"
11
11
  with_slot :body, class_name: "Body"
12
12
 
13
- # @example 150|Default
13
+ # @example Default
14
14
  # <%= render Primer::PopoverComponent.new do |component| %>
15
15
  # <% component.slot(:heading) do %>
16
16
  # Activity feed
@@ -20,7 +20,7 @@ module Primer
20
20
  # <% end %>
21
21
  # <% end %>
22
22
  #
23
- # @example 150|Large
23
+ # @example Large
24
24
  # <%= render Primer::PopoverComponent.new do |component| %>
25
25
  # <% component.slot(:heading) do %>
26
26
  # Activity feed
@@ -30,7 +30,7 @@ module Primer
30
30
  # <% end %>
31
31
  # <% end %>
32
32
  #
33
- # @example 150|Caret position
33
+ # @example Caret position
34
34
  # <%= render Primer::PopoverComponent.new do |component| %>
35
35
  # <% component.slot(:heading) do %>
36
36
  # Activity feed
@@ -57,7 +57,7 @@ module Primer
57
57
  body.present?
58
58
  end
59
59
 
60
- # :nodoc
60
+ # :nodoc:
61
61
  class Heading < Primer::Slot
62
62
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
63
63
  def initialize(**system_arguments)
@@ -71,7 +71,7 @@ module Primer
71
71
  end
72
72
  end
73
73
 
74
- # :nodoc
74
+ # :nodoc:
75
75
  class Body < Slot
76
76
  CARET_DEFAULT = :top
77
77
  CARET_MAPPINGS = {
@@ -0,0 +1 @@
1
+ import './tab_container_component';
@@ -0,0 +1 @@
1
+ import './tab_container_component'
@@ -16,22 +16,22 @@ module Primer
16
16
  }.freeze
17
17
 
18
18
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
19
- # @example 20|Default
19
+ # @example Default
20
20
  # <%= render(Primer::ProgressBarComponent.new) do |component| %>
21
21
  # <% component.slot(:item, percentage: 25) %>
22
22
  # <% end %>
23
23
  #
24
- # @example 20|Small
24
+ # @example Small
25
25
  # <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
26
26
  # <% component.slot(:item, bg: :blue_4, percentage: 50) %>
27
27
  # <% end %>
28
28
  #
29
- # @example 30|Large
29
+ # @example Large
30
30
  # <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
31
31
  # <% component.slot(:item, bg: :red_4, percentage: 75) %>
32
32
  # <% end %>
33
33
  #
34
- # @example 20|Multiple items
34
+ # @example Multiple items
35
35
  # <%= render(Primer::ProgressBarComponent.new) do |component| %>
36
36
  # <% component.slot(:item, percentage: 10) %>
37
37
  # <% component.slot(:item, bg: :blue_4, percentage: 20) %>
@@ -54,7 +54,7 @@ module Primer
54
54
  items.any?
55
55
  end
56
56
 
57
- # :nodoc
57
+ # :nodoc:
58
58
  class Item < Primer::Slot
59
59
  attr_reader :system_arguments
60
60
 
@@ -15,13 +15,13 @@ module Primer
15
15
  DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
16
16
 
17
17
  #
18
- # @example 48|Default
18
+ # @example Default
19
19
  # <%= render(Primer::SpinnerComponent.new) %>
20
20
  #
21
- # @example 32|Small
21
+ # @example Small
22
22
  # <%= render(Primer::SpinnerComponent.new(size: :small)) %>
23
23
  #
24
- # @example 80|Large
24
+ # @example Large
25
25
  # <%= render(Primer::SpinnerComponent.new(size: :large)) %>
26
26
  #
27
27
  # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
@@ -34,5 +34,9 @@ module Primer
34
34
  @system_arguments[:viewBox] = "0 0 16 16"
35
35
  @system_arguments[:fill] = :none
36
36
  end
37
+
38
+ def self.status
39
+ Primer::Component::STATUSES[:beta]
40
+ end
37
41
  end
38
42
  end
@@ -4,12 +4,19 @@ module Primer
4
4
  # Component for rendering the status of an item.
5
5
  class StateComponent < Primer::Component
6
6
  COLOR_DEFAULT = :default
7
- COLOR_MAPPINGS = {
7
+ NEW_COLOR_MAPPINGS = {
8
+ open: "State--open",
9
+ closed: "State--closed",
10
+ merged: "State--merged"
11
+ }.freeze
12
+
13
+ DEPRECATED_COLOR_MAPPINGS = {
8
14
  COLOR_DEFAULT => "",
9
- :green => "State--green",
10
- :red => "State--red",
11
- :purple => "State--purple"
15
+ :green => "State--open",
16
+ :red => "State--closed",
17
+ :purple => "State--merged"
12
18
  }.freeze
19
+ COLOR_MAPPINGS = NEW_COLOR_MAPPINGS.merge(DEPRECATED_COLOR_MAPPINGS)
13
20
  COLOR_OPTIONS = COLOR_MAPPINGS.keys
14
21
 
15
22
  SIZE_DEFAULT = :default
@@ -22,16 +29,16 @@ module Primer
22
29
  TAG_DEFAULT = :span
23
30
  TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
24
31
 
25
- # @example 40|Default
32
+ # @example Default
26
33
  # <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
27
34
  #
28
- # @example 40|Colors
35
+ # @example Colors
29
36
  # <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
30
- # <%= render(Primer::StateComponent.new(title: "title", color: :green)) { "Green" } %>
31
- # <%= render(Primer::StateComponent.new(title: "title", color: :red)) { "Red" } %>
32
- # <%= render(Primer::StateComponent.new(title: "title", color: :purple)) { "Purple" } %>
37
+ # <%= render(Primer::StateComponent.new(title: "title", color: :open)) { "Open" } %>
38
+ # <%= render(Primer::StateComponent.new(title: "title", color: :closed)) { "Closed" } %>
39
+ # <%= render(Primer::StateComponent.new(title: "title", color: :merged)) { "Merged" } %>
33
40
  #
34
- # @example 40|Sizes
41
+ # @example Sizes
35
42
  # <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
36
43
  # <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
37
44
  #
@@ -61,5 +68,9 @@ module Primer
61
68
  def call
62
69
  render(Primer::BaseComponent.new(**@system_arguments)) { content }
63
70
  end
71
+
72
+ def self.status
73
+ Primer::Component::STATUSES[:beta]
74
+ end
64
75
  end
65
76
  end
@@ -1,17 +1,5 @@
1
1
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
- <% if heading.present? %>
3
- <%= render Primer::BaseComponent.new(**heading.system_arguments) do %>
4
- <%= heading.content %>
5
- <% end %>
6
- <% end %>
7
- <% if actions.present? %>
8
- <%= render Primer::BaseComponent.new(**actions.system_arguments) do %>
9
- <%= actions.content %>
10
- <% end %>
11
- <% end %>
12
- <% if description.present? %>
13
- <%= render Primer::BaseComponent.new(**description.system_arguments) do %>
14
- <%= description.content %>
15
- <% end %>
16
- <% end %>
2
+ <%= heading %>
3
+ <%= actions %>
4
+ <%= description %>
17
5
  <% end %>
@@ -3,41 +3,72 @@
3
3
  module Primer
4
4
  # Use the Subhead component for page headings.
5
5
  class SubheadComponent < Primer::Component
6
- include ViewComponent::Slotable
6
+ include ViewComponent::SlotableV2
7
7
 
8
- with_slot :heading, class_name: "Heading"
9
- with_slot :actions, class_name: "Actions"
10
- with_slot :description, class_name: "Description"
8
+ # The heading
9
+ #
10
+ # @param danger [Boolean] Whether to style the heading as dangerous.
11
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
12
+ renders_one :heading, lambda { |danger: false, **system_arguments|
13
+ system_arguments[:tag] ||= :div
14
+ system_arguments[:classes] = class_names(
15
+ system_arguments[:classes],
16
+ "Subhead-heading",
17
+ "Subhead-heading--danger": danger
18
+ )
19
+
20
+ Primer::BaseComponent.new(**system_arguments)
21
+ }
22
+
23
+ # Actions
24
+ #
25
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
26
+ renders_one :actions, lambda { |**system_arguments|
27
+ system_arguments[:tag] = :div
28
+ system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-actions")
29
+
30
+ Primer::BaseComponent.new(**system_arguments)
31
+ }
11
32
 
12
- # @example 95|Default
33
+ # The description
34
+ #
35
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
36
+ renders_one :description, lambda { |**system_arguments|
37
+ system_arguments[:tag] = :div
38
+ system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-description")
39
+
40
+ Primer::BaseComponent.new(**system_arguments)
41
+ }
42
+
43
+ # @example Default
13
44
  # <%= render(Primer::SubheadComponent.new) do |component| %>
14
- # <% component.slot(:heading) do %>
45
+ # <% component.heading do %>
15
46
  # My Heading
16
47
  # <% end %>
17
- # <% component.slot(:description) do %>
48
+ # <% component.description do %>
18
49
  # My Description
19
50
  # <% end %>
20
51
  # <% end %>
21
52
  #
22
- # @example 95|Without border
53
+ # @example Without border
23
54
  # <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
24
- # <% component.slot(:heading) do %>
55
+ # <% component.heading do %>
25
56
  # My Heading
26
57
  # <% end %>
27
- # <% component.slot(:description) do %>
58
+ # <% component.description do %>
28
59
  # My Description
29
60
  # <% end %>
30
61
  # <% end %>
31
62
  #
32
- # @example 95|With actions
63
+ # @example With actions
33
64
  # <%= render(Primer::SubheadComponent.new) do |component| %>
34
- # <% component.slot(:heading) do %>
65
+ # <% component.heading do %>
35
66
  # My Heading
36
67
  # <% end %>
37
- # <% component.slot(:description) do %>
68
+ # <% component.description do %>
38
69
  # My Description
39
70
  # <% end %>
40
- # <% component.slot(:actions) do %>
71
+ # <% component.actions do %>
41
72
  # <%= render(
42
73
  # Primer::ButtonComponent.new(
43
74
  # tag: :a, href: "http://www.google.com", button_type: :danger
@@ -66,52 +97,5 @@ module Primer
66
97
  def render?
67
98
  heading.present?
68
99
  end
69
-
70
- # :nodoc
71
- class Heading < ViewComponent::Slot
72
- include ClassNameHelper
73
-
74
- attr_reader :system_arguments
75
-
76
- # @param danger [Boolean] Whether to style the heading as dangerous.
77
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
78
- def initialize(danger: false, **system_arguments)
79
- @system_arguments = system_arguments
80
- @system_arguments[:tag] ||= :div
81
- @system_arguments[:classes] = class_names(
82
- @system_arguments[:classes],
83
- "Subhead-heading",
84
- "Subhead-heading--danger": danger
85
- )
86
- end
87
- end
88
-
89
- # :nodoc
90
- class Actions < ViewComponent::Slot
91
- include ClassNameHelper
92
-
93
- attr_reader :system_arguments
94
-
95
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
96
- def initialize(**system_arguments)
97
- @system_arguments = system_arguments
98
- @system_arguments[:tag] = :div
99
- @system_arguments[:classes] = class_names(@system_arguments[:classes], "Subhead-actions")
100
- end
101
- end
102
-
103
- # :nodoc
104
- class Description < ViewComponent::Slot
105
- include ClassNameHelper
106
-
107
- attr_reader :system_arguments
108
-
109
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
110
- def initialize(**system_arguments)
111
- @system_arguments = system_arguments
112
- @system_arguments[:tag] = :div
113
- @system_arguments[:classes] = class_names(@system_arguments[:classes], "Subhead-description")
114
- end
115
- end
116
100
  end
117
101
  end