primer_view_components 0.14.0 → 0.15.0

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

@@ -25,8 +25,8 @@ module Primer
           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][:target] = "nav-list-group.showMoreItem"
+          system_arguments[:data][:action] = "click:nav-list-group#showMore"
           system_arguments[:data][:current_page] = "1"
           system_arguments[:data][:total_pages] = pages.to_s
           system_arguments[:label_arguments] = {

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

@@ -1,15 +1,6 @@
 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;
@@ -18,8 +9,6 @@ export declare class NavListElement extends HTMLElement {
     itemIsExpanded(item: HTMLElement | null): boolean;
     handleItemWithSubItemClick(e: Event): void;
     handleItemWithSubItemKeydown(e: KeyboardEvent): void;
-    private showMore;
-    private setShowMoreItemState;
 }
 declare global {
     interface Window {

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

@@ -9,41 +9,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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;
+var _NavListElement_instances, _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';
+import { controller, 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;
@@ -126,58 +99,8 @@ let NavListElement = class NavListElement extends HTMLElement {
         }
         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
@@ -243,12 +166,6 @@ _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem
 __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);

data/app/components/primer/beta/nav_list.ts

@@ -1,44 +1,9 @@
 /* eslint-disable custom-elements/expose-class-on-global */
-import {controller, target, targets} from '@github/catalyst'
+import {controller, targets} from '@github/catalyst'
 
 @controller
 export class NavListElement extends HTMLElement {
   @targets items: HTMLElement[]
-  @target showMoreItem: HTMLElement
-  @targets focusMarkers: HTMLElement[]
-
-  connectedCallback(): void {
-    this.setShowMoreItemState()
-  }
-
-  get showMoreDisabled(): boolean {
-    return this.showMoreItem.hasAttribute('aria-disabled')
-  }
-
-  set showMoreDisabled(value: boolean) {
-    if (value) {
-      this.showMoreItem.setAttribute('aria-disabled', 'true')
-    } else {
-      this.showMoreItem.removeAttribute('aria-disabled')
-    }
-    this.showMoreItem.classList.toggle('disabled', value)
-  }
-
-  set currentPage(value: number) {
-    this.showMoreItem.setAttribute('data-current-page', value.toString())
-  }
-
-  get currentPage(): number {
-    return parseInt(this.showMoreItem.getAttribute('data-current-page') as string) || 1
-  }
-
-  get totalPages(): number {
-    return parseInt(this.showMoreItem.getAttribute('data-total-pages') as string) || 1
-  }
-
-  get paginationSrc(): string {
-    return this.showMoreItem.getAttribute('src') || ''
-  }
 
   selectItemById(itemId: string | null): boolean {
     if (!itemId) return false
@@ -134,55 +99,6 @@ export class NavListElement extends HTMLElement {
     e.stopPropagation()
   }
 
-  private async showMore(e: Event) {
-    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 = this.#parseHTML(document, html)
-    fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list.focusMarkers')
-    const listId = (e.target as HTMLElement).closest('button')!.getAttribute('data-list-id')!
-    const list = document.getElementById(listId)!
-    list.append(fragment)
-    this.focusMarkers.pop()?.focus()
-    this.showMoreDisabled = false
-  }
-
-  private setShowMoreItemState() {
-    if (!this.showMoreItem) {
-      return
-    }
-
-    if (this.currentPage < this.totalPages) {
-      this.showMoreItem.hidden = false
-    } else {
-      this.showMoreItem.hidden = true
-    }
-  }
-
-  #parseHTML(document: Document, html: string): DocumentFragment {
-    const template = document.createElement('template')
-    // eslint-disable-next-line github/no-inner-html
-    template.innerHTML = html
-    return document.importNode(template.content, true)
-  }
-
   #findSelectedNavItemById(itemId: string): HTMLElement | null {
     // First we compare the selected link to data-item-id for each nav item
     for (const navItem of this.items) {

data/app/components/primer/beta/nav_list_group_element.d.ts

@@ -0,0 +1,19 @@
+export declare class NavListGroupElement extends HTMLElement {
+    #private;
+    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;
+    private showMore;
+    private setShowMoreItemState;
+}
+declare global {
+    interface Window {
+        NavListGroupElement: typeof NavListGroupElement;
+    }
+}

data/app/components/primer/beta/nav_list_group_element.js

@@ -0,0 +1,108 @@
+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 _NavListGroupElement_instances, _NavListGroupElement_parseHTML;
+import { controller, target, targets } from '@github/catalyst';
+let NavListGroupElement = class NavListGroupElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _NavListGroupElement_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') || '';
+    }
+    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, _NavListGroupElement_instances, "m", _NavListGroupElement_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-group.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;
+        }
+    }
+};
+_NavListGroupElement_instances = new WeakSet();
+_NavListGroupElement_parseHTML = function _NavListGroupElement_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);
+};
+__decorate([
+    target
+], NavListGroupElement.prototype, "showMoreItem", void 0);
+__decorate([
+    targets
+], NavListGroupElement.prototype, "focusMarkers", void 0);
+NavListGroupElement = __decorate([
+    controller
+], NavListGroupElement);
+export { NavListGroupElement };
+window.NavListGroupElement = NavListGroupElement;

