openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class NavList
+      # Separator with optional text rendered above groups or between individual items.
+      class Divider < Primer::Alpha::ActionList::Divider
+        def kind
+          :divider
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/nav_list/group.html.erb

@@ -0,0 +1,7 @@
+<% with_post_list_content do %>
+  <% if show_more_item? %>
+    <%= show_more_item %>
+  <% end %>
+<% end %>
+
+<% render_parent %>

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

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class NavList
+      # A logical grouping of navigation links with an optional heading.
+      #
+      # See <%= link_to_component(Primer::Alpha::NavList) %> for usage examples.
+      class Group < ActionList
+        # A special "show more" list item that appears at the bottom of the group. Clicking
+        # the item will fetch the next page of results from the URL passed in the `src` argument
+        # and append the resulting chunk of HTML to the group.
+        #
+        # @param src [String] The URL to query for additional pages of list items.
+        # @param pages [Integer] The total number of pages in the result set.
+        # @param component_klass [Class] A component class to use instead of the default `Primer::Alpha::NavList::Item` class.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Item) %>.
+        renders_one :show_more_item, lambda { |src:, pages:, component_klass: NavList::Item, **system_arguments|
+          system_arguments[:classes] = class_names(
+            @item_classes,
+            system_arguments[:classes]
+          )
+          system_arguments[:tag] = :div
+          system_arguments[:id] ||= self.class.generate_id(base_name: "item")
+          system_arguments[:hidden] = true
+          system_arguments[:href] = "#"
+          system_arguments[:data] ||= {}
+          system_arguments[:data][:target] = "nav-list.showMoreItem"
+          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_arguments] = {
+            **system_arguments[:label_arguments] || {},
+            color: :accent
+          }
+
+          system_arguments[:content_arguments] = {
+            **system_arguments[:content_arguments] || {},
+            tag: :button
+          }
+
+          system_arguments[:content_arguments][:data] = merge_data(
+            system_arguments[:content_arguments],
+            data: { list_id: id }
+          )
+
+          component_klass.new(list: self, src: src, **system_arguments)
+        }
+
+        # @private
+        def self.custom_element_name
+          Primer::Alpha::NavList.custom_element_name
+        end
+
+        # @param selected_item_id [Symbol] The ID of the currently selected item. Used internally.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(selected_item_id: nil, **system_arguments)
+          @system_arguments = system_arguments
+          @selected_item_id = selected_item_id
+
+          super(**@system_arguments)
+        end
+
+        # Cause this group to show its list of sub items when rendered.
+        # :nocov:
+        def expand!
+          @expanded = true
+        end
+        # :nocov:
+
+        # @!parse
+        #   # Items.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Item) %>.
+        #   renders_many :items
+
+        # @private
+        def build_item(component_klass: NavList::Item, **system_arguments)
+          super(
+            component_klass: component_klass,
+            selected_item_id: @selected_item_id,
+            **system_arguments
+          )
+        end
+
+        # @private
+        def build_avatar_item(component_klass: NavList::Item, **system_arguments)
+          super(
+            component_klass: component_klass,
+            selected_item_id: @selected_item_id,
+            **system_arguments
+          )
+        end
+
+        def kind
+          :group
+        end
+
+        def before_render
+          super
+
+          raise ArgumentError, "NavList groups are required to have headings" unless heading?
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class NavList
+      # The heading placed above a `NavList`'s items.
+      #
+      # See <%= link_to_component(Primer::Alpha::NavList) %> for usage examples.
+      class Heading < Primer::Component
+        attr_reader :title, :id, :heading_level, :system_arguments
+
+        # @param title [String] The text content of the heading.
+        # @param id [String] The value of the ID HTML attribute. Auto-generated by default.
+        # @param heading_level [Integer] The heading level, i.e. 2 for an `<h2>`, 3 for an `<h3>`, etc.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(title:, id: self.class.generate_id, heading_level: 2, **system_arguments)
+          @title = title
+          @id = id
+          @heading_level = heading_level
+          @system_arguments = system_arguments
+        end
+
+        def call
+          render(
+            Primer::BaseComponent.new(
+              tag: :"h#{heading_level}",
+              id: id,
+              classes: "ActionListHeader",
+              **system_arguments
+            ).with_content(title)
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/nav_list/item.html.erb

@@ -0,0 +1,13 @@
+<% with_private_content do %>
+  <% unless items.empty? %>
+    <% capture do %>
+      <%= render(Primer::BaseComponent.new(tag: :ul, role: :list, **@sub_list_arguments)) do %>
+        <% items.each do |item| %>
+          <%= item %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render_parent %>

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

@@ -0,0 +1,156 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class NavList
+      # Items are rendered as styled links. They can optionally include leading and/or trailing visuals,
+      # such as icons, avatars, and counters. Items are selected by ID. IDs can be specified via the
+      # `selected_item_ids` argument, which accepts a list of valid IDs for the item. Items can also
+      # themselves contain sub items. Sub items are rendered collapsed by default.
+      class Item < Primer::Alpha::ActionList::Item
+        attr_reader :selected_by_ids, :sub_item
+
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
+        renders_many :items, lambda { |**system_arguments|
+          raise "Items can only be nested 2 levels deep" if sub_item?
+
+          @list.build_item(parent: self, sub_item: true, **system_arguments).tap do |item|
+            @list.will_add_item(item)
+          end
+        }
+
+        # Whether or not this item is nested under a parent item.
+        #
+        # @return [Boolean]
+        alias sub_item? sub_item
+
+        # @param selected_item_id [Symbol] The ID of the currently selected list item. Used internally.
+        # @param selected_by_ids [Array<Symbol>] The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected.
+        # @param expanded [Boolean] Whether this item shows (expands) or hides (collapses) its list of sub items.
+        # @param sub_item [Boolean] Whether or not this item is nested under a parent item. Used internally.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(selected_item_id: nil, selected_by_ids: [], sub_item: false, expanded: false, **system_arguments)
+          @selected_item_id = selected_item_id
+          @selected_by_ids = Array(selected_by_ids)
+          @expanded = expanded
+          @sub_item = sub_item
+
+          system_arguments[:classes] = class_names(
+            system_arguments[:classes],
+            "ActionListItem--subItem" => @sub_item
+          )
+
+          @sub_list_arguments = {
+            classes: class_names(
+              "ActionList",
+              "ActionList--subGroup"
+            )
+          }
+
+          @list = system_arguments[:list]
+
+          @sub_list_arguments["data-action"] = "keydown:#{@list.custom_element_name}#handleItemWithSubItemKeydown" if @list
+
+          overrides = { "data-item-id": @selected_by_ids.join(" ") }
+
+          super(**system_arguments, **overrides)
+        end
+
+        def active?
+          item_active?(self) && items.empty?
+        end
+
+        # Cause this item to show its list of sub items when rendered.
+        def expand!
+          @expanded = true
+        end
+
+        def before_render
+          if active_sub_item?
+            expand!
+
+            @content_arguments[:classes] = class_names(
+              @content_arguments[:classes],
+              "ActionListContent--hasActiveSubItem"
+            )
+          else
+            @system_arguments[:classes] = class_names(
+              @system_arguments[:classes],
+              "ActionListItem--navActive" => active?
+            )
+          end
+
+          @content_arguments[:"aria-current"] = "page" if active?
+
+          super
+
+          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?
+
+          @sub_list_arguments[:aria] = merge_aria(
+            @sub_list_arguments,
+            { aria: { labelledby: id } }
+          )
+
+          raise ArgumentError, "Items with sub-items cannot have hrefs" if href.present?
+
+          @content_arguments[:tag] = :button
+          @content_arguments[:"aria-expanded"] = @expanded.to_s
+          @content_arguments[:"data-action"] = "
+            click:#{@list.custom_element_name}#handleItemWithSubItemClick
+            keydown:#{@list.custom_element_name}#handleItemWithSubItemKeydown
+          "
+
+          with_private_trailing_action_icon(:"chevron-down", classes: "ActionListItem-collapseIcon")
+
+          @system_arguments[:classes] = class_names(
+            @system_arguments[:classes],
+            "ActionListItem--hasSubItem"
+          )
+        end
+
+        def kind
+          :item
+        end
+
+        private
+
+        # Normally it would be easier to simply ask each item for its active status, eg.
+        # items.any?(&:active?), but unfortunately the view context is not set on each
+        # item until _after_ the parent's before_render, etc methods have been called.
+        # This means helper methods like current_page? will blow up with an error, since
+        # `helpers` is simply an alias for the view context (i.e. an instance of
+        # ActionView::Base). Since we know the view context for the parent object must
+        # be set before `before_render` is invoked, we can call helper methods here in
+        # the parent and bypass the problem entirely. Maybe not the most OO approach,
+        # but it works.
+        def item_active?(item)
+          if item.selected_by_ids.present?
+            item.selected_by_ids.include?(@selected_item_id)
+          elsif item.href
+            current_page?(item.href)
+          else
+            # :nocov:
+            false
+            # :nocov:
+          end
+        end
+
+        def active_sub_item?
+          items.any? { |subitem| item_active?(subitem) }
+        end
+
+        def current_page?(url)
+          helpers.current_page?(url)
+        end
+
+        def list_class
+          Primer::Alpha::NavList
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+export declare class NavListElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    showMoreItem: HTMLElement;
+    focusMarkers: HTMLElement[];
+    connectedCallback(): void;
+    get showMoreDisabled(): boolean;
+    set showMoreDisabled(value: boolean);
+    set currentPage(value: number);
+    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;
+    handleItemWithSubItemKeydown(e: KeyboardEvent): void;
+    private showMore;
+    private setShowMoreItemState;
+}
+declare global {
+    interface Window {
+        NavListElement: typeof NavListElement;
+    }
+}

