primer_view_components 0.0.31 → 0.0.36
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 +94 -0
- data/README.md +2 -2
- data/app/components/primer/{auto_complete_component.rb → auto_complete.rb} +12 -12
- 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 +1 -1
- data/app/components/primer/base_component.rb +115 -85
- data/app/components/primer/blankslate_component.html.erb +1 -1
- data/app/components/primer/blankslate_component.rb +0 -2
- data/app/components/primer/border_box_component.rb +0 -2
- data/app/components/primer/breadcrumb_component.rb +0 -1
- data/app/components/primer/button_component.rb +37 -16
- data/app/components/primer/button_group_component.rb +3 -5
- 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 +3 -0
- data/app/components/primer/details_component.rb +0 -1
- data/app/components/primer/dropdown/menu_component.rb +0 -2
- data/app/components/primer/dropdown_component.rb +1 -3
- data/app/components/primer/dropdown_menu_component.rb +1 -1
- data/app/components/primer/flash_component.html.erb +2 -2
- data/app/components/primer/flash_component.rb +10 -12
- 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/layout_component.rb +0 -2
- data/app/components/primer/link_component.rb +9 -9
- data/app/components/primer/menu_component.rb +2 -4
- data/app/components/primer/navigation/tab_component.html.erb +11 -0
- data/app/components/primer/navigation/tab_component.rb +126 -0
- data/app/components/primer/octicon_component.rb +5 -8
- data/app/components/primer/popover_component.rb +0 -1
- 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/progress_bar_component.rb +0 -1
- data/app/components/primer/spinner_component.html.erb +1 -3
- data/app/components/primer/spinner_component.rb +1 -0
- data/app/components/primer/state_component.rb +13 -13
- data/app/components/primer/subhead_component.rb +1 -3
- data/app/components/primer/tab_nav_component.html.erb +8 -10
- data/app/components/primer/tab_nav_component.rb +63 -76
- data/app/components/primer/time_ago_component.rb +2 -1
- data/app/components/primer/timeline_item_component.rb +1 -2
- data/app/components/primer/{truncate_component.rb → truncate.rb} +8 -6
- data/app/components/primer/underline_nav_component.html.erb +19 -7
- data/app/components/primer/underline_nav_component.rb +114 -16
- data/app/lib/primer/classify.rb +5 -14
- 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 +39 -0
- data/app/lib/primer/view_helper.rb +2 -2
- data/lib/primer/view_components/version.rb +1 -1
- data/static/statuses.json +1 -1
- metadata +110 -31
- 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 -40
- data/app/components/primer/slot.rb +0 -10
@@ -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(
|
80
|
+
render(Primer::OcticonComponent.new(@icon))
|
82
81
|
end
|
83
82
|
end
|
84
83
|
end
|
@@ -1,21 +1,23 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
# Use
|
5
|
-
class
|
4
|
+
# Use Truncate to shorten overflowing text with an ellipsis.
|
5
|
+
class Truncate < Primer::Component
|
6
|
+
status :beta
|
7
|
+
|
6
8
|
# @example Default
|
7
9
|
# <div class="col-2">
|
8
|
-
# <%= render(Primer::
|
10
|
+
# <%= render(Primer::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
|
9
11
|
# </div>
|
10
12
|
#
|
11
13
|
# @example Inline
|
12
|
-
# <%= render(Primer::
|
14
|
+
# <%= render(Primer::Truncate.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
|
13
15
|
#
|
14
16
|
# @example Expandable
|
15
|
-
# <%= render(Primer::
|
17
|
+
# <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
|
16
18
|
#
|
17
19
|
# @example Custom size
|
18
|
-
# <%= render(Primer::
|
20
|
+
# <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
|
19
21
|
#
|
20
22
|
# @param inline [Boolean] Whether the element is inline (or inline-block).
|
21
23
|
# @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.
|
@@ -1,11 +1,23 @@
|
|
1
|
-
<%=
|
2
|
-
|
3
|
-
|
4
|
-
|
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
|
-
|
13
|
+
<% if @align == :left %>
|
14
|
+
<%= actions %>
|
15
|
+
<% end %>
|
16
|
+
<% end %>
|
7
17
|
|
8
|
-
<% if @
|
9
|
-
|
18
|
+
<% if @with_panel %>
|
19
|
+
<% tabs.each do |tab| %>
|
20
|
+
<%= tab.panel %>
|
21
|
+
<% end %>
|
10
22
|
<% end %>
|
11
23
|
<% end %>
|
@@ -5,34 +5,66 @@ 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
|
8
|
+
include Primer::TabbedComponentHelper
|
9
9
|
|
10
10
|
ALIGN_DEFAULT = :left
|
11
11
|
ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
|
12
12
|
|
13
|
-
|
13
|
+
BODY_TAG_DEFAULT = :div
|
14
|
+
BODY_TAG_OPTIONS = [BODY_TAG_DEFAULT, :ul].freeze
|
15
|
+
|
16
|
+
# Use the tabs to list navigation items. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
|
14
17
|
#
|
18
|
+
# @param selected [Boolean] Whether the tab is selected.
|
15
19
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
16
|
-
|
17
|
-
system_arguments[:classes] = class_names(
|
18
|
-
|
20
|
+
renders_many :tabs, lambda { |selected: false, **system_arguments|
|
21
|
+
system_arguments[:classes] = class_names(
|
22
|
+
"UnderlineNav-item",
|
23
|
+
system_arguments[:classes]
|
24
|
+
)
|
19
25
|
|
20
|
-
Primer::
|
26
|
+
Primer::Navigation::TabComponent.new(
|
27
|
+
list: list?,
|
28
|
+
selected: selected,
|
29
|
+
with_panel: @with_panel,
|
30
|
+
icon_classes: "UnderlineNav-octicon",
|
31
|
+
**system_arguments
|
32
|
+
)
|
21
33
|
}
|
22
34
|
|
23
|
-
#
|
35
|
+
# Use actions for a call to action.
|
24
36
|
#
|
25
37
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
26
38
|
renders_one :actions, lambda { |**system_arguments|
|
27
39
|
system_arguments[:tag] ||= :div
|
28
40
|
system_arguments[:classes] = class_names("UnderlineNav-actions", system_arguments[:classes])
|
29
|
-
|
41
|
+
|
42
|
+
Primer::BaseComponent.new(**system_arguments)
|
30
43
|
}
|
31
44
|
|
32
45
|
# @example Default
|
33
|
-
# <%= render(Primer::UnderlineNavComponent.new) do |component| %>
|
34
|
-
# <% component.
|
35
|
-
#
|
46
|
+
# <%= render(Primer::UnderlineNavComponent.new(label: "Default")) do |component| %>
|
47
|
+
# <% component.tab(href: "#", selected: true) { "Item 1" } %>
|
48
|
+
# <% component.tab(href: "#") { "Item 2" } %>
|
49
|
+
# <% component.actions do %>
|
50
|
+
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
|
51
|
+
# <% end %>
|
52
|
+
# <% end %>
|
53
|
+
#
|
54
|
+
# @example With icons and counters
|
55
|
+
# <%= render(Primer::UnderlineNavComponent.new(label: "With icons and counters")) do |component| %>
|
56
|
+
# <% component.tab(href: "#", selected: true) do |t| %>
|
57
|
+
# <% t.icon(icon: :star) %>
|
58
|
+
# <% t.text { "Item 1" } %>
|
59
|
+
# <% end %>
|
60
|
+
# <% component.tab(href: "#") do |t| %>
|
61
|
+
# <% t.icon(icon: :star) %>
|
62
|
+
# <% t.text { "Item 2" } %>
|
63
|
+
# <% t.counter(count: 10) %>
|
64
|
+
# <% end %>
|
65
|
+
# <% component.tab(href: "#") do |t| %>
|
66
|
+
# <% t.text { "Item 3" } %>
|
67
|
+
# <% t.counter(count: 10) %>
|
36
68
|
# <% end %>
|
37
69
|
# <% component.actions do %>
|
38
70
|
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
|
@@ -40,27 +72,93 @@ module Primer
|
|
40
72
|
# <% end %>
|
41
73
|
#
|
42
74
|
# @example Align right
|
43
|
-
# <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
|
44
|
-
# <% component.
|
45
|
-
#
|
75
|
+
# <%= render(Primer::UnderlineNavComponent.new(label: "Align right", align: :right)) do |component| %>
|
76
|
+
# <% component.tab(href: "#", selected: true) do |t| %>
|
77
|
+
# <% t.text { "Item 1" } %>
|
78
|
+
# <% end %>
|
79
|
+
# <% component.tab(href: "#") do |t| %>
|
80
|
+
# <% t.text { "Item 2" } %>
|
46
81
|
# <% end %>
|
47
82
|
# <% component.actions do %>
|
48
83
|
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
|
49
84
|
# <% end %>
|
50
85
|
# <% end %>
|
51
86
|
#
|
87
|
+
# @example As a list
|
88
|
+
# <%= render(Primer::UnderlineNavComponent.new(label: "As a list", body_arguments: { tag: :ul })) do |component| %>
|
89
|
+
# <% component.tab(href: "#", selected: true) do |t| %>
|
90
|
+
# <% t.text { "Item 1" } %>
|
91
|
+
# <% end %>
|
92
|
+
# <% component.tab(href: "#") do |t| %>
|
93
|
+
# <% t.text { "Item 2" } %>
|
94
|
+
# <% end %>
|
95
|
+
# <% component.actions do %>
|
96
|
+
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
|
97
|
+
# <% end %>
|
98
|
+
# <% end %>
|
99
|
+
#
|
100
|
+
# @example With panels
|
101
|
+
# <%= render(Primer::UnderlineNavComponent.new(label: "With panels", with_panel: true)) do |component| %>
|
102
|
+
# <% component.tab(selected: true) do |t| %>
|
103
|
+
# <% t.text { "Item 1" } %>
|
104
|
+
# <% t.panel do %>
|
105
|
+
# Panel 1
|
106
|
+
# <% end %>
|
107
|
+
# <% end %>
|
108
|
+
# <% component.tab do |t| %>
|
109
|
+
# <% t.text { "Item 2" } %>
|
110
|
+
# <% t.panel do %>
|
111
|
+
# Panel 2
|
112
|
+
# <% end %>
|
113
|
+
# <% end %>
|
114
|
+
# <% component.actions do %>
|
115
|
+
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
|
116
|
+
# <% end %>
|
117
|
+
# <% end %>
|
118
|
+
#
|
119
|
+
# @param label [String] The `aria-label` on top level `<nav>` element.
|
120
|
+
# @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
|
52
121
|
# @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::ALIGN_DEFAULT %>
|
122
|
+
# @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
|
53
123
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
54
|
-
def initialize(align: ALIGN_DEFAULT, **system_arguments)
|
124
|
+
def initialize(label:, with_panel: false, align: ALIGN_DEFAULT, body_arguments: { tag: BODY_TAG_DEFAULT }, **system_arguments)
|
125
|
+
@with_panel = with_panel
|
55
126
|
@align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
|
56
127
|
|
57
128
|
@system_arguments = system_arguments
|
58
|
-
@system_arguments[:tag] =
|
129
|
+
@system_arguments[:tag] = navigation_tag(with_panel)
|
59
130
|
@system_arguments[:classes] = class_names(
|
60
131
|
@system_arguments[:classes],
|
61
132
|
"UnderlineNav",
|
62
133
|
"UnderlineNav--right" => @align == :right
|
63
134
|
)
|
135
|
+
|
136
|
+
@body_arguments = body_arguments
|
137
|
+
@body_tag = fetch_or_fallback(BODY_TAG_OPTIONS, body_arguments[:tag]&.to_sym, BODY_TAG_DEFAULT)
|
138
|
+
|
139
|
+
@body_arguments[:tag] = @body_tag
|
140
|
+
@body_arguments[:classes] = class_names(
|
141
|
+
"UnderlineNav-body",
|
142
|
+
@body_arguments[:classes],
|
143
|
+
"list-style-none" => list?
|
144
|
+
)
|
145
|
+
|
146
|
+
if with_panel
|
147
|
+
@body_arguments[:role] = :tablist
|
148
|
+
@body_arguments[:"aria-label"] = label
|
149
|
+
else
|
150
|
+
@system_arguments[:"aria-label"] = label
|
151
|
+
end
|
152
|
+
end
|
153
|
+
|
154
|
+
private
|
155
|
+
|
156
|
+
def list?
|
157
|
+
@body_tag == :ul
|
158
|
+
end
|
159
|
+
|
160
|
+
def body
|
161
|
+
Primer::BaseComponent.new(**@body_arguments)
|
64
162
|
end
|
65
163
|
end
|
66
164
|
end
|
data/app/lib/primer/classify.rb
CHANGED
@@ -3,12 +3,11 @@
|
|
3
3
|
module Primer
|
4
4
|
# :nodoc:
|
5
5
|
class Classify
|
6
|
-
MARGIN_DIRECTION_KEYS = %i[mt ml mb mr].freeze
|
7
|
-
SPACING_KEYS = (%i[m my mx p py px pt pl pb pr] + MARGIN_DIRECTION_KEYS).freeze
|
8
6
|
DIRECTION_KEY = :direction
|
9
7
|
JUSTIFY_CONTENT_KEY = :justify_content
|
10
8
|
ALIGN_ITEMS_KEY = :align_items
|
11
9
|
DISPLAY_KEY = :display
|
10
|
+
SPACING_KEYS = Primer::Classify::Spacing::KEYS
|
12
11
|
RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
|
13
12
|
BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
|
14
13
|
|
@@ -184,16 +183,10 @@ module Primer
|
|
184
183
|
return if val.nil? || val == ""
|
185
184
|
|
186
185
|
if SPACING_KEYS.include?(key)
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
end
|
192
|
-
end
|
193
|
-
|
194
|
-
if BOOLEAN_MAPPINGS.key?(key)
|
195
|
-
BOOLEAN_MAPPINGS[key][:mappings].map { |m| m[:css_class] if m[:value] == val }.compact.each do |css_class|
|
196
|
-
memo[:classes] << css_class
|
186
|
+
memo[:classes] << Primer::Classify::Spacing.spacing(key, val, breakpoint)
|
187
|
+
elsif BOOLEAN_MAPPINGS.key?(key)
|
188
|
+
BOOLEAN_MAPPINGS[key][:mappings].each do |m|
|
189
|
+
memo[:classes] << m[:css_class] if m[:value] == val && m[:css_class].present?
|
197
190
|
end
|
198
191
|
elsif key == BG_KEY
|
199
192
|
if val.to_s.start_with?("#")
|
@@ -248,8 +241,6 @@ module Primer
|
|
248
241
|
memo[:classes] << "text-#{val.to_s.dasherize}"
|
249
242
|
elsif TYPOGRAPHY_KEYS.include?(key)
|
250
243
|
memo[:classes] << "f#{val.to_s.dasherize}"
|
251
|
-
elsif MARGIN_DIRECTION_KEYS.include?(key) && val.negative?
|
252
|
-
memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}"
|
253
244
|
elsif key == BOX_SHADOW_KEY
|
254
245
|
memo[:classes] << if val == true
|
255
246
|
"color-shadow-small"
|
@@ -20,13 +20,23 @@ module Primer
|
|
20
20
|
|
21
21
|
def preload!
|
22
22
|
preload(
|
23
|
-
keys: Primer::Classify::
|
24
|
-
values:
|
23
|
+
keys: Primer::Classify::Spacing::MARGIN_DIRECTION_MAPPINGS.keys,
|
24
|
+
values: Primer::Classify::Spacing::MARGIN_DIRECTION_OPTIONS
|
25
25
|
)
|
26
26
|
|
27
27
|
preload(
|
28
|
-
keys:
|
29
|
-
values:
|
28
|
+
keys: Primer::Classify::Spacing::BASE_MAPPINGS.keys,
|
29
|
+
values: Primer::Classify::Spacing::BASE_OPTIONS
|
30
|
+
)
|
31
|
+
|
32
|
+
preload(
|
33
|
+
keys: Primer::Classify::Spacing::AUTO_MAPPINGS.keys,
|
34
|
+
values: Primer::Classify::Spacing::AUTO_OPTIONS
|
35
|
+
)
|
36
|
+
|
37
|
+
preload(
|
38
|
+
keys: Primer::Classify::Spacing::RESPONSIVE_MAPPINGS.keys,
|
39
|
+
values: Primer::Classify::Spacing::RESPONSIVE_OPTIONS
|
30
40
|
)
|
31
41
|
|
32
42
|
preload(
|
@@ -0,0 +1,63 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
class Classify
|
5
|
+
# Handler for PrimerCSS spacing classes.
|
6
|
+
class Spacing
|
7
|
+
BASE_OPTIONS = (0..6).to_a.freeze
|
8
|
+
BASE_MAPPINGS = {
|
9
|
+
my: BASE_OPTIONS,
|
10
|
+
pb: BASE_OPTIONS,
|
11
|
+
pl: BASE_OPTIONS,
|
12
|
+
pr: BASE_OPTIONS,
|
13
|
+
pt: BASE_OPTIONS,
|
14
|
+
px: BASE_OPTIONS,
|
15
|
+
py: BASE_OPTIONS
|
16
|
+
}.freeze
|
17
|
+
|
18
|
+
MARGIN_DIRECTION_OPTIONS = [*(-6..-1), *BASE_OPTIONS].freeze
|
19
|
+
MARGIN_DIRECTION_MAPPINGS = {
|
20
|
+
mb: MARGIN_DIRECTION_OPTIONS,
|
21
|
+
ml: MARGIN_DIRECTION_OPTIONS,
|
22
|
+
mr: MARGIN_DIRECTION_OPTIONS,
|
23
|
+
mt: MARGIN_DIRECTION_OPTIONS
|
24
|
+
}.freeze
|
25
|
+
|
26
|
+
AUTO_OPTIONS = [*BASE_OPTIONS, :auto].freeze
|
27
|
+
AUTO_MAPPINGS = {
|
28
|
+
m: AUTO_OPTIONS,
|
29
|
+
mx: AUTO_OPTIONS
|
30
|
+
}.freeze
|
31
|
+
|
32
|
+
RESPONSIVE_OPTIONS = [*BASE_OPTIONS, :responsive].freeze
|
33
|
+
RESPONSIVE_MAPPINGS = {
|
34
|
+
p: RESPONSIVE_OPTIONS
|
35
|
+
}.freeze
|
36
|
+
|
37
|
+
MAPPINGS = {
|
38
|
+
**BASE_MAPPINGS,
|
39
|
+
**MARGIN_DIRECTION_MAPPINGS,
|
40
|
+
**AUTO_MAPPINGS,
|
41
|
+
**RESPONSIVE_MAPPINGS
|
42
|
+
}.freeze
|
43
|
+
KEYS = MAPPINGS.keys.freeze
|
44
|
+
|
45
|
+
class << self
|
46
|
+
def spacing(key, val, breakpoint)
|
47
|
+
validate(key, val) unless Rails.env.production?
|
48
|
+
|
49
|
+
return "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}" if val.is_a?(Numeric) && val.negative?
|
50
|
+
|
51
|
+
"#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
|
52
|
+
end
|
53
|
+
|
54
|
+
private
|
55
|
+
|
56
|
+
def validate(key, val)
|
57
|
+
raise ArgumentError, "#{key} is not a spacing key" unless KEYS.include?(key)
|
58
|
+
raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{MAPPINGS[key]}" unless MAPPINGS[key].include?(val)
|
59
|
+
end
|
60
|
+
end
|
61
|
+
end
|
62
|
+
end
|
63
|
+
end
|
@@ -0,0 +1,39 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
require "active_support/concern"
|
4
|
+
|
5
|
+
module Primer
|
6
|
+
# Helper to share tab validation logic between components.
|
7
|
+
# The component will raise an error if there are 0 or 2+ selected tabs.
|
8
|
+
module TabbedComponentHelper
|
9
|
+
extend ActiveSupport::Concern
|
10
|
+
|
11
|
+
class MultipleSelectedTabsError < StandardError; end
|
12
|
+
|
13
|
+
def before_render
|
14
|
+
validate_single_selected_tab unless Rails.env.production?
|
15
|
+
end
|
16
|
+
|
17
|
+
private
|
18
|
+
|
19
|
+
def navigation_tag(with_panel)
|
20
|
+
with_panel ? :div : :nav
|
21
|
+
end
|
22
|
+
|
23
|
+
def wrapper
|
24
|
+
return yield unless @with_panel
|
25
|
+
|
26
|
+
render Primer::TabContainerComponent.new do
|
27
|
+
yield
|
28
|
+
end
|
29
|
+
end
|
30
|
+
|
31
|
+
def validate_single_selected_tab
|
32
|
+
raise MultipleSelectedTabsError, "only one tab can be selected" if selected_tabs_count > 1
|
33
|
+
end
|
34
|
+
|
35
|
+
def selected_tabs_count
|
36
|
+
@selected_tabs_count ||= tabs.count(&:selected)
|
37
|
+
end
|
38
|
+
end
|
39
|
+
end
|
@@ -12,8 +12,8 @@ module Primer
|
|
12
12
|
}.freeze
|
13
13
|
|
14
14
|
HELPERS.each do |name, component|
|
15
|
-
define_method "primer_#{name}" do
|
16
|
-
render component.constantize.new(**
|
15
|
+
define_method "primer_#{name}" do |*args, **kwargs, &block|
|
16
|
+
render component.constantize.new(*args, **kwargs), &block
|
17
17
|
end
|
18
18
|
end
|
19
19
|
end
|