primer_view_components 0.1.0 → 0.1.1

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 (54) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +20 -0
  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/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list/divider.rb +2 -2
  8. data/app/components/primer/alpha/action_list/heading.html.erb +1 -1
  9. data/app/components/primer/alpha/action_list/heading.rb +10 -4
  10. data/app/components/primer/alpha/action_list/item.rb +3 -3
  11. data/app/components/primer/alpha/action_list.html.erb +6 -8
  12. data/app/components/primer/alpha/action_list.rb +5 -10
  13. data/app/components/primer/alpha/nav_list/{section.rb → group.rb} +5 -5
  14. data/app/components/primer/alpha/nav_list/item.html.erb +1 -1
  15. data/app/components/primer/alpha/nav_list/item.rb +15 -1
  16. data/app/components/primer/alpha/nav_list.d.ts +1 -0
  17. data/app/components/primer/alpha/nav_list.html.erb +8 -8
  18. data/app/components/primer/alpha/nav_list.js +21 -0
  19. data/app/components/primer/alpha/nav_list.rb +28 -32
  20. data/app/components/primer/alpha/nav_list.ts +23 -0
  21. data/app/components/primer/alpha/navigation/tab.rb +168 -0
  22. data/app/components/primer/alpha/overlay.rb +19 -6
  23. data/app/components/primer/alpha/tab_nav.rb +10 -3
  24. data/app/components/primer/alpha/tab_panels.rb +2 -2
  25. data/app/components/primer/alpha/underline_nav.css +1 -1
  26. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  27. data/app/components/primer/alpha/underline_nav.pcss +1 -0
  28. data/app/components/primer/alpha/underline_nav.rb +2 -2
  29. data/app/components/primer/alpha/underline_panels.rb +2 -2
  30. data/app/components/primer/beta/button.html.erb +1 -1
  31. data/app/components/primer/beta/button.rb +2 -1
  32. data/app/components/primer/component.rb +34 -0
  33. data/app/components/primer/navigation/tab_component.rb +3 -157
  34. data/lib/primer/deprecations.yml +4 -0
  35. data/lib/primer/view_components/version.rb +1 -1
  36. data/lib/primer/yard/component_manifest.rb +2 -1
  37. data/lib/tasks/docs.rake +1 -1
  38. data/previews/primer/alpha/action_list_preview.rb +6 -14
  39. data/previews/primer/alpha/nav_list_preview/trailing_action.html.erb +19 -0
  40. data/previews/primer/alpha/nav_list_preview.rb +19 -30
  41. data/previews/primer/alpha/overlay_preview.rb +7 -2
  42. data/previews/primer/alpha/tab_nav_preview/with_extra.html.erb +8 -0
  43. data/previews/primer/alpha/tab_nav_preview.rb +5 -0
  44. data/previews/primer/alpha/tab_panels_preview/with_extra.html.erb +17 -0
  45. data/previews/primer/alpha/tab_panels_preview.rb +5 -0
  46. data/static/arguments.json +63 -7
  47. data/static/audited_at.json +2 -1
  48. data/static/constants.json +20 -8
  49. data/static/previews.json +10 -0
  50. data/static/statuses.json +3 -2
  51. metadata +8 -6
  52. data/app/components/primer/alpha/nav_list/section.html.erb +0 -3
  53. data/previews/primer/alpha/action_list_preview/heading.html.erb +0 -4
  54. /data/app/components/primer/{navigation/tab_component.html.erb → alpha/navigation/tab.html.erb} +0 -0
@@ -20,7 +20,8 @@ module Primer
20
20
  # @param header_size [Symbol] select [medium, large]
21
21
  # @param button_text [String] text
22
22
  # @param body_text [String] text
23
- def playground(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, padding: :normal, anchor_align: :center, anchor_offset: :normal, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "")
23
+ # @param icon [Symbol] octicon
24
+ def playground(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, padding: :normal, anchor_align: :center, anchor_offset: :normal, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "", icon: :none)
24
25
  render(Primer::Alpha::Overlay.new(
25
26
  title: title,
26
27
  subtitle: subtitle,
@@ -34,7 +35,11 @@ module Primer
34
35
  visually_hide_title: visually_hide_title,
35
36
  )) do |d|
