primer_view_components 0.43.5 → 0.44.0

data/app/components/primer/alpha/file_tree_view/directory_node.html.erb

@@ -0,0 +1,5 @@
+<% with_leading_visual_icons do |icons| %>
+  <% icons.with_expanded_icon(icon: :"file-directory-open-fill", **@expanded_icon_arguments) %>
+  <% icons.with_collapsed_icon(icon: :"file-directory-fill", **@collapsed_icon_arguments) %>
+<% end %>
+<%= render_parent %>

data/app/components/primer/alpha/file_tree_view/directory_node.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class FileTreeView
+      class DirectoryNode < TreeView::SubTreeNode
+        def initialize(icon_arguments: nil, expanded_icon_arguments: nil, collapsed_icon_arguments: nil, **system_arguments)
+          @expanded_icon_arguments = expanded_icon_arguments || icon_arguments || {}
+          @collapsed_icon_arguments = collapsed_icon_arguments || icon_arguments || {}
+
+          super(**system_arguments)
+        end
+
+        def with_file(**system_arguments, &block)
+          with_leaf(**system_arguments, component_klass: FileNode, &block)
+        end
+
+        def with_directory(**system_arguments, &block)
+          with_sub_tree(**system_arguments, component_klass: DirectoryNode, &block)
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/file_tree_view/file_node.html.erb

@@ -0,0 +1,2 @@
+<% with_leading_visual_icon(icon: :file, **@icon_arguments) %>
+<%= render_parent %>

