primer_view_components 0.0.122 → 0.1.0

data/app/components/primer/alpha/action_list/item.rb

@@ -128,6 +128,7 @@ module Primer
         # @param parent [Primer::Alpha::ActionList::Item] This item's parent item. `nil` if this item is at the root. Used internally.
         # @param label [String] Item label.
         # @param label_classes [String] CSS classes that will be added to the label.
+        # @param label_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the label.
         # @param content_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the item's anchor or button tag.
         # @param truncate_label [Boolean] Truncate label with ellipsis.
         # @param href [String] Link URL.
@@ -144,6 +145,7 @@ module Primer
           list:,
           label:,
           label_classes: nil,
+          label_arguments: {},
           content_arguments: {},
           parent: nil,
           truncate_label: false,
@@ -187,9 +189,14 @@ module Primer
           @system_arguments[:aria] ||= {}
           @system_arguments[:aria][:disabled] = "true" if @disabled
 
+          @system_arguments[:data] ||= {}
+          @system_arguments[:data][:targets] = "#{list_class.custom_element_name}.items"
+
           @label_arguments = {
+            **label_arguments,
             classes: class_names(
               label_classes,
+              label_arguments[:classes],
               "ActionListItem-label",
               "ActionListItem-label--truncate" => @truncate_label
             )
@@ -236,6 +243,10 @@ module Primer
             "ActionListContent--blockDescription" => description && @description_scheme == :block
           )
         end
+
+        def list_class
+          Primer::Alpha::ActionList
+        end
       end
     end
   end

data/app/components/primer/alpha/action_list.css.json

@@ -119,5 +119,46 @@
     ".ActionList-sectionDivider--filled",
     ".ActionList-sectionDivider--filled:empty",
     ".ActionList-sectionDivider--filled:first-child"
+  ],
+  "classes": [
+    "ActionListWrap",
+    "ActionListWrap--inset",
+    "ActionListWrap--divided",
+    "ActionListItem-label",
+    "ActionListItem-descriptionWrap--inline",
+    "ActionList-sectionDivider",
+    "ActionListItem",
+    "ActionListItem--navActive",
+    "ActionListItem--hasSubItem",
+    "ActionListContent",
+    "ActionListItem-multiSelectCheckmark",
+    "ActionListItem-singleSelectCheckmark",
+    "ActionListItem-multiSelectIcon",
+    "ActionListItem-multiSelectIconRect",
+    "ActionListItem-description",
+    "ActionListItem-visual",
+    "ActionListItem--danger",
+    "ActionList--subGroup",
+    "ActionListContent--visual16",
+    "ActionListContent--visual20",
+    "ActionListContent--visual24",
+    "ActionListItem-collapseIcon",
+    "ActionListContent--hasActiveSubItem",
+    "ActionListContent--sizeLarge",
+    "ActionListContent--sizeXLarge",
+    "ActionListContent--blockDescription",
+    "ActionListItem-action--leading",
+    "ActionListItem-visual--leading",
+    "ActionListItem-visual--trailing",
+    "ActionListItem-action--trailing",
+    "ActionListItem-descriptionWrap",
+    "ActionListItem-action",
+    "ActionListItem-label--truncate",
+    "ActionListItem--subItem",
+    "ActionListItem--withActions",
+    "ActionListItem-trailingAction",
+    "ActionListItem--trailingActionHover",
+    "ActionList-sectionDivider-title",
+    "ActionList-sectionDivider--filled"
   ]
 }

data/app/components/primer/alpha/auto_complete.css.json

@@ -19,5 +19,16 @@
     ".autocomplete-item.navigation-focus *",
     ".autocomplete-item.selected *",
     ".autocomplete-item[aria-selected=true] *"
+  ],
+  "classes": [
+    "autocomplete-label-stacked",
+    "autocomplete-label-inline",
+    "autocomplete-body",
+    "autocomplete-embedded-icon-wrap",
+    "form-control",
+    "autocomplete-results",
+    "autocomplete-item",
+    "navigation-focus",
+    "selected"
   ]
 }

data/app/components/primer/alpha/banner.css.json

@@ -20,5 +20,19 @@
     ".Banner.Banner--success .Banner-visual .octicon",
     ".Banner.Banner--full",
     ".Banner.Banner--full-whenNarrow"
+  ],
+  "classes": [
+    "Banner",
+    "Banner-actions",
+    "Banner-visual",
+    "octicon",
+    "Banner-message",
+    "Banner-title",
+    "Banner-close",
+    "Banner--warning",
+    "Banner--error",
+    "Banner--success",
+    "Banner--full",
+    "Banner--full-whenNarrow"
   ]
 }

data/app/components/primer/alpha/button_marketing.css.json