data/app/components/primer/beta/nav_list_group_element.ts

@@ -0,0 +1,97 @@
+import {controller, target, targets} from '@github/catalyst'
+
+@controller
+export class NavListGroupElement extends HTMLElement {
+  @target showMoreItem: HTMLElement
+  @targets focusMarkers: HTMLElement[]
+
+  connectedCallback(): void {
+    this.setShowMoreItemState()
+  }
+
+  get showMoreDisabled(): boolean {
+    return this.showMoreItem.hasAttribute('aria-disabled')
+  }
+
+  set showMoreDisabled(value: boolean) {
+    if (value) {
+      this.showMoreItem.setAttribute('aria-disabled', 'true')
+    } else {
+      this.showMoreItem.removeAttribute('aria-disabled')
+    }
+    this.showMoreItem.classList.toggle('disabled', value)
+  }
+
+  set currentPage(value: number) {
+    this.showMoreItem.setAttribute('data-current-page', value.toString())
+  }
+
+  get currentPage(): number {
+    return parseInt(this.showMoreItem.getAttribute('data-current-page') as string) || 1
+  }
+
+  get totalPages(): number {
+    return parseInt(this.showMoreItem.getAttribute('data-total-pages') as string) || 1
+  }
+
+  get paginationSrc(): string {
+    return this.showMoreItem.getAttribute('src') || ''
+  }
+
+  private async showMore(e: Event) {
+    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 = this.#parseHTML(document, html)
+    fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list-group.focusMarkers')
+    const listId = (e.target as HTMLElement).closest('button')!.getAttribute('data-list-id')!
+    const list = document.getElementById(listId)!
+    list.append(fragment)
+    this.focusMarkers.pop()?.focus()
+    this.showMoreDisabled = false
+  }
+
+  private setShowMoreItemState() {
+    if (!this.showMoreItem) {
+      return
+    }
+
+    if (this.currentPage < this.totalPages) {
+      this.showMoreItem.hidden = false
+    } else {
+      this.showMoreItem.hidden = true
+    }
+  }
+
+  #parseHTML(document: Document, html: string): DocumentFragment {
+    const template = document.createElement('template')
+    // eslint-disable-next-line github/no-inner-html
+    template.innerHTML = html
+    return document.importNode(template.content, true)
+  }
+}
+
+declare global {
+  interface Window {
+    NavListGroupElement: typeof NavListGroupElement
+  }
+}
+
+window.NavListGroupElement = NavListGroupElement

data/app/components/primer/beta/relative_time.rb

@@ -52,7 +52,7 @@ module Primer
 
       MONTH_DEFAULT = nil
       MONTH_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        MONTH_DEFAULT => nil,
         :numeric => "numeric",
         :two_digit => "2-digit",
         :short => "short",
@@ -63,7 +63,7 @@ module Primer
 
       YEAR_DEFAULT = nil
       YEAR_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        YEAR_DEFAULT => nil,
         :numeric => "numeric",
         :two_digit => "2-digit"
       }.freeze
