@primer/view-components 0.1.0-rc.dfa70354 → 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-rc.dfa70354",
+  "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

@@ -2039,6 +2039,104 @@
       }
     ]
   },
+  {
+    "component": "Overlay",
+    "status": "alpha",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/overlay.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/overlay/default/",
+    "parameters": [
+      {
+        "name": "id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "The id of the Overlay."
+      },
+      {
+        "name": "title",
+        "type": "String",
+        "default": "N/A",
+        "description": "Describes the content of the Overlay."
+      },
+      {
+        "name": "subtitle",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Provides dditional context for the Overlay, also setting the `aria-describedby` attribute."
+      },
+      {
+        "name": "popover",
+        "type": "Symbol",
+        "default": "`:auto`",
+        "description": "The popover behaviour. One of `:auto` or `:manual`."
+      },
+      {
+        "name": "popover",
+        "type": "Symbol",
+        "default": "`:auto`",
+        "description": "The popover behaviour. One of `:auto` or `:manual`."
+      },
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "`:auto`",
+        "description": "The size of the Overlay. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
+      },
+      {
+        "name": "padding",
+        "type": "Symbol",
+        "default": "`:normal`",
+        "description": "The padding given to the Overlay body. One of `:condensed`, `:none`, or `:normal`."
+      },
+      {
+        "name": "anchor",
+        "type": "String",
+        "default": "`nil`",
+        "description": "An ID of the element to anchor onto. Defaults to the `show_button`."
+      },
+      {
+        "name": "anchor_align",
+        "type": "Symbol",
+        "default": "`:start`",
+        "description": "The anchor alignment of the Overlay. One of `:center`, `:end`, or `:start`."
+      },
+      {
+        "name": "anchor_side",
+        "type": "Symbol",
+        "default": "`:outside_bottom`",
+        "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
+      },
+      {
+        "name": "anchor_offset",
+        "type": "Symbol",
+        "default": "`:normal`",
+        "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
+      },
+      {
+        "name": "allow_out_of_bounds",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Allow the Overlay to overflow its container."
+      },
+      {
+        "name": "visually_hide_title",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "If true will hide the heading title, while still making it available to Screen Readers."
+      },
+      {
+        "name": "role",
+        "type": "String",
+        "default": "N/A",
+        "description": "The ARIA role. One of `:dialog` or `:menu`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "NavList",
     "status": "alpha",
@@ -2098,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",
@@ -2193,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",
@@ -2207,8 +2311,8 @@
       },
       {
         "name": "tag",
-        "type": "Symbol",
-        "default": "`:h3`",
+        "type": "Integer",
+        "default": "N/A",
         "description": "Semantic tag for the heading."
       },
       {
@@ -2276,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,9 +28,13 @@
   "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": "",
+  "Primer::Alpha::Overlay::Footer": "",
+  "Primer::Alpha::Overlay::Header": "",
   "Primer::Alpha::RadioButton": "",
   "Primer::Alpha::RadioButtonGroup": "",
   "Primer::Alpha::SegmentedControl": "2023-02-01",

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,15 +336,117 @@
   "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": {
   },
+  "Primer::Alpha::Overlay": {
+    "ALIGN_CONTENT_MAPPINGS": {
+      "start": "Overlay-footer--alignStart",
+      "center": "Overlay-footer--alignCenter",
+      "end": "Overlay-footer--alignEnd"
+    },
+    "ALIGN_CONTENT_OPTIONS": [
+      "start",
+      "center",
+      "end"
+    ],
+    "ANCHOR_ALIGN_OPTIONS": [
+      "start",
+      "center",
+      "end"
+    ],
+    "ANCHOR_OFFSET_OPTIONS": [
+      "normal",
+      "spacious"
+    ],
+    "ANCHOR_SIDE_MAPPINGS": {
+      "inside_top": "inside-top",
+      "inside_bottom": "inside-bottom",
+      "inside_left": "inside-left",
+      "inside_right": "inside-right",
+      "inside_center": "inside-center",
+      "outside_top": "outside-top",
+      "outside_bottom": "outside-bottom",
+      "outside_left": "outside-left",
+      "outside_right": "outside-right"
+    },
+    "ANCHOR_SIDE_OPTIONS": [
+      "inside_top",
+      "inside_bottom",
+      "inside_left",
+      "inside_right",
+      "inside_center",
+      "outside_top",
+      "outside_bottom",
+      "outside_left",
+      "outside_right"
+    ],
+    "Body": "Primer::Alpha::Overlay::Body",
+    "DEFAULT_ALIGN_CONTENT": "end",
+    "DEFAULT_ANCHOR_ALIGN": "start",
+    "DEFAULT_ANCHOR_OFFSET": "normal",
+    "DEFAULT_ANCHOR_SIDE": "outside_bottom",
+    "DEFAULT_PADDING": "normal",
+    "DEFAULT_POPOVER": "auto",
+    "DEFAULT_SIZE": "auto",
+    "Footer": "Primer::Alpha::Overlay::Footer",
+    "Header": "Primer::Alpha::Overlay::Header",
+    "PADDING_MAPPINGS": {
+      "normal": null,
+      "condensed": "Overlay-body--paddingCondensed",
+      "none": "Overlay-body--paddingNone"
+    },
+    "PADDING_OPTIONS": [
+      "normal",
+      "condensed",
+      "none"
+    ],
+    "POPOVER_OPTIONS": [
+      "auto",
+      "manual"
+    ],
+    "ROLE_OPTIONS": [
+      "dialog",
+      "menu"
+    ],
+    "SIZE_MAPPINGS": {
+      "auto": "Overlay--size-auto",
+      "small": "Overlay--size-small",
+      "medium": "Overlay--size-medium",
+      "medium_portrait": "Overlay--size-medium-portrait",
+      "large": "Overlay--size-large",
+      "xlarge": "Overlay--size-xlarge"
+    },
+    "SIZE_OPTIONS": [
+      "auto",
+      "small",
+      "medium",
+      "medium_portrait",
+      "large",
+      "xlarge"
+    ]
+  },
+  "Primer::Alpha::Overlay::Body": {
+  },
+  "Primer::Alpha::Overlay::Footer": {
+  },
+  "Primer::Alpha::Overlay::Header": {
+    "DEFAULT_SIZE": "medium",
+    "SIZE_MAPPINGS": {
+      "medium": null,
+      "large": "Overlay-header--large"
+    },
+    "SIZE_OPTIONS": [
+      "medium",
+      "large"
+    ]
+  },
   "Primer::Alpha::RadioButton": {
   },
   "Primer::Alpha::RadioButtonGroup": {

package/static/previews.json

@@ -1263,6 +1263,27 @@
       }
     ]
   },
+  {
+    "name": "overlay",
+    "lookup_path": "primer/alpha/overlay",
+    "examples": [
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/overlay/playground",
+        "preview_path": "/lookbook/preview/primer/alpha/overlay/playground",
+        "name": "playground"
+      },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/overlay/default",
+        "preview_path": "/lookbook/preview/primer/alpha/overlay/default",
+        "name": "default"
+      },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page",
+        "preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page",
+        "name": "middle_of_page"
+      }
+    ]
+  },
   {
     "name": "popover",
     "lookup_path": "primer/beta/popover",

package/static/statuses.json

@@ -28,9 +28,13 @@
   "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",
+  "Primer::Alpha::Overlay::Footer": "alpha",
+  "Primer::Alpha::Overlay::Header": "alpha",
   "Primer::Alpha::RadioButton": "alpha",
   "Primer::Alpha::RadioButtonGroup": "alpha",
   "Primer::Alpha::SegmentedControl": "alpha",