data/app/components/primer/alpha/file_tree_view/file_node.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class FileTreeView
+      class FileNode < TreeView::LeafNode
+        def initialize(icon_arguments: {}, **system_arguments)
+          @icon_arguments = icon_arguments
+          super(**system_arguments)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class FileTreeView < TreeView
+      def with_file(**system_arguments, &block)
+        with_leaf(**system_arguments, component_klass: FileNode, &block)
+      end
+
+      def with_directory(**system_arguments, &block)
+        with_sub_tree(**system_arguments, component_klass: DirectoryNode, &block)
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+@keyframes shimmer{0%{mask-position:200%}to{mask-position:0}}.SkeletonBox{animation:shimmer;background-color:var(--bgColor-muted);border-radius:var(--borderRadius-small);display:block;height:1rem}@media (prefers-reduced-motion:no-preference){.SkeletonBox{animation:shimmer;animation-duration:1s;animation-iteration-count:infinite;mask-image:linear-gradient(75deg,#000 30%,#000000a6 80%);mask-size:200%}}@media (forced-colors:active){.SkeletonBox{outline:1px solid #0000;outline-offset:-1px}}

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

@@ -0,0 +1,6 @@
+{
+  "name": "alpha/skeleton_box",
+  "selectors": [
+    ".SkeletonBox"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["skeleton_box.pcss"],"names":[],"mappings":"AAAA,mBACE,GACE,kBACF,CAEA,GACE,eACF,CACF,CAEA,aAKE,iBAAkB,CAFlB,qCAAsC,CACtC,uCAAwC,CAHxC,aAAc,CACd,WAiBF,CAZE,8CAPF,aAUI,iBAAkB,CAClB,qBAAsB,CACtB,kCAAmC,CAJnC,wDAAoE,CACpE,cAUJ,CANE,CAEA,8BAfF,aAgBI,uBAA8B,CAC9B,mBAEJ,CADE","file":"skeleton_box.css","sourcesContent":["@keyframes shimmer {\n  from {\n    mask-position: 200%;\n  }\n\n  to {\n    mask-position: 0%;\n  }\n}\n\n.SkeletonBox {\n  display: block;\n  height: 1rem;\n  background-color: var(--bgColor-muted);\n  border-radius: var(--borderRadius-small);\n  animation: shimmer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%);\n    mask-size: 200%;\n    animation: shimmer;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n  }\n\n  @media (forced-colors: active) {\n    outline: 1px solid transparent;\n    outline-offset: -1px;\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,30 @@
+@keyframes shimmer {
+  from {
+    mask-position: 200%;
+  }
+
+  to {
+    mask-position: 0%;
+  }
+}
+
+.SkeletonBox {
+  display: block;
+  height: 1rem;
+  background-color: var(--bgColor-muted);
+  border-radius: var(--borderRadius-small);
+  animation: shimmer;
+
+  @media (prefers-reduced-motion: no-preference) {
+    mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%);
+    mask-size: 200%;
+    animation: shimmer;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+
+  @media (forced-colors: active) {
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+  }
+}

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # A SkeletonBox provides a placeholder for non-text, non-Avatar elements (e.g., hero images)
+    # that are still loading. You can adjust width and height to match the content's dimensions.
+    class SkeletonBox < Primer::Component
+      status :alpha
+
+      # @param height [String] Any valid CSS height.
+      # @param width [String] Any valid CSS width.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(height: nil, width: nil, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        styles = []
+        styles << "width: #{width}" if width
+        styles << "height: #{height}" if height
+
+        @system_arguments[:tag] = :div
+        @system_arguments[:style] = styles.join("; ") if styles.present?
+        @system_arguments[:classes] = class_names(
+          @system_arguments.delete(:classes),
+          "SkeletonBox"
+        )
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tree_view/icon.html.erb

@@ -0,0 +1 @@
+<%= render(Primer::Beta::Octicon.new(**@system_arguments)) %>

data/app/components/primer/alpha/tree_view/icon.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class TreeView
+      # An icon for a `TreeView` node.
+      #
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
+      # not be used directly.
+      class Icon < Primer::Component
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+        def initialize(**system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:focusable] = "false"
+          @system_arguments[:display] = :inline_block
+          @system_arguments[:overflow] = :visible
+          @system_arguments[:style] = "vertical-align: text-bottom;"
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tree_view/icon_pair.html.erb

@@ -0,0 +1,13 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <% if expanded_icon? %>
+    <div data-target="tree-view-icon-pair.expandedIcon" <%= expanded? ? "" : "hidden" %>>
+      <%= expanded_icon %>
+    </div>
+  <% end %>
+
+  <% if collapsed_icon? %>
+    <div data-target="tree-view-icon-pair.collapsedIcon" <%= expanded? ? "hidden" : "" %>>
+      <%= collapsed_icon %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/tree_view/icon_pair.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class TreeView
+      # A pair of icons for a `TreeView` sub-tree that displays distinct icons when the sub-tree is
+      # expanded and collapsed.
+      #
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
+      # not be used directly.
+      class IconPair < Primer::Component
+        # The expanded icon.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Icon) %>.
+        renders_one :expanded_icon, lambda { |**system_arguments|
+          Icon.new(**system_arguments)
+        }
+
+        # The collapsed icon.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Icon) %>.
+        renders_one :collapsed_icon, lambda { |**system_arguments|
+          Icon.new(**system_arguments)
+        }
+
+        # Whether or not this icon is expanded.
+        #
+        # @return [Boolean]
+        attr_reader :expanded
+        alias expanded? expanded
+
+        # @param expanded [Boolean] If true, the expanded icon is shown and the collapsed icon is hidden, etc.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(expanded: false, **system_arguments)
+          @expanded = expanded
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :"tree-view-icon-pair"
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tree_view/leading_action.html.erb

@@ -0,0 +1,3 @@
+<div class="TreeViewItemLeadingAction" aria-hidden="true">
+  <%= render(@action) %>
+</div>

data/app/components/primer/alpha/tree_view/leading_action.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class TreeView
+      # The leading action for `TreeView` nodes.
+      #
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
+      # not be used directly.
+      class LeadingAction < Primer::Component
+        # @param action [ViewComponent::Base] A component or other renderable to use as the action button etc.
+        def initialize(action:)
+          @action = action
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tree_view/leaf_node.html.erb

@@ -0,0 +1,18 @@
+<%= render(@node) do |node| %>
+  <% if leading_action? %>
+    <% node.with_leading_action do %>
+      <%= leading_action %>
+    <% end %>
+  <% end %>
+  <% if leading_visual? %>
+    <% node.with_leading_visual do %>
+      <%= leading_visual %>
+    <% end %>
+  <% end %>
+  <% if trailing_visual? %>
+    <% node.with_trailing_visual do %>
+      <%= trailing_visual %>
+    <% end %>
+  <% end %>
+  <% node.with_text_content { @label } %>
+<% end %>

data/app/components/primer/alpha/tree_view/leaf_node.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class TreeView
+      # A `TreeView` leaf node.
+      #
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
+      # not be used directly.
+      class LeafNode < Primer::Component
+        # @!parse
+        #   # Adds a leading visual icon rendered to the left of the node's label.
+        #   #
+        #   # @param label [String] A label describing the visual, displayed only to screen readers.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Icon) %>.
+        #   def with_leading_visual_icon(label: nil, **system_arguments, &block)
+        #   end
+
+        renders_one :leading_visual, types: {
+          icon: lambda { |label: nil, **system_arguments|
+            merge_system_arguments!(
+              aria: { describedby: leading_visual_label_id }
+            )
+
+            Visual.new(
+              id: leading_visual_label_id,
+              visual: Icon.new(**system_arguments),
+              label: label
+            )
+          }
+        }
+
+        # @!parse
+        #   # Adds a leading action rendered to the left of the node's label and any leading visuals or checkboxes.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::IconButton) %>.
+        #   def with_leading_action_button(**system_arguments, &block)
+        #   end
+
+        renders_one :leading_action, types: {
+          button: lambda { |**system_arguments|
+            LeadingAction.new(
+              action: Primer::Beta::IconButton.new(
+                scheme: :invisible,
+                **system_arguments
+              )
+            )
+          }
+        }
+
+        # @!parse
+        #   # Adds a trailing visual icon rendered to the right of the node's label.
+        #   #
+        #   # @param label [String] A label describing the visual, displayed only to screen readers.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Icon) %>.
+        #   def with_trailing_visual_icon(label: nil, **system_arguments, &block)
+        #   end
+
+        renders_one :trailing_visual, types: {
+          icon: lambda { |label: nil, **system_arguments|
+            Visual.new(
+              id: nil,
+              visual: Icon.new(**system_arguments),
+              label: label
+            )
+          }
+        }
+
+        delegate :current?, :merge_system_arguments!, to: :@node
+
+        # @param label [String] The node's label, i.e. it's textual content.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Node) %>.
+        def initialize(label:, **system_arguments)
+          @label = label
+          @system_arguments = system_arguments
+          @system_arguments[:data] = merge_data(
+            @system_arguments,
+            data: { "node-type": "leaf" }
+          )
+
+          @node = Primer::Alpha::TreeView::Node.new(**@system_arguments)
+        end
+
+        private
+
+        def base_id
+          @base_id ||= self.class.generate_id
+        end
+
+        def leading_visual_label_id
+          @leading_visual_id ||= "#{base_id}-leading-visual-label"
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tree_view/loading_failure_message.html.erb

@@ -0,0 +1,13 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", color: :danger)) %>
+  <span><%= @text %></span>
+  <div></div> <!-- spacer -->
+  <%= render(Primer::Beta::Button.new(
+    size: :small,
+    scheme: :default,
+    style: "justify-self: start",
+    **@retry_button_arguments
+  )) do %>
+    <%= @retry_button_label %>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/tree_view/loading_failure_message.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class TreeView
+      # A `TreeView` loading failure message.
+      #
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
+      # not be used directly.
+      class LoadingFailureMessage < Primer::Component
+        DEFAULT_TEXT = "Something went wrong"
+        DEFAULT_RETRY_BUTTON_LABEL = "Retry"
+
+        # @param text [String] The failure message to display.
+        # @param retry_button_label [String] The text shown on the retry button.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(text: DEFAULT_TEXT, retry_button_label: DEFAULT_RETRY_BUTTON_LABEL, **system_arguments)
+          @text = text
+          @retry_button_label = retry_button_label
+          @retry_button_arguments = system_arguments.delete(:retry_button_arguments)
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            @system_arguments.delete(:classes),
+            "TreeViewFailureMessage"
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tree_view/node.html.erb

@@ -0,0 +1,32 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <div class="TreeViewItemContainer" style="--level: <%= level %>;">
+    <div style="grid-area: spacer; display: flex;">
+      <div style="width: 100%; display: flex;">
+        <% (0...(level - 1)).each do %>
+          <div class="TreeViewItemLevelLine"></div>
+        <% end %>
+      </div>
+    </div>
+    <% if toggle? %>
+      <%= toggle %>
+    <% end %>
+    <% if leading_action? %>
+      <%= leading_action %>
+    <% end %>
+    <%= render(Primer::BaseComponent.new(**@content_arguments)) do %>
+      <% if @select_variant == :multiple %>
+        <div aria-hidden="true" class="TreeViewItemCheckbox" tabindex="-1">
+          <div class="FormControl-checkbox"></div>
+        </div>
+      <% end %>
+      <% if leading_visual? %>
+        <%= leading_visual %>
+      <% end %>
+      <span class="TreeViewItemContentText"><%= text_content %></span>
+      <% if trailing_visual? %>
+        <%= trailing_visual %>
+      <% end %>
+    <% end %>
+  </div>
+  <%= content %>
+<% end %>

data/app/components/primer/alpha/tree_view/node.rb

@@ -0,0 +1,194 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class TreeView
+      # A generic `TreeView` node.
+      #
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
+      # not be used directly.
+      class Node < Primer::Component
+        DEFAULT_NODE_VARIANT = Primer::Alpha::TreeView::DEFAULT_NODE_VARIANT
+        NODE_VARIANT_TAG_MAP = { DEFAULT_NODE_VARIANT => :div, :button => :button, :anchor => :a }.freeze
+        NODE_VARIANT_TAG_OPTIONS = NODE_VARIANT_TAG_MAP.keys.freeze
+
+        # Generic leading action slot
+        renders_one :leading_action
+
+        # Generic leading visual slot
+        renders_one :leading_visual
+
+        # Generic trailing visual slot
+        renders_one :trailing_visual
+
+        # Generic toggle button slot
+        renders_one :toggle
+
+        # Generic text content slot (for node's label)
+        renders_one :text_content
+
+        # Wether or not this node is the current node.
+        #
+        # @return [Boolean]
+        attr_reader :current
+        alias current? current
+
+        # This node's checked state.
+        #
+        # @return [String]
+        attr_reader :checked
+
+        # This node's select variant (i.e. check box variant).
+        #
+        # @return [Symbol]
+        attr_reader :select_variant
+
+        # This node's variant, eg. `:button`, `:div`, etc.
+        #
+        # @return [Symbol]
+        attr_reader :node_variant
+
+        # Whether or not this node is disabled, i.e. cannot be activated.
+        #
+        # @return [Boolean]
+        attr_reader :disabled
+        alias disabled? disabled
+
+        DEFAULT_SELECT_VARIANT = :none
+        SELECT_VARIANT_OPTIONS = [
+          :multiple,
+          DEFAULT_SELECT_VARIANT
+        ].freeze
+
+        DEFAULT_CHECKED_STATE = false
+        CHECKED_STATES = [
+          DEFAULT_CHECKED_STATE,
+          true,
+          "mixed"
+        ]
+
+        # @param path [Array<String>] The node's "path," i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path.
+        # @param node_variant [Symbol] The node variant to use for the node's content, i.e. the `:button` or `:div`. <%= one_of(Primer::Alpha::TreeView::NODE_VARIANT_OPTIONS) %>
+        # @param href [String] The URL to use as the `href` attribute for this node. If set to a truthy value, the `tag:` parameter is ignored and assumed to be `:a`.
+        # @param current [Boolean] Whether or not this node is the current node. The current node is styled differently than regular nodes and is the first element that receives focus when tabbing to the `TreeView` component.
+        # @param select_variant [Symbol] Controls the type of checkbox that appears. <%= one_of(Primer::Alpha::TreeView::Node::SELECT_VARIANT_OPTIONS) %>
+        # @param checked [Boolean | String] The checked state of the node's checkbox. <%= one_of(Primer::Alpha::TreeView::Node::CHECKED_STATES) %>
+        # @param disabled [Boolean] Whether or not the node can be activated. Passing `false` here will cause the node to appear visually disabled but it is still keyboard-focusable.
+        # @param value [String] If this node is checked, this value will be sent to the server on form submission.
+        # @param content_arguments [Hash] Arguments attached to the node's content, i.e the `<button>` or `<a>` element. <%= link_to_system_arguments_docs %>
+        def initialize(
+          path:,
+          node_variant:,
+          href: nil,
+          current: false,
+          select_variant: DEFAULT_SELECT_VARIANT,
+          checked: DEFAULT_CHECKED_STATE,
+          disabled: false,
+          value: nil,
+          **content_arguments
+        )
+          @system_arguments = {
+            tag: :li,
+            role: :none,
+            classes: "TreeViewItem"
+          }
+
+          @content_arguments = content_arguments
+
+          @path = path
+          @current = current
+          @select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
+          @checked = fetch_or_fallback(CHECKED_STATES, checked, DEFAULT_CHECKED_STATE)
+          @disabled = disabled
+          @node_variant = fetch_or_fallback(NODE_VARIANT_TAG_OPTIONS, node_variant, DEFAULT_NODE_VARIANT)
+
+          @content_arguments[:tag] = NODE_VARIANT_TAG_MAP[@node_variant]
+          @content_arguments[:href] = href if href
+          @content_arguments[:id] = content_id
+          @content_arguments[:role] = :treeitem
+          @content_arguments[:tabindex] = current? ? 0 : -1
+          @content_arguments[:classes] = class_names(
+            @content_arguments.delete(:classes),
+            "TreeViewItemContent"
+          )
+
+          @content_arguments[:aria] = merge_aria(
+            @content_arguments, {
+            aria: {
+              level: level,
+              selected: false,
+              checked: checked,
+              labelledby: content_id,
+              disabled: disabled?
+            }
+          }
+          )
+
+          @content_arguments[:data] = merge_data(
+            @content_arguments, {
+            data: {
+              value: value,
+              path: @path.to_json
+            }
+          }
+          )
+
+          return unless current?
+
+          @content_arguments[:aria] = merge_aria(
+            @content_arguments,
+            { aria: { current: true } }
+          )
+        end
+
+        # The numeric depth of this node.
+        #
+        # @return [Integer] This node's depth.
+        def level
+          @level ||= @path.size
+        end
+
+        # Merges the given arguments into the current hash of system arguments provided when the component was
+        # initially constructed. This method can be used to add additional arguments just before rendering.
+        #
+        # @param other_arguments [Hash] The other hash of system arguments to merge into the current one.
+        def merge_system_arguments!(**other_arguments)
+          @content_arguments[:aria] = merge_aria(
+            @content_arguments,
+            other_arguments
+          )
+
+          @content_arguments[:data] = merge_data(
+            @content_arguments,
+            other_arguments
+          )
+
+          @content_arguments.merge!(**other_arguments)
+        end
+
+        private
+
+        def before_render
+          if leading_action?
+            @content_arguments[:data] = merge_data(
+              @content_arguments,
+              { data: { "has-leading-action": true } }
+            )
+          end
+
+          if select_variant != :none && node_variant != :div
+            raise ArgumentError, "TreeView nodes do not support select variants for tags other than :div."
+          end
+        end
+
+        def content_id
+          @content_id ||= "#{base_id}-content"
+        end
+
+        def base_id
+          @base_id ||= self.class.generate_id
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tree_view/skeleton_loader.html.erb

@@ -0,0 +1,23 @@
+<% unless loading_failure_message? %>
+  <% with_loading_failure_message  # set the default %>
+<% end %>
+
+<%= render(Primer::BaseComponent.new(tag: :"tree-view-include-fragment", src: @src, loading: :lazy, data: { target: "tree-view-sub-tree-node.subTree tree-view-sub-tree-node.includeFragment", path: @container.path.to_json }, hidden: @container.expanded?, accept: "text/fragment+html")) do %>
+  <%= render(@container) do %>
+    <%= render(Primer::Alpha::TreeView::Node.new(path: [*@container.path, :loader], node_variant: :div)) do |node| %>
+      <% node.with_text_content do %>
+        <div data-target="tree-view-sub-tree-node.loadingIndicator">
+          <% @count.times do %>
+            <span class="TreeViewSkeletonItemContainerStyle TreeViewItemSkeleton">
+              <%= render(Primer::Alpha::SkeletonBox.new(width: "16px")) %>
+              <%= render(Primer::Alpha::SkeletonBox.new(width: "100%", classes: "TreeItemSkeletonTextStyles")) %>
+            </span>
+          <% end %>
+        </div>
+        <div data-target="tree-view-sub-tree-node.loadingFailureMessage" hidden>
+          <%= loading_failure_message %>
+        </div>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>