openproject-primer_view_components 0.58.0 → 0.59.1

data/app/components/primer/open_project/border_box/collapsible_header.css

@@ -0,0 +1 @@
+.CollapsibleHeader{align-items:center;cursor:pointer;display:flex}.Box:has(.CollapsibleHeader--collapsed){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:var(--borderWidth-thicker)}.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer,.Box:has(.CollapsibleHeader--collapsed) .Box-row{display:none}

data/app/components/primer/open_project/border_box/collapsible_header.css.json

@@ -0,0 +1,10 @@
+{
+  "name": "open_project/border_box/collapsible_header",
+  "selectors": [
+    ".CollapsibleHeader",
+    ".Box:has(.CollapsibleHeader--collapsed)",
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-body",
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-footer",
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-row"
+  ]
+}

data/app/components/primer/open_project/border_box/collapsible_header.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["collapsible_header.pcss"],"names":[],"mappings":"AAEA,mBAGI,kBAAmB,CAFnB,cAAe,CACf,YAEJ,CAEA,wCACI,2BAA4B,CAC5B,4BAA6B,CAC7B,8CAOJ,CALI,uJAGI,YACJ","file":"collapsible_header.css","sourcesContent":["/* CSS for BorderBox::CollapsibleHeader  */\n\n.CollapsibleHeader {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n}\n\n.Box:has(.CollapsibleHeader--collapsed) {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-width: var(--borderWidth-thicker);\n\n    & .Box-row,\n    & .Box-body,\n    & .Box-footer {\n        display: none;\n    }\n}\n"]}

data/app/components/primer/open_project/border_box/collapsible_header.d.ts

@@ -0,0 +1,17 @@
+declare class CollapsibleHeaderElement extends HTMLElement {
+    arrowDown: HTMLElement;
+    arrowUp: HTMLElement;
+    description: HTMLElement;
+    collapsed: string;
+    private _collapsed;
+    connectedCallback(): void;
+    toggle(): void;
+    private hideAll;
+    private expandAll;
+}
+declare global {
+    interface Window {
+        CollapsibleHeaderElement: typeof CollapsibleHeaderElement;
+    }
+}
+export {};

data/app/components/primer/open_project/border_box/collapsible_header.html.erb

@@ -0,0 +1,17 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= render(Primer::OpenProject::FlexLayout.new) do |flex| %>
+    <%= flex.with_row do %>
+      <%= render(Primer::Beta::Text.new(mr: 2) ) { @title } %>
+      <% if @count.present? %>
+        <%= render(Primer::Beta::Counter.new(count: @count, mr: 2, scheme: :primary)) %>
+      <% end %>
+      <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", data: { target: "collapsible-header.arrowUp" })) %>
+      <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", display: :none, data: { target: "collapsible-header.arrowDown" })) %>
+    <% end %>
+    <%= flex.with_row do %>
+      <% if @description.present? %>
+        <%= render(Primer::Beta::Text.new(color: :subtle, data: { target: "collapsible-header.description" }) ) { @description } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/border_box/collapsible_header.js

@@ -0,0 +1,66 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { attr, controller, target } from '@github/catalyst';
+let CollapsibleHeaderElement = class CollapsibleHeaderElement extends HTMLElement {
+    connectedCallback() {
+        if (!this.closest('.Box')) {
+            throw new Error('No surrounding BorderBox found');
+        }
+        if (this.collapsed === 'true') {
+            this._collapsed = true;
+            this.hideAll();
+        }
+        else {
+            this._collapsed = false;
+        }
+    }
+    toggle() {
+        if (this._collapsed) {
+            this._collapsed = false;
+            this.expandAll();
+        }
+        else {
+            this._collapsed = true;
+            this.hideAll();
+        }
+    }
+    hideAll() {
+        this.arrowDown.classList.remove('d-none');
+        this.arrowUp.classList.add('d-none');
+        if (this.description !== undefined) {
+            this.description.classList.add('d-none');
+        }
+        this.classList.add('CollapsibleHeader--collapsed');
+    }
+    expandAll() {
+        this.arrowDown.classList.add('d-none');
+        this.arrowUp.classList.remove('d-none');
+        if (this.description !== undefined) {
+            this.description.classList.remove('d-none');
+        }
+        this.classList.remove('CollapsibleHeader--collapsed');
+    }
+};
+__decorate([
+    target
+], CollapsibleHeaderElement.prototype, "arrowDown", void 0);
+__decorate([
+    target
+], CollapsibleHeaderElement.prototype, "arrowUp", void 0);
+__decorate([
+    target
+], CollapsibleHeaderElement.prototype, "description", void 0);
+__decorate([
+    attr
+], CollapsibleHeaderElement.prototype, "collapsed", void 0);
+CollapsibleHeaderElement = __decorate([
+    controller
+], CollapsibleHeaderElement);
+if (!window.customElements.get('collapsible-header')) {
+    window.CollapsibleHeaderElement = CollapsibleHeaderElement;
+    window.customElements.define('collapsible-header', CollapsibleHeaderElement);
+}

