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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +66 -0
- data/README.md +2 -2
- data/app/components/primer/auto_complete_component.rb +0 -2
- data/app/components/primer/auto_complete_item_component.rb +0 -2
- data/app/components/primer/avatar_stack_component.rb +0 -2
- data/app/components/primer/base_component.rb +115 -83
- 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 +11 -11
- data/app/components/primer/button_group_component.rb +3 -5
- data/app/components/primer/button_marketing_component.rb +12 -12
- data/app/components/primer/component.rb +2 -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 +0 -2
- data/app/components/primer/flash_component.html.erb +2 -2
- data/app/components/primer/flash_component.rb +10 -12
- 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 +9 -0
- data/app/components/primer/navigation/tab_component.rb +102 -0
- data/app/components/primer/octicon_component.rb +5 -4
- data/app/components/primer/popover_component.rb +19 -3
- 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 +9 -11
- data/app/components/primer/tab_nav_component.rb +46 -73
- data/app/components/primer/time_ago_component.rb +2 -1
- data/app/components/primer/timeline_item_component.rb +1 -2
- data/app/components/primer/underline_nav_component.html.erb +19 -7
- data/app/components/primer/underline_nav_component.rb +80 -14
- data/app/lib/primer/classify.rb +5 -14
- data/app/lib/primer/classify/cache.rb +14 -4
- data/app/lib/primer/classify/functional_colors.rb +8 -6
- data/app/lib/primer/classify/spacing.rb +63 -0
- data/app/lib/primer/tabbed_component_helper.rb +35 -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 +6 -3
- data/app/components/primer/slot.rb +0 -10
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(
|
@@ -29,16 +29,18 @@ module Primer
|
|
29
29
|
functional_options:,
|
30
30
|
options_without_mappigs: []
|
31
31
|
)
|
32
|
+
sym_value = value.to_sym
|
33
|
+
dasherized_value = value.to_s.dasherize
|
32
34
|
# the value is a functional color
|
33
|
-
return "#{number_prefix}-#{
|
34
|
-
return "#{functional_prefix}-#{
|
35
|
+
return "#{number_prefix}-#{dasherized_value}" if ends_with_number?(sym_value)
|
36
|
+
return "#{functional_prefix}-#{dasherized_value}" if functional_options.include?(sym_value)
|
35
37
|
# if the app still allows non functional colors
|
36
|
-
return "#{non_functional_prefix}-#{
|
38
|
+
return "#{non_functional_prefix}-#{dasherized_value}" unless force_functional_colors?
|
37
39
|
|
38
|
-
if mappings.key?(
|
39
|
-
functional_color = mappings[
|
40
|
+
if mappings.key?(sym_value) || options_without_mappigs.include?(sym_value)
|
41
|
+
functional_color = mappings[sym_value]
|
40
42
|
# colors without functional mapping stay the same
|
41
|
-
return "#{non_functional_prefix}-#{
|
43
|
+
return "#{non_functional_prefix}-#{dasherized_value}" if functional_color.blank?
|
42
44
|
|
43
45
|
ActiveSupport::Deprecation.warn("#{key} #{value} is deprecated. Please use #{functional_color} instead.") unless Rails.env.production? || silence_deprecations?
|
44
46
|
|
@@ -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,35 @@
|
|
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 wrapper
|
20
|
+
return yield unless @with_panel
|
21
|
+
|
22
|
+
render Primer::TabContainerComponent.new do
|
23
|
+
yield
|
24
|
+
end
|
25
|
+
end
|
26
|
+
|
27
|
+
def validate_single_selected_tab
|
28
|
+
raise MultipleSelectedTabsError, "only one tab can be selected" if selected_tabs_count > 1
|
29
|
+
end
|
30
|
+
|
31
|
+
def selected_tabs_count
|
32
|
+
@selected_tabs_count ||= tabs.count(&:selected)
|
33
|
+
end
|
34
|
+
end
|
35
|
+
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
|
data/static/statuses.json
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"Primer::AutoCompleteComponent":"alpha","Primer::AutoCompleteItemComponent":"alpha","Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"beta","Primer::BlankslateComponent":"beta","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"beta","Primer::BreadcrumbComponent::ItemComponent":"alpha","Primer::ButtonComponent":"alpha","Primer::ButtonGroupComponent":"alpha","Primer::ButtonMarketingComponent":"alpha","Primer::CounterComponent":"beta","Primer::DetailsComponent":"beta","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"beta","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"beta","Primer::ProgressBarComponent":"beta","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"beta","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::
|
1
|
+
{"Primer::AutoCompleteComponent":"alpha","Primer::AutoCompleteItemComponent":"alpha","Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"beta","Primer::BlankslateComponent":"beta","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"beta","Primer::BreadcrumbComponent::ItemComponent":"alpha","Primer::ButtonComponent":"alpha","Primer::ButtonGroupComponent":"alpha","Primer::ButtonMarketingComponent":"alpha","Primer::CounterComponent":"beta","Primer::DetailsComponent":"beta","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"beta","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::Navigation::TabComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"beta","Primer::ProgressBarComponent":"beta","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"beta","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::TextComponent":"beta","Primer::TimeAgoComponent":"beta","Primer::TimelineItemComponent":"beta","Primer::TimelineItemComponent::BadgeComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::TruncateComponent":"alpha","Primer::UnderlineNavComponent":"alpha"}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: primer_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.34
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2021-
|
11
|
+
date: 2021-04-01 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: octicons_helper
|
@@ -295,6 +295,8 @@ files:
|
|
295
295
|
- app/components/primer/markdown_component.rb
|
296
296
|
- app/components/primer/menu_component.html.erb
|
297
297
|
- app/components/primer/menu_component.rb
|
298
|
+
- app/components/primer/navigation/tab_component.html.erb
|
299
|
+
- app/components/primer/navigation/tab_component.rb
|
298
300
|
- app/components/primer/octicon_component.rb
|
299
301
|
- app/components/primer/popover_component.html.erb
|
300
302
|
- app/components/primer/popover_component.rb
|
@@ -303,7 +305,6 @@ files:
|
|
303
305
|
- app/components/primer/primer.ts
|
304
306
|
- app/components/primer/progress_bar_component.html.erb
|
305
307
|
- app/components/primer/progress_bar_component.rb
|
306
|
-
- app/components/primer/slot.rb
|
307
308
|
- app/components/primer/spinner_component.html.erb
|
308
309
|
- app/components/primer/spinner_component.rb
|
309
310
|
- app/components/primer/state_component.rb
|
@@ -333,9 +334,11 @@ files:
|
|
333
334
|
- app/lib/primer/classify/functional_border_colors.rb
|
334
335
|
- app/lib/primer/classify/functional_colors.rb
|
335
336
|
- app/lib/primer/classify/functional_text_colors.rb
|
337
|
+
- app/lib/primer/classify/spacing.rb
|
336
338
|
- app/lib/primer/fetch_or_fallback_helper.rb
|
337
339
|
- app/lib/primer/join_style_arguments_helper.rb
|
338
340
|
- app/lib/primer/status/dsl.rb
|
341
|
+
- app/lib/primer/tabbed_component_helper.rb
|
339
342
|
- app/lib/primer/test_selector_helper.rb
|
340
343
|
- app/lib/primer/view_helper.rb
|
341
344
|
- lib/primer/view_components.rb
|