36
37
  d.with_header(title: title, size: header_size)
37
- d.with_show_button { button_text }
38
+ if icon.present? and icon != :none
39
+ d.with_show_button(icon: icon, "aria-label": icon.to_s)
40
+ else
41
+ d.with_show_button { button_text }
42
+ end
38
43
  d.with_body { body_text }
39
44
  end
40
45
  end
@@ -0,0 +1,8 @@
1
+ <%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
2
+ <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
3
+ <% component.with_tab(href: "#") { "Tab 2" } %>
4
+ <% component.with_tab(href: "#") { "Tab 3" } %>
5
+ <% component.with_extra(align: align) do %>
6
+ <%= render(Primer::Beta::Button.new) { "Extra Button" } %>
7
+ <% end %>
8
+ <% end %>
@@ -50,6 +50,11 @@ module Primer
50
50
  end
51
51
  end
52
52
  end
53
+
54
+ # @param align [Symbol] select [left, right]
55
+ def with_extra(align: :right)
56
+ render_with_template(locals: { align: align })
57
+ end
53
58
  end
54
59
  end
55
60
  end
@@ -0,0 +1,17 @@
1
+ <%= render(Primer::Alpha::TabPanels.new(label: "label")) do |component| %>
2
+ <% component.with_tab(selected: true, id: "tab-1") do |tab| %>
3
+ <% tab.with_panel { "Panel 1" } %>
4
+ <% tab.with_text { "Tab 1" } %>
5
+ <% end %>
6
+ <% component.with_tab(id: "tab-2") do |tab| %>
7
+ <% tab.with_panel { "Panel 2" } %>
8
+ <% tab.with_text { "Tab 2" } %>
9
+ <% end %>
10
+ <% component.with_tab(id: "tab-3") do |tab| %>
11
+ <% tab.with_panel { "Panel 3" } %>
12
+ <% tab.with_text { "Tab 3" } %>
13
+ <% end %>
14
+ <% component.with_extra(align: align) do %>
15
+ <%= render(Primer::Beta::Button.new) { "Extra Button" } %>
16
+ <% end %>
17
+ <% end %>
@@ -33,6 +33,11 @@ module Primer
33
33
  end
34
34
  end
35
35
  end
36
+
37
+ # @param align [Symbol] select [left, right]
38
+ def with_extra(align: :right)
39
+ render_with_template(locals: { align: align })
40
+ end
36
41
  end
37
42
  end
38
43
  end
@@ -1445,7 +1445,7 @@
1445
1445
  },
1446
1446
  {
1447
1447
  "component": "Navigation::Tab",
1448
- "status": "alpha",
1448
+ "status": "deprecated",
1449
1449
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
1450
1450
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/navigation/tab/default/",
1451
1451
  "parameters": [
@@ -1493,6 +1493,56 @@
1493
1493
  }
1494
1494
  ]
1495
1495
  },