@@ -71,7 +71,7 @@ module Primer
 
       TIMEZONENAME_DEFAULT = nil
       TIMEZONE_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        TIMEZONENAME_DEFAULT => nil,
         :long => "long",
         :short => "short",
         :short_offset => "shortOffset",
@@ -131,7 +131,7 @@ module Primer
         @system_arguments[:hour] = fetch_or_fallback(HOUR_OPTIONS, hour, HOUR_DEFAULT) if hour.present?
         @system_arguments[:weekday] = fetch_or_fallback(WEEKDAY_OPTIONS, weekday, WEEKDAY_DEFAULT) if weekday.present?
         @system_arguments[:day] = fetch_or_fallback(DAY_OPTIONS, day, DAY_DEFAULT) if day.present?
-        @system_arguments[:month] = fetch_or_fallback(MONTH_DEFAULT, month, MONTH_DEFAULT) if month.present?
+        @system_arguments[:month] = fetch_or_fallback(MONTH_OPTIONS, month, MONTH_DEFAULT) if month.present?
         @system_arguments[:year] = fetch_or_fallback(YEAR_OPTIONS, year, YEAR_DEFAULT) if year.present?
         @system_arguments[:"time-zone-name"] = fetch_or_fallback(TIMEZONENAME_OPTIONS, time_zone_name, TIMEZONENAME_DEFAULT) if time_zone_name.present?
         @system_arguments[:threshold] = threshold if threshold.present?

data/app/components/primer/component.rb

@@ -16,6 +16,9 @@ module Primer
       include ViewComponent::PolymorphicSlots
     end
 
+    include ExperimentalRenderHelpers
+    include ExperimentalSlotHelpers
+
     include AttributesHelper
     include ClassNameHelper
     include FetchOrFallbackHelper

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

@@ -6,6 +6,7 @@ import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
+import './beta/nav_list_group_element';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.js

@@ -6,6 +6,7 @@ import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
+import './beta/nav_list_group_element';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.ts

@@ -6,6 +6,7 @@ import './focus_group'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './beta/nav_list'
+import './beta/nav_list_group_element'
 import './alpha/segmented_control'
 import './alpha/toggle_switch'
 import './alpha/tool_tip'

data/app/lib/primer/experimental_render_helpers.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module ExperimentalRenderHelpers
+    def self.included(base)
+      base.include(InstanceMethods)
+    end
+
+    # :nodoc:
+    module InstanceMethods
+      def evaluate_block(*args, **kwargs, &block)
+        # Prevent double renders by using the capture method on the component
+        # that originally received the block.
+        #
+        # Handle blocks that originate from C code such as `&:method` by checking
+        # source_location. Such blocks don't allow access to their receiver.
+        return unless block
+
+        return yield(*args, **kwargs) if block&.source_location.nil?
+
+        block_context = block.binding.receiver
+
+        if block_context.class < ActionView::Base
+          block_context.capture(*args, &block)
+        else
+          capture(*args, &block)
+        end
+      end
+    end
+  end
+end

data/app/lib/primer/experimental_slot_helpers.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module ExperimentalSlotHelpers
+    def self.included(base)
+      base.extend(ClassMethods)
+    end
+
+    # :nodoc:
+    module ClassMethods
+      def add_polymorphic_slot_type(slot_name:, type:, callable:)
+        slot_def = registered_slots[slot_name]
+        raise "Unknown slot '#{slot_name}'" unless slot_def
+
+        poly_def = define_slot(
+          type,
+          collection: slot_def[:collection],
+          callable: callable
+        )
+
+        registered_slots[slot_name][:renderable_hash][type] = poly_def
+
+        define_method(:"with_#{type}") do |**system_arguments, &block|
+          set_slot(slot_name, poly_def, **system_arguments, &block)
+        end
+      end
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 14
+      MINOR = 15
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -218,8 +218,8 @@ module Primer
           path, <<~ERB
             #{YAML.dump(frontmatter)}
             ---
-            <%= @page.data[:description_md] %>
-            <%= @page.data[:args_md] %>
+            <%= @page.data[:description_md].html_safe %>
+            <%= @page.data[:args_md].html_safe %>
           ERB
         )
       end