@primer/view-components 0.1.0 → 0.1.1-rc.797d8bd8

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.797d8bd8",
   "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

@@ -2196,10 +2196,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 +2291,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 +2311,8 @@
       },
       {
         "name": "tag",
-        "type": "Symbol",
-        "default": "`:h3`",
+        "type": "Integer",
+        "default": "N/A",
         "description": "Semantic tag for the heading."
       },
       {
@@ -2374,7 +2380,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,8 @@
   "Primer::Alpha::Menu": "",
   "Primer::Alpha::MultiInput": "",
   "Primer::Alpha::NavList": "",
+  "Primer::Alpha::NavList::Group": "",
   "Primer::Alpha::NavList::Item": "",
-  "Primer::Alpha::NavList::Section": "",
   "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,12 @@
   "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::Item": {
+  "Primer::Alpha::NavList::Group": {
   },
-  "Primer::Alpha::NavList::Section": {
+  "Primer::Alpha::NavList::Item": {
   },
   "Primer::Alpha::OcticonSymbols": {
   },

package/static/statuses.json

@@ -28,8 +28,8 @@
   "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::OcticonSymbols": "alpha",
   "Primer::Alpha::Overlay": "alpha",
   "Primer::Alpha::Overlay::Body": "alpha",