data/app/components/primer/open_project/border_box/collapsible_header.pcss

@@ -0,0 +1,19 @@
+/* CSS for BorderBox::CollapsibleHeader  */
+
+.CollapsibleHeader {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.Box:has(.CollapsibleHeader--collapsed) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-width: var(--borderWidth-thicker);
+
+    & .Box-row,
+    & .Box-body,
+    & .Box-footer {
+        display: none;
+    }
+}

data/app/components/primer/open_project/border_box/collapsible_header.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    module BorderBox
+      # Add a general description of component here
+      # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+      # @accessibility Add any accessibility considerations
+      class CollapsibleHeader < Primer::Component
+        status :open_project
+
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(title:, count: nil, description: nil, collapsed: false, box:, **system_arguments)
+          @title = title
+          @count = count
+          @description = description
+          @collapsed = collapsed
+          @box = box
+          @system_arguments = system_arguments
+
+          @system_arguments[:tag] = "collapsible-header"
+          @system_arguments[:classes] = class_names(
+            system_arguments[:classes],
+            "CollapsibleHeader",
+            "CollapsibleHeader--collapsed" => @collapsed
+          )
+          @system_arguments[:data] = merge_data(
+            @system_arguments, {
+            data: {
+              action: "click:collapsible-header#toggle",
+              collapsed: @collapsed
+            } }
+          )
+        end
+
+        private
+
+        def before_render
+          content
+        end
+
+        def render?
+          raise ArgumentError, "Title must be present" unless @title.present?
+          raise ArgumentError, "Description cannot be a blank string" unless @description.present? || @description.nil?
+          raise ArgumentError, "Count cannot be a blank string" unless @count.present? || @count.nil?
+          raise ArgumentError, "This component must be called inside the header of a `Primer::Beta::BorderBox`" unless @box.present? && @box.is_a?(Primer::Beta::BorderBox)
+
+          true
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/border_box/collapsible_header.ts

@@ -0,0 +1,67 @@
+import {attr, controller, target} from '@github/catalyst'
+
+@controller
+class CollapsibleHeaderElement extends HTMLElement {
+  @target arrowDown: HTMLElement
+  @target arrowUp: HTMLElement
+  @target description: HTMLElement
+
+  @attr collapsed: string
+  private _collapsed: boolean
+
+  connectedCallback() {
+    if (!this.closest('.Box')) {
+      throw new Error('No surrounding BorderBox found')
+    }
+
+    if (this.collapsed === 'true') {
+      this._collapsed = true
+      this.hideAll()
+    } else {
+      this._collapsed = false
+    }
+  }
+
+  public toggle() {
+    if (this._collapsed) {
+      this._collapsed = false
+      this.expandAll()
+    } else {
+      this._collapsed = true
+      this.hideAll()
+    }
+  }
+
+  private hideAll() {
+    this.arrowDown.classList.remove('d-none')
+    this.arrowUp.classList.add('d-none')
+
+    if (this.description !== undefined) {
+      this.description.classList.add('d-none')
+    }
+
+    this.classList.add('CollapsibleHeader--collapsed')
+  }
+
+  private expandAll() {
+    this.arrowDown.classList.add('d-none')
+    this.arrowUp.classList.remove('d-none')
+
+    if (this.description !== undefined) {
+      this.description.classList.remove('d-none')
+    }
+
+    this.classList.remove('CollapsibleHeader--collapsed')
+  }
+}
+
+declare global {
+  interface Window {
+    CollapsibleHeaderElement: typeof CollapsibleHeaderElement
+  }
+}
+
+if (!window.customElements.get('collapsible-header')) {
+  window.CollapsibleHeaderElement = CollapsibleHeaderElement
+  window.customElements.define('collapsible-header', CollapsibleHeaderElement)
+}

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

