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
data/static/statuses.json
CHANGED
@@ -1,5 +1,9 @@
|
|
1
1
|
{
|
2
2
|
"Primer::Alpha::ButtonMarketing": "alpha",
|
3
|
+
"Primer::Alpha::TabNav": "alpha",
|
4
|
+
"Primer::Alpha::TabPanels": "alpha",
|
5
|
+
"Primer::Alpha::UnderlineNav": "alpha",
|
6
|
+
"Primer::Alpha::UnderlinePanels": "alpha",
|
3
7
|
"Primer::BaseButton": "beta",
|
4
8
|
"Primer::BaseComponent": "beta",
|
5
9
|
"Primer::Beta::AutoComplete": "beta",
|
@@ -7,15 +11,17 @@
|
|
7
11
|
"Primer::Beta::AutoComplete::Item": "beta",
|
8
12
|
"Primer::Beta::Avatar": "beta",
|
9
13
|
"Primer::Beta::AvatarStack": "beta",
|
14
|
+
"Primer::Beta::Breadcrumbs": "beta",
|
15
|
+
"Primer::Beta::Breadcrumbs::Item": "alpha",
|
10
16
|
"Primer::Beta::Text": "beta",
|
17
|
+
"Primer::Beta::Truncate": "beta",
|
18
|
+
"Primer::Beta::Truncate::TruncateText": "alpha",
|
11
19
|
"Primer::BlankslateComponent": "beta",
|
12
20
|
"Primer::BorderBoxComponent": "beta",
|
13
21
|
"Primer::BoxComponent": "stable",
|
14
|
-
"Primer::BreadcrumbComponent": "beta",
|
15
|
-
"Primer::BreadcrumbComponent::ItemComponent": "alpha",
|
16
22
|
"Primer::ButtonComponent": "beta",
|
17
23
|
"Primer::ButtonGroup": "beta",
|
18
|
-
"Primer::ClipboardCopy": "
|
24
|
+
"Primer::ClipboardCopy": "beta",
|
19
25
|
"Primer::CloseButton": "beta",
|
20
26
|
"Primer::CounterComponent": "beta",
|
21
27
|
"Primer::DetailsComponent": "beta",
|
@@ -46,11 +52,9 @@
|
|
46
52
|
"Primer::StateComponent": "beta",
|
47
53
|
"Primer::SubheadComponent": "beta",
|
48
54
|
"Primer::TabContainerComponent": "alpha",
|
49
|
-
"Primer::TabNavComponent": "beta",
|
50
55
|
"Primer::TimeAgoComponent": "beta",
|
51
56
|
"Primer::TimelineItemComponent": "beta",
|
52
57
|
"Primer::TimelineItemComponent::BadgeComponent": "alpha",
|
53
58
|
"Primer::Tooltip": "beta",
|
54
|
-
"Primer::Truncate": "beta"
|
55
|
-
"Primer::UnderlineNavComponent": "alpha"
|
59
|
+
"Primer::Truncate": "beta"
|
56
60
|
}
|
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.
|
4
|
+
version: 0.0.55
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
|
-
autorequire:
|
8
|
+
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2021-
|
11
|
+
date: 2021-09-09 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|
@@ -72,6 +72,20 @@ dependencies:
|
|
72
72
|
- - "<"
|
73
73
|
- !ruby/object:Gem::Version
|
74
74
|
version: '3.0'
|
75
|
+
- !ruby/object:Gem::Dependency
|
76
|
+
name: allocation_stats
|
77
|
+
requirement: !ruby/object:Gem::Requirement
|
78
|
+
requirements:
|
79
|
+
- - "~>"
|
80
|
+
- !ruby/object:Gem::Version
|
81
|
+
version: '0.1'
|
82
|
+
type: :development
|
83
|
+
prerelease: false
|
84
|
+
version_requirements: !ruby/object:Gem::Requirement
|
85
|
+
requirements:
|
86
|
+
- - "~>"
|
87
|
+
- !ruby/object:Gem::Version
|
88
|
+
version: '0.1'
|
75
89
|
- !ruby/object:Gem::Dependency
|
76
90
|
name: allocation_tracer
|
77
91
|
requirement: !ruby/object:Gem::Requirement
|
@@ -218,14 +232,14 @@ dependencies:
|
|
218
232
|
requirements:
|
219
233
|
- - '='
|
220
234
|
- !ruby/object:Gem::Version
|
221
|
-
version:
|
235
|
+
version: 1.13.0
|
222
236
|
type: :development
|
223
237
|
prerelease: false
|
224
238
|
version_requirements: !ruby/object:Gem::Requirement
|
225
239
|
requirements:
|
226
240
|
- - '='
|
227
241
|
- !ruby/object:Gem::Version
|
228
|
-
version:
|
242
|
+
version: 1.13.0
|
229
243
|
- !ruby/object:Gem::Dependency
|
230
244
|
name: rubocop-github
|
231
245
|
requirement: !ruby/object:Gem::Requirement
|
@@ -324,6 +338,20 @@ dependencies:
|
|
324
338
|
- - ">="
|
325
339
|
- !ruby/object:Gem::Version
|
326
340
|
version: '0'
|
341
|
+
- !ruby/object:Gem::Dependency
|
342
|
+
name: timecop
|
343
|
+
requirement: !ruby/object:Gem::Requirement
|
344
|
+
requirements:
|
345
|
+
- - ">="
|
346
|
+
- !ruby/object:Gem::Version
|
347
|
+
version: '0'
|
348
|
+
type: :development
|
349
|
+
prerelease: false
|
350
|
+
version_requirements: !ruby/object:Gem::Requirement
|
351
|
+
requirements:
|
352
|
+
- - ">="
|
353
|
+
- !ruby/object:Gem::Version
|
354
|
+
version: '0'
|
327
355
|
- !ruby/object:Gem::Dependency
|
328
356
|
name: yard
|
329
357
|
requirement: !ruby/object:Gem::Requirement
|
@@ -338,7 +366,7 @@ dependencies:
|
|
338
366
|
- - "~>"
|
339
367
|
- !ruby/object:Gem::Version
|
340
368
|
version: 0.9.25
|
341
|
-
description:
|
369
|
+
description:
|
342
370
|
email:
|
343
371
|
- opensource+primer_view_components@github.com
|
344
372
|
executables: []
|
@@ -351,10 +379,16 @@ files:
|
|
351
379
|
- app/assets/javascripts/primer_view_components.js
|
352
380
|
- app/assets/javascripts/primer_view_components.js.map
|
353
381
|
- app/components/primer/alpha/button_marketing.rb
|
382
|
+
- app/components/primer/alpha/tab_nav.html.erb
|
383
|
+
- app/components/primer/alpha/tab_nav.rb
|
384
|
+
- app/components/primer/alpha/tab_panels.html.erb
|
385
|
+
- app/components/primer/alpha/tab_panels.rb
|
386
|
+
- app/components/primer/alpha/underline_nav.html.erb
|
387
|
+
- app/components/primer/alpha/underline_nav.rb
|
388
|
+
- app/components/primer/alpha/underline_panels.html.erb
|
389
|
+
- app/components/primer/alpha/underline_panels.rb
|
354
390
|
- app/components/primer/auto_complete/auto_complete.d.ts
|
355
391
|
- app/components/primer/auto_complete/auto_complete.js
|
356
|
-
- app/components/primer/auto_complete/auto_component.d.ts
|
357
|
-
- app/components/primer/auto_complete/auto_component.js
|
358
392
|
- app/components/primer/base_button.rb
|
359
393
|
- app/components/primer/base_component.rb
|
360
394
|
- app/components/primer/beta/auto_complete.rb
|
@@ -366,14 +400,16 @@ files:
|
|
366
400
|
- app/components/primer/beta/avatar.rb
|
367
401
|
- app/components/primer/beta/avatar_stack.html.erb
|
368
402
|
- app/components/primer/beta/avatar_stack.rb
|
403
|
+
- app/components/primer/beta/breadcrumbs.html.erb
|
404
|
+
- app/components/primer/beta/breadcrumbs.rb
|
369
405
|
- app/components/primer/beta/text.rb
|
406
|
+
- app/components/primer/beta/truncate.html.erb
|
407
|
+
- app/components/primer/beta/truncate.rb
|
370
408
|
- app/components/primer/blankslate_component.html.erb
|
371
409
|
- app/components/primer/blankslate_component.rb
|
372
410
|
- app/components/primer/border_box_component.html.erb
|
373
411
|
- app/components/primer/border_box_component.rb
|
374
412
|
- app/components/primer/box_component.rb
|
375
|
-
- app/components/primer/breadcrumb_component.html.erb
|
376
|
-
- app/components/primer/breadcrumb_component.rb
|
377
413
|
- app/components/primer/button_component.html.erb
|
378
414
|
- app/components/primer/button_component.rb
|
379
415
|
- app/components/primer/button_group.html.erb
|
@@ -446,8 +482,6 @@ files:
|
|
446
482
|
- app/components/primer/tab_container_component.js
|
447
483
|
- app/components/primer/tab_container_component.rb
|
448
484
|
- app/components/primer/tab_container_component.ts
|
449
|
-
- app/components/primer/tab_nav_component.html.erb
|
450
|
-
- app/components/primer/tab_nav_component.rb
|
451
485
|
- app/components/primer/time_ago_component.d.ts
|
452
486
|
- app/components/primer/time_ago_component.js
|
453
487
|
- app/components/primer/time_ago_component.rb
|
@@ -456,15 +490,15 @@ files:
|
|
456
490
|
- app/components/primer/timeline_item_component.rb
|
457
491
|
- app/components/primer/tooltip.rb
|
458
492
|
- app/components/primer/truncate.rb
|
459
|
-
- app/components/primer/underline_nav_component.html.erb
|
460
|
-
- app/components/primer/underline_nav_component.rb
|
461
493
|
- app/lib/primer/class_name_helper.rb
|
462
494
|
- app/lib/primer/fetch_or_fallback_helper.rb
|
463
495
|
- app/lib/primer/join_style_arguments_helper.rb
|
464
496
|
- app/lib/primer/octicon/cache.rb
|
465
497
|
- app/lib/primer/status/dsl.rb
|
498
|
+
- app/lib/primer/tab_nav_helper.rb
|
466
499
|
- app/lib/primer/tabbed_component_helper.rb
|
467
500
|
- app/lib/primer/test_selector_helper.rb
|
501
|
+
- app/lib/primer/underline_nav_helper.rb
|
468
502
|
- app/lib/primer/view_helper.rb
|
469
503
|
- lib/primer/classify.rb
|
470
504
|
- lib/primer/classify/cache.rb
|
@@ -472,10 +506,10 @@ files:
|
|
472
506
|
- lib/primer/classify/functional_background_colors.rb
|
473
507
|
- lib/primer/classify/functional_border_colors.rb
|
474
508
|
- lib/primer/classify/functional_colors.rb
|
475
|
-
- lib/primer/classify/functional_text_colors.rb
|
476
509
|
- lib/primer/classify/grid.rb
|
477
510
|
- lib/primer/classify/utilities.rb
|
478
511
|
- lib/primer/classify/utilities.yml
|
512
|
+
- lib/primer/classify/validation.rb
|
479
513
|
- lib/primer/view_components.rb
|
480
514
|
- lib/primer/view_components/constants.rb
|
481
515
|
- lib/primer/view_components/engine.rb
|
@@ -483,22 +517,27 @@ files:
|
|
483
517
|
- lib/primer/view_components/linters/argument_mappers/base.rb
|
484
518
|
- lib/primer/view_components/linters/argument_mappers/button.rb
|
485
519
|
- lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb
|
520
|
+
- lib/primer/view_components/linters/argument_mappers/close_button.rb
|
486
521
|
- lib/primer/view_components/linters/argument_mappers/conversion_error.rb
|
522
|
+
- lib/primer/view_components/linters/argument_mappers/flash.rb
|
487
523
|
- lib/primer/view_components/linters/argument_mappers/helpers/erb_block.rb
|
488
524
|
- lib/primer/view_components/linters/argument_mappers/label.rb
|
489
525
|
- lib/primer/view_components/linters/argument_mappers/system_arguments.rb
|
490
526
|
- lib/primer/view_components/linters/autocorrectable.rb
|
527
|
+
- lib/primer/view_components/linters/base_linter.rb
|
491
528
|
- lib/primer/view_components/linters/button_component_migration_counter.rb
|
492
529
|
- lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb
|
493
530
|
- lib/primer/view_components/linters/close_button_component_migration_counter.rb
|
494
531
|
- lib/primer/view_components/linters/flash_component_migration_counter.rb
|
495
|
-
- lib/primer/view_components/linters/helpers.rb
|
496
532
|
- lib/primer/view_components/linters/label_component_migration_counter.rb
|
497
533
|
- lib/primer/view_components/statuses.rb
|
498
534
|
- lib/primer/view_components/version.rb
|
499
535
|
- lib/rubocop/config/default.yml
|
500
536
|
- lib/rubocop/cop/primer.rb
|
537
|
+
- lib/rubocop/cop/primer/base_cop.rb
|
538
|
+
- lib/rubocop/cop/primer/deprecated_arguments.rb
|
501
539
|
- lib/rubocop/cop/primer/no_tag_memoize.rb
|
540
|
+
- lib/rubocop/cop/primer/primer_octicon.rb
|
502
541
|
- lib/rubocop/cop/primer/system_argument_instead_of_class.rb
|
503
542
|
- lib/tasks/constants.rake
|
504
543
|
- lib/tasks/coverage.rake
|
@@ -518,7 +557,7 @@ licenses:
|
|
518
557
|
- MIT
|
519
558
|
metadata:
|
520
559
|
allowed_push_host: https://rubygems.org
|
521
|
-
post_install_message:
|
560
|
+
post_install_message:
|
522
561
|
rdoc_options: []
|
523
562
|
require_paths:
|
524
563
|
- lib
|
@@ -534,7 +573,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
534
573
|
version: '0'
|
535
574
|
requirements: []
|
536
575
|
rubygems_version: 3.1.2
|
537
|
-
signing_key:
|
576
|
+
signing_key:
|
538
577
|
specification_version: 4
|
539
578
|
summary: ViewComponents for the Primer Design System
|
540
579
|
test_files: []
|
@@ -1 +0,0 @@
|
|
1
|
-
import '@github/auto-complete-element';
|
@@ -1 +0,0 @@
|
|
1
|
-
import '@github/auto-complete-element';
|
@@ -1,57 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# Use `Breadcrumb` to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item, which is a plain string indicating the current page.
|
5
|
-
class BreadcrumbComponent < Primer::Component
|
6
|
-
status :beta
|
7
|
-
|
8
|
-
# _Note: if both `href` and `selected: true` are passed in, `href` will be ignored and the item will not be rendered as a link._
|
9
|
-
#
|
10
|
-
# @param href [String] The URL to link to.
|
11
|
-
# @param selected [Boolean] Whether or not the item is selected and not rendered as a link.
|
12
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
13
|
-
renders_many :items, "ItemComponent"
|
14
|
-
|
15
|
-
# @example Basic
|
16
|
-
# <%= render(Primer::BreadcrumbComponent.new) do |component| %>
|
17
|
-
# <% component.item(href: "/") do %>Home<% end %>
|
18
|
-
# <% component.item(href: "/about") do %>About<% end %>
|
19
|
-
# <% component.item(selected: true) do %>Team<% end %>
|
20
|
-
# <% end %>
|
21
|
-
#
|
22
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
23
|
-
def initialize(**system_arguments)
|
24
|
-
@system_arguments = system_arguments
|
25
|
-
@system_arguments[:tag] = :nav
|
26
|
-
@system_arguments[:aria] = { label: "Breadcrumb" }
|
27
|
-
end
|
28
|
-
|
29
|
-
def render?
|
30
|
-
items.any?
|
31
|
-
end
|
32
|
-
|
33
|
-
# This component is part of `Primer::BreadcrumbComponent` and should not be
|
34
|
-
# used as a standalone component.
|
35
|
-
class ItemComponent < Primer::Component
|
36
|
-
def initialize(href: nil, selected: false, **system_arguments)
|
37
|
-
@href = href
|
38
|
-
@system_arguments = system_arguments
|
39
|
-
|
40
|
-
@href = nil if selected
|
41
|
-
@system_arguments[:tag] = :li
|
42
|
-
@system_arguments[:"aria-current"] = "page" if selected
|
43
|
-
@system_arguments[:classes] = "breadcrumb-item #{@system_arguments[:classes]}"
|
44
|
-
end
|
45
|
-
|
46
|
-
def call
|
47
|
-
render(Primer::BaseComponent.new(**@system_arguments)) do
|
48
|
-
if @href.present?
|
49
|
-
render(Primer::LinkComponent.new(href: @href)) { content }
|
50
|
-
else
|
51
|
-
content
|
52
|
-
end
|
53
|
-
end
|
54
|
-
end
|
55
|
-
end
|
56
|
-
end
|
57
|
-
end
|
@@ -1,151 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
|
5
|
-
class TabNavComponent < Primer::Component
|
6
|
-
include Primer::TabbedComponentHelper
|
7
|
-
|
8
|
-
status :beta
|
9
|
-
|
10
|
-
DEFAULT_EXTRA_ALIGN = :left
|
11
|
-
EXTRA_ALIGN_OPTIONS = [DEFAULT_EXTRA_ALIGN, :right].freeze
|
12
|
-
|
13
|
-
# Tabs to be rendered. When `with_panel` is set on the parent, a button is rendered for panel navigation. Otherwise,
|
14
|
-
# an anchor tag is rendered for page navigation. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
|
15
|
-
#
|
16
|
-
# @param panel_id [String] Only applies if `with_panel` is `true`. Unique ID of panel.
|
17
|
-
# @param selected [Boolean] Whether the tab is selected.
|
18
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
19
|
-
renders_many :tabs, lambda { |selected: false, **system_arguments|
|
20
|
-
system_arguments[:classes] = class_names(
|
21
|
-
"tabnav-tab",
|
22
|
-
system_arguments[:classes]
|
23
|
-
)
|
24
|
-
|
25
|
-
Primer::Navigation::TabComponent.new(
|
26
|
-
selected: selected,
|
27
|
-
with_panel: @with_panel,
|
28
|
-
**system_arguments
|
29
|
-
)
|
30
|
-
}
|
31
|
-
|
32
|
-
# Renders extra content to the `TabNav`. This will be rendered after the tabs.
|
33
|
-
#
|
34
|
-
# @param align [Symbol] <%= one_of(Primer::TabNavComponent::EXTRA_ALIGN_OPTIONS) %>
|
35
|
-
renders_one :extra, lambda { |align: DEFAULT_EXTRA_ALIGN, &block|
|
36
|
-
@align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, DEFAULT_EXTRA_ALIGN)
|
37
|
-
|
38
|
-
view_context.capture { block&.call }
|
39
|
-
}
|
40
|
-
|
41
|
-
# @example Default
|
42
|
-
# <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
|
43
|
-
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
|
44
|
-
# <% c.tab(href: "#") { "Tab 2" } %>
|
45
|
-
# <% c.tab(href: "#") { "Tab 3" } %>
|
46
|
-
# <% end %>
|
47
|
-
#
|
48
|
-
# @example With icons and counters
|
49
|
-
# <%= render(Primer::TabNavComponent.new(label: "With icons and counters")) do |component| %>
|
50
|
-
# <% component.tab(href: "#", selected: true) do |t| %>
|
51
|
-
# <% t.icon(icon: :star) %>
|
52
|
-
# <% t.text { "Item 1" } %>
|
53
|
-
# <% end %>
|
54
|
-
# <% component.tab(href: "#") do |t| %>
|
55
|
-
# <% t.icon(icon: :star) %>
|
56
|
-
# <% t.text { "Item 2" } %>
|
57
|
-
# <% t.counter(count: 10) %>
|
58
|
-
# <% end %>
|
59
|
-
# <% component.tab(href: "#") do |t| %>
|
60
|
-
# <% t.text { "Item 3" } %>
|
61
|
-
# <% t.counter(count: 10) %>
|
62
|
-
# <% end %>
|
63
|
-
# <% end %>
|
64
|
-
#
|
65
|
-
# @example With panels
|
66
|
-
# <%= render(Primer::TabNavComponent.new(label: "With panels", with_panel: true)) do |c| %>
|
67
|
-
# <% c.tab(selected: true, panel_id: "panel-1", id: "tab-1") do |t| %>
|
68
|
-
# <% t.text { "Tab 1" } %>
|
69
|
-
# <% t.panel do %>
|
70
|
-
# Panel 1
|
71
|
-
# <% end %>
|
72
|
-
# <% end %>
|
73
|
-
# <% c.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
|
74
|
-
# <% t.text { "Tab 2" } %>
|
75
|
-
# <% t.panel do %>
|
76
|
-
# Panel 2
|
77
|
-
# <% end %>
|
78
|
-
# <% end %>
|
79
|
-
# <% c.tab(id: "tab-3", panel_id: "panel-3") do |t| %>
|
80
|
-
# <% t.text { "Tab 3" } %>
|
81
|
-
# <% t.panel do %>
|
82
|
-
# Panel 3
|
83
|
-
# <% end %>
|
84
|
-
# <% end %>
|
85
|
-
# <% end %>
|
86
|
-
#
|
87
|
-
# @example With extra content
|
88
|
-
# <%= render(Primer::TabNavComponent.new(label: "With extra content")) do |c| %>
|
89
|
-
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
|
90
|
-
# <% c.tab(href: "#") { "Tab 2" } %>
|
91
|
-
# <% c.tab(href: "#") { "Tab 3" } %>
|
92
|
-
# <% c.extra do %>
|
93
|
-
# <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
|
94
|
-
# <% end %>
|
95
|
-
# <% end %>
|
96
|
-
#
|
97
|
-
# @example Adding extra content after the tabs
|
98
|
-
# <%= render(Primer::TabNavComponent.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
|
99
|
-
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
|
100
|
-
# <% c.tab(href: "#") { "Tab 2" } %>
|
101
|
-
# <% c.tab(href: "#") { "Tab 3" } %>
|
102
|
-
# <% c.extra(align: :right) do %>
|
103
|
-
# <div>
|
104
|
-
# <%= render(Primer::ButtonComponent.new) { "Button" } %>
|
105
|
-
# </div>
|
106
|
-
# <% end %>
|
107
|
-
# <% end %>
|
108
|
-
#
|
109
|
-
# @example Customizing the body
|
110
|
-
# <%= render(Primer::TabNavComponent.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
|
111
|
-
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
|
112
|
-
# <% c.tab(href: "#") { "Tab 2" } %>
|
113
|
-
# <% c.tab(href: "#") { "Tab 3" } %>
|
114
|
-
# <% end %>
|
115
|
-
#
|
116
|
-
# @example Customizing the wrapper
|
117
|
-
# <%= render(Primer::TabNavComponent.new(label: "Default", wrapper_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
|
118
|
-
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
|
119
|
-
# <% c.tab(href: "#") { "Tab 2" } %>
|
120
|
-
# <% c.tab(href: "#") { "Tab 3" } %>
|
121
|
-
# <% end %>
|
122
|
-
#
|
123
|
-
# @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
|
124
|
-
# @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels. When true, <%= link_to_component(Primer::TabContainerComponent) %>
|
125
|
-
# is rendered along with JavaScript behavior. Additionally, the `tab` slot will render as a button as opposed to an anchor.
|
126
|
-
# @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
|
127
|
-
# @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper. Only applies if `with_panel` is `true`.
|
128
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
129
|
-
def initialize(label:, with_panel: false, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
|
130
|
-
@align = DEFAULT_EXTRA_ALIGN
|
131
|
-
@with_panel = with_panel
|
132
|
-
@system_arguments = system_arguments
|
133
|
-
@body_arguments = body_arguments
|
134
|
-
@wrapper_arguments = wrapper_arguments
|
135
|
-
|
136
|
-
@system_arguments[:tag] = :div
|
137
|
-
@system_arguments[:classes] = class_names(
|
138
|
-
"tabnav",
|
139
|
-
system_arguments[:classes]
|
140
|
-
)
|
141
|
-
|
142
|
-
@body_arguments[:tag] = navigation_tag(with_panel)
|
143
|
-
@body_arguments[:"aria-label"] = label
|
144
|
-
@body_arguments[:role] = :tablist if @with_panel
|
145
|
-
@body_arguments[:classes] = class_names(
|
146
|
-
"tabnav-tabs",
|
147
|
-
body_arguments[:classes]
|
148
|
-
)
|
149
|
-
end
|
150
|
-
end
|
151
|
-
end
|