openproject-primer_view_components 0.10.0 → 0.12.1

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

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    class NavList
+      # A logical grouping of navigation links with an optional heading.
+      #
+      # See <%= link_to_component(Primer::Beta::NavList) %> for usage examples.
+      class Group < Primer::Alpha::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::Beta::NavList::Item` class.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::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::Beta::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::Beta::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/beta/nav_list/heading.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    class NavList
+      # The heading placed above a `NavList`'s items.
+      #
+      # See <%= link_to_component(Primer::Beta::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/beta/nav_list/item.rb

@@ -0,0 +1,156 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    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::Beta::NavList
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,212 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `NavList` provides a simple way to render side navigation, i.e. navigation
+    # that appears to the left or right side of some main content. Each group in a
+    # nav list is a list of links.
+    #
+    # Nav list groups can contain sub items. Rather than navigating to a URL, groups
+    # with sub items expand and collapse on click. To indicate this functionality, the
+    # group will automatically render with a trailing chevron icon that changes direction
+    # when the group expands and collapses.
+    #
+    # Nav list items appear visually active when selected. Each nav item must have one
+    # or more ID values that determine which item will appear selected. Use the
+    # `selected_item_id` argument to select the appropriate item.
+    class NavList < Primer::Component
+      status :beta
+      audited_at "2023-07-10"
+
+      # @private
+      def self.custom_element_name
+        "nav-list"
+      end
+
+      # The heading for the list at large. Accepts the arguments accepted by <%= link_to_component(Primer::Beta::NavList::Heading) %>.
+      #
+      renders_one :heading, Primer::Beta::NavList::Heading
+
+      # @!parse
+      #   # Adds an item to the list.
+      #   #
+      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Beta::NavList::Item) %>
+      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Beta::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      #   def with_item(component_klass: Primer::Beta::NavList::Item, **system_arguments, &block)
+      #   end
+
+      # @!parse
+      #   # Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.
+      #   #
+      #   # @param src [String] The source url of the avatar image.
+      #   # @param username [String] The username associated with the avatar.
+      #   # @param full_name [String] Optional. The user's full name.
+      #   # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Primer::Alpha::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
+      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Beta::NavList::Item) %>
+      #   # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>
+      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Beta::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      #   def with_avatar_item(src:, username:, full_name: nil, full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, component_klass: Primer::Beta::NavList::Item, avatar_arguments: {}, **system_arguments, &block)
+      #   end
+
+      # @!parse
+      #   # Adds a group to the list. A group is a list of links and a (required) heading.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::NavList::Group) %>.
+      #   def with_group(**system_arguments, &block)
+      #   end
+
+      # @!parse
+      #   # Adds a divider to the list. Dividers visually separate items and groups.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::NavList::Divider) %>.
+      #   def with_divider(**system_arguments, &block)
+      #   end
+
+      # Items. Items can be individual items, dividers, or groups. See the documentation for `#with_item`, `#with_divider`, and `#with_group` respectively for more information.
+      #
+      renders_many :items, types: {
+        item: {
+          renders: lambda { |**system_arguments, &block|
+            build_item(**system_arguments, &block)
+          },
+
+          as: :item
+        },
+
+        avatar_item: {
+          renders: lambda { |**system_arguments|
+            build_avatar_item(**system_arguments)
+          },
+
+          as: :avatar_item
+        },
+
+        divider: {
+          renders: Primer::Beta::NavList::Divider,
+          as: :divider
+        },
+
+        group: {
+          renders: lambda { |**system_arguments, &block|
+            Primer::Beta::NavList::Group.new(
+              selected_item_id: @selected_item_id,
+              **system_arguments,
+              &block
+            )
+          },
+
+          as: :group
+        }
+      }
+
+      # @param selected_item_id [Symbol] The ID of the currently selected item. The default is `nil`, meaning no item is selected.
+      # @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
+      end
+
+      # Builds a new item but does not add it to the list. Use this method
+      # instead of the `#with_item` slot if you need to render an item outside
+      # the context of a list, eg. if rendering additional items to append to
+      # an existing list, perhaps via a separate HTTP request.
+      #
+      # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Beta::NavList::Item) %>
+      # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Beta::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      def build_item(component_klass: Primer::Beta::NavList::Item, **system_arguments, &block)
+        component_klass.new(
+          list: top_level_group,
+          selected_item_id: @selected_item_id,
+          **system_arguments,
+          &block
+        )
+      end
+
+      # Builds a new avatar item but does not add it to the list. Avatar items
+      # are a convenient way to accessibly add an item with a leading avatar
+      # image. Use this method instead of the `#with_avatar_item` slot if you
+      # need to render an avatar item outside the context of a list, eg. if
+      # rendering additional items to append to an existing list, perhaps via
+      # a separate HTTP request.
+      #
+      # @param src [String] The source url of the avatar image.
+      # @param username [String] The username associated with the avatar.
+      # @param full_name [String] Optional. The user's full name.
+      # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Primer::Alpha::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
+      # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Beta::NavList::Item) %>
+      # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>
+      # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Beta::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      def build_avatar_item(src:, username:, full_name: nil, full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, component_klass: Primer::Beta::NavList::Item, avatar_arguments: {}, **system_arguments)
+        component_klass.new(
+          list: top_level_group,
+          selected_item_id: @selected_item_id,
+          label: username,
+          description_scheme: full_name_scheme,
+          **system_arguments
+        ).tap do |item|
+          item.with_leading_visual_raw_content do
+            # no alt text necessary
+            item.render(Primer::Beta::Avatar.new(src: src, **avatar_arguments, role: :presentation, size: 16))
+          end
+
+          item.with_description_content(full_name) if full_name
+        end
+      end
+
+      private
+
+      def before_render
+        if heading?
+          raise ArgumentError, "Please don't set an aria-label if a heading is provided" if aria(:label, @system_arguments)
+
+          @system_arguments[:aria] = merge_aria(
+            @system_arguments,
+            { aria: { labelledby: heading.id } }
+          )
+        else
+          raise ArgumentError, "When no heading is provided, an aria-label must be given" unless aria(:label, @system_arguments)
+        end
+      end
+
+      # Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a <ul>
+      def render_outer_list?
+        items.any? { |item| !group?(item) }
+      end
+
+      def render_divider_between?(item1, item2)
+        return false if either_is_divider?(item1, item2)
+
+        both_are_groups?(item1, item2) || heterogeneous?(item1, item2)
+      end
+
+      def both_are_groups?(item1, item2)
+        group?(item1) && group?(item2)
+      end
+
+      def heterogeneous?(item1, item2)
+        kind(item1) != kind(item2)
+      end
+
+      def either_is_divider?(item1, item2)
+        divider?(item1) || divider?(item2)
+      end
+
+      def group?(item)
+        kind(item) == :group
+      end
+
+      def divider?(item)
+        kind(item) == :divider
+      end
+
+      def kind(item)
+        item.respond_to?(:kind) ? item.kind : :item
+      end
+
+      def top_level_group
+        # dummy group for the list: argument in the item slot above
+        @top_level_group ||= Primer::Beta::NavList::Group.new(selected_item_id: @selected_item_id)
+      end
+    end
+  end
+end

