primer_view_components 0.0.51 → 0.0.55

Sign up to get free protection for your applications and to get access to all the features.
Files changed (77) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +159 -0
  3. data/app/components/primer/alpha/tab_nav.html.erb +11 -0
  4. data/app/components/primer/alpha/tab_nav.rb +130 -0
  5. data/app/components/primer/{tab_nav_component.html.erb → alpha/tab_panels.html.erb} +3 -8
  6. data/app/components/primer/alpha/tab_panels.rb +82 -0
  7. data/app/components/primer/alpha/underline_nav.html.erb +15 -0
  8. data/app/components/primer/alpha/underline_nav.rb +137 -0
  9. data/app/components/primer/{underline_nav_component.html.erb → alpha/underline_panels.html.erb} +3 -8
  10. data/app/components/primer/alpha/underline_panels.rb +86 -0
  11. data/app/components/primer/base_component.rb +1 -1
  12. data/app/components/primer/beta/avatar_stack.rb +9 -9
  13. data/app/components/primer/{breadcrumb_component.html.erb → beta/breadcrumbs.html.erb} +2 -1
  14. data/app/components/primer/beta/breadcrumbs.rb +61 -0
  15. data/app/components/primer/beta/truncate.html.erb +5 -0
  16. data/app/components/primer/beta/truncate.rb +110 -0
  17. data/app/components/primer/border_box_component.rb +27 -1
  18. data/app/components/primer/clipboard_copy.rb +1 -1
  19. data/app/components/primer/dropdown.rb +7 -7
  20. data/app/components/primer/icon_button.rb +1 -1
  21. data/app/components/primer/navigation/tab_component.rb +8 -6
  22. data/app/components/primer/octicon_component.rb +6 -1
  23. data/app/components/primer/progress_bar_component.rb +0 -3
  24. data/app/components/primer/tab_container_component.rb +1 -1
  25. data/app/lib/primer/class_name_helper.rb +14 -13
  26. data/app/lib/primer/fetch_or_fallback_helper.rb +2 -0
  27. data/app/lib/primer/octicon/cache.rb +10 -2
  28. data/app/lib/primer/tab_nav_helper.rb +35 -0
  29. data/app/lib/primer/tabbed_component_helper.rb +5 -5
  30. data/app/lib/primer/underline_nav_helper.rb +44 -0
  31. data/app/lib/primer/view_helper.rb +1 -0
  32. data/lib/primer/classify/cache.rb +0 -6
  33. data/lib/primer/classify/flex.rb +1 -1
  34. data/lib/primer/classify/functional_colors.rb +1 -1
  35. data/lib/primer/classify/utilities.rb +17 -2
  36. data/lib/primer/classify/utilities.yml +35 -0
  37. data/lib/primer/classify/validation.rb +18 -0
  38. data/lib/primer/classify.rb +4 -13
  39. data/lib/primer/view_components/constants.rb +1 -1
  40. data/lib/primer/view_components/linters/argument_mappers/base.rb +34 -8
  41. data/lib/primer/view_components/linters/argument_mappers/button.rb +5 -6
  42. data/lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb +4 -3
  43. data/lib/primer/view_components/linters/argument_mappers/close_button.rb +43 -0
  44. data/lib/primer/view_components/linters/argument_mappers/flash.rb +32 -0
  45. data/lib/primer/view_components/linters/argument_mappers/helpers/erb_block.rb +48 -5
  46. data/lib/primer/view_components/linters/argument_mappers/label.rb +3 -4
  47. data/lib/primer/view_components/linters/argument_mappers/system_arguments.rb +5 -7
  48. data/lib/primer/view_components/linters/autocorrectable.rb +6 -4
  49. data/lib/primer/view_components/linters/{helpers.rb → base_linter.rb} +69 -29
  50. data/lib/primer/view_components/linters/button_component_migration_counter.rb +4 -3
  51. data/lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb +3 -4
  52. data/lib/primer/view_components/linters/close_button_component_migration_counter.rb +110 -3
  53. data/lib/primer/view_components/linters/flash_component_migration_counter.rb +18 -3
  54. data/lib/primer/view_components/linters/label_component_migration_counter.rb +2 -3
  55. data/lib/primer/view_components/version.rb +1 -1
  56. data/lib/rubocop/config/default.yml +5 -0
  57. data/lib/rubocop/cop/primer/base_cop.rb +28 -0
  58. data/lib/rubocop/cop/primer/deprecated_arguments.rb +263 -0
  59. data/lib/rubocop/cop/primer/no_tag_memoize.rb +1 -0
  60. data/lib/rubocop/cop/primer/primer_octicon.rb +178 -0
  61. data/lib/rubocop/cop/primer/system_argument_instead_of_class.rb +4 -32
  62. data/lib/rubocop/cop/primer.rb +1 -2
  63. data/lib/tasks/coverage.rake +4 -0
  64. data/lib/tasks/docs.rake +10 -8
  65. data/lib/tasks/utilities.rake +7 -3
  66. data/lib/yard/docs_helper.rb +6 -3
  67. data/static/arguments.yml +82 -64
  68. data/static/classes.yml +10 -0
  69. data/static/constants.json +44 -30
  70. data/static/statuses.json +10 -6
  71. metadata +57 -18
  72. data/app/components/primer/auto_complete/auto_component.d.ts +0 -1
  73. data/app/components/primer/auto_complete/auto_component.js +0 -1
  74. data/app/components/primer/breadcrumb_component.rb +0 -57
  75. data/app/components/primer/tab_nav_component.rb +0 -151
  76. data/app/components/primer/underline_nav_component.rb +0 -187
  77. data/lib/primer/classify/functional_text_colors.rb +0 -64