@@ -30,3 +30,4 @@ import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';
 import './open_project/danger_dialog_form_helper';
+import './open_project/border_box/collapsible_header';

data/app/components/primer/primer.js

@@ -30,3 +30,4 @@ import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';
 import './open_project/danger_dialog_form_helper';
+import './open_project/border_box/collapsible_header';

data/app/components/primer/primer.pcss

@@ -49,3 +49,4 @@
 @import "./open_project/input_group.pcss";
 @import "./open_project/sub_header.pcss";
 @import "./open_project/side_panel/section.pcss";
+@import "./open_project/border_box/collapsible_header.pcss";

data/app/components/primer/primer.ts

@@ -30,3 +30,4 @@ import './open_project/page_header_element'
 import './open_project/zen_mode_button'
 import './open_project/sub_header_element'
 import './open_project/danger_dialog_form_helper'
+import './open_project/border_box/collapsible_header'

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 58
-      PATCH = 0
+      MINOR = 59
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/open_project/border_box/collapsible_header_preview/playground.html.erb

@@ -0,0 +1,14 @@
+<%= render(Primer::Beta::BorderBox.new) do |component| %>
+  <% component.with_header do %>
+    <%= render(Primer::OpenProject::BorderBox::CollapsibleHeader.new(box: component,
+                                                                     title: title,
+                                                                     description: description,
+                                                                     count: count,
+                                                                     collapsed: collapsed)) %>
+  <% end %>
+  <% component.with_body { "Body" } %>
+  <% component.with_row { "Row 1" } %>
+  <% component.with_row { "Row 2" } %>
+  <% component.with_row { "Row 3" } %>
+  <% component.with_footer { "Footer" } %>
+<% end %>

data/previews/primer/open_project/border_box/collapsible_header_preview.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module OpenProject
+    module BorderBox
+      # @label CollapsibleHeader
+      class CollapsibleHeaderPreview < ViewComponent::Preview
+        # @label Playground
+        # @param title [String]
+        # @param description [String]
+        # @param collapsed toggle
+        # @param count [Integer]
+        def playground(
+          title: "Backlog",
+          description: "This backlog is unique to this one-time meeting. You can drag items in and out to add or remove them from the meeting agenda.",
+          count: 42,
+          collapsed: false
+        )
+          render_with_template(locals: {
+            title: title,
+            description: description,
+            count: count,
+            collapsed: collapsed
+          })
+        end
+
+        # @label Default
+        # @snapshot
+        def default
+          render_with_template(
+            template: "primer/open_project/border_box/collapsible_header_preview/playground",
+            locals: {
+              title: "Backlog",
+              description: nil,
+              count: nil,
+              collapsed: false
+            }
+          )
+        end
+
+        # @label With counter
+        # @snapshot
+        def with_count
+          render_with_template(
+            template: "primer/open_project/border_box/collapsible_header_preview/playground",
+            locals: {
+              title: "Backlog",
+              description: nil,
+              count: 42,
+              collapsed: false
+            }
+          )
+        end
+
+        # @label With description text
+        # @snapshot
+        def with_description
+          render_with_template(
+            template: "primer/open_project/border_box/collapsible_header_preview/playground",
+            locals: {
+              title: "Backlog",
+              description: "This backlog is unique to this one-time meeting. You can drag items in and out to add or remove them from the meeting agenda.",
+              count: nil,
+              collapsed: false
+            }
+          )
+        end
+
+        # @label Collapsed initially
+        # @snapshot
+        def collapsed
+          render_with_template(
+            template: "primer/open_project/border_box/collapsible_header_preview/playground",
+            locals: {
+              title: "Backlog",
+              description: "This backlog is unique to this one-time meeting. You can drag items in and out to add or remove them from the meeting agenda.",
+              count: nil,
+              collapsed: true
+            }
+          )
+        end
+      end
+    end
+  end
+end

data/static/arguments.json