1496
+ {
1497
+ "component": "Navigation::Tab",
1498
+ "status": "alpha",
1499
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/navigation/tab.rb",
1500
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/navigation/tab/default/",
1501
+ "parameters": [
1502
+ {
1503
+ "name": "list",
1504
+ "type": "Boolean",
1505
+ "default": "`false`",
1506
+ "description": "Whether the Tab is an item in a `<ul>` list."
1507
+ },
1508
+ {
1509
+ "name": "selected",
1510
+ "type": "Boolean",
1511
+ "default": "`false`",
1512
+ "description": "Whether the Tab is selected or not."
1513
+ },
1514
+ {
1515
+ "name": "with_panel",
1516
+ "type": "Boolean",
1517
+ "default": "`false`",
1518
+ "description": "Whether the Tab has an associated panel."
1519
+ },
1520
+ {
1521
+ "name": "panel_id",
1522
+ "type": "String",
1523
+ "default": "`\"\"`",
1524
+ "description": "Only applies if `with_panel` is `true`. Unique id of panel."
1525
+ },
1526
+ {
1527
+ "name": "icon_classes",
1528
+ "type": "Boolean",
1529
+ "default": "`\"\"`",
1530
+ "description": "Classes that must always be applied to icons."
1531
+ },
1532
+ {
1533
+ "name": "wrapper_arguments",
1534
+ "type": "Hash",
1535
+ "default": "`{}`",
1536
+ "description": "[System arguments](/system-arguments) to be used in the `<li>` wrapper when the tab is an item in a list."
1537
+ },
1538
+ {
1539
+ "name": "system_arguments",
1540
+ "type": "Hash",
1541
+ "default": "N/A",
1542
+ "description": "[System arguments](/system-arguments)"
1543
+ }
1544
+ ]
1545
+ },
1496
1546
  {
1497
1547
  "component": "Octicon",
1498
1548
  "status": "beta",
@@ -2196,10 +2246,10 @@
2196
2246
  ]
2197
2247
  },
