primer_view_components 0.0.27 → 0.0.28
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +42 -0
- 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_component.d.ts +1 -0
- data/app/components/primer/auto_complete_component.html.erb +5 -0
- data/app/components/primer/auto_complete_component.rb +98 -0
- data/app/components/primer/auto_complete_component.ts +1 -0
- data/app/components/primer/auto_complete_item_component.rb +40 -0
- data/app/components/primer/avatar_component.rb +6 -5
- data/app/components/primer/base_component.rb +2 -2
- data/app/components/primer/blankslate_component.html.erb +1 -5
- data/app/components/primer/border_box_component.rb +30 -2
- data/app/components/primer/box_component.rb +1 -1
- data/app/components/primer/component.rb +0 -1
- data/app/components/primer/counter_component.rb +15 -5
- data/app/components/primer/details_component.rb +1 -0
- data/app/components/primer/flash_component.html.erb +2 -2
- data/app/components/primer/flex_component.rb +16 -16
- data/app/components/primer/heading_component.rb +1 -1
- data/app/components/primer/label_component.rb +3 -7
- data/app/components/primer/link_component.rb +37 -7
- data/app/components/primer/octicon_component.rb +0 -1
- data/app/components/primer/popover_component.html.erb +3 -7
- data/app/components/primer/popover_component.rb +58 -62
- data/app/components/primer/primer.d.ts +3 -0
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.ts +1 -0
- data/app/components/primer/progress_bar_component.rb +5 -5
- data/app/components/primer/tab_container_component.d.ts +1 -0
- data/app/components/primer/text_component.rb +3 -1
- data/app/components/primer/time_ago_component.d.ts +1 -0
- data/app/components/primer/timeline_item_component.rb +2 -1
- data/app/lib/primer/classify.rb +9 -14
- data/app/lib/primer/classify/cache.rb +7 -2
- data/app/lib/primer/classify/functional_background_colors.rb +61 -0
- data/app/lib/primer/classify/functional_border_colors.rb +51 -0
- data/app/lib/primer/classify/functional_colors.rb +66 -0
- data/app/lib/primer/classify/functional_text_colors.rb +62 -0
- data/app/lib/primer/fetch_or_fallback_helper.rb +13 -4
- data/app/lib/primer/view_helper.rb +9 -12
- data/lib/primer/view_components/engine.rb +4 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/static/statuses.json +1 -1
- metadata +28 -4
- data/app/lib/primer/classify/functional_colors.rb.orig +0 -124
- data/app/lib/primer/view_helper/dsl.rb +0 -34
@@ -0,0 +1,61 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
class Classify
|
5
|
+
# Background specific functional colors
|
6
|
+
# https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration#background
|
7
|
+
class FunctionalBackgroundColors < FunctionalColors
|
8
|
+
FUNCTIONAL_OPTIONS = {
|
9
|
+
primary: :primary,
|
10
|
+
secondary: :secondary,
|
11
|
+
tertiary: :tertiary,
|
12
|
+
canvas: :canvas,
|
13
|
+
canvas_inset: :canvas_inset,
|
14
|
+
canvas_inverse: :canvas_inverse,
|
15
|
+
info: :info,
|
16
|
+
info_inverse: :info_inverse,
|
17
|
+
success: :success,
|
18
|
+
success_inverse: :success_inverse,
|
19
|
+
warning: :warning,
|
20
|
+
warning_inverse: :warning_inverse,
|
21
|
+
danger: :danger,
|
22
|
+
danger_inverse: :danger_inverse,
|
23
|
+
overlay: :overlay
|
24
|
+
}.freeze
|
25
|
+
|
26
|
+
MAPPINGS = {
|
27
|
+
white: FUNCTIONAL_OPTIONS[:primary],
|
28
|
+
gray_light: FUNCTIONAL_OPTIONS[:secondary],
|
29
|
+
gray: FUNCTIONAL_OPTIONS[:tertiary],
|
30
|
+
gray_dark: FUNCTIONAL_OPTIONS[:canvas_inverse],
|
31
|
+
blue_light: FUNCTIONAL_OPTIONS[:info],
|
32
|
+
blue: FUNCTIONAL_OPTIONS[:info_inverse],
|
33
|
+
green_light: FUNCTIONAL_OPTIONS[:success],
|
34
|
+
green: FUNCTIONAL_OPTIONS[:success_inverse],
|
35
|
+
yellow_light: FUNCTIONAL_OPTIONS[:warning],
|
36
|
+
yellow: FUNCTIONAL_OPTIONS[:warning_inverse],
|
37
|
+
red_light: FUNCTIONAL_OPTIONS[:danger],
|
38
|
+
red: FUNCTIONAL_OPTIONS[:danger_inverse]
|
39
|
+
}.freeze
|
40
|
+
|
41
|
+
OPTIONS = FUNCTIONAL_OPTIONS.values.freeze
|
42
|
+
OPTIONS_WITHOUT_MAPPINGS = [:purple_light, :purple, :yellow_dark, :orange, :pink].freeze
|
43
|
+
DEPRECATED_OPTIONS = [*MAPPINGS.keys, *OPTIONS_WITHOUT_MAPPINGS].freeze
|
44
|
+
|
45
|
+
class << self
|
46
|
+
def color(val)
|
47
|
+
functional_color(
|
48
|
+
key: "background",
|
49
|
+
value: val,
|
50
|
+
mappings: MAPPINGS,
|
51
|
+
non_functional_prefix: "bg",
|
52
|
+
functional_prefix: "color-bg",
|
53
|
+
number_prefix: "bg",
|
54
|
+
functional_options: OPTIONS,
|
55
|
+
options_without_mappigs: OPTIONS_WITHOUT_MAPPINGS
|
56
|
+
)
|
57
|
+
end
|
58
|
+
end
|
59
|
+
end
|
60
|
+
end
|
61
|
+
end
|
@@ -0,0 +1,51 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
class Classify
|
5
|
+
# Border specific functional colors
|
6
|
+
# https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration#border
|
7
|
+
class FunctionalBorderColors < FunctionalColors
|
8
|
+
FUNCTIONAL_OPTIONS = {
|
9
|
+
primary: :primary,
|
10
|
+
secondary: :secondary,
|
11
|
+
tertiary: :tertiary,
|
12
|
+
info: :info,
|
13
|
+
success: :success,
|
14
|
+
warning: :warning,
|
15
|
+
danger: :danger,
|
16
|
+
inverse: :inverse,
|
17
|
+
overlay: :overlay
|
18
|
+
}.freeze
|
19
|
+
|
20
|
+
MAPPINGS = {
|
21
|
+
gray: FUNCTIONAL_OPTIONS[:primary],
|
22
|
+
gray_light: FUNCTIONAL_OPTIONS[:secondary],
|
23
|
+
gray_dark: FUNCTIONAL_OPTIONS[:tertiary],
|
24
|
+
blue: FUNCTIONAL_OPTIONS[:info],
|
25
|
+
green: FUNCTIONAL_OPTIONS[:success],
|
26
|
+
yellow: FUNCTIONAL_OPTIONS[:warning],
|
27
|
+
red: FUNCTIONAL_OPTIONS[:danger],
|
28
|
+
white: FUNCTIONAL_OPTIONS[:inverse]
|
29
|
+
}.freeze
|
30
|
+
|
31
|
+
OPTIONS = FUNCTIONAL_OPTIONS.values.freeze
|
32
|
+
OPTIONS_WITHOUT_MAPPINGS = [:gray_darker, :blue_light, :red_light, :purple, :black_fade, :white_fade].freeze
|
33
|
+
DEPRECATED_OPTIONS = [*MAPPINGS.keys, *OPTIONS_WITHOUT_MAPPINGS].freeze
|
34
|
+
|
35
|
+
class << self
|
36
|
+
def color(val)
|
37
|
+
functional_color(
|
38
|
+
key: "border",
|
39
|
+
value: val,
|
40
|
+
mappings: MAPPINGS,
|
41
|
+
non_functional_prefix: "border",
|
42
|
+
functional_prefix: "color-border",
|
43
|
+
number_prefix: "border",
|
44
|
+
functional_options: OPTIONS,
|
45
|
+
options_without_mappigs: OPTIONS_WITHOUT_MAPPINGS
|
46
|
+
)
|
47
|
+
end
|
48
|
+
end
|
49
|
+
end
|
50
|
+
end
|
51
|
+
end
|
@@ -0,0 +1,66 @@
|
|
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_prefix: "",
|
28
|
+
number_prefix: "",
|
29
|
+
functional_options:,
|
30
|
+
options_without_mappigs: []
|
31
|
+
)
|
32
|
+
# the value is a functional color
|
33
|
+
return "#{number_prefix}-#{value.to_s.dasherize}" if ends_with_number?(value)
|
34
|
+
return "#{functional_prefix}-#{value.to_s.dasherize}" if functional_options.include?(value)
|
35
|
+
# if the app still allows non functional colors
|
36
|
+
return "#{non_functional_prefix}-#{value.to_s.dasherize}" unless force_functional_colors?
|
37
|
+
|
38
|
+
if mappings.key?(value) || options_without_mappigs.include?(value)
|
39
|
+
functional_color = mappings[value]
|
40
|
+
# colors without functional mapping stay the same
|
41
|
+
return "#{non_functional_prefix}-#{value.to_s.dasherize}" if functional_color.blank?
|
42
|
+
|
43
|
+
ActiveSupport::Deprecation.warn("#{key} #{value} is deprecated. Please use #{functional_color} instead.") unless Rails.env.production? || silence_color_deprecations?
|
44
|
+
|
45
|
+
return "#{functional_prefix}-#{functional_color.to_s.dasherize}"
|
46
|
+
end
|
47
|
+
|
48
|
+
raise ArgumentError, "#{key} #{value} does not exist." unless Rails.env.production?
|
49
|
+
end
|
50
|
+
|
51
|
+
def ends_with_number?(val)
|
52
|
+
char_code = val[-1].ord
|
53
|
+
char_code >= 48 && char_code <= 57
|
54
|
+
end
|
55
|
+
|
56
|
+
def force_functional_colors?
|
57
|
+
Rails.application.config.primer_view_components.force_functional_colors
|
58
|
+
end
|
59
|
+
|
60
|
+
def silence_color_deprecations?
|
61
|
+
Rails.application.config.primer_view_components.silence_color_deprecations
|
62
|
+
end
|
63
|
+
end
|
64
|
+
end
|
65
|
+
end
|
66
|
+
end
|
@@ -0,0 +1,62 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
class Classify
|
5
|
+
# Text specific functional colors.
|
6
|
+
# https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration#text
|
7
|
+
class FunctionalTextColors < FunctionalColors
|
8
|
+
FUNCTIONAL_OPTIONS = {
|
9
|
+
primary: :text_primary,
|
10
|
+
secondary: :text_secondary,
|
11
|
+
tertiary: :text_tertiary,
|
12
|
+
link: :text_link,
|
13
|
+
success: :text_success,
|
14
|
+
warning: :text_warning,
|
15
|
+
danger: :text_danger,
|
16
|
+
white: :text_white,
|
17
|
+
inverse: :text_inverse
|
18
|
+
}.freeze
|
19
|
+
|
20
|
+
# colors mapping to `nil` will preserve the old classes.
|
21
|
+
# e.g. `text: :orange` will generate `text-orange`.
|
22
|
+
MAPPINGS = {
|
23
|
+
gray_dark: FUNCTIONAL_OPTIONS[:primary],
|
24
|
+
gray: FUNCTIONAL_OPTIONS[:secondary],
|
25
|
+
gray_light: FUNCTIONAL_OPTIONS[:tertiary],
|
26
|
+
blue: FUNCTIONAL_OPTIONS[:link],
|
27
|
+
green: FUNCTIONAL_OPTIONS[:success],
|
28
|
+
yellow: FUNCTIONAL_OPTIONS[:warning],
|
29
|
+
red: FUNCTIONAL_OPTIONS[:danger],
|
30
|
+
white: FUNCTIONAL_OPTIONS[:white]
|
31
|
+
}.freeze
|
32
|
+
|
33
|
+
OPTIONS = [
|
34
|
+
:icon_primary,
|
35
|
+
:icon_secondary,
|
36
|
+
:icon_tertiary,
|
37
|
+
:icon_info,
|
38
|
+
:icon_success,
|
39
|
+
:icon_warning,
|
40
|
+
:icon_danger,
|
41
|
+
*FUNCTIONAL_OPTIONS.values
|
42
|
+
].freeze
|
43
|
+
OPTIONS_WITHOUT_MAPPINGS = [:black, :orange, :orange_light, :purple, :pink, :inherit].freeze
|
44
|
+
DEPRECATED_OPTIONS = [*MAPPINGS.keys, *OPTIONS_WITHOUT_MAPPINGS].freeze
|
45
|
+
|
46
|
+
class << self
|
47
|
+
def color(val)
|
48
|
+
functional_color(
|
49
|
+
key: "color",
|
50
|
+
value: val,
|
51
|
+
mappings: MAPPINGS,
|
52
|
+
non_functional_prefix: "text",
|
53
|
+
functional_prefix: "color",
|
54
|
+
number_prefix: "color",
|
55
|
+
functional_options: OPTIONS,
|
56
|
+
options_without_mappigs: OPTIONS_WITHOUT_MAPPINGS
|
57
|
+
)
|
58
|
+
end
|
59
|
+
end
|
60
|
+
end
|
61
|
+
end
|
62
|
+
end
|
@@ -6,13 +6,18 @@
|
|
6
6
|
# Use this helper to quietly ensure a value is
|
7
7
|
# one that you expect:
|
8
8
|
#
|
9
|
-
# allowed_values
|
10
|
-
# given_value
|
11
|
-
# fallback
|
9
|
+
# allowed_values - allowed options for *value*
|
10
|
+
# given_value - input being coerced
|
11
|
+
# fallback - returned if *given_value* is not included in *allowed_values*
|
12
|
+
# deprecated_values - deprecated options for *value*. Will warn of deprecation if not in production
|
12
13
|
#
|
13
14
|
# fetch_or_fallback([1,2,3], 5, 2) => 2
|
14
15
|
# fetch_or_fallback([1,2,3], 1, 2) => 1
|
15
16
|
# fetch_or_fallback([1,2,3], nil, 2) => 2
|
17
|
+
#
|
18
|
+
# With deprecations:
|
19
|
+
# fetch_or_fallback([1,2], 3, 2, deprecated_values: [3]) => 3
|
20
|
+
# fetch_or_fallback([1,2], nil, 2, deprecated_values: [3]) => 2
|
16
21
|
module Primer
|
17
22
|
# :nodoc:
|
18
23
|
module FetchOrFallbackHelper
|
@@ -20,8 +25,12 @@ module Primer
|
|
20
25
|
|
21
26
|
InvalidValueError = Class.new(StandardError)
|
22
27
|
|
23
|
-
def fetch_or_fallback(allowed_values, given_value, fallback = nil)
|
28
|
+
def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: [])
|
24
29
|
if allowed_values.include?(given_value)
|
30
|
+
given_value
|
31
|
+
elsif deprecated_values.include?(given_value)
|
32
|
+
ActiveSupport::Deprecation.warn("#{given_value} is deprecated and will be removed in a future version.") unless Rails.env.production?
|
33
|
+
|
25
34
|
given_value
|
26
35
|
else
|
27
36
|
if fallback_raises && ENV["RAILS_ENV"] != "production" && ENV["STORYBOOK"] != "true"
|
@@ -1,22 +1,19 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
# Module to allow shorthand calls for
|
5
|
-
#
|
6
|
-
# Registered components can be called with
|
7
|
-
# `primer(:name, **kwargs) { block }` instead of
|
8
|
-
# `render Primer::NameComponent.new(**kwargs) { block }`
|
4
|
+
# Module to allow shorthand calls for Primer components
|
9
5
|
module ViewHelper
|
10
|
-
extend ActiveSupport::Concern
|
11
|
-
|
12
6
|
class ViewHelperNotFound < StandardError; end
|
13
7
|
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
8
|
+
HELPERS = {
|
9
|
+
octicon: "Primer::OcticonComponent",
|
10
|
+
heading: "Primer::HeadingComponent"
|
11
|
+
}.freeze
|
18
12
|
|
19
|
-
|
13
|
+
HELPERS.each do |name, component|
|
14
|
+
define_method "primer_#{name}" do |**component_args, &block|
|
15
|
+
render component.constantize.new(**component_args), &block
|
16
|
+
end
|
20
17
|
end
|
21
18
|
end
|
22
19
|
end
|
@@ -12,6 +12,10 @@ module Primer
|
|
12
12
|
#{root}/app/lib
|
13
13
|
]
|
14
14
|
|
15
|
+
config.primer_view_components = ActiveSupport::OrderedOptions.new
|
16
|
+
config.primer_view_components.force_functional_colors = true
|
17
|
+
config.primer_view_components.silence_color_deprecations = false
|
18
|
+
|
15
19
|
initializer "primer_view_components.assets" do |app|
|
16
20
|
app.config.assets.precompile += %w[primer_view_components] if app.config.respond_to?(:assets)
|
17
21
|
end
|
data/static/statuses.json
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"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":"
|
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::TabNavComponent::TabComponent":"alpha","Primer::TextComponent":"beta","Primer::TimeAgoComponent":"alpha","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.28
|
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-03-
|
11
|
+
date: 2021-03-11 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: octicons_helper
|
@@ -126,6 +126,20 @@ dependencies:
|
|
126
126
|
- - '='
|
127
127
|
- !ruby/object:Gem::Version
|
128
128
|
version: 5.6.0
|
129
|
+
- !ruby/object:Gem::Dependency
|
130
|
+
name: mocha
|
131
|
+
requirement: !ruby/object:Gem::Requirement
|
132
|
+
requirements:
|
133
|
+
- - ">="
|
134
|
+
- !ruby/object:Gem::Version
|
135
|
+
version: '0'
|
136
|
+
type: :development
|
137
|
+
prerelease: false
|
138
|
+
version_requirements: !ruby/object:Gem::Requirement
|
139
|
+
requirements:
|
140
|
+
- - ">="
|
141
|
+
- !ruby/object:Gem::Version
|
142
|
+
version: '0'
|
129
143
|
- !ruby/object:Gem::Dependency
|
130
144
|
name: pry
|
131
145
|
requirement: !ruby/object:Gem::Requirement
|
@@ -238,7 +252,12 @@ files:
|
|
238
252
|
- app/assets/javascripts/primer_view_components.js.map
|
239
253
|
- app/assets/javascripts/primer_view_components.js.map.orig
|
240
254
|
- app/assets/javascripts/primer_view_components.js.orig
|
255
|
+
- app/components/primer/auto_complete_component.d.ts
|
256
|
+
- app/components/primer/auto_complete_component.html.erb
|
241
257
|
- app/components/primer/auto_complete_component.js
|
258
|
+
- app/components/primer/auto_complete_component.rb
|
259
|
+
- app/components/primer/auto_complete_component.ts
|
260
|
+
- app/components/primer/auto_complete_item_component.rb
|
242
261
|
- app/components/primer/avatar_component.rb
|
243
262
|
- app/components/primer/avatar_stack_component.html.erb
|
244
263
|
- app/components/primer/avatar_stack_component.rb
|
@@ -279,6 +298,7 @@ files:
|
|
279
298
|
- app/components/primer/octicon_component.rb
|
280
299
|
- app/components/primer/popover_component.html.erb
|
281
300
|
- app/components/primer/popover_component.rb
|
301
|
+
- app/components/primer/primer.d.ts
|
282
302
|
- app/components/primer/primer.js
|
283
303
|
- app/components/primer/primer.ts
|
284
304
|
- app/components/primer/progress_bar_component.html.erb
|
@@ -289,12 +309,14 @@ files:
|
|
289
309
|
- app/components/primer/state_component.rb
|
290
310
|
- app/components/primer/subhead_component.html.erb
|
291
311
|
- app/components/primer/subhead_component.rb
|
312
|
+
- app/components/primer/tab_container_component.d.ts
|
292
313
|
- app/components/primer/tab_container_component.js
|
293
314
|
- app/components/primer/tab_container_component.rb
|
294
315
|
- app/components/primer/tab_container_component.ts
|
295
316
|
- app/components/primer/tab_nav_component.html.erb
|
296
317
|
- app/components/primer/tab_nav_component.rb
|
297
318
|
- app/components/primer/text_component.rb
|
319
|
+
- app/components/primer/time_ago_component.d.ts
|
298
320
|
- app/components/primer/time_ago_component.js
|
299
321
|
- app/components/primer/time_ago_component.rb
|
300
322
|
- app/components/primer/time_ago_component.ts
|
@@ -307,13 +329,15 @@ files:
|
|
307
329
|
- app/lib/primer/class_name_helper.rb
|
308
330
|
- app/lib/primer/classify.rb
|
309
331
|
- app/lib/primer/classify/cache.rb
|
310
|
-
- app/lib/primer/classify/
|
332
|
+
- app/lib/primer/classify/functional_background_colors.rb
|
333
|
+
- app/lib/primer/classify/functional_border_colors.rb
|
334
|
+
- app/lib/primer/classify/functional_colors.rb
|
335
|
+
- app/lib/primer/classify/functional_text_colors.rb
|
311
336
|
- app/lib/primer/fetch_or_fallback_helper.rb
|
312
337
|
- app/lib/primer/join_style_arguments_helper.rb
|
313
338
|
- app/lib/primer/status/dsl.rb
|
314
339
|
- app/lib/primer/test_selector_helper.rb
|
315
340
|
- app/lib/primer/view_helper.rb
|
316
|
-
- app/lib/primer/view_helper/dsl.rb
|
317
341
|
- lib/primer/view_components.rb
|
318
342
|
- lib/primer/view_components/engine.rb
|
319
343
|
- lib/primer/view_components/version.rb
|
@@ -1,124 +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
|
-
FUNCTIONAL_COLOR_REGEX = /(primary|secondary|tertiary|link|success|warning|danger|info|inverse|text_white)/.freeze
|
8
|
-
|
9
|
-
FUNCTIONAL_TEXT_OPTIONS = {
|
10
|
-
primary: :text_primary,
|
11
|
-
secondary: :text_secondary,
|
12
|
-
tertiary: :text_tertiary,
|
13
|
-
link: :text_link,
|
14
|
-
success: :text_success,
|
15
|
-
warning: :text_warning,
|
16
|
-
danger: :text_danger,
|
17
|
-
white: :text_white,
|
18
|
-
inverse: :text_inverse,
|
19
|
-
}.freeze
|
20
|
-
|
21
|
-
TEXT_COLOR_MAPPINGS = {
|
22
|
-
gray_dark: FUNCTIONAL_TEXT_OPTIONS[:primary],
|
23
|
-
gray: FUNCTIONAL_TEXT_OPTIONS[:secondary],
|
24
|
-
gray_light: FUNCTIONAL_TEXT_OPTIONS[:tertiary],
|
25
|
-
blue: FUNCTIONAL_TEXT_OPTIONS[:link],
|
26
|
-
green: FUNCTIONAL_TEXT_OPTIONS[:success],
|
27
|
-
yellow: FUNCTIONAL_TEXT_OPTIONS[:warning],
|
28
|
-
red: FUNCTIONAL_TEXT_OPTIONS[:danger],
|
29
|
-
white: FUNCTIONAL_TEXT_OPTIONS[:white],
|
30
|
-
# still unsure what will happen with these colors
|
31
|
-
black: nil,
|
32
|
-
orange: nil,
|
33
|
-
orange_light: nil,
|
34
|
-
purple: nil,
|
35
|
-
pink: nil,
|
36
|
-
inherit: nil
|
37
|
-
}.freeze
|
38
|
-
|
39
|
-
<<<<<<< HEAD
|
40
|
-
TEXT_OPTIONS = [
|
41
|
-
:icon_primary,
|
42
|
-
:icon_secondary,
|
43
|
-
:icon_tertiary,
|
44
|
-
:icon_info,
|
45
|
-
:icon_success,
|
46
|
-
:icon_warning,
|
47
|
-
:icon_danger,
|
48
|
-
*FUNCTIONAL_TEXT_OPTIONS.values
|
49
|
-
].freeze
|
50
|
-
DEPRECATED_TEXT_OPTIONS = TEXT_COLOR_MAPPINGS.keys.freeze
|
51
|
-
=======
|
52
|
-
BORDER_COLOR_MAPPINGS = {
|
53
|
-
gray: :primary,
|
54
|
-
gray_light: :secondary,
|
55
|
-
gray_dark: :tertiary,
|
56
|
-
blue: :info,
|
57
|
-
green: :success,
|
58
|
-
yellow: :warning,
|
59
|
-
red: :danger,
|
60
|
-
white: :inverse,
|
61
|
-
# still unsure what will happen with these colors
|
62
|
-
gray_darker: nil,
|
63
|
-
blue_light: nil,
|
64
|
-
red_light: nil,
|
65
|
-
purple: nil,
|
66
|
-
black_fade: nil,
|
67
|
-
white_fade: nil
|
68
|
-
}.freeze
|
69
|
-
>>>>>>> extract functional color method and apply it to border
|
70
|
-
|
71
|
-
class << self
|
72
|
-
def text_color(val)
|
73
|
-
functional_color(
|
74
|
-
value: val,
|
75
|
-
functional_prefix: "color",
|
76
|
-
non_functional_prefix: "text",
|
77
|
-
mappings: TEXT_COLOR_MAPPINGS,
|
78
|
-
key: "color"
|
79
|
-
)
|
80
|
-
end
|
81
|
-
|
82
|
-
def border_color(val)
|
83
|
-
functional_color(
|
84
|
-
value: val,
|
85
|
-
functional_prefix: "color-border",
|
86
|
-
non_functional_prefix: "border",
|
87
|
-
mappings: BORDER_COLOR_MAPPINGS,
|
88
|
-
key: "border"
|
89
|
-
)
|
90
|
-
end
|
91
|
-
|
92
|
-
private
|
93
|
-
|
94
|
-
def functional_color(value:, functional_prefix:, non_functional_prefix:, mappings:, key:)
|
95
|
-
# the value is a functional color
|
96
|
-
return "#{functional_prefix}-#{value.to_s.dasherize}" if ends_with_number?(value) || FUNCTIONAL_COLOR_REGEX.match?(value)
|
97
|
-
# if the app still allows non functional colors
|
98
|
-
return "#{non_functional_prefix}-#{value.to_s.dasherize}" unless force_functional_colors?
|
99
|
-
|
100
|
-
if mappings.key?(value)
|
101
|
-
functional_color = mappings[value]
|
102
|
-
# colors without functional mapping stay the same
|
103
|
-
return "#{non_functional_prefix}-#{value.to_s.dasherize}" if functional_color.blank?
|
104
|
-
|
105
|
-
ActiveSupport::Deprecation.warn("#{key} #{value} is deprecated. Please use #{functional_color} instead.") unless Rails.env.production?
|
106
|
-
|
107
|
-
return "#{functional_prefix}-#{functional_color.to_s.dasherize}"
|
108
|
-
end
|
109
|
-
|
110
|
-
raise ArgumentError, "#{key} #{value} does not exist."
|
111
|
-
end
|
112
|
-
|
113
|
-
def ends_with_number?(val)
|
114
|
-
char_code = val[-1].ord
|
115
|
-
char_code >= 48 && char_code <= 57
|
116
|
-
end
|
117
|
-
|
118
|
-
def force_functional_colors?
|
119
|
-
Rails.application.config.primer_view_components.force_functional_colors
|
120
|
-
end
|
121
|
-
end
|
122
|
-
end
|
123
|
-
end
|
124
|
-
end
|