@@ -5018,6 +5018,22 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::BorderBox::CollapsibleHeader",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectBorderBoxCollapsibleHeader",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/border_box/collapsible_header.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/border_box/collapsible_header/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::BorderGrid",
     "status": "open_project",

data/static/audited_at.json

@@ -117,6 +117,7 @@
   "Primer::IconButton": "",
   "Primer::LayoutComponent": "",
   "Primer::Navigation::TabComponent": "",
+  "Primer::OpenProject::BorderBox::CollapsibleHeader": "",
   "Primer::OpenProject::BorderGrid": "",
   "Primer::OpenProject::BorderGrid::Cell": "",
   "Primer::OpenProject::DangerDialog": "",

data/static/classes.json

@@ -114,7 +114,8 @@
     "Primer::OpenProject::BorderGrid"
   ],
   "Box": [
-    "Primer::Beta::BorderBox"
+    "Primer::Beta::BorderBox",
+    "Primer::OpenProject::BorderBox::CollapsibleHeader"
   ],
   "Box--blue": [
     "Primer::Beta::BorderBox"
@@ -239,6 +240,9 @@
   "ButtonGroup": [
     "Primer::Beta::ButtonGroup"
   ],
+  "CollapsibleHeader": [
+    "Primer::OpenProject::BorderBox::CollapsibleHeader"
+  ],
   "Counter": [
     "Primer::Beta::Counter"
   ],

data/static/constants.json

@@ -1562,6 +1562,9 @@
   "Primer::Navigation::TabComponent": {
     "GeneratedSlotMethods": "Primer::Navigation::TabComponent::GeneratedSlotMethods"
   },
+  "Primer::OpenProject::BorderBox::CollapsibleHeader": {
+    "GeneratedSlotMethods": "Primer::OpenProject::BorderBox::CollapsibleHeader::GeneratedSlotMethods"
+  },
   "Primer::OpenProject::BorderGrid": {
     "Cell": "Primer::OpenProject::BorderGrid::Cell",
     "GeneratedSlotMethods": "Primer::OpenProject::BorderGrid::GeneratedSlotMethods"

data/static/info_arch.json

@@ -17446,6 +17446,104 @@
 
     ]
   },
+  {
+    "fully_qualified_name": "Primer::OpenProject::BorderBox::CollapsibleHeader",
+    "description": "Add a general description of component here\nAdd additional usage considerations or best practices that may aid the user to use the component correctly.",
+    "accessibility_docs": "Add any accessibility considerations",
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::BorderBox::CollapsibleHeader",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectBorderBoxCollapsibleHeader",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/border_box/collapsible_header.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/border_box/collapsible_header/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/border_box/collapsible_header/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/border_box/collapsible_header/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/border_box/collapsible_header/with_count",
+        "name": "with_count",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/border_box/collapsible_header/with_description",
+        "name": "with_description",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/border_box/collapsible_header/collapsed",
+        "name": "collapsed",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
   {
     "fully_qualified_name": "Primer::OpenProject::BorderGrid",
     "description": "A set of blocks that are shown below each other with separator lines in between",

data/static/previews.json

@@ -2957,6 +2957,79 @@
       }
     ]
   },
+  {
+    "name": "collapsible_header",
+    "component": "OpenProject::BorderBox::CollapsibleHeader",
+    "status": "open_project",
+    "lookup_path": "primer/open_project/border_box/collapsible_header",
+    "examples": [
+      {
+        "preview_path": "primer/open_project/border_box/collapsible_header/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/border_box/collapsible_header/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/border_box/collapsible_header/with_count",
+        "name": "with_count",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/border_box/collapsible_header/with_description",
+        "name": "with_description",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/border_box/collapsible_header/collapsed",
+        "name": "collapsed",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ]
+  },
   {
     "name": "counter",
     "component": "Counter",

data/static/statuses.json

@@ -117,6 +117,7 @@
   "Primer::IconButton": "deprecated",
   "Primer::LayoutComponent": "deprecated",
   "Primer::Navigation::TabComponent": "deprecated",
+  "Primer::OpenProject::BorderBox::CollapsibleHeader": "open_project",
   "Primer::OpenProject::BorderGrid": "open_project",
   "Primer::OpenProject::BorderGrid::Cell": "open_project",
   "Primer::OpenProject::DangerDialog": "open_project",