2198
2248
  {
2199
- "component": "NavList::Section",
2249
+ "component": "NavList::Group",
2200
2250
  "status": "alpha",
2201
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/section.rb",
2202
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/section/default/",
2251
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/group.rb",
2252
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/group/default/",
2203
2253
  "parameters": [
2204
2254
  {
2205
2255
  "name": "selected_item_id",
@@ -2291,6 +2341,12 @@
2291
2341
  "default": "N/A",
2292
2342
  "description": "Sub list title."
2293
2343
  },
2344
+ {
2345
+ "name": "heading_level",
2346
+ "type": "Integer",
2347
+ "default": "`3`",
2348
+ "description": "Heading level. Level 2 results in an `<h2>` tag, level 3 an `<h3>` tag, etc."
2349
+ },
2294
2350
  {
2295
2351
  "name": "subtitle",
2296
2352
  "type": "String",
@@ -2305,8 +2361,8 @@
2305
2361
  },
2306
2362
  {
2307
2363
  "name": "tag",
2308
- "type": "Symbol",
2309
- "default": "`:h3`",
2364
+ "type": "Integer",
2365
+ "default": "N/A",
2310
2366
  "description": "Semantic tag for the heading."
2311
2367
  },
2312
2368
  {
@@ -2374,7 +2430,7 @@
2374
2430
  {
2375
2431
  "name": "role",
2376
2432
  "type": "String",
2377
- "default": "`:listitem`",
2433
+ "default": "`nil`",
2378
2434
  "description": "ARIA role describing the function of the item."
2379
2435
  },
2380
2436
  {
@@ -28,8 +28,9 @@
28
28
  "Primer::Alpha::Menu": "",
29
29
  "Primer::Alpha::MultiInput": "",
30
30
  "Primer::Alpha::NavList": "",
31
+ "Primer::Alpha::NavList::Group": "",
31
32
  "Primer::Alpha::NavList::Item": "",
32
- "Primer::Alpha::NavList::Section": "",
33
+ "Primer::Alpha::Navigation::Tab": "",
33
34
  "Primer::Alpha::OcticonSymbols": "",
34
35
  "Primer::Alpha::Overlay": "",
35
36
  "Primer::Alpha::Overlay::Body": "",
@@ -27,6 +27,16 @@
27
27
  },
28
28
  "Primer::Alpha::ActionList::Heading": {
29
29
  "DEFAULT_SCHEME": "subtle",
30
+ "HEADING_LEVELS": [
31
+ 1,
32
+ 2,
33
+ 3,
34
+ 4,
35
+ 5,
36
+ 6
37
+ ],
38
+ "HEADING_MAX": 6,
39
+ "HEADING_MIN": 1,
30
40
  "SCHEME_MAPPINGS": {
31
41
  "subtle": null,
32
42
  "filled": "ActionList-sectionDivider--filled"
@@ -326,12 +336,19 @@
326
336
  "Primer::Alpha::MultiInput": {
327
337
  },
328
338
  "Primer::Alpha::NavList": {
329
- "Item": "Primer::Alpha::NavList::Item",
330
- "Section": "Primer::Alpha::NavList::Section"
339
+ "Group": "Primer::Alpha::NavList::Group",
340
+ "Item": "Primer::Alpha::NavList::Item"
341
+ },
342
+ "Primer::Alpha::NavList::Group": {
331
343
  },
332
344
  "Primer::Alpha::NavList::Item": {
333
345
  },
334
- "Primer::Alpha::NavList::Section": {
346
+ "Primer::Alpha::Navigation::Tab": {
347
+ "ARIA_CURRENT_OPTIONS_FOR_ANCHOR": [
348
+ true,
349
+ "page"
350
+ ],
351
+ "DEFAULT_ARIA_CURRENT_FOR_ANCHOR": "page"
335
352
  },
336
353
  "Primer::Alpha::OcticonSymbols": {
337
354
  },
@@ -1189,11 +1206,6 @@
1189
1206
  "MAX_COL": 12
1190
1207
  },
1191
1208
  "Primer::Navigation::TabComponent": {
1192
- "ARIA_CURRENT_OPTIONS_FOR_ANCHOR": [
1193
- true,
1194
- "page"
1195
- ],
1196
- "DEFAULT_ARIA_CURRENT_FOR_ANCHOR": "page"
1197
1209
  },
1198
1210
  "Primer::Tooltip": {
1199
1211
  "ALIGN_DEFAULT": "default",
data/static/previews.json CHANGED
@@ -1557,6 +1557,11 @@
1557
1557
  "inspect_path": "/lookbook/inspect/primer/alpha/tab_nav/with_icons_and_counters",
1558
1558
  "preview_path": "/lookbook/preview/primer/alpha/tab_nav/with_icons_and_counters",
1559
1559
  "name": "with_icons_and_counters"
1560
+ },
1561
+ {
1562
+ "inspect_path": "/lookbook/inspect/primer/alpha/tab_nav/with_extra",
1563
+ "preview_path": "/lookbook/preview/primer/alpha/tab_nav/with_extra",
1564
+ "name": "with_extra"
1560
1565
  }
1561
1566
  ]
1562
1567
  },
@@ -1573,6 +1578,11 @@
1573
1578
  "inspect_path": "/lookbook/inspect/primer/alpha/tab_panels/default",
1574
1579
  "preview_path": "/lookbook/preview/primer/alpha/tab_panels/default",
1575
1580
  "name": "default"
1581
+ },
1582
+ {
1583
+ "inspect_path": "/lookbook/inspect/primer/alpha/tab_panels/with_extra",
1584
+ "preview_path": "/lookbook/preview/primer/alpha/tab_panels/with_extra",
1585
+ "name": "with_extra"
1576
1586
  }
1577
1587
  ]
1578
1588
  },
data/static/statuses.json CHANGED
@@ -28,8 +28,9 @@
28
28
  "Primer::Alpha::Menu": "alpha",
29
29
  "Primer::Alpha::MultiInput": "alpha",
30
30
  "Primer::Alpha::NavList": "alpha",
31
+ "Primer::Alpha::NavList::Group": "alpha",
31
32
  "Primer::Alpha::NavList::Item": "alpha",
32
- "Primer::Alpha::NavList::Section": "alpha",
33
+ "Primer::Alpha::Navigation::Tab": "alpha",
33
34
  "Primer::Alpha::OcticonSymbols": "alpha",
34
35
  "Primer::Alpha::Overlay": "alpha",
35
36
  "Primer::Alpha::Overlay::Body": "alpha",
@@ -92,7 +93,7 @@
92
93
  "Primer::Content": "stable",
93
94
  "Primer::IconButton": "deprecated",
94
95
  "Primer::LayoutComponent": "alpha",
