@openproject/primer-view-components 0.60.0 → 0.61.0-rc.6bbf652b3

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

@@ -1,13 +1,7 @@
-declare class CollapsibleHeaderElement extends HTMLElement {
-    arrowDown: HTMLElement;
-    arrowUp: HTMLElement;
-    description: HTMLElement | undefined;
-    collapsed: string;
-    private _collapsed;
+import { CollapsibleElement } from '../collapsible';
+declare class CollapsibleHeaderElement extends CollapsibleElement {
     connectedCallback(): void;
-    toggle(): void;
-    private hideAll;
-    private expandAll;
+    get baseClass(): string;
 }
 declare global {
     interface Window {

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

@@ -4,59 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 {
+import { controller } from '@github/catalyst';
+import { CollapsibleElement } from '../collapsible';
+let CollapsibleHeaderElement = class CollapsibleHeaderElement extends CollapsibleElement {
     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');
-        this.description?.classList.add('d-none');
-        this.classList.add('CollapsibleHeader--collapsed');
     }
-    expandAll() {
-        this.arrowDown?.classList.add('d-none');
-        this.arrowUp?.classList.remove('d-none');
-        this.description?.classList.remove('d-none');
-        this.classList.remove('CollapsibleHeader--collapsed');
+    get baseClass() {
+        return 'CollapsibleHeader';
     }
 };
-__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/open_project/collapsible.d.ts

@@ -0,0 +1,11 @@
+export declare abstract class CollapsibleElement extends HTMLElement {
+    arrowDown: Element;
+    arrowUp: Element;
+    collapsibleElements: HTMLElement[];
+    collapsed: boolean;
+    toggle(): void;
+    attributeChangedCallback(name: string): void;
+    hideAll(): void;
+    expandAll(): void;
+    abstract get baseClass(): string;
+}

package/app/components/primer/open_project/collapsible.js

@@ -0,0 +1,56 @@
+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, target, targets } from '@github/catalyst';
+// eslint-disable-next-line custom-elements/expose-class-on-global
+export class CollapsibleElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+    }
+    toggle() {
+        this.collapsed = !this.collapsed;
+    }
+    attributeChangedCallback(name) {
+        if (name === 'data-collapsed') {
+            if (this.collapsed) {
+                this.hideAll();
+            }
+            else {
+                this.expandAll();
+            }
+        }
+    }
+    hideAll() {
+        // For whatever reason, setting `hidden` directly does not work on the SVGs
+        this.arrowDown.removeAttribute('hidden');
+        this.arrowUp.setAttribute('hidden', '');
+        for (const el of this.collapsibleElements) {
+            el.hidden = true;
+        }
+        this.classList.add(`${this.baseClass}--collapsed`);
+    }
+    expandAll() {
+        this.arrowUp.removeAttribute('hidden');
+        this.arrowDown.setAttribute('hidden', '');
+        for (const el of this.collapsibleElements) {
+            el.hidden = false;
+        }
+        this.classList.remove(`${this.baseClass}--collapsed`);
+    }
+}
+__decorate([
+    target
+], CollapsibleElement.prototype, "arrowDown", void 0);
+__decorate([
+    target
+], CollapsibleElement.prototype, "arrowUp", void 0);
+__decorate([
+    targets
+], CollapsibleElement.prototype, "collapsibleElements", void 0);
+__decorate([
+    attr
+], CollapsibleElement.prototype, "collapsed", void 0);

package/app/components/primer/open_project/collapsible_section.css

@@ -0,0 +1 @@
+.CollapsibleSection--triggerArea{cursor:pointer}

package/app/components/primer/open_project/collapsible_section.css.json

@@ -0,0 +1,6 @@
+{
+  "name": "open_project/collapsible_section",
+  "selectors": [
+    ".CollapsibleSection--triggerArea"
+  ]
+}

package/app/components/primer/open_project/collapsible_section.d.ts

@@ -0,0 +1,10 @@
+import { CollapsibleElement } from './collapsible';
+declare class CollapsibleSectionElement extends CollapsibleElement {
+    get baseClass(): string;
+}
+declare global {
+    interface Window {
+        CollapsibleSectionElement: typeof CollapsibleSectionElement;
+    }
+}
+export {};

package/app/components/primer/open_project/collapsible_section.js

@@ -0,0 +1,16 @@
+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 { controller } from '@github/catalyst';
+import { CollapsibleElement } from './collapsible';
+let CollapsibleSectionElement = class CollapsibleSectionElement extends CollapsibleElement {
+    get baseClass() {
+        return 'CollapsibleSection';
+    }
+};
+CollapsibleSectionElement = __decorate([
+    controller
+], CollapsibleSectionElement);

package/app/components/primer/primer.d.ts

@@ -30,4 +30,6 @@ 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/collapsible';
 import './open_project/border_box/collapsible_header';
+import './open_project/collapsible_section';

package/app/components/primer/primer.js

@@ -30,4 +30,6 @@ 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/collapsible';
 import './open_project/border_box/collapsible_header';
+import './open_project/collapsible_section';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.60.0",
+  "version": "0.61.0-rc.6bbf652b3",
   "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

@@ -5128,6 +5128,12 @@
     "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": "collapsed",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the header is collapsed on initial render."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -5174,6 +5180,28 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::CollapsibleSection",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectCollapsibleSection",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/collapsible_section.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/collapsible_section/default/",
+    "parameters": [
+      {
+        "name": "collapsed",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the section is collapsed on initial render."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::DangerDialog",
     "status": "open_project",

package/static/audited_at.json

@@ -120,6 +120,7 @@
   "Primer::OpenProject::BorderBox::CollapsibleHeader": "",
   "Primer::OpenProject::BorderGrid": "",
   "Primer::OpenProject::BorderGrid::Cell": "",
+  "Primer::OpenProject::CollapsibleSection": "",
   "Primer::OpenProject::DangerDialog": "",
   "Primer::OpenProject::DangerDialog::ConfirmationCheckBox": "",
   "Primer::OpenProject::DangerDialog::FormWrapper": "",

package/static/classes.json

@@ -243,6 +243,9 @@
   "CollapsibleHeader": [
     "Primer::OpenProject::BorderBox::CollapsibleHeader"
   ],
+  "CollapsibleSection--triggerArea": [
+    "Primer::OpenProject::CollapsibleSection"
+  ],
   "Counter": [
     "Primer::Beta::Counter"
   ],

package/static/constants.json

@@ -1574,6 +1574,19 @@
   "Primer::OpenProject::BorderGrid::Cell": {
     "GeneratedSlotMethods": "Primer::OpenProject::BorderGrid::Cell::GeneratedSlotMethods"
   },
+  "Primer::OpenProject::CollapsibleSection": {
+    "GeneratedSlotMethods": "Primer::OpenProject::CollapsibleSection::GeneratedSlotMethods",
+    "TITLE_TAG_FALLBACK": "h2",
+    "TITLE_TAG_OPTIONS": [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "span"
+    ]
+  },
   "Primer::OpenProject::DangerDialog": {
     "ConfirmationCheckBox": "Primer::OpenProject::DangerDialog::ConfirmationCheckBox",
     "FormWrapper": "Primer::OpenProject::DangerDialog::FormWrapper",

package/static/info_arch.json

@@ -17575,6 +17575,12 @@
     "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": "collapsed",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the header is collapsed on initial render."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -17583,7 +17589,42 @@
       }
     ],
     "slots": [
-
+      {
+        "name": "title",
+        "description": "Required title",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
+      {
+        "name": "count",
+        "description": "Optional count",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
+      {
+        "name": "description",
+        "description": "Optional description",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      }
     ],
     "methods": [
 
@@ -17782,6 +17823,163 @@
 
     ]
   },
+  {
+    "fully_qualified_name": "Primer::OpenProject::CollapsibleSection",
+    "description": "A component consisting of a title and collapsible content.\nClicking the title will hide the collapsible content",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::CollapsibleSection",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectCollapsibleSection",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/collapsible_section.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/collapsible_section/default/",
+    "parameters": [
+      {
+        "name": "collapsed",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the section is collapsed on initial render."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+      {
+        "name": "title",
+        "description": "Required Title",
+        "parameters": [
+          {
+            "name": "tag",
+            "type": "Symbol",
+            "default": "N/A",
+            "description": "Customize the element type of the rendered title container."
+          },
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
+      {
+        "name": "caption",
+        "description": "Optional caption",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
+      {
+        "name": "additional_information",
+        "description": "Optional right-side content",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
+      {
+        "name": "collapsible_content",
+        "description": "Required collapsible content",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      }
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/collapsible_section/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/collapsible_section/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/collapsible_section/with_additional_information",
+        "name": "with_additional_information",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/collapsible_section/with_caption",
+        "name": "with_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/collapsible_section/collapsed",
+        "name": "collapsed",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
   {
     "fully_qualified_name": "Primer::OpenProject::DangerDialog",
     "description": "A pre-configured dialog for destructive/\"potentially dangerous\" actions",

package/static/previews.json

@@ -3043,6 +3043,79 @@
       }
     ]
   },
+  {
+    "name": "collapsible_section",
+    "component": "OpenProject::CollapsibleSection",
+    "status": "open_project",
+    "lookup_path": "primer/open_project/collapsible_section",
+    "examples": [
+      {
+        "preview_path": "primer/open_project/collapsible_section/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/collapsible_section/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/collapsible_section/with_additional_information",
+        "name": "with_additional_information",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/collapsible_section/with_caption",
+        "name": "with_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/collapsible_section/collapsed",
+        "name": "collapsed",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ]
+  },
   {
     "name": "counter",
     "component": "Counter",

package/static/statuses.json

@@ -120,6 +120,7 @@
   "Primer::OpenProject::BorderBox::CollapsibleHeader": "open_project",
   "Primer::OpenProject::BorderGrid": "open_project",
   "Primer::OpenProject::BorderGrid::Cell": "open_project",
+  "Primer::OpenProject::CollapsibleSection": "open_project",
   "Primer::OpenProject::DangerDialog": "open_project",
   "Primer::OpenProject::DangerDialog::ConfirmationCheckBox": "open_project",
   "Primer::OpenProject::DangerDialog::FormWrapper": "open_project",