data/app/components/primer/alpha/nav_list.html.erb

@@ -0,0 +1,15 @@
+<%= render(Primer::BaseComponent.new(tag: :nav, **@system_arguments)) do %>
+  <%= heading %>
+  <nav-list>
+    <%= render(Primer::ConditionalWrapper.new(condition: render_outer_list?, tag: :ul, classes: "ActionListWrap")) do %>
+      <% items.each_with_index do |item, index| %>
+        <% if index > 0 && render_divider_between?(item, items[index - 1]) %>
+          <%= render(Primer::Alpha::ActionList::Divider.new) %>
+        <% end %>
+        <%= render(Primer::ConditionalWrapper.new(condition: render_outer_list? && group?(item), tag: :li)) do %>
+          <%= item %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </nav-list>
+<% end %>

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

@@ -0,0 +1,248 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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();
+    }
+    get showMoreDisabled() {
+        return this.showMoreItem.hasAttribute('aria-disabled');
+    }
+    set showMoreDisabled(value) {
+        if (value) {
+            this.showMoreItem.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.showMoreItem.removeAttribute('aria-disabled');
+        }
+        this.showMoreItem.classList.toggle('disabled', value);
+    }
+    set currentPage(value) {
+        this.showMoreItem.setAttribute('data-current-page', value.toString());
+    }
+    get currentPage() {
+        return parseInt(this.showMoreItem.getAttribute('data-current-page')) || 1;
+    }
+    get totalPages() {
+        return parseInt(this.showMoreItem.getAttribute('data-total-pages')) || 1;
+    }
+    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;
+        (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-hidden');
+        item.setAttribute('aria-expanded', 'true');
+    }
+    collapseItem(item) {
+        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') {
+            return true;
+        }
+        return (item === null || item === void 0 ? void 0 : item.getAttribute('aria-expanded')) === 'true';
+    }
+    // expand/collapse item
+    handleItemWithSubItemClick(e) {
+        const el = e.target;
+        if (!(el instanceof HTMLElement))
+            return;
+        const button = el.closest('button');
+        if (!button)
+            return;
+        if (this.itemIsExpanded(button)) {
+            this.collapseItem(button);
+        }
+        else {
+            this.expandItem(button);
+        }
+        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();
+        if (this.showMoreDisabled)
+            return;
+        this.showMoreDisabled = true;
+        let html;
+        try {
+            const paginationURL = new URL(this.paginationSrc, window.location.origin);
+            this.currentPage++;
+            paginationURL.searchParams.append('page', this.currentPage.toString());
+            const response = await fetch(paginationURL);
+            if (!response.ok)
+                return;
+            html = await response.text();
+            if (this.currentPage === this.totalPages) {
+                this.showMoreItem.hidden = true;
+            }
+        }
+        catch (err) {
+            // Ignore network errors
+            this.showMoreDisabled = false;
+            this.currentPage--;
+            return;
+        }
+        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');
+        const listId = e.target.closest('button').getAttribute('data-list-id');
+        const list = document.getElementById(listId);
+        list.append(fragment);
+        (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
+        this.showMoreDisabled = false;
+    }
+    setShowMoreItemState() {
+        if (!this.showMoreItem) {
+            return;
+        }
+        if (this.currentPage < this.totalPages) {
+            this.showMoreItem.hidden = false;
+        }
+        else {
+            this.showMoreItem.hidden = 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');
+    if (navItem.children.length > 0) {
+        navItem.children[0].setAttribute('aria-current', 'page');
+    }
+    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');
+    if (navItem.children.length > 0) {
+        navItem.children[0].removeAttribute('aria-current');
+    }
+    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([
+    targets
+], NavListElement.prototype, "items", void 0);
+__decorate([
+    target
+], NavListElement.prototype, "showMoreItem", void 0);
+__decorate([
+    targets
+], NavListElement.prototype, "focusMarkers", void 0);
+NavListElement = __decorate([
+    controller
+], NavListElement);
+export { NavListElement };