95
- "Primer::Navigation::TabComponent": "alpha",
96
+ "Primer::Navigation::TabComponent": "deprecated",
96
97
  "Primer::Tooltip": "deprecated",
97
98
  "Primer::Truncate": "beta"
98
99
  }
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.1.0
4
+ version: 0.1.1
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: 2023-02-28 00:00:00.000000000 Z
11
+ date: 2023-03-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: actionview
@@ -481,10 +481,11 @@ files:
481
481
  - app/components/primer/alpha/nav_list.js
482
482
  - app/components/primer/alpha/nav_list.rb
483
483
  - app/components/primer/alpha/nav_list.ts
484
+ - app/components/primer/alpha/nav_list/group.rb
484
485
  - app/components/primer/alpha/nav_list/item.html.erb
485
486
  - app/components/primer/alpha/nav_list/item.rb
486
- - app/components/primer/alpha/nav_list/section.html.erb
487
- - app/components/primer/alpha/nav_list/section.rb
487
+ - app/components/primer/alpha/navigation/tab.html.erb
488
+ - app/components/primer/alpha/navigation/tab.rb
488
489
  - app/components/primer/alpha/octicon_symbols.html.erb
489
490
  - app/components/primer/alpha/octicon_symbols.rb
490
491
  - app/components/primer/alpha/overlay.css
@@ -694,7 +695,6 @@ files:
694
695
  - app/components/primer/icon_button.rb
695
696
  - app/components/primer/layout_component.html.erb
696
697
  - app/components/primer/layout_component.rb
697
- - app/components/primer/navigation/tab_component.html.erb
698
698
  - app/components/primer/navigation/tab_component.rb
699
699
  - app/components/primer/primer.d.ts
700
700
  - app/components/primer/primer.js
@@ -921,7 +921,6 @@ files:
921
921
  - previews/pages/forms/08_validations.md.erb
922
922
  - previews/pages/forms/09_compound_forms.md.erb
923
923
  - previews/primer/alpha/action_list_preview.rb
924
- - previews/primer/alpha/action_list_preview/heading.html.erb
925
924
  - previews/primer/alpha/auto_complete_preview.rb
926
925
  - previews/primer/alpha/banner_preview.rb
927
926
  - previews/primer/alpha/banner_preview/with_action_button.html.erb
@@ -950,6 +949,7 @@ files:
950
949
  - previews/primer/alpha/multi_input_preview.rb
951
950
  - previews/primer/alpha/multi_input_preview/playground.html.erb
952
951
  - previews/primer/alpha/nav_list_preview.rb
952
+ - previews/primer/alpha/nav_list_preview/trailing_action.html.erb
953
953
  - previews/primer/alpha/overlay_preview.rb
954
954
  - previews/primer/alpha/overlay_preview/middle_of_page.html.erb
955
955
  - previews/primer/alpha/radio_button_group_preview.rb
@@ -959,7 +959,9 @@ files:
959
959
  - previews/primer/alpha/segmented_control_preview/with_subhead_actions.html.erb
960
960
  - previews/primer/alpha/select_preview.rb
961
961
  - previews/primer/alpha/tab_nav_preview.rb
962
+ - previews/primer/alpha/tab_nav_preview/with_extra.html.erb
962
963
  - previews/primer/alpha/tab_panels_preview.rb
964
+ - previews/primer/alpha/tab_panels_preview/with_extra.html.erb
963
965
  - previews/primer/alpha/text_area_preview.rb
964
966
  - previews/primer/alpha/text_field_preview.rb
965
967
  - previews/primer/alpha/toggle_switch_preview.rb
@@ -1,3 +0,0 @@
1
- <nav-list>
2
- <%= render_parent %>
3
- </nav-list>
@@ -1,4 +0,0 @@
1
- <%# this <ul> is necessary here to make axe happy %>
2
- <ul>
3
- <%= render(Primer::Alpha::ActionList::Heading.new(scheme: scheme, list_id: list_id, title: title, subtitle: subtitle)) %>
4
- </ul>