@@ -29,5 +29,15 @@
     ".btn-signup-mktg:focus-visible",
     ".btn-small-mktg",
     ".btn-large-mktg"
+  ],
+  "classes": [
+    "btn-mktg",
+    "focus",
+    "disabled",
+    "btn-muted-mktg",
+    "btn-subtle-mktg",
+    "btn-signup-mktg",
+    "btn-small-mktg",
+    "btn-large-mktg"
   ]
 }

data/app/components/primer/alpha/dialog.css.json

@@ -78,5 +78,68 @@
     ".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow",
     ".Overlay-backdrop--full-whenNarrow",
     ".Overlay-backdrop--full-whenNarrow .Overlay"
+  ],
+  "classes": [
+    "Overlay--hidden",
+    "Overlay--visibilityHidden",
+    "Overlay",
+    "Overlay--size-auto",
+    "Overlay--size-full",
+    "Overlay--size-xsmall",
+    "Overlay--size-small",
+    "Overlay--size-small-portrait",
+    "Overlay--size-medium",
+    "Overlay--size-medium-portrait",
+    "Overlay--size-large",
+    "Overlay--size-xlarge",
+    "Overlay--height-auto",
+    "Overlay--height-xsmall",
+    "Overlay--height-small",
+    "Overlay--height-medium",
+    "Overlay--height-large",
+    "Overlay--height-xlarge",
+    "Overlay--width-auto",
+    "Overlay--width-small",
+    "Overlay--width-medium",
+    "Overlay--width-large",
+    "Overlay--width-xlarge",
+    "Overlay--width-xxlarge",
+    "Overlay--motion-scaleFade",
+    "Overlay-form",
+    "Overlay-header",
+    "Overlay-header--divided",
+    "Overlay-body",
+    "Overlay-header--large",
+    "Overlay-headerContentWrap",
+    "Overlay-titleWrap",
+    "Overlay-title",
+    "Overlay-description",
+    "Overlay-actionWrap",
+    "Overlay-body--paddingCondensed",
+    "Overlay-body--paddingNone",
+    "Overlay-footer",
+    "Overlay-footer--divided",
+    "Overlay-footer--alignStart",
+    "Overlay-footer--alignCenter",
+    "Overlay-footer--alignEnd",
+    "Overlay-closeButton",
+    "close-button",
+    "Overlay-backdrop--center",
+    "Overlay-backdrop--anchor",
+    "Overlay-backdrop--side",
+    "Overlay-backdrop--placement-left",
+    "Overlay-backdrop--placement-right",
+    "Overlay-backdrop--placement-bottom",
+    "Overlay-backdrop--placement-top",
+    "Overlay-backdrop--full",
+    "Overlay-backdrop--center-whenNarrow",
+    "Overlay-backdrop--anchor-whenNarrow",
+    "Overlay-backdrop--side-whenNarrow",
+    "Overlay-backdrop--placement-left-whenNarrow",
+    "Overlay-whenNarrow",
+    "Overlay-backdrop--placement-right-whenNarrow",
+    "Overlay-backdrop--placement-bottom-whenNarrow",
+    "Overlay-backdrop--placement-top-whenNarrow",
+    "Overlay-backdrop--full-whenNarrow"
   ]
 }

data/app/components/primer/alpha/dropdown.css.json

@@ -36,5 +36,26 @@
     ".dropdown-menu-sw:after",
     ".dropdown-menu-se:before",
     ".dropdown-menu-se:after"
+  ],
+  "classes": [
+    "dropdown",
+    "dropdown-caret",
+    "dropdown-menu",
+    "dropdown-menu-no-overflow",
+    "dropdown-item",
+    "octicon",
+    "color-fg-",
+    "Label",
+    "btn-link",
+    "dropdown-signout",
+    "dropdown-divider",
+    "dropdown-header",
+    "octicon-check",
+    "dropdown-menu-w",
+    "dropdown-menu-e",
+    "dropdown-menu-ne",
+    "dropdown-menu-s",
+    "dropdown-menu-sw",
+    "dropdown-menu-se"
   ]
 }

data/app/components/primer/alpha/layout.css.json

@@ -76,5 +76,32 @@
     ".Layout-main .Layout-main-centered-xl>.container-lg",
     ".Layout-main .Layout-main-centered-xl>.container-md",
     ".Layout-main .Layout-main-centered-xl>.container-xl"
