primer_view_components 0.0.55 → 0.0.59
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +84 -4
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- 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/base_component.rb +4 -4
- data/app/components/primer/beta/breadcrumbs.rb +16 -2
- data/app/components/primer/clipboard_copy.html.erb +1 -1
- data/app/components/primer/clipboard_copy_component.js +23 -14
- data/app/components/primer/clipboard_copy_component.ts +29 -13
- data/lib/primer/classify/cache.rb +105 -95
- data/lib/primer/classify/utilities.rb +16 -7
- data/lib/primer/classify/utilities.yml +48 -0
- data/lib/primer/classify/validation.rb +1 -1
- data/lib/primer/classify.rb +73 -65
- data/lib/primer/view_components/engine.rb +1 -2
- data/lib/primer/view_components/linters/argument_mappers/button.rb +4 -1
- data/lib/primer/view_components/linters/breadcrumbs_component_migration_counter.rb +14 -0
- data/lib/primer/view_components/linters/flash_component_migration_counter.rb +5 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/rubocop/cop/primer/deprecated_arguments.rb +6 -1
- data/lib/rubocop/cop/primer/primer_octicon.rb +23 -3
- data/lib/tasks/utilities.rake +2 -0
- data/static/constants.json +10 -1
- metadata +9 -9
- data/lib/primer/classify/functional_background_colors.rb +0 -63
- data/lib/primer/classify/functional_border_colors.rb +0 -52
- data/lib/primer/classify/functional_colors.rb +0 -68
data/lib/primer/classify.rb
CHANGED
@@ -2,8 +2,6 @@
|
|
2
2
|
|
3
3
|
require_relative "classify/cache"
|
4
4
|
require_relative "classify/flex"
|
5
|
-
require_relative "classify/functional_background_colors"
|
6
|
-
require_relative "classify/functional_border_colors"
|
7
5
|
require_relative "classify/grid"
|
8
6
|
require_relative "classify/utilities"
|
9
7
|
require_relative "classify/validation"
|
@@ -14,7 +12,6 @@ module Primer
|
|
14
12
|
# Keys where we can simply translate { key: value } into ".key-value"
|
15
13
|
CONCAT_KEYS = %i[text box_shadow].freeze
|
16
14
|
|
17
|
-
BG_KEY = :bg
|
18
15
|
TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
|
19
16
|
BOX_SHADOW_KEY = :box_shadow
|
20
17
|
CONTAINER_KEY = :container
|
@@ -69,7 +66,6 @@ module Primer
|
|
69
66
|
}
|
70
67
|
}.freeze
|
71
68
|
BORDER_KEY = :border
|
72
|
-
BORDER_COLOR_KEY = :border_color
|
73
69
|
BORDER_MARGIN_KEYS = %i[border_top border_bottom border_left border_right].freeze
|
74
70
|
BORDER_RADIUS_KEY = :border_radius
|
75
71
|
TYPOGRAPHY_KEYS = [:font_size].freeze
|
@@ -84,9 +80,7 @@ module Primer
|
|
84
80
|
Primer::Classify::Grid::KEYS +
|
85
81
|
[
|
86
82
|
BORDER_KEY,
|
87
|
-
BORDER_COLOR_KEY,
|
88
83
|
BORDER_RADIUS_KEY,
|
89
|
-
BG_KEY,
|
90
84
|
BOX_SHADOW_KEY,
|
91
85
|
CONTAINER_KEY
|
92
86
|
]
|
@@ -94,23 +88,25 @@ module Primer
|
|
94
88
|
|
95
89
|
class << self
|
96
90
|
def call(classes: "", style: nil, **args)
|
97
|
-
|
91
|
+
extract_css_attrs(args).tap do |extracted_results|
|
92
|
+
classes = +"#{validated_class_names(classes)} #{extracted_results[:class]}"
|
93
|
+
classes.strip!
|
94
|
+
extracted_results[:class] = presence(classes)
|
98
95
|
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
].compact.join(" ").strip.presence
|
103
|
-
|
104
|
-
extracted_results[:style] = [
|
105
|
-
extracted_results.delete(:styles),
|
106
|
-
style
|
107
|
-
].compact.join.presence
|
108
|
-
|
109
|
-
extracted_results
|
96
|
+
styles = "#{extracted_results[:style]}#{style}"
|
97
|
+
extracted_results[:style] = presence(styles)
|
98
|
+
end
|
110
99
|
end
|
111
100
|
|
112
101
|
private
|
113
102
|
|
103
|
+
# do this instead of using Rails' presence/blank?, which are a lot slower
|
104
|
+
def presence(obj)
|
105
|
+
# rubocop:disable Rails/Blank
|
106
|
+
!obj || obj.empty? ? nil : obj
|
107
|
+
# rubocop:enable Rails/Blank
|
108
|
+
end
|
109
|
+
|
114
110
|
def validated_class_names(classes)
|
115
111
|
return if classes.blank?
|
116
112
|
|
@@ -120,7 +116,11 @@ module Primer
|
|
120
116
|
memo << class_name if Primer::Classify::Validation.invalid?(class_name)
|
121
117
|
end
|
122
118
|
|
123
|
-
|
119
|
+
if invalid_class_names.any?
|
120
|
+
raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) "\
|
121
|
+
"instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. "\
|
122
|
+
"This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning."
|
123
|
+
end
|
124
124
|
end
|
125
125
|
|
126
126
|
classes
|
@@ -133,80 +133,88 @@ module Primer
|
|
133
133
|
#
|
134
134
|
# styles_hash - A hash with utility keys that mimic the interface used by https://github.com/primer/components
|
135
135
|
#
|
136
|
-
# Returns a string of Primer CSS class names to be added to an HTML
|
136
|
+
# Returns a string of Primer CSS class names and style attributes to be added to an HTML tag.
|
137
137
|
#
|
138
138
|
# Example usage:
|
139
|
-
#
|
140
|
-
def
|
141
|
-
|
142
|
-
|
143
|
-
next unless VALID_KEYS.include?(key)
|
139
|
+
# extract_css_attrs({ mt: 4, py: 2 }) => "mt-4 py-2"
|
140
|
+
def extract_css_attrs(styles_hash)
|
141
|
+
classes = []
|
142
|
+
styles = +""
|
144
143
|
|
144
|
+
styles_hash.each do |key, value|
|
145
145
|
if value.is_a?(Array)
|
146
146
|
raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key) || Primer::Classify::Utilities.supported_key?(key)
|
147
147
|
|
148
148
|
value.each_with_index do |val, index|
|
149
|
-
|
149
|
+
extract_one_css_attr(classes, styles, key, val, BREAKPOINTS[index])
|
150
150
|
end
|
151
151
|
else
|
152
|
-
|
152
|
+
extract_one_css_attr(classes, styles, key, value, BREAKPOINTS[0])
|
153
153
|
end
|
154
154
|
end
|
155
155
|
|
156
|
-
|
156
|
+
{
|
157
|
+
class: classes.join(" "),
|
158
|
+
style: styles
|
159
|
+
}
|
160
|
+
end
|
161
|
+
|
162
|
+
def extract_one_css_attr(classes, styles, key, val, breakpoint)
|
163
|
+
found_classes = Primer::Classify::Cache.instance.fetch(breakpoint, key, val) do
|
164
|
+
classes_from(key, val, breakpoint)
|
165
|
+
end
|
166
|
+
|
167
|
+
classes << found_classes if found_classes
|
157
168
|
|
158
|
-
|
169
|
+
found_styles = styles_from(key, val, breakpoint)
|
170
|
+
styles << found_styles if found_styles
|
159
171
|
end
|
160
172
|
|
161
|
-
def
|
173
|
+
def styles_from(key, val, _breakpoint)
|
174
|
+
# Turn this into an if/else like classes_from when we have more branches.
|
175
|
+
# Could be that way now, but it makes Rubocop unhappy.
|
176
|
+
end
|
177
|
+
|
178
|
+
def classes_from(key, val, breakpoint)
|
162
179
|
return if val.nil? || val == ""
|
163
180
|
|
164
181
|
if Primer::Classify::Utilities.supported_key?(key)
|
165
|
-
|
182
|
+
Primer::Classify::Utilities.classname(key, val, breakpoint)
|
166
183
|
elsif BOOLEAN_MAPPINGS.key?(key)
|
167
|
-
BOOLEAN_MAPPINGS[key][:mappings].
|
168
|
-
memo
|
184
|
+
bools = BOOLEAN_MAPPINGS[key][:mappings].each_with_object([]) do |m, memo|
|
185
|
+
memo << m[:css_class] if m[:value] == val && m[:css_class].present?
|
169
186
|
end
|
170
|
-
|
171
|
-
|
172
|
-
|
187
|
+
bools.empty? ? nil : bools.join(" ")
|
188
|
+
elsif key == BORDER_KEY
|
189
|
+
if val == true
|
190
|
+
"border"
|
173
191
|
else
|
174
|
-
|
192
|
+
"border-#{val.to_s.dasherize}"
|
175
193
|
end
|
176
|
-
elsif key == BORDER_KEY
|
177
|
-
border_value = if val == true
|
178
|
-
"border"
|
179
|
-
else
|
180
|
-
"border-#{val.to_s.dasherize}"
|
181
|
-
end
|
182
|
-
|
183
|
-
memo[:classes] << border_value
|
184
|
-
elsif key == BORDER_COLOR_KEY
|
185
|
-
memo[:classes] << Primer::Classify::FunctionalBorderColors.color(val)
|
186
194
|
elsif BORDER_MARGIN_KEYS.include?(key)
|
187
|
-
|
195
|
+
"#{key.to_s.dasherize}-#{val}"
|
188
196
|
elsif key == BORDER_RADIUS_KEY
|
189
|
-
|
197
|
+
"rounded-#{val}"
|
190
198
|
elsif Primer::Classify::Flex::KEYS.include?(key)
|
191
|
-
|
199
|
+
Primer::Classify::Flex.classes(key, val, breakpoint)
|
192
200
|
elsif Primer::Classify::Grid::KEYS.include?(key)
|
193
|
-
|
201
|
+
Primer::Classify::Grid.classes(key, val, breakpoint)
|
194
202
|
elsif TEXT_KEYS.include?(key)
|
195
|
-
|
203
|
+
"text-#{val.to_s.dasherize}"
|
196
204
|
elsif TYPOGRAPHY_KEYS.include?(key)
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
205
|
+
if val == :small || val == :normal
|
206
|
+
"text-#{val.to_s.dasherize}"
|
207
|
+
else
|
208
|
+
"f#{val.to_s.dasherize}"
|
209
|
+
end
|
202
210
|
elsif key == BOX_SHADOW_KEY
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
211
|
+
if val == true
|
212
|
+
"color-shadow-small"
|
213
|
+
elsif val == :none || val.blank?
|
214
|
+
"box-shadow-none"
|
215
|
+
else
|
216
|
+
"color-shadow-#{val.to_s.dasherize}"
|
217
|
+
end
|
210
218
|
end
|
211
219
|
end
|
212
220
|
|
@@ -215,6 +223,6 @@ module Primer
|
|
215
223
|
end
|
216
224
|
end
|
217
225
|
|
218
|
-
Cache.preload!
|
226
|
+
Cache.instance.preload!
|
219
227
|
end
|
220
228
|
end
|
@@ -7,14 +7,13 @@ module Primer
|
|
7
7
|
# :nodoc:
|
8
8
|
class Engine < ::Rails::Engine
|
9
9
|
isolate_namespace Primer::ViewComponents
|
10
|
-
config.
|
10
|
+
config.eager_load_paths = %W[
|
11
11
|
#{root}/app/components
|
12
12
|
#{root}/app/lib
|
13
13
|
]
|
14
14
|
|
15
15
|
config.primer_view_components = ActiveSupport::OrderedOptions.new
|
16
16
|
|
17
|
-
config.primer_view_components.force_functional_colors = true
|
18
17
|
config.primer_view_components.force_system_arguments = false
|
19
18
|
config.primer_view_components.silence_deprecations = false
|
20
19
|
|
@@ -23,12 +23,13 @@ module ERBLint
|
|
23
23
|
component: "Primer::BaseButton",
|
24
24
|
constant: "TYPE_OPTIONS"
|
25
25
|
).freeze
|
26
|
+
|
26
27
|
DEFAULT_TAG = Primer::ViewComponents::Constants.get(
|
27
28
|
component: "Primer::BaseButton",
|
28
29
|
constant: "DEFAULT_TAG"
|
29
30
|
).freeze
|
30
31
|
|
31
|
-
ATTRIBUTES = %w[disabled type].freeze
|
32
|
+
ATTRIBUTES = %w[disabled type href name value tabindex].freeze
|
32
33
|
|
33
34
|
def attribute_to_args(attribute)
|
34
35
|
attr_name = attribute.name
|
@@ -43,6 +44,8 @@ module ERBLint
|
|
43
44
|
raise ConversionError, "Button component does not support type \"#{attribute.value}\"" unless TYPE_OPTIONS.include?(attribute.value)
|
44
45
|
|
45
46
|
{ type: ":#{attribute.value}" }
|
47
|
+
else
|
48
|
+
{ attr_name.to_sym => erb_helper.convert(attribute) }
|
46
49
|
end
|
47
50
|
end
|
48
51
|
|
@@ -0,0 +1,14 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
require_relative "base_linter"
|
4
|
+
|
5
|
+
module ERBLint
|
6
|
+
module Linters
|
7
|
+
# Counts the number of times a HTML breadcrumbs is used instead of the component.
|
8
|
+
class BreadcrumbsComponentMigrationCounter < BaseLinter
|
9
|
+
MESSAGE = "We are migrating breadcrumbs to use [Primer::Breadcrumbs](https://primer.style/view-components/components/beta/breadcrumbs), please try to use that instead of raw HTML."
|
10
|
+
CLASSES = %w[breadcrumb-item breadcrumb-item-selected].freeze
|
11
|
+
TAGS = %w[li].freeze
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
@@ -22,6 +22,11 @@ module ERBLint
|
|
22
22
|
# Hash children indicates that there are tags in the content.
|
23
23
|
return nil if tag_tree[:children].first.is_a?(Hash)
|
24
24
|
|
25
|
+
content = tag_tree[:children].first
|
26
|
+
|
27
|
+
# Don't accept content with ERB blocks
|
28
|
+
return nil if content.type != :text || content.children&.any? { |n| n.try(:type) == :erb }
|
29
|
+
|
25
30
|
ARGUMENT_MAPPER.new(tag).to_s
|
26
31
|
rescue ArgumentMappers::ConversionError
|
27
32
|
nil
|
@@ -125,7 +125,12 @@ module RuboCop
|
|
125
125
|
orange_6: nil,
|
126
126
|
orange_7: nil,
|
127
127
|
orange_8: nil,
|
128
|
-
orange_9: nil
|
128
|
+
orange_9: nil,
|
129
|
+
purple_light: nil,
|
130
|
+
purple: nil,
|
131
|
+
yellow_dark: nil,
|
132
|
+
orange: nil,
|
133
|
+
pink: nil
|
129
134
|
},
|
130
135
|
border_color: {
|
131
136
|
gray: "border_color: :primary",
|
@@ -75,8 +75,11 @@ module RuboCop
|
|
75
75
|
classes = classes(kwargs)
|
76
76
|
size_attributes = transform_sizes(kwargs)
|
77
77
|
args = arguments_as_string(node, size_attributes, classes)
|
78
|
-
|
79
|
-
|
78
|
+
if node.dot?
|
79
|
+
corrector.replace(node.loc.expression, "#{node.receiver.source}.primer_octicon(#{args})")
|
80
|
+
else
|
81
|
+
corrector.replace(node.loc.expression, "primer_octicon(#{args})")
|
82
|
+
end
|
80
83
|
end
|
81
84
|
end
|
82
85
|
|
@@ -128,12 +131,29 @@ module RuboCop
|
|
128
131
|
string_args = string_args_to_string(node)
|
129
132
|
|
130
133
|
args = "#{args}, #{size_attributes_to_string(size_attributes)}" if size_args.present?
|
131
|
-
args = "#{args}, #{
|
134
|
+
args = "#{args}, #{utilities_args(classes)}" if classes.present?
|
132
135
|
args = "#{args}, #{string_args}" if string_args.present?
|
133
136
|
|
134
137
|
args
|
135
138
|
end
|
136
139
|
|
140
|
+
def utilities_args(classes)
|
141
|
+
args = ::Primer::Classify::Utilities.classes_to_hash(classes)
|
142
|
+
|
143
|
+
color = case args[:color]
|
144
|
+
when :text_white
|
145
|
+
:text_white
|
146
|
+
when :text_link
|
147
|
+
:icon_info
|
148
|
+
when Symbol
|
149
|
+
args[:color].to_s.gsub("text_", "icon_").to_sym
|
150
|
+
end
|
151
|
+
|
152
|
+
args[:color] = color if color
|
153
|
+
|
154
|
+
::Primer::Classify::Utilities.hash_to_args(args)
|
155
|
+
end
|
156
|
+
|
137
157
|
def size_attributes_to_string(size_attributes)
|
138
158
|
# No arguments if they map to the default size
|
139
159
|
return if size_attributes.blank? || size_attributes.values.all?(&:blank?)
|
data/lib/tasks/utilities.rake
CHANGED
data/static/constants.json
CHANGED
@@ -109,7 +109,16 @@
|
|
109
109
|
]
|
110
110
|
},
|
111
111
|
"Primer::Beta::Breadcrumbs": {
|
112
|
-
"
|
112
|
+
"ARGS_DENYLIST": {
|
113
|
+
"[:p, :pt, :pb, :pr, :pl, :px, :py]": "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead.",
|
114
|
+
"[:font_size]": "Breadcrumbs do not support the font_size system argument."
|
115
|
+
},
|
116
|
+
"ARIA_LABEL": {
|
117
|
+
"label": "Breadcrumb"
|
118
|
+
},
|
119
|
+
"FONT_SIZE_MESSAGE": "Breadcrumbs do not support the font_size system argument.",
|
120
|
+
"Item": "Primer::Beta::Breadcrumbs::Item",
|
121
|
+
"PADDING_MESSAGE": "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead."
|
113
122
|
},
|
114
123
|
"Primer::Beta::Breadcrumbs::Item": {
|
115
124
|
},
|
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.59
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
|
-
autorequire:
|
8
|
+
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2021-09-
|
11
|
+
date: 2021-09-23 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|
@@ -366,7 +366,7 @@ dependencies:
|
|
366
366
|
- - "~>"
|
367
367
|
- !ruby/object:Gem::Version
|
368
368
|
version: 0.9.25
|
369
|
-
description:
|
369
|
+
description:
|
370
370
|
email:
|
371
371
|
- opensource+primer_view_components@github.com
|
372
372
|
executables: []
|
@@ -389,6 +389,8 @@ files:
|
|
389
389
|
- app/components/primer/alpha/underline_panels.rb
|
390
390
|
- app/components/primer/auto_complete/auto_complete.d.ts
|
391
391
|
- app/components/primer/auto_complete/auto_complete.js
|
392
|
+
- app/components/primer/auto_complete/auto_component.d.ts
|
393
|
+
- app/components/primer/auto_complete/auto_component.js
|
392
394
|
- app/components/primer/base_button.rb
|
393
395
|
- app/components/primer/base_component.rb
|
394
396
|
- app/components/primer/beta/auto_complete.rb
|
@@ -503,9 +505,6 @@ files:
|
|
503
505
|
- lib/primer/classify.rb
|
504
506
|
- lib/primer/classify/cache.rb
|
505
507
|
- lib/primer/classify/flex.rb
|
506
|
-
- lib/primer/classify/functional_background_colors.rb
|
507
|
-
- lib/primer/classify/functional_border_colors.rb
|
508
|
-
- lib/primer/classify/functional_colors.rb
|
509
508
|
- lib/primer/classify/grid.rb
|
510
509
|
- lib/primer/classify/utilities.rb
|
511
510
|
- lib/primer/classify/utilities.yml
|
@@ -525,6 +524,7 @@ files:
|
|
525
524
|
- lib/primer/view_components/linters/argument_mappers/system_arguments.rb
|
526
525
|
- lib/primer/view_components/linters/autocorrectable.rb
|
527
526
|
- lib/primer/view_components/linters/base_linter.rb
|
527
|
+
- lib/primer/view_components/linters/breadcrumbs_component_migration_counter.rb
|
528
528
|
- lib/primer/view_components/linters/button_component_migration_counter.rb
|
529
529
|
- lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb
|
530
530
|
- lib/primer/view_components/linters/close_button_component_migration_counter.rb
|
@@ -557,7 +557,7 @@ licenses:
|
|
557
557
|
- MIT
|
558
558
|
metadata:
|
559
559
|
allowed_push_host: https://rubygems.org
|
560
|
-
post_install_message:
|
560
|
+
post_install_message:
|
561
561
|
rdoc_options: []
|
562
562
|
require_paths:
|
563
563
|
- lib
|
@@ -573,7 +573,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
573
573
|
version: '0'
|
574
574
|
requirements: []
|
575
575
|
rubygems_version: 3.1.2
|
576
|
-
signing_key:
|
576
|
+
signing_key:
|
577
577
|
specification_version: 4
|
578
578
|
summary: ViewComponents for the Primer Design System
|
579
579
|
test_files: []
|
@@ -1,63 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
require_relative "functional_colors"
|
4
|
-
|
5
|
-
module Primer
|
6
|
-
class Classify
|
7
|
-
# Background specific functional colors
|
8
|
-
# https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration#background
|
9
|
-
class FunctionalBackgroundColors < FunctionalColors
|
10
|
-
FUNCTIONAL_OPTIONS = {
|
11
|
-
primary: :primary,
|
12
|
-
secondary: :secondary,
|
13
|
-
tertiary: :tertiary,
|
14
|
-
canvas: :canvas,
|
15
|
-
canvas_inset: :canvas_inset,
|
16
|
-
canvas_inverse: :canvas_inverse,
|
17
|
-
info: :info,
|
18
|
-
info_inverse: :info_inverse,
|
19
|
-
success: :success,
|
20
|
-
success_inverse: :success_inverse,
|
21
|
-
warning: :warning,
|
22
|
-
warning_inverse: :warning_inverse,
|
23
|
-
danger: :danger,
|
24
|
-
danger_inverse: :danger_inverse,
|
25
|
-
overlay: :overlay
|
26
|
-
}.freeze
|
27
|
-
|
28
|
-
MAPPINGS = {
|
29
|
-
white: FUNCTIONAL_OPTIONS[:primary],
|
30
|
-
gray_light: FUNCTIONAL_OPTIONS[:secondary],
|
31
|
-
gray: FUNCTIONAL_OPTIONS[:tertiary],
|
32
|
-
gray_dark: FUNCTIONAL_OPTIONS[:canvas_inverse],
|
33
|
-
blue_light: FUNCTIONAL_OPTIONS[:info],
|
34
|
-
blue: FUNCTIONAL_OPTIONS[:info_inverse],
|
35
|
-
green_light: FUNCTIONAL_OPTIONS[:success],
|
36
|
-
green: FUNCTIONAL_OPTIONS[:success_inverse],
|
37
|
-
yellow_light: FUNCTIONAL_OPTIONS[:warning],
|
38
|
-
yellow: FUNCTIONAL_OPTIONS[:warning_inverse],
|
39
|
-
red_light: FUNCTIONAL_OPTIONS[:danger],
|
40
|
-
red: FUNCTIONAL_OPTIONS[:danger_inverse]
|
41
|
-
}.freeze
|
42
|
-
|
43
|
-
OPTIONS = FUNCTIONAL_OPTIONS.values.freeze
|
44
|
-
OPTIONS_WITHOUT_MAPPINGS = [:purple_light, :purple, :yellow_dark, :orange, :pink].freeze
|
45
|
-
DEPRECATED_OPTIONS = [*MAPPINGS.keys, *OPTIONS_WITHOUT_MAPPINGS].freeze
|
46
|
-
|
47
|
-
class << self
|
48
|
-
def color(val)
|
49
|
-
functional_color(
|
50
|
-
key: "background",
|
51
|
-
value: val,
|
52
|
-
mappings: MAPPINGS,
|
53
|
-
non_functional_prefix: "bg",
|
54
|
-
functional_prefix: "color-bg",
|
55
|
-
number_prefix: "bg",
|
56
|
-
functional_options: OPTIONS,
|
57
|
-
options_without_mappigs: OPTIONS_WITHOUT_MAPPINGS
|
58
|
-
)
|
59
|
-
end
|
60
|
-
end
|
61
|
-
end
|
62
|
-
end
|
63
|
-
end
|
@@ -1,52 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
require_relative "functional_colors"
|
4
|
-
|
5
|
-
module Primer
|
6
|
-
class Classify
|
7
|
-
# Border specific functional colors
|
8
|
-
# https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration#border
|
9
|
-
class FunctionalBorderColors < FunctionalColors
|
10
|
-
FUNCTIONAL_OPTIONS = {
|
11
|
-
primary: :primary,
|
12
|
-
secondary: :secondary,
|
13
|
-
tertiary: :tertiary,
|
14
|
-
info: :info,
|
15
|
-
success: :success,
|
16
|
-
warning: :warning,
|
17
|
-
danger: :danger,
|
18
|
-
inverse: :inverse
|
19
|
-
}.freeze
|
20
|
-
|
21
|
-
MAPPINGS = {
|
22
|
-
gray: FUNCTIONAL_OPTIONS[:primary],
|
23
|
-
gray_light: FUNCTIONAL_OPTIONS[:secondary],
|
24
|
-
gray_dark: FUNCTIONAL_OPTIONS[:tertiary],
|
25
|
-
blue: FUNCTIONAL_OPTIONS[:info],
|
26
|
-
green: FUNCTIONAL_OPTIONS[:success],
|
27
|
-
yellow: FUNCTIONAL_OPTIONS[:warning],
|
28
|
-
red: FUNCTIONAL_OPTIONS[:danger],
|
29
|
-
white: FUNCTIONAL_OPTIONS[:inverse]
|
30
|
-
}.freeze
|
31
|
-
|
32
|
-
OPTIONS = FUNCTIONAL_OPTIONS.values.freeze
|
33
|
-
OPTIONS_WITHOUT_MAPPINGS = [:gray_darker, :blue_light, :red_light, :purple, :black_fade, :white_fade].freeze
|
34
|
-
DEPRECATED_OPTIONS = [*MAPPINGS.keys, *OPTIONS_WITHOUT_MAPPINGS].freeze
|
35
|
-
|
36
|
-
class << self
|
37
|
-
def color(val)
|
38
|
-
functional_color(
|
39
|
-
key: "border",
|
40
|
-
value: val,
|
41
|
-
mappings: MAPPINGS,
|
42
|
-
non_functional_prefix: "border",
|
43
|
-
functional_prefix: "color-border",
|
44
|
-
number_prefix: "border",
|
45
|
-
functional_options: OPTIONS,
|
46
|
-
options_without_mappigs: OPTIONS_WITHOUT_MAPPINGS
|
47
|
-
)
|
48
|
-
end
|
49
|
-
end
|
50
|
-
end
|
51
|
-
end
|
52
|
-
end
|
@@ -1,68 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
class Classify
|
5
|
-
# https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration
|
6
|
-
class FunctionalColors
|
7
|
-
class << self
|
8
|
-
def color(val)
|
9
|
-
# Implemented by class' childrens.
|
10
|
-
end
|
11
|
-
|
12
|
-
private
|
13
|
-
|
14
|
-
# @param key [String|Symbol] Option name.
|
15
|
-
# @param value [String|Symbol] Option value.
|
16
|
-
# @param mappings [Hash] A `color` => `functional_color` mapping hash.
|
17
|
-
# @param non_functional_prefix [String] The prefix to use for the non-functional color classes. E.g. "text" would create "text-value".
|
18
|
-
# @param functional_prefix [String] The prefix to use for the functional color classes. E.g. "color-text" would create "color-text-value".
|
19
|
-
# @param number_prefix [String] The prefix to use for colors ending with number. E.g. "text" would create "text-value-1".
|
20
|
-
# @param functional_options [Array] All the acceptable functional values.
|
21
|
-
# @param options_without_mappigs [Array] Non functional values that don't have an associated functional color.
|
22
|
-
def functional_color(
|
23
|
-
key:,
|
24
|
-
value:,
|
25
|
-
mappings:,
|
26
|
-
non_functional_prefix:,
|
27
|
-
functional_options:,
|
28
|
-
functional_prefix: "",
|
29
|
-
number_prefix: "",
|
30
|
-
options_without_mappigs: []
|
31
|
-
)
|
32
|
-
sym_value = value.to_sym
|
33
|
-
dasherized_value = value.to_s.dasherize
|
34
|
-
# the value is a functional color
|
35
|
-
return "#{number_prefix}-#{dasherized_value}" if ends_with_number?(sym_value)
|
36
|
-
return "#{functional_prefix}-#{dasherized_value}" if functional_options.include?(sym_value)
|
37
|
-
# if the app still allows non functional colors
|
38
|
-
return "#{non_functional_prefix}-#{dasherized_value}" unless force_functional_colors?
|
39
|
-
|
40
|
-
if mappings.key?(sym_value) || options_without_mappigs.include?(sym_value)
|
41
|
-
functional_color = mappings[sym_value]
|
42
|
-
# colors without functional mapping stay the same
|
43
|
-
return "#{non_functional_prefix}-#{dasherized_value}" if functional_color.blank?
|
44
|
-
|
45
|
-
ActiveSupport::Deprecation.warn("#{key} #{value} is deprecated. Please use #{functional_color} instead.") unless Rails.env.production? || silence_deprecations?
|
46
|
-
|
47
|
-
return "#{functional_prefix}-#{functional_color.to_s.dasherize}"
|
48
|
-
end
|
49
|
-
|
50
|
-
raise ArgumentError, "#{key} #{value} does not exist." unless Rails.env.production?
|
51
|
-
end
|
52
|
-
|
53
|
-
def ends_with_number?(val)
|
54
|
-
char_code = val[-1].ord
|
55
|
-
char_code >= 48 && char_code <= 57
|
56
|
-
end
|
57
|
-
|
58
|
-
def force_functional_colors?
|
59
|
-
Rails.application.config.primer_view_components.force_functional_colors
|
60
|
-
end
|
61
|
-
|
62
|
-
def silence_deprecations?
|
63
|
-
Rails.application.config.primer_view_components.silence_deprecations
|
64
|
-
end
|
65
|
-
end
|
66
|
-
end
|
67
|
-
end
|
68
|
-
end
|