primer_view_components 0.0.123 → 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,
@@ -191,8 +193,10 @@ module Primer
           @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
             )

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

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

@@ -28,10 +28,10 @@ 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)
         }

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

@@ -157,6 +157,9 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
     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;

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

@@ -67,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) %>
@@ -76,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) %>

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

@@ -162,6 +162,10 @@ export class NavListElement extends HTMLElement {
   #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) {
+      if (navItem.classList.contains('ActionListItem--hasSubItem')) {
+        continue
+      }
+
       const keys = navItem.getAttribute('data-item-id')?.split(' ') || []
 
       if (keys.includes(itemId)) {

data/app/components/primer/alpha/overlay/body.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      # A `Overlay::Body` is a compositional component, used to render the
+      # Body of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Body < Primer::Component
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(padding: DEFAULT_PADDING, **system_arguments)
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "Overlay-body",
+            PADDING_MAPPINGS[fetch_or_fallback(PADDING_OPTIONS, padding, DEFAULT_PADDING)],
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay/footer.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      DEFAULT_ALIGN_CONTENT = :end
+      ALIGN_CONTENT_MAPPINGS = {
+        :start => "Overlay-footer--alignStart",
+        :center => "Overlay-footer--alignCenter",
+        DEFAULT_ALIGN_CONTENT => "Overlay-footer--alignEnd"
+      }.freeze
+      ALIGN_CONTENT_OPTIONS = ALIGN_CONTENT_MAPPINGS.keys
+
+      # A `Overlay::Footer` is a compositional component, used to render the
+      # Footer of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Footer < Primer::Component
+        # @param show_divider [Boolean] Show a divider between the footer and body.
+        # @param align_content [Symbol] The alginment of contents. <%= one_of(Primer::Alpha::Overlay::ALIGN_CONTENT_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(
+          show_divider: false,
+          align_content: DEFAULT_ALIGN_CONTENT,
+          **system_arguments
+        )
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "Overlay-footer",
+            ALIGN_CONTENT_MAPPINGS[fetch_or_fallback(ALIGN_CONTENT_OPTIONS, align_content, DEFAULT_ALIGN_CONTENT)],
+            { "Overlay-footer--divided": show_divider },
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay/header.html.erb

@@ -0,0 +1,15 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <div class="Overlay-headerContentWrap">
+    <div class="Overlay-titleWrap">
+      <h1 class="Overlay-title <% if @visually_hide_title || content.present? %>sr-only<% end %>"><%= @title %></h1>
+      <% if content.present? %>
+        <%= content %>
+      <% elsif @subtitle.present? %>
+        <h2 id="<%= @id %>-description" class="Overlay-description"><%= @subtitle %></h2>
+      <% end %>
+    </div>
+    <div class="Overlay-actionWrap">
+      <%= render Primer::Beta::CloseButton.new(classes: "Overlay-closeButton", "popoverhidetarget": @id) %>
+    </div>
+  </div>
+<% end %>

data/app/components/primer/alpha/overlay/header.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      # A `Overlay::Header` is a compositional component, used to render the
+      # Header of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Header < Primer::Component
+        DEFAULT_SIZE = :medium
+        SIZE_MAPPINGS = {
+          DEFAULT_SIZE => nil,
+          :large => "Overlay-header--large"
+        }.freeze
+        SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+        # @param title [String] Describes the content of the Overlay.
+        # @param subtitle [String] Provides dditional context for the Overlay, also setting the `aria-describedby` attribute.
+        # @param size [Symbol] The size of the Header. <%= one_of(Primer::Alpha::Overlay::Header::SIZE_OPTIONS) %>
+        # @param divider [Boolean] Show a divider between the header and body.
+        # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(
+          id:,
+          title:,
+          subtitle: nil,
+          size: DEFAULT_SIZE,
+          divider: false,
+          visually_hide_title: false,
+          **system_arguments
+        )
+          @id = id
+          @title = title
+          @subtitle = subtitle
+          @visually_hide_title = visually_hide_title
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :header
+          @system_arguments[:classes] = class_names(
+            "Overlay-header",
+            { "Overlay-header--divided": divider },
+            SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
+            system_arguments[:classes]
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay.css

@@ -0,0 +1 @@
+.Overlay[popover]{border-width:0;padding:0;position:absolute}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}

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

@@ -0,0 +1,11 @@
+{
+  "name": "alpha/overlay",
+  "selectors": [
+    ".Overlay[popover]",
+    ".Overlay[popover]:not(:open)",
+    "anchored-position"
+  ],
+  "classes": [
+    "Overlay"
+  ]
+}

data/app/components/primer/alpha/overlay.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,kBACE,cAAe,CACf,SAAU,CACV,iBACF,CAGA,6BACE,YACF,CAEA,kBACE,aACF","file":"overlay.css","sourcesContent":[".Overlay[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n}\n\n/* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n.Overlay[popover]:not(:open) {\n  display: none;\n}\n\nanchored-position {\n  display: block;\n}\n"]}

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

@@ -0,0 +1,11 @@
+<%= show_button %>
+
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= header %>
+  <% if content.present? %>
+    <%= content %>
+  <% else %>
+    <%= body %>
+    <%= footer %>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/overlay.pcss

@@ -0,0 +1,14 @@
+.Overlay[popover] {
+  border-width: 0;
+  padding: 0;
+  position: absolute;
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+.Overlay[popover]:not(:open) {
+  display: none;
+}
+
+anchored-position {
+  display: block;
+}