@@ -1,187 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Primer
4
- # Use `UnderlineNav` to style navigation with a minimal
5
- # underlined selected state, typically used for navigation placed at the top
6
- # of the page.
7
- class UnderlineNavComponent < Primer::Component
8
- include Primer::TabbedComponentHelper
9
-
10
- ALIGN_DEFAULT = :left
11
- ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
12
-
13
- BODY_TAG_DEFAULT = :div
14
- BODY_TAG_OPTIONS = [BODY_TAG_DEFAULT, :ul].freeze
15
-
16
- ACTIONS_TAG_DEFAULT = :div
17
- ACTIONS_TAG_OPTIONS = [ACTIONS_TAG_DEFAULT, :span].freeze
18
-
19
- # Use the tabs to list navigation items. When `with_panel` is set on the parent, a button is rendered for panel navigation. Otherwise,
20
- # an anchor tag is rendered for page navigation. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
21
- #
22
- # @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
23
- # @param selected [Boolean] Whether the tab is selected.
24
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
25
- renders_many :tabs, lambda { |selected: false, **system_arguments|
26
- system_arguments[:classes] = class_names(
27
- "UnderlineNav-item",
28
- system_arguments[:classes]
29
- )
30
-
31
- Primer::Navigation::TabComponent.new(
32
- list: list?,
33
- selected: selected,
34
- with_panel: @with_panel,
35
- icon_classes: "UnderlineNav-octicon",
36
- **system_arguments
37
- )
38
- }
39
-
40
- # Use actions for a call to action.
41
- #
42
- # @param tag [Symbol] (Primer::UnderlineNavComponent::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavComponent::ACTIONS_TAG_OPTIONS) %>
43
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
44
- renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
45
- system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
46
- system_arguments[:classes] = class_names("UnderlineNav-actions", system_arguments[:classes])
47
-
48
- Primer::BaseComponent.new(**system_arguments)
49
- }
50
-
51
- # @example Default
52
- # <%= render(Primer::UnderlineNavComponent.new(label: "Default")) do |component| %>
53
- # <% component.tab(href: "#", selected: true) { "Item 1" } %>
54
- # <% component.tab(href: "#") { "Item 2" } %>
55
- # <% component.actions do %>
56
- # <%= render(Primer::ButtonComponent.new) { "Button!" } %>
57
- # <% end %>
58
- # <% end %>
59
- #
60
- # @example With icons and counters
61
- # <%= render(Primer::UnderlineNavComponent.new(label: "With icons and counters")) do |component| %>
62
- # <% component.tab(href: "#", selected: true) do |t| %>
63
- # <% t.icon(icon: :star) %>
64
- # <% t.text { "Item 1" } %>
65
- # <% end %>
66
- # <% component.tab(href: "#") do |t| %>
67
- # <% t.icon(icon: :star) %>
68
- # <% t.text { "Item 2" } %>
69
- # <% t.counter(count: 10) %>
70
- # <% end %>
71
- # <% component.tab(href: "#") do |t| %>
72
- # <% t.text { "Item 3" } %>
73
- # <% t.counter(count: 10) %>
74
- # <% end %>
75
- # <% component.actions do %>
76
- # <%= render(Primer::ButtonComponent.new) { "Button!" } %>
77
- # <% end %>
78
- # <% end %>
79
- #
80
- # @example Align right
81
- # <%= render(Primer::UnderlineNavComponent.new(label: "Align right", align: :right)) do |component| %>
82
- # <% component.tab(href: "#", selected: true) do |t| %>
83
- # <% t.text { "Item 1" } %>
84
- # <% end %>
85
- # <% component.tab(href: "#") do |t| %>
86
- # <% t.text { "Item 2" } %>
87
- # <% end %>
88
- # <% component.actions do %>
89
- # <%= render(Primer::ButtonComponent.new) { "Button!" } %>
90
- # <% end %>
91
- # <% end %>
92
- #
93
- # @example As a list
94
- # <%= render(Primer::UnderlineNavComponent.new(label: "As a list", body_arguments: { tag: :ul })) do |component| %>
95
- # <% component.tab(href: "#", selected: true) do |t| %>
96
- # <% t.text { "Item 1" } %>
97
- # <% end %>
98
- # <% component.tab(href: "#") do |t| %>
99
- # <% t.text { "Item 2" } %>
100
- # <% end %>
101
- # <% component.actions do %>
102
- # <%= render(Primer::ButtonComponent.new) { "Button!" } %>
103
- # <% end %>
104
- # <% end %>
105
- #
106
- # @example With panels
107
- # <%= render(Primer::UnderlineNavComponent.new(label: "With panels", with_panel: true)) do |component| %>
108
- # <% component.tab(selected: true, id: "tab-1", panel_id: "panel-1") do |t| %>
109
- # <% t.text { "Item 1" } %>
110
- # <% t.panel do %>
111
- # Panel 1
112
- # <% end %>
113
- # <% end %>
114
- # <% component.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
115
- # <% t.text { "Item 2" } %>
116
- # <% t.panel do %>
117
- # Panel 2
118
- # <% end %>
119
- # <% end %>
120
- # <% component.actions do %>
121
- # <%= render(Primer::ButtonComponent.new) { "Button!" } %>
122
- # <% end %>
123
- # <% end %>
124
- #
125
- # @example Customizing the body
126
- # <%= render(Primer::UnderlineNavComponent.new(label: "Default", body_arguments: { tag: :ul, classes: "custom-class", border: true, border_color: :info })) do |c| %>
127
- # <% c.tab(selected: true, href: "#") { "Tab 1" }%>
128
- # <% c.tab(href: "#") { "Tab 2" } %>
129
- # <% c.tab(href: "#") { "Tab 3" } %>
130
- # <% end %>
131
- #
132
- # @example Customizing the wrapper
133
- # <%= render(Primer::UnderlineNavComponent.new(label: "Default", wrapper_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
134
- # <% c.tab(selected: true, href: "#") { "Tab 1" }%>
135
- # <% c.tab(href: "#") { "Tab 2" } %>
136
- # <% c.tab(href: "#") { "Tab 3" } %>
137
- # <% end %>
138
- #
139
- # @param label [String] The `aria-label` on top level `<nav>` element.
140
- # @param with_panel [Boolean] Whether the `UnderlineNav` should navigate through pages or panels. When true, <%= link_to_component(Primer::TabContainerComponent) %> is
141
- # rendered along with JavaScript behavior.
142
- # @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::ALIGN_DEFAULT %>
143
- # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
144
- # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper. Only applies if `with_panel` is `true`.
145
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
146
- def initialize(label:, with_panel: false, align: ALIGN_DEFAULT, body_arguments: { tag: BODY_TAG_DEFAULT }, wrapper_arguments: {}, **system_arguments)
147
- @with_panel = with_panel
148
- @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
149
- @wrapper_arguments = wrapper_arguments
150
-
151
- @system_arguments = system_arguments
152
- @system_arguments[:tag] = navigation_tag(with_panel)
153
- @system_arguments[:classes] = class_names(
154
- @system_arguments[:classes],
155
- "UnderlineNav",
156
- "UnderlineNav--right" => @align == :right
157
- )
158
-
159
- @body_arguments = body_arguments
160
- @body_tag = fetch_or_fallback(BODY_TAG_OPTIONS, body_arguments[:tag]&.to_sym, BODY_TAG_DEFAULT)
161
-
162
- @body_arguments[:tag] = @body_tag
163
- @body_arguments[:classes] = class_names(
164
- "UnderlineNav-body",
165
- @body_arguments[:classes],
166
- "list-style-none" => list?
167
- )
168
-
169
- if with_panel
170
- @body_arguments[:role] = :tablist
171
- @body_arguments[:"aria-label"] = label
172
- else
173
- @system_arguments[:"aria-label"] = label
174
- end
175
- end
176
-
177
- private
178
-
179
- def list?
180
- @body_tag == :ul
181
- end
182
-
183
- def body
184
- Primer::BaseComponent.new(**@body_arguments)
185
- end
186
- end
187
- end
@@ -1,64 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- require_relative "functional_colors"
4
-
5
- module Primer
6
- class Classify
7
- # Text specific functional colors.
8
- # https://primer-css-git-mkt-color-modes-docs-primer.vercel.app/css/support/v16-migration#text
9
- class FunctionalTextColors < FunctionalColors
10
- FUNCTIONAL_OPTIONS = {
11
- primary: :text_primary,
12
- secondary: :text_secondary,
13
- tertiary: :text_tertiary,
14
- link: :text_link,
15
- success: :text_success,
16
- warning: :text_warning,
17
- danger: :text_danger,
18
- white: :text_white,
19
- inverse: :text_inverse
20
- }.freeze
21
-
22
- # colors mapping to `nil` will preserve the old classes.
23
- # e.g. `text: :orange` will generate `text-orange`.
24
- MAPPINGS = {
25
- gray_dark: FUNCTIONAL_OPTIONS[:primary],
26
- gray: FUNCTIONAL_OPTIONS[:secondary],
27
- gray_light: FUNCTIONAL_OPTIONS[:tertiary],
28
- blue: FUNCTIONAL_OPTIONS[:link],
29
- green: FUNCTIONAL_OPTIONS[:success],
30
- yellow: FUNCTIONAL_OPTIONS[:warning],
31
- red: FUNCTIONAL_OPTIONS[:danger],
32
- white: FUNCTIONAL_OPTIONS[:white]
33
- }.freeze
34
-
35
- OPTIONS = [
36
- :icon_primary,
37
- :icon_secondary,
38
- :icon_tertiary,
39
- :icon_info,
40
- :icon_success,
41
- :icon_warning,
42
- :icon_danger,
43
- *FUNCTIONAL_OPTIONS.values
44
- ].freeze
45
- OPTIONS_WITHOUT_MAPPINGS = [:black, :orange, :orange_light, :purple, :pink, :inherit].freeze
46
- DEPRECATED_OPTIONS = [*MAPPINGS.keys, *OPTIONS_WITHOUT_MAPPINGS].freeze
47
-
48
- class << self
49
- def color(val)
50
- functional_color(
51
- key: "color",
52
- value: val,
53
- mappings: MAPPINGS,
54
- non_functional_prefix: "text",
55
- functional_prefix: "color",
56
- number_prefix: "color",
57
- functional_options: OPTIONS,
58
- options_without_mappigs: OPTIONS_WITHOUT_MAPPINGS
59
- )
60
- end
61
- end
62
- end
63
- end
64
- end