@openproject/primer-view-components 0.58.0 → 0.59.0-rc.de17187ee

package/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}

package/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"
+  ]
+}

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

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

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

@@ -0,0 +1,70 @@
+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 {
+    // eslint-disable-next-line custom-elements/no-constructor
+    constructor() {
+        super();
+        if (!this.closest('.Box')) {
+            throw new Error('No surrounding BorderBox found');
+        }
+    }
+    connectedCallback() {
+        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);
+}

package/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';

package/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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.58.0",
+  "version": "0.59.0-rc.de17187ee",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/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",

package/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": "",

package/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"
   ],

package/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"

package/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",

package/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",

package/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",