+  ],
+  "classes": [
+    "Layout",
+    "Layout-divider",
+    "Layout-main",
+    "Layout-sidebar",
+    "Layout--sidebarPosition-flowRow-start",
+    "Layout--sidebarPosition-flowRow-end",
+    "Layout--sidebarPosition-flowRow-none",
+    "Layout--divided",
+    "Layout-divider--flowRow-hidden",
+    "Layout-divider--flowRow-shallow",
+    "Layout--flowRow-until-md",
+    "Layout--flowRow-until-lg",
+    "Layout--gutter-none",
+    "Layout--gutter-condensed",
+    "Layout--gutter-spacious",
+    "Layout--sidebar-narrow",
+    "Layout--sidebar-wide",
+    "Layout--sidebarPosition-start",
+    "Layout--sidebarPosition-end",
+    "Layout-main-centered-lg",
+    "Layout-main-centered-md",
+    "Layout-main-centered-xl",
+    "container-lg",
+    "container-md",
+    "container-xl"
   ]
 }

data/app/components/primer/alpha/menu.css.json

@@ -24,5 +24,16 @@
     ".menu-heading:hover",
     ".menu-heading:first-child",
     ".menu-heading:last-child"
+  ],
+  "classes": [
+    "menu",
+    "menu-item",
+    "selected",
+    "octicon",
+    "Counter",
+    "menu-warning",
+    "avatar",
+    "alert",
+    "menu-heading"
   ]
 }

data/app/components/primer/alpha/nav_list/item.rb

@@ -53,7 +53,7 @@ module Primer
         end
 
         def active?
-          item_active?(self)
+          item_active?(self) && items.empty?
         end
 
         # Cause this item to show its list of sub items when rendered.
@@ -75,6 +75,8 @@ module Primer
 
           raise "Cannot render a trailing action for an item with subitems" if items.present? && trailing_action.present?
 
+          raise "Cannot pass `selected_by_ids:` for an item with subitems, since parent items cannot be selected" if items.present? && @selected_by_ids.present?
+
           return if items.blank?
 
           @content_arguments[:tag] = :button
@@ -119,6 +121,10 @@ module Primer
         def current_page?(url)
           helpers.current_page?(url)
         end
+
+        def list_class
+          Primer::Alpha::NavList
+        end
       end
     end
   end

data/app/components/primer/alpha/nav_list/section.rb

@@ -28,17 +28,17 @@ module Primer
           system_arguments[:data][:action] = "click:nav-list#showMore"
           system_arguments[:data][:"current-page"] = "1"
           system_arguments[:data][:"total-pages"] = pages.to_s
-          system_arguments[:label_classes] = class_names(
-            system_arguments[:label_classes],
-            "color-fg-accent"
-          )
+          system_arguments[:label_arguments] = {
+            **system_arguments[:label_arguments] || {},
+            color: :accent
+          }
 
           component_klass.new(list: self, src: src, **system_arguments)
         }
 
         # @private
         def self.custom_element_name
-          "nav-list"
+          Primer::Alpha::NavList.custom_element_name
         end
 
         # @param selected_item_id [Symbol] The ID of the currently selected item. Used internally.

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

