primer_view_components 0.0.51 → 0.0.55

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 (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