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.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +22 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/javascripts/primer_view_components.js.map.orig +5 -0
  6. data/app/assets/javascripts/primer_view_components.js.orig +6 -0
  7. data/app/components/primer/auto_complete_component.js +1 -0
  8. data/app/components/primer/avatar_component.rb +2 -4
  9. data/app/components/primer/base_component.rb +4 -16
  10. data/app/components/primer/blankslate_component.rb +2 -4
  11. data/app/components/primer/border_box_component.rb +2 -4
  12. data/app/components/primer/box_component.rb +2 -4
  13. data/app/components/primer/breadcrumb_component.rb +1 -0
  14. data/app/components/primer/component.rb +1 -12
  15. data/app/components/primer/counter_component.rb +2 -4
  16. data/app/components/primer/dropdown_menu_component.rb +2 -4
  17. data/app/components/primer/flash_component.rb +2 -4
  18. data/app/components/primer/label_component.rb +2 -4
  19. data/app/components/primer/layout_component.html.erb +3 -9
  20. data/app/components/primer/layout_component.rb +30 -5
  21. data/app/components/primer/link_component.rb +2 -4
  22. data/app/components/primer/octicon_component.rb +4 -6
  23. data/app/components/primer/primer.js +1 -0
  24. data/app/components/primer/primer.ts +1 -0
  25. data/app/components/primer/progress_bar_component.rb +1 -0
  26. data/app/components/primer/spinner_component.rb +2 -4
  27. data/app/components/primer/state_component.rb +2 -4
  28. data/app/components/primer/subhead_component.rb +2 -4
  29. data/app/components/primer/time_ago_component.js +1 -0
  30. data/app/components/primer/time_ago_component.rb +47 -0
  31. data/app/components/primer/time_ago_component.ts +1 -0
  32. data/app/components/primer/underline_nav_component.html.erb +5 -5
  33. data/app/components/primer/underline_nav_component.rb +24 -5
  34. data/app/lib/primer/classify/functional_colors.rb.orig +124 -0
  35. data/app/lib/primer/status/dsl.rb +43 -0
  36. data/app/lib/primer/test_selector_helper.rb +20 -0
  37. data/lib/primer/view_components/version.rb +1 -1
  38. data/static/statuses.json +1 -1
  39. 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 actions && @align == :right %>
2
+ <% if @align == :right %>
3
3
  <%= actions %>
4
4
  <% end %>
5
- <%= render Primer::BaseComponent.new(tag: :ul, classes: "UnderlineNav-body list-style-none") do %>
6
- <%= body %>
7
- <% end %>
8
- <% if actions && @align == :left %>
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
- with_content_areas :body, :actions
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.with(:body) do %>
34
+ # <% component.body do %>
16
35
  # <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
17
36
  # <% end %>
18
- # <% component.with(:actions) do %>
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.with(:body) do %>
44
+ # <% component.body do %>
26
45
  # <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
27
46
  # <% end %>
28
- # <% component.with(:actions) do %>
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
@@ -5,7 +5,7 @@ module Primer
5
5
  module VERSION
6
6
  MAJOR = 0
7
7
  MINOR = 0
8
- PATCH = 26
8
+ PATCH = 27
9
9
 
10
10
  STRING = [MAJOR, MINOR, PATCH].join(".")
11
11
  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":"alpha","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":"alpha","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"beta","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::TabNavComponent::TabComponent":"alpha","Primer::TextComponent":"alpha","Primer::TimelineItemComponent":"alpha","Primer::TimelineItemComponent::BadgeComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::TruncateComponent":"alpha","Primer::UnderlineNavComponent":"alpha"}
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.26
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-03 00:00:00.000000000 Z
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.0.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