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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +159 -0
- data/app/components/primer/alpha/tab_nav.html.erb +11 -0
- data/app/components/primer/alpha/tab_nav.rb +130 -0
- data/app/components/primer/{tab_nav_component.html.erb → alpha/tab_panels.html.erb} +3 -8
- data/app/components/primer/alpha/tab_panels.rb +82 -0
- data/app/components/primer/alpha/underline_nav.html.erb +15 -0
- data/app/components/primer/alpha/underline_nav.rb +137 -0
- data/app/components/primer/{underline_nav_component.html.erb → alpha/underline_panels.html.erb} +3 -8
- data/app/components/primer/alpha/underline_panels.rb +86 -0
- data/app/components/primer/base_component.rb +1 -1
- data/app/components/primer/beta/avatar_stack.rb +9 -9
- data/app/components/primer/{breadcrumb_component.html.erb → beta/breadcrumbs.html.erb} +2 -1
- data/app/components/primer/beta/breadcrumbs.rb +61 -0
- data/app/components/primer/beta/truncate.html.erb +5 -0
- data/app/components/primer/beta/truncate.rb +110 -0
- data/app/components/primer/border_box_component.rb +27 -1
- data/app/components/primer/clipboard_copy.rb +1 -1
- data/app/components/primer/dropdown.rb +7 -7
- data/app/components/primer/icon_button.rb +1 -1
- data/app/components/primer/navigation/tab_component.rb +8 -6
- data/app/components/primer/octicon_component.rb +6 -1
- data/app/components/primer/progress_bar_component.rb +0 -3
- data/app/components/primer/tab_container_component.rb +1 -1
- data/app/lib/primer/class_name_helper.rb +14 -13
- data/app/lib/primer/fetch_or_fallback_helper.rb +2 -0
- data/app/lib/primer/octicon/cache.rb +10 -2
- data/app/lib/primer/tab_nav_helper.rb +35 -0
- data/app/lib/primer/tabbed_component_helper.rb +5 -5
- data/app/lib/primer/underline_nav_helper.rb +44 -0
- data/app/lib/primer/view_helper.rb +1 -0
- data/lib/primer/classify/cache.rb +0 -6
- data/lib/primer/classify/flex.rb +1 -1
- data/lib/primer/classify/functional_colors.rb +1 -1
- data/lib/primer/classify/utilities.rb +17 -2
- data/lib/primer/classify/utilities.yml +35 -0
- data/lib/primer/classify/validation.rb +18 -0
- data/lib/primer/classify.rb +4 -13
- data/lib/primer/view_components/constants.rb +1 -1
- data/lib/primer/view_components/linters/argument_mappers/base.rb +34 -8
- data/lib/primer/view_components/linters/argument_mappers/button.rb +5 -6
- data/lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb +4 -3
- data/lib/primer/view_components/linters/argument_mappers/close_button.rb +43 -0
- data/lib/primer/view_components/linters/argument_mappers/flash.rb +32 -0
- data/lib/primer/view_components/linters/argument_mappers/helpers/erb_block.rb +48 -5
- data/lib/primer/view_components/linters/argument_mappers/label.rb +3 -4
- data/lib/primer/view_components/linters/argument_mappers/system_arguments.rb +5 -7
- data/lib/primer/view_components/linters/autocorrectable.rb +6 -4
- data/lib/primer/view_components/linters/{helpers.rb → base_linter.rb} +69 -29
- data/lib/primer/view_components/linters/button_component_migration_counter.rb +4 -3
- data/lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb +3 -4
- data/lib/primer/view_components/linters/close_button_component_migration_counter.rb +110 -3
- data/lib/primer/view_components/linters/flash_component_migration_counter.rb +18 -3
- data/lib/primer/view_components/linters/label_component_migration_counter.rb +2 -3
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/rubocop/config/default.yml +5 -0
- data/lib/rubocop/cop/primer/base_cop.rb +28 -0
- data/lib/rubocop/cop/primer/deprecated_arguments.rb +263 -0
- data/lib/rubocop/cop/primer/no_tag_memoize.rb +1 -0
- data/lib/rubocop/cop/primer/primer_octicon.rb +178 -0
- data/lib/rubocop/cop/primer/system_argument_instead_of_class.rb +4 -32
- data/lib/rubocop/cop/primer.rb +1 -2
- data/lib/tasks/coverage.rake +4 -0
- data/lib/tasks/docs.rake +10 -8
- data/lib/tasks/utilities.rake +7 -3
- data/lib/yard/docs_helper.rb +6 -3
- data/static/arguments.yml +82 -64
- data/static/classes.yml +10 -0
- data/static/constants.json +44 -30
- data/static/statuses.json +10 -6
- metadata +57 -18
- data/app/components/primer/auto_complete/auto_component.d.ts +0 -1
- data/app/components/primer/auto_complete/auto_component.js +0 -1
- data/app/components/primer/breadcrumb_component.rb +0 -57
- data/app/components/primer/tab_nav_component.rb +0 -151
- data/app/components/primer/underline_nav_component.rb +0 -187
- 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
|