primer_view_components 0.0.26 → 0.0.27
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 +22 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/javascripts/primer_view_components.js.map.orig +5 -0
- data/app/assets/javascripts/primer_view_components.js.orig +6 -0
- data/app/components/primer/auto_complete_component.js +1 -0
- data/app/components/primer/avatar_component.rb +2 -4
- data/app/components/primer/base_component.rb +4 -16
- data/app/components/primer/blankslate_component.rb +2 -4
- data/app/components/primer/border_box_component.rb +2 -4
- data/app/components/primer/box_component.rb +2 -4
- data/app/components/primer/breadcrumb_component.rb +1 -0
- data/app/components/primer/component.rb +1 -12
- data/app/components/primer/counter_component.rb +2 -4
- data/app/components/primer/dropdown_menu_component.rb +2 -4
- data/app/components/primer/flash_component.rb +2 -4
- data/app/components/primer/label_component.rb +2 -4
- data/app/components/primer/layout_component.html.erb +3 -9
- data/app/components/primer/layout_component.rb +30 -5
- data/app/components/primer/link_component.rb +2 -4
- data/app/components/primer/octicon_component.rb +4 -6
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.ts +1 -0
- data/app/components/primer/progress_bar_component.rb +1 -0
- data/app/components/primer/spinner_component.rb +2 -4
- data/app/components/primer/state_component.rb +2 -4
- data/app/components/primer/subhead_component.rb +2 -4
- data/app/components/primer/time_ago_component.js +1 -0
- data/app/components/primer/time_ago_component.rb +47 -0
- data/app/components/primer/time_ago_component.ts +1 -0
- data/app/components/primer/underline_nav_component.html.erb +5 -5
- data/app/components/primer/underline_nav_component.rb +24 -5
- data/app/lib/primer/classify/functional_colors.rb.orig +124 -0
- data/app/lib/primer/status/dsl.rb +43 -0
- data/app/lib/primer/test_selector_helper.rb +20 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/static/statuses.json +1 -1
- metadata +12 -3
@@ -3,6 +3,8 @@
|
|
3
3
|
module Primer
|
4
4
|
# Component for rendering the status of an item.
|
5
5
|
class StateComponent < Primer::Component
|
6
|
+
status :beta
|
7
|
+
|
6
8
|
COLOR_DEFAULT = :default
|
7
9
|
NEW_COLOR_MAPPINGS = {
|
8
10
|
open: "State--open",
|
@@ -68,9 +70,5 @@ module Primer
|
|
68
70
|
def call
|
69
71
|
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
70
72
|
end
|
71
|
-
|
72
|
-
def self.status
|
73
|
-
Primer::Component::STATUSES[:beta]
|
74
|
-
end
|
75
73
|
end
|
76
74
|
end
|
@@ -3,6 +3,8 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use the Subhead component for page headings.
|
5
5
|
class SubheadComponent < Primer::Component
|
6
|
+
status :beta
|
7
|
+
|
6
8
|
include ViewComponent::SlotableV2
|
7
9
|
|
8
10
|
# The heading
|
@@ -97,9 +99,5 @@ module Primer
|
|
97
99
|
def render?
|
98
100
|
heading.present?
|
99
101
|
end
|
100
|
-
|
101
|
-
def self.status
|
102
|
-
Primer::Component::STATUSES[:beta]
|
103
|
-
end
|
104
102
|
end
|
105
103
|
end
|
@@ -0,0 +1 @@
|
|
1
|
+
import '@github/time-elements';
|
@@ -0,0 +1,47 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
# Use Primer::TimeAgoComponent to display a time relative to how long ago it was. This component requires JavaScript.
|
5
|
+
class TimeAgoComponent < Primer::Component
|
6
|
+
#
|
7
|
+
# @example Default
|
8
|
+
# <%= render(Primer::TimeAgoComponent.new(time: Time.at(628232400))) %>
|
9
|
+
#
|
10
|
+
# @param time [Time] The time to be formatted
|
11
|
+
# @param micro [Boolean] If true then the text will be formatted in "micro" mode, using as few characters as possible
|
12
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
13
|
+
def initialize(time:, micro: false, **system_arguments)
|
14
|
+
@system_arguments = system_arguments
|
15
|
+
@system_arguments[:datetime] = time.utc.iso8601
|
16
|
+
@system_arguments[:classes] = class_names("no-wrap", @system_arguments[:classes])
|
17
|
+
@system_arguments[:tag] = "time-ago"
|
18
|
+
@system_arguments[:format] = "micro" if micro
|
19
|
+
@time = time
|
20
|
+
@micro = micro
|
21
|
+
end
|
22
|
+
|
23
|
+
def call
|
24
|
+
render(Primer::BaseComponent.new(**@system_arguments)) { time_in_words }
|
25
|
+
end
|
26
|
+
|
27
|
+
private
|
28
|
+
|
29
|
+
def time_in_words
|
30
|
+
return @time.in_time_zone.strftime("%b %-d, %Y") unless @micro
|
31
|
+
|
32
|
+
seconds_ago = Time.current - @time
|
33
|
+
|
34
|
+
if seconds_ago < 1.minute
|
35
|
+
"1m"
|
36
|
+
elsif seconds_ago >= 1.minute && seconds_ago < 1.hour
|
37
|
+
"#{(seconds_ago / 60).floor}m"
|
38
|
+
elsif seconds_ago >= 1.hour && seconds_ago < 1.day
|
39
|
+
"#{(seconds_ago / 60 / 60).floor}h"
|
40
|
+
elsif seconds_ago >= 1.day && seconds_ago < 1.year
|
41
|
+
"#{(seconds_ago / 60 / 60 / 24).floor}d"
|
42
|
+
elsif seconds_ago >= 1.year
|
43
|
+
"#{(seconds_ago / 60 / 60 / 24 / 365).floor}y"
|
44
|
+
end
|
45
|
+
end
|
46
|
+
end
|
47
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
import '@github/time-elements'
|
@@ -1,11 +1,11 @@
|
|
1
1
|
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
2
|
-
<% if
|
2
|
+
<% if @align == :right %>
|
3
3
|
<%= actions %>
|
4
4
|
<% end %>
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
<% if
|
5
|
+
|
6
|
+
<%= body %>
|
7
|
+
|
8
|
+
<% if @align == :left %>
|
9
9
|
<%= actions %>
|
10
10
|
<% end %>
|
11
11
|
<% end %>
|
@@ -5,27 +5,46 @@ 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 ViewComponent::SlotableV2
|
9
|
+
|
8
10
|
ALIGN_DEFAULT = :left
|
9
11
|
ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
|
10
12
|
|
11
|
-
|
13
|
+
# Use the body for the navigation items
|
14
|
+
#
|
15
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
16
|
+
renders_one :body, lambda { |**system_arguments|
|
17
|
+
system_arguments[:classes] = class_names("UnderlineNav-body", "list-style-none", system_arguments[:classes])
|
18
|
+
system_arguments[:tag] ||= :ul
|
19
|
+
|
20
|
+
Primer::BaseComponent.new(**system_arguments) { content }
|
21
|
+
}
|
22
|
+
|
23
|
+
# Use actions for a call to action
|
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("UnderlineNav-actions", system_arguments[:classes])
|
29
|
+
Primer::BaseComponent.new(**system_arguments) { content }
|
30
|
+
}
|
12
31
|
|
13
32
|
# @example Default
|
14
33
|
# <%= render(Primer::UnderlineNavComponent.new) do |component| %>
|
15
|
-
# <% component.
|
34
|
+
# <% component.body do %>
|
16
35
|
# <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
|
17
36
|
# <% end %>
|
18
|
-
# <% component.
|
37
|
+
# <% component.actions do %>
|
19
38
|
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
|
20
39
|
# <% end %>
|
21
40
|
# <% end %>
|
22
41
|
#
|
23
42
|
# @example Align right
|
24
43
|
# <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
|
25
|
-
# <% component.
|
44
|
+
# <% component.body do %>
|
26
45
|
# <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
|
27
46
|
# <% end %>
|
28
|
-
# <% component.
|
47
|
+
# <% component.actions do %>
|
29
48
|
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
|
30
49
|
# <% end %>
|
31
50
|
# <% end %>
|
@@ -0,0 +1,124 @@
|
|
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
|
@@ -0,0 +1,43 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
require "active_support/concern"
|
4
|
+
|
5
|
+
module Primer
|
6
|
+
# :nodoc:
|
7
|
+
module Status
|
8
|
+
# DSL to allow components to register their status.
|
9
|
+
#
|
10
|
+
# Example:
|
11
|
+
#
|
12
|
+
# class MyComponent < ViewComponent::Base
|
13
|
+
# include Primer::Status::Dsl
|
14
|
+
# status :beta
|
15
|
+
# end
|
16
|
+
module Dsl
|
17
|
+
extend ActiveSupport::Concern
|
18
|
+
|
19
|
+
STATUSES = {
|
20
|
+
alpha: :alpha,
|
21
|
+
beta: :beta,
|
22
|
+
stable: :stable,
|
23
|
+
deprecated: :deprecated
|
24
|
+
}.freeze
|
25
|
+
|
26
|
+
class UnknownStatusError < StandardError; end
|
27
|
+
|
28
|
+
included do
|
29
|
+
class_attribute :component_status, instance_writer: false, default: STATUSES[:alpha]
|
30
|
+
end
|
31
|
+
|
32
|
+
class_methods do
|
33
|
+
def status(status = nil)
|
34
|
+
return component_status if status.nil?
|
35
|
+
|
36
|
+
raise UnknownStatusError, "status #{status} does not exist" if STATUSES[status].nil?
|
37
|
+
|
38
|
+
self.component_status = STATUSES[status]
|
39
|
+
end
|
40
|
+
end
|
41
|
+
end
|
42
|
+
end
|
43
|
+
end
|
@@ -0,0 +1,20 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
# Module to allow components to deal with the `test_selector` argument.
|
5
|
+
# It will only add the selector if env is not Production.
|
6
|
+
#
|
7
|
+
# test_selecotr: "foo" => data-test-selector="foo"
|
8
|
+
module TestSelectorHelper
|
9
|
+
TEST_SELECTOR_TAG = :test_selector
|
10
|
+
|
11
|
+
def add_test_selector(args)
|
12
|
+
if args.key?(TEST_SELECTOR_TAG) && !Rails.env.production?
|
13
|
+
args[:data] ||= {}
|
14
|
+
args[:data][TEST_SELECTOR_TAG] = args[TEST_SELECTOR_TAG]
|
15
|
+
end
|
16
|
+
|
17
|
+
args.except(TEST_SELECTOR_TAG)
|
18
|
+
end
|
19
|
+
end
|
20
|
+
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":"
|
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":"alpha","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"alpha","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"alpha","Primer::ProgressBarComponent":"beta","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"beta","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::TabNavComponent::TabComponent":"alpha","Primer::TextComponent":"alpha","Primer::TimeAgoComponent":"alpha","Primer::TimelineItemComponent":"alpha","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.27
|
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-08 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: octicons_helper
|
@@ -236,6 +236,9 @@ files:
|
|
236
236
|
- README.md
|
237
237
|
- app/assets/javascripts/primer_view_components.js
|
238
238
|
- app/assets/javascripts/primer_view_components.js.map
|
239
|
+
- app/assets/javascripts/primer_view_components.js.map.orig
|
240
|
+
- app/assets/javascripts/primer_view_components.js.orig
|
241
|
+
- app/components/primer/auto_complete_component.js
|
239
242
|
- app/components/primer/avatar_component.rb
|
240
243
|
- app/components/primer/avatar_stack_component.html.erb
|
241
244
|
- app/components/primer/avatar_stack_component.rb
|
@@ -292,6 +295,9 @@ files:
|
|
292
295
|
- app/components/primer/tab_nav_component.html.erb
|
293
296
|
- app/components/primer/tab_nav_component.rb
|
294
297
|
- app/components/primer/text_component.rb
|
298
|
+
- app/components/primer/time_ago_component.js
|
299
|
+
- app/components/primer/time_ago_component.rb
|
300
|
+
- app/components/primer/time_ago_component.ts
|
295
301
|
- app/components/primer/timeline_item_component.html.erb
|
296
302
|
- app/components/primer/timeline_item_component.rb
|
297
303
|
- app/components/primer/tooltip_component.rb
|
@@ -301,8 +307,11 @@ files:
|
|
301
307
|
- app/lib/primer/class_name_helper.rb
|
302
308
|
- app/lib/primer/classify.rb
|
303
309
|
- app/lib/primer/classify/cache.rb
|
310
|
+
- app/lib/primer/classify/functional_colors.rb.orig
|
304
311
|
- app/lib/primer/fetch_or_fallback_helper.rb
|
305
312
|
- app/lib/primer/join_style_arguments_helper.rb
|
313
|
+
- app/lib/primer/status/dsl.rb
|
314
|
+
- app/lib/primer/test_selector_helper.rb
|
306
315
|
- app/lib/primer/view_helper.rb
|
307
316
|
- app/lib/primer/view_helper/dsl.rb
|
308
317
|
- lib/primer/view_components.rb
|
@@ -331,7 +340,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
331
340
|
- !ruby/object:Gem::Version
|
332
341
|
version: '0'
|
333
342
|
requirements: []
|
334
|
-
rubygems_version: 3.
|
343
|
+
rubygems_version: 3.1.2
|
335
344
|
signing_key:
|
336
345
|
specification_version: 4
|
337
346
|
summary: ViewComponents for the Primer Design System
|