openproject-primer_view_components 0.64.1 → 0.65.0

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

@@ -1 +1 @@
-.SelectPanel-emptyPanel,.SelectPanel-loadingPanel{min-height:min(var(--overlay-height) - 10rem,100vh - 2rem)}
+.SelectPanel-loadingPanel{min-height:min(calc(var(--overlay-height) - 10rem),calc(100vh - 2rem))}.SelectPanel-emptyPanel{align-items:center;display:flex;justify-content:center;min-height:min(calc(var(--overlay-height) - 23rem),calc(100vh - 2rem))}

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

@@ -1,7 +1,7 @@
 {
   "name": "alpha/select_panel",
   "selectors": [
-    ".SelectPanel-emptyPanel",
-    ".SelectPanel-loadingPanel"
+    ".SelectPanel-loadingPanel",
+    ".SelectPanel-emptyPanel"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["select_panel.pcss"],"names":[],"mappings":"AAIA,kDACE,0DACF","file":"select_panel.css","sourcesContent":[".SelectPanel-loadingPanel {\n  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);\n}\n\n.SelectPanel-emptyPanel {\n  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);\n}\n"]}
+{"version":3,"sources":["select_panel.pcss"],"names":[],"mappings":"AAAA,0BACE,sEACF,CAEA,wBAEE,kBAAmB,CACnB,YAAa,CACb,sBAAuB,CAHvB,sEAIF","file":"select_panel.css","sourcesContent":[".SelectPanel-loadingPanel {\n  min-height: min(calc(var(--overlay-height) - 10rem), calc(100vh - 2rem));\n}\n\n.SelectPanel-emptyPanel {\n  min-height: min(calc(var(--overlay-height) - 23rem), calc(100vh - 2rem));\n  align-items: center;\n  display: flex;\n  justify-content: center;\n}\n"]}

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

@@ -97,7 +97,7 @@
                 <%= render(@list) %>
               <% end %>
             </div>
-            <div data-target="select-panel.noResults" class="pt-2 color-border-muted text-center d-flex flex-items-start flex-justify-center SelectPanel-emptyPanel" hidden>
+            <div data-target="select-panel.noResults" class="SelectPanel-emptyPanel" hidden>
               <h2 class="v-align-middle m-3 f5"><%= @no_results_label %></h2>
             </div>
           <% end %>

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

@@ -1,7 +1,10 @@
 .SelectPanel-loadingPanel {
-  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);
+  min-height: min(calc(var(--overlay-height) - 10rem), calc(100vh - 2rem));
 }
 
 .SelectPanel-emptyPanel {
-  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);
+  min-height: min(calc(var(--overlay-height) - 23rem), calc(100vh - 2rem));
+  align-items: center;
+  display: flex;
+  justify-content: center;
 }

data/app/components/primer/beta/spinner.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::BaseComponent.new(tag: :span, hidden: @hidden, data: { target: @target })) do %>
+<%= render(Primer::BaseComponent.new(tag: :span, hidden: @hidden, data: { target: @target }, **@wrapper_arguments)) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" />
     <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />

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

@@ -43,6 +43,8 @@ module Primer
 
         @target = extract_data(:target, @system_arguments)
         @hidden = @system_arguments.delete(:hidden)
+
+        @wrapper_arguments = @system_arguments.delete(:wrapper_arguments) || {}
       end
 
       def no_aria_label?

data/app/components/primer/open_project/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/open_project/file_tree_view/directory_node.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    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/open_project/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/open_project/file_tree_view/file_node.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    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/open_project/file_tree_view.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    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/open_project/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/open_project/skeleton_box.css.json

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

data/app/components/primer/open_project/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,wDAAqE,CACrE,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%, rgba(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/open_project/skeleton_box.html.erb

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

data/app/components/primer/open_project/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%, rgba(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/open_project/skeleton_box.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # 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
+      # @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/open_project/tree_view/icon.html.erb

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

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # An icon for a `TreeView` node.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::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/open_project/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/open_project/tree_view/icon_pair.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    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::OpenProject::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::OpenProject::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::OpenProject::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/open_project/tree_view/leading_action.html.erb

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

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # The leading action for `TreeView` nodes.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::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/open_project/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/open_project/tree_view/leaf_node.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # A `TreeView` leaf node.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::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::OpenProject::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::OpenProject::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::OpenProject::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::OpenProject::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/open_project/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/open_project/tree_view/loading_failure_message.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # A `TreeView` loading failure message.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::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/open_project/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 %>
+    <div id="<%= content_id %>" class="TreeViewItemContent">
+      <% 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 %>
+    </div>
+  </div>
+  <%= content %>
+<% end %>