@primer/view-components 0.1.0 → 0.1.1-rc.1191b5b6

package/app/components/primer/alpha/nav_list.d.ts

@@ -18,6 +18,7 @@ export declare class NavListElement extends HTMLElement {
     collapseItem(item: HTMLElement): void;
     itemIsExpanded(item: HTMLElement | null): boolean;
     handleItemWithSubItemClick(e: Event): void;
+    handleItemWithSubItemKeydown(e: KeyboardEvent): void;
     private showMore;
     private setShowMoreItemState;
 }

package/app/components/primer/alpha/nav_list.js

@@ -82,6 +82,7 @@ let NavListElement = class NavListElement extends HTMLElement {
         var _a;
         (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.setAttribute('data-hidden', '');
         item.setAttribute('aria-expanded', 'false');
+        item.focus();
     }
     itemIsExpanded(item) {
         if ((item === null || item === void 0 ? void 0 : item.tagName) === 'A') {
@@ -105,6 +106,26 @@ let NavListElement = class NavListElement extends HTMLElement {
         }
         e.stopPropagation();
     }
+    // collapse item
+    handleItemWithSubItemKeydown(e) {
+        const el = e.currentTarget;
+        if (!(el instanceof HTMLElement))
+            return;
+        let button = el.closest('button');
+        if (!button) {
+            const button_id = el.getAttribute('aria-labelledby');
+            if (button_id) {
+                button = document.getElementById(button_id);
+            }
+            else {
+                return;
+            }
+        }
+        if (this.itemIsExpanded(button) && e.key === 'Escape') {
+            this.collapseItem(button);
+        }
+        e.stopPropagation();
+    }
     async showMore(e) {
         var _a, _b;
         e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.1.0",
+  "version": "0.1.1-rc.1191b5b6",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/arguments.json

@@ -1445,7 +1445,7 @@
   },
   {
     "component": "Navigation::Tab",
-    "status": "alpha",
+    "status": "deprecated",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/navigation/tab/default/",
     "parameters": [
@@ -1493,6 +1493,56 @@
       }
     ]
   },
+  {
+    "component": "Navigation::Tab",
+    "status": "alpha",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/navigation/tab.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/navigation/tab/default/",
+    "parameters": [
+      {
+        "name": "list",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab is an item in a `<ul>` list."
+      },
+      {
+        "name": "selected",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab is selected or not."
+      },
+      {
+        "name": "with_panel",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab has an associated panel."
+      },
+      {
+        "name": "panel_id",
+        "type": "String",
+        "default": "`\"\"`",
+        "description": "Only applies if `with_panel` is `true`. Unique id of panel."
+      },
+      {
+        "name": "icon_classes",
+        "type": "Boolean",
+        "default": "`\"\"`",
+        "description": "Classes that must always be applied to icons."
+      },
+      {
+        "name": "wrapper_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "[System arguments](/system-arguments) to be used in the `<li>` wrapper when the tab is an item in a list."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "Octicon",
     "status": "beta",
@@ -2196,10 +2246,10 @@
     ]
   },
   {
-    "component": "NavList::Section",
+    "component": "NavList::Group",
     "status": "alpha",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/section.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/section/default/",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/group.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/group/default/",
     "parameters": [
       {
         "name": "selected_item_id",
@@ -2291,6 +2341,12 @@
         "default": "N/A",
         "description": "Sub list title."
       },
+      {
+        "name": "heading_level",
+        "type": "Integer",
+        "default": "`3`",
+        "description": "Heading level. Level 2 results in an `<h2>` tag, level 3 an `<h3>` tag, etc."
+      },
       {
         "name": "subtitle",
         "type": "String",
@@ -2305,8 +2361,8 @@
       },
       {
         "name": "tag",
-        "type": "Symbol",
-        "default": "`:h3`",
+        "type": "Integer",
+        "default": "N/A",
         "description": "Semantic tag for the heading."
       },
       {
@@ -2374,7 +2430,7 @@
       {
         "name": "role",
         "type": "String",
-        "default": "`:listitem`",
+        "default": "`nil`",
         "description": "ARIA role describing the function of the item."
       },
       {

package/static/audited_at.json

@@ -28,8 +28,9 @@
   "Primer::Alpha::Menu": "",
   "Primer::Alpha::MultiInput": "",
   "Primer::Alpha::NavList": "",
+  "Primer::Alpha::NavList::Group": "",
   "Primer::Alpha::NavList::Item": "",
-  "Primer::Alpha::NavList::Section": "",
+  "Primer::Alpha::Navigation::Tab": "",
   "Primer::Alpha::OcticonSymbols": "",
   "Primer::Alpha::Overlay": "",
   "Primer::Alpha::Overlay::Body": "",

package/static/constants.json

@@ -27,6 +27,16 @@
   },
   "Primer::Alpha::ActionList::Heading": {
     "DEFAULT_SCHEME": "subtle",
+    "HEADING_LEVELS": [
+      1,
+      2,
+      3,
+      4,
+      5,
+      6
+    ],
+    "HEADING_MAX": 6,
+    "HEADING_MIN": 1,
     "SCHEME_MAPPINGS": {
       "subtle": null,
       "filled": "ActionList-sectionDivider--filled"
@@ -326,12 +336,19 @@
   "Primer::Alpha::MultiInput": {
   },
   "Primer::Alpha::NavList": {
-    "Item": "Primer::Alpha::NavList::Item",
-    "Section": "Primer::Alpha::NavList::Section"
+    "Group": "Primer::Alpha::NavList::Group",
+    "Item": "Primer::Alpha::NavList::Item"
+  },
+  "Primer::Alpha::NavList::Group": {
   },
   "Primer::Alpha::NavList::Item": {
   },
-  "Primer::Alpha::NavList::Section": {
+  "Primer::Alpha::Navigation::Tab": {
+    "ARIA_CURRENT_OPTIONS_FOR_ANCHOR": [
+      true,
+      "page"
+    ],
+    "DEFAULT_ARIA_CURRENT_FOR_ANCHOR": "page"
   },
   "Primer::Alpha::OcticonSymbols": {
   },
@@ -1189,11 +1206,6 @@
     "MAX_COL": 12
   },
   "Primer::Navigation::TabComponent": {
-    "ARIA_CURRENT_OPTIONS_FOR_ANCHOR": [
-      true,
-      "page"
-    ],
-    "DEFAULT_ARIA_CURRENT_FOR_ANCHOR": "page"
   },
   "Primer::Tooltip": {
     "ALIGN_DEFAULT": "default",

package/static/statuses.json

@@ -28,8 +28,9 @@
   "Primer::Alpha::Menu": "alpha",
   "Primer::Alpha::MultiInput": "alpha",
   "Primer::Alpha::NavList": "alpha",
+  "Primer::Alpha::NavList::Group": "alpha",
   "Primer::Alpha::NavList::Item": "alpha",
-  "Primer::Alpha::NavList::Section": "alpha",
+  "Primer::Alpha::Navigation::Tab": "alpha",
   "Primer::Alpha::OcticonSymbols": "alpha",
   "Primer::Alpha::Overlay": "alpha",
   "Primer::Alpha::Overlay::Body": "alpha",
@@ -92,7 +93,7 @@
   "Primer::Content": "stable",
   "Primer::IconButton": "deprecated",
   "Primer::LayoutComponent": "alpha",
-  "Primer::Navigation::TabComponent": "alpha",
+  "Primer::Navigation::TabComponent": "deprecated",
   "Primer::Tooltip": "deprecated",
   "Primer::Truncate": "beta"
 }