primer_view_components 0.0.22 → 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 (44) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +74 -1
  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 +5 -13
  10. data/app/components/primer/blankslate_component.rb +2 -0
  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.html.erb +1 -2
  14. data/app/components/primer/breadcrumb_component.rb +24 -12
  15. data/app/components/primer/component.rb +2 -13
  16. data/app/components/primer/counter_component.rb +2 -4
  17. data/app/components/primer/details_component.rb +2 -3
  18. data/app/components/primer/dropdown_menu_component.rb +2 -4
  19. data/app/components/primer/flash_component.rb +2 -4
  20. data/app/components/primer/label_component.rb +18 -24
  21. data/app/components/primer/layout_component.html.erb +3 -9
  22. data/app/components/primer/layout_component.rb +30 -5
  23. data/app/components/primer/link_component.rb +2 -4
  24. data/app/components/primer/octicon_component.rb +4 -6
  25. data/app/components/primer/primer.js +1 -0
  26. data/app/components/primer/primer.ts +1 -0
  27. data/app/components/primer/progress_bar_component.html.erb +1 -1
  28. data/app/components/primer/progress_bar_component.rb +24 -27
  29. data/app/components/primer/spinner_component.rb +2 -4
  30. data/app/components/primer/state_component.rb +2 -4
  31. data/app/components/primer/subhead_component.html.erb +3 -15
  32. data/app/components/primer/subhead_component.rb +44 -58
  33. data/app/components/primer/time_ago_component.js +1 -0
  34. data/app/components/primer/time_ago_component.rb +47 -0
  35. data/app/components/primer/time_ago_component.ts +1 -0
  36. data/app/components/primer/underline_nav_component.html.erb +5 -5
  37. data/app/components/primer/underline_nav_component.rb +24 -5
  38. data/app/lib/primer/classify/functional_colors.rb.orig +124 -0
  39. data/app/lib/primer/status/dsl.rb +43 -0
  40. data/app/lib/primer/test_selector_helper.rb +20 -0
  41. data/app/lib/primer/view_helper/dsl.rb +2 -2
  42. data/lib/primer/view_components/version.rb +1 -1
  43. data/static/statuses.json +1 -1
  44. metadata +12 -3
@@ -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
@@ -10,10 +10,10 @@ module Primer
10
10
  # Example:
11
11
  #
12
12
  # class MyComponent < ViewComponent::Base
13
- # include Primer::ViewHelper::DSL
13
+ # include Primer::ViewHelper::Dsl
14
14
  # view_helper :my_component
15
15
  # end
16
- module DSL
16
+ module Dsl
17
17
  extend ActiveSupport::Concern
18
18
 
19
19
  class ViewHelperAlreadyDefined < StandardError; end
@@ -5,7 +5,7 @@ module Primer
5
5
  module VERSION
6
6
  MAJOR = 0
7
7
  MINOR = 0
8
- PATCH = 22
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":"alpha","Primer::BlankslateComponent":"alpha","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"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":"alpha","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":"alpha","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.22
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-01 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