data/app/components/primer/focus_group.js

@@ -11,7 +11,8 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _FocusGroupElement_instances, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
 import '@oddbird/popover-polyfill';
-const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
+const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
+const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
 const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
 const printable = /^\S$/;
 export default class FocusGroupElement extends HTMLElement {

data/app/components/primer/focus_group.ts

@@ -1,6 +1,7 @@
 import '@oddbird/popover-polyfill'
 
-const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
+const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
+const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ')
 
 const getMnemonicFor = (item: Element) => item.textContent?.trim()[0].toLowerCase()
 

data/app/components/primer/open_project/border_grid/cell.html.erb

@@ -0,0 +1,3 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= content %>
+<% end %>

data/app/components/primer/open_project/border_grid/cell.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class BorderGrid
+      # A single cell inside the BorderGrid
+      # A cell can contain for example an action list or a status badge
+      class Cell < Primer::Component
+        status :open_project
+
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(**system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = "div"
+
+          @system_arguments[:classes] =
+            class_names(
+              @system_arguments[:classes],
+              "BorderGrid-cell"
+            )
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/border_grid.css

@@ -0,0 +1 @@
+.BorderGrid{border-collapse:collapse;border-style:hidden;display:table;margin-bottom:-16px;margin-top:-16px;table-layout:fixed;width:100%}.BorderGrid .BorderGrid-cell{padding-bottom:16px;padding-top:16px}.BorderGrid--spacious{margin-bottom:-24px;margin-top:-24px}.BorderGrid--spacious .BorderGrid-cell{padding-bottom:24px;padding-top:24px}.BorderGrid-row{display:table-row}.BorderGrid-cell{border:1px solid var(--borderColor-muted,var(--color-border-muted));display:table-cell}

data/app/components/primer/open_project/border_grid.css.json

@@ -0,0 +1,11 @@
+{
+  "name": "open_project/border_grid",
+  "selectors": [
+    ".BorderGrid",
+    ".BorderGrid .BorderGrid-cell",
+    ".BorderGrid--spacious",
+    ".BorderGrid--spacious .BorderGrid-cell",
+    ".BorderGrid-row",
+    ".BorderGrid-cell"
+  ]
+}

data/app/components/primer/open_project/border_grid.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["border_grid.pcss"],"names":[],"mappings":"AAEA,YAMI,wBAAyB,CACzB,mBAAmB,CANnB,aAAc,CAGd,mBAAoB,CADpB,gBAAiB,CAEjB,kBAAmB,CAHnB,UAMJ,CAEA,6BAEI,mBAAmB,CADnB,gBAEJ,CAEA,sBAEI,mBAAmB,CADnB,gBAEJ,CAEA,uCAEI,mBAAmB,CADnB,gBAEJ,CAEA,gBACI,iBACJ,CAEA,iBAEI,mEAAyC,CADzC,kBAEJ","file":"border_grid.css","sourcesContent":["/* CSS for BorderGrid  */\n\n.BorderGrid {\n    display: table;\n    width: 100%;\n    margin-top: -16px;\n    margin-bottom: -16px;\n    table-layout: fixed;\n    border-collapse: collapse;\n    border-style: hidden\n}\n\n.BorderGrid .BorderGrid-cell {\n    padding-top: 16px;\n    padding-bottom: 16px\n}\n\n.BorderGrid--spacious {\n    margin-top: -24px;\n    margin-bottom: -24px\n}\n\n.BorderGrid--spacious .BorderGrid-cell {\n    padding-top: 24px;\n    padding-bottom: 24px\n}\n\n.BorderGrid-row {\n    display: table-row\n}\n\n.BorderGrid-cell {\n    display: table-cell;\n    border: 1px solid var(--borderColor-muted)\n}\n"]}

data/app/components/primer/open_project/border_grid.html.erb

@@ -0,0 +1,7 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% rows.each do |row| %>
+    <%= render Primer::BaseComponent.new(tag: :div, classes: "BorderGrid-row") do %>
+      <%= row %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/border_grid.pcss

@@ -0,0 +1,35 @@
+/* CSS for BorderGrid  */
+
+.BorderGrid {
+    display: table;
+    width: 100%;
+    margin-top: -16px;
+    margin-bottom: -16px;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-style: hidden
+}
+
+.BorderGrid .BorderGrid-cell {
+    padding-top: 16px;
+    padding-bottom: 16px
+}
+
+.BorderGrid--spacious {
+    margin-top: -24px;
+    margin-bottom: -24px
+}
+
+.BorderGrid--spacious .BorderGrid-cell {
+    padding-top: 24px;
+    padding-bottom: 24px
+}
+
+.BorderGrid-row {
+    display: table-row
+}
+
+.BorderGrid-cell {
+    display: table-cell;
+    border: 1px solid var(--borderColor-muted)
+}

data/app/components/primer/open_project/border_grid.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A set of blocks that are shown below each other with separator lines in between
+    class BorderGrid < Primer::Component
+      status :open_project
+
+      # Use to render a block inside the grid
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :rows, lambda { |**system_arguments|
+        Primer::OpenProject::BorderGrid::Cell.new(**system_arguments)
+      }
+
+      # @param spacious [Boolean] Whether to add margin to the bottom of the component.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(spacious: false, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "div"
+        @spacious = spacious
+
+        @system_arguments[:classes] =
+          class_names(
+            @system_arguments[:classes],
+            "BorderGrid",
+            "BorderGrid--spacious" => @spacious
+          )
+      end
+
+      def render?
+        rows.any?
+      end
+    end
+  end
+end

data/app/components/primer/open_project/drag_handle.css

@@ -0,0 +1 @@
+.DragHandle{color:var(--fgColor-muted,var(--color-fg-muted));cursor:move}

data/app/components/primer/open_project/drag_handle.css.json

@@ -0,0 +1,6 @@
+{
+  "name": "open_project/drag_handle",
+  "selectors": [
+    ".DragHandle"
+  ]
+}

data/app/components/primer/open_project/drag_handle.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["drag_handle.pcss"],"names":[],"mappings":"AAEA,YAEI,gDAA2B,CAD3B,WAEJ","file":"drag_handle.css","sourcesContent":["/* CSS for DragHandle  */\n\n.DragHandle {\n    cursor: move;\n    color: var(--fgColor-muted);\n}\n"]}