@@ -1,5 +1,7 @@
-declare class NavListElement extends HTMLElement {
+export declare class NavListElement extends HTMLElement {
+    #private;
     list: HTMLElement;
+    items: HTMLElement[];
     showMoreItem: HTMLElement;
     focusMarkers: HTMLElement[];
     connectedCallback(): void;
@@ -9,17 +11,18 @@ declare class NavListElement extends HTMLElement {
     get currentPage(): number;
     get totalPages(): number;
     get paginationSrc(): string;
+    selectItemById(itemId: string | null): boolean;
+    selectItemByHref(href: string | null): boolean;
+    selectItemByCurrentLocation(): boolean;
     expandItem(item: HTMLElement): void;
     collapseItem(item: HTMLElement): void;
     itemIsExpanded(item: HTMLElement | null): boolean;
     handleItemWithSubItemClick(e: Event): void;
     private showMore;
     private setShowMoreItemState;
-    private parseHTML;
 }
 declare global {
     interface Window {
         NavListElement: typeof NavListElement;
     }
 }
-export {};

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

@@ -4,9 +4,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _NavListElement_instances, _NavListElement_parseHTML, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
 /* eslint-disable custom-elements/expose-class-on-global */
 import { controller, target, targets } from '@github/catalyst';
 let NavListElement = class NavListElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _NavListElement_instances.add(this);
+    }
     connectedCallback() {
         this.setShowMoreItemState();
     }
@@ -34,6 +44,34 @@ let NavListElement = class NavListElement extends HTMLElement {
     get paginationSrc() {
         return this.showMoreItem.getAttribute('src') || '';
     }
+    selectItemById(itemId) {
+        if (!itemId)
+            return false;
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemById).call(this, itemId);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
+    selectItemByHref(href) {
+        if (!href)
+            return false;
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, href);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
+    selectItemByCurrentLocation() {
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByCurrentLocation).call(this);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
     // expand collapsible item onClick
     expandItem(item) {
         var _a;
@@ -92,7 +130,7 @@ let NavListElement = class NavListElement extends HTMLElement {
             this.currentPage--;
             return;
         }
-        const fragment = this.parseHTML(document, html);
+        const fragment = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_parseHTML).call(this, document, html);
         (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list.focusMarkers');
         this.list.insertBefore(fragment, this.showMoreItem);
         (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
@@ -109,16 +147,69 @@ let NavListElement = class NavListElement extends HTMLElement {
             this.showMoreItem.hidden = true;
         }
     }
-    parseHTML(document, html) {
-        const template = document.createElement('template');
-        // eslint-disable-next-line github/no-inner-html
-        template.innerHTML = html;
-        return document.importNode(template.content, true);
+};
+_NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
+    const template = document.createElement('template');
+    // eslint-disable-next-line github/no-inner-html
+    template.innerHTML = html;
+    return document.importNode(template.content, true);
+}, _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
+    var _a;
+    // First we compare the selected link to data-item-id for each nav item
+    for (const navItem of this.items) {
+        if (navItem.classList.contains('ActionListItem--hasSubItem')) {
+            continue;
+        }
+        const keys = ((_a = navItem.getAttribute('data-item-id')) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
+        if (keys.includes(itemId)) {
+            return navItem;
+        }
+    }
+    return null;
+}, _NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
+    // If we didn't find a match, we compare the selected link to the href of each nav item
+    const selectedNavItem = this.querySelector(`.ActionListContent[href="${href}"]`);
+    if (selectedNavItem) {
+        return selectedNavItem.closest('.ActionListItem');
+    }
+    return null;
+}, _NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
+    return __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, window.location.pathname);
+}, _NavListElement_select = function _NavListElement_select(navItem) {
+    const currentlySelectedItem = this.querySelector('.ActionListItem--navActive');
+    if (currentlySelectedItem)
+        __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_deselect).call(this, currentlySelectedItem);
+    navItem.classList.add('ActionListItem--navActive');
+    const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
+    if (parentMenu) {
+        this.expandItem(parentMenu);
+        parentMenu.classList.add('ActionListContent--hasActiveSubItem');
+    }
+}, _NavListElement_deselect = function _NavListElement_deselect(navItem) {
+    navItem.classList.remove('ActionListItem--navActive');
+    const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
+    if (parentMenu) {
+        this.collapseItem(parentMenu);
+        parentMenu.classList.remove('ActionListContent--hasActiveSubItem');
+    }
+}, _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
+    var _a;
+    if (!navItem.classList.contains('ActionListItem--subItem'))
+        return null;
+    const parent = (_a = navItem.closest('li.ActionListItem--hasSubItem')) === null || _a === void 0 ? void 0 : _a.querySelector('button.ActionListContent');
+    if (parent) {
+        return parent;
+    }
+    else {
+        return null;
     }
 };
 __decorate([
     target
 ], NavListElement.prototype, "list", void 0);
+__decorate([
+    targets
+], NavListElement.prototype, "items", void 0);
 __decorate([
     target
 ], NavListElement.prototype, "showMoreItem", void 0);
@@ -128,3 +219,4 @@ __decorate([
 NavListElement = __decorate([
     controller
 ], NavListElement);
+export { NavListElement };

data/app/components/primer/alpha/nav_list.rb

@@ -17,6 +17,11 @@ module Primer
     class NavList < Primer::Component
       status :alpha
 
+      # @private
+      def self.custom_element_name
+        "nav-list"
+      end
+
       # Sections. Each section is a list of links and an optional heading.
       #
       # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Section) %>.
@@ -62,7 +67,7 @@ module Primer
       #   <%= render(Primer::Alpha::NavList.new(selected_item_id: :email_notifications)) do |component| %>
       #     <% component.with_section(aria: { label: "Account settings" }) do |section| %>
       #       <% section.with_heading(title: "Account Settings") %>
-      #       <% section.with_item(label: "Notification settings", selected_by_ids: :notifications) do |item| %>
+      #       <% section.with_item(label: "Notification settings") do |item| %>
       #         <% item.with_leading_visual_icon(icon: :bell) %>
       #         <% item.with_item(label: "Email", selected_by_ids: :email_notifications, href: "/account/notifications/email") do |subitem| %>
       #           <% subitem.with_trailing_visual_icon(icon: :mail) %>
@@ -71,7 +76,7 @@ module Primer
       #           <% subitem.with_trailing_visual_icon(icon: :"device-mobile") %>
       #         <% end %>
       #       <% end %>
-      #       <% section.with_item(label: "Messages", selected_by_ids: :messages) do |item| %>
+      #       <% section.with_item(label: "Messages") do |item| %>
       #         <% item.with_leading_visual_icon(icon: :bookmark) %>
       #         <% item.with_item(label: "Inbox", href: "/account/messages/inbox") do |subitem| %>
       #           <% subitem.with_trailing_visual_counter(count: 10) %>