openproject-primer_view_components 0.60.0 → 0.61.1

data/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 {

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

@@ -1,16 +1,16 @@
 <%= 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)) %>
+      <%= title %>
+      <% if count? %>
+        <%= count %>
       <% 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" })) %>
+      <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", hidden: @collapsed, data: { target: "collapsible-header.arrowUp" })) %>
+      <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", hidden: !@collapsed, 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 } %>
+      <% if description? %>
+        <%= description %>
       <% end %>
     <% end %>
   <% end %>

data/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);
-}

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

@@ -8,11 +8,46 @@ module Primer
       class CollapsibleHeader < Primer::Component
         status :open_project
 
+        # Required title
+        #
         # @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
+        renders_one :title, lambda { |**system_arguments, &block|
+          system_arguments[:mr] ||= 2
+
+          Primer::Beta::Text.new(**system_arguments, &block)
+        }
+
+        # Optional count
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :count, lambda { |**system_arguments|
+          system_arguments[:mr] ||= 2
+          system_arguments[:scheme] ||= :primary
+
+          Primer::Beta::Counter.new(**system_arguments)
+        }
+
+        # Optional description
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :description, lambda { |**system_arguments, &block|
+          system_arguments[:color] ||= :subtle
+          system_arguments[:data] = merge_data(
+            system_arguments, {
+            data: {
+                targets: "collapsible-header.collapsibleElements"
+              }
+            }
+          )
+          system_arguments[:hidden] = @collapsed
+
+          Primer::Beta::Text.new(**system_arguments, &block)
+        }
+
+
+        # @param collapsed [Boolean] Whether the header is collapsed on initial render.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(collapsed: false, box:, **system_arguments)
           @collapsed = collapsed
           @box = box
           @system_arguments = system_arguments
@@ -26,10 +61,10 @@ module Primer
           @system_arguments[:data] = merge_data(
             @system_arguments, {
             data: {
-              action: "click:collapsible-header#toggle",
-              collapsed: @collapsed
+              action: "click:collapsible-header#toggle"
             } }
           )
+          @system_arguments[:data][:collapsed] = true if @collapsed
         end
 
         private
@@ -39,9 +74,7 @@ module Primer
         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, "Title must be present" unless title?
           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

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

@@ -1,53 +1,16 @@
-import {attr, controller, target} from '@github/catalyst'
+import {controller} from '@github/catalyst'
+import {CollapsibleElement} from '../collapsible'
 
 @controller
-class CollapsibleHeaderElement extends HTMLElement {
-  @target arrowDown: HTMLElement
-  @target arrowUp: HTMLElement
-  @target description: HTMLElement | undefined
-
-  @attr collapsed: string
-  private _collapsed: boolean
-
+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
-    }
   }
 
-  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')
-
-    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')
-
-    this.description?.classList.remove('d-none')
-
-    this.classList.remove('CollapsibleHeader--collapsed')
+  get baseClass(): string {
+    return 'CollapsibleHeader'
   }
 }
 
@@ -56,8 +19,3 @@ declare global {
     CollapsibleHeaderElement: typeof CollapsibleHeaderElement
   }
 }
-
-if (!window.customElements.get('collapsible-header')) {
-  window.CollapsibleHeaderElement = CollapsibleHeaderElement
-  window.customElements.define('collapsible-header', CollapsibleHeaderElement)
-}

data/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;
+}

data/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);

data/app/components/primer/open_project/collapsible.ts

@@ -0,0 +1,49 @@
+import {attr, target, targets} from '@github/catalyst'
+
+// eslint-disable-next-line custom-elements/expose-class-on-global
+export abstract class CollapsibleElement extends HTMLElement {
+  @target arrowDown: Element
+  @target arrowUp: Element
+  @targets collapsibleElements: HTMLElement[]
+
+  @attr collapsed = false
+
+  toggle() {
+    this.collapsed = !this.collapsed
+  }
+
+  attributeChangedCallback(name: string) {
+    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`)
+  }
+
+  abstract get baseClass(): string
+}

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

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

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

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

data/app/components/primer/open_project/collapsible_section.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["collapsible_section.pcss"],"names":[],"mappings":"AAEA,iCACI,cACJ","file":"collapsible_section.css","sourcesContent":["/* CSS for CollapsibleSection  */\n\n.CollapsibleSection--triggerArea {\n    cursor: pointer;\n}\n"]}

data/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 {};

data/app/components/primer/open_project/collapsible_section.html.erb

@@ -0,0 +1,25 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= render(Primer::OpenProject::FlexLayout.new) do |flex| %>
+    <%= flex.with_row(classes: "CollapsibleSection--triggerArea",
+                      data: { action: "click:collapsible-section#toggle" }) do %>
+      <%= render(Primer::OpenProject::FlexLayout.new(display: :flex, align_items: :center)) do |header| %>
+        <%= header.with_column do %>
+          <%= title %>
+        <% end %>
+        <%= header.with_column do %>
+          <%= caption %>
+        <% end %>
+        <%= header.with_column do %>
+          <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", hidden: @collapsed, data: { target: "collapsible-section.arrowUp" })) %>
+          <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", hidden: !@collapsed, data: { target: "collapsible-section.arrowDown" })) %>
+        <% end %>
+        <%= header.with_column(flex: 1, text_align: :right) do %>
+          <%= additional_information %>
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= flex.with_row(hidden: @collapsed, mt: 3, data: { targets: "collapsible-section.collapsibleElements" }) do %>
+      <%= collapsible_content %>
+    <% end %>
+  <% end %>
+<% end %>

data/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);

data/app/components/primer/open_project/collapsible_section.pcss

@@ -0,0 +1,5 @@
+/* CSS for CollapsibleSection  */
+
+.CollapsibleSection--triggerArea {
+    cursor: pointer;
+}

data/app/components/primer/open_project/collapsible_section.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A component consisting of a title and collapsible content.
+    # Clicking the title will hide the collapsible content
+    class CollapsibleSection < Primer::Component
+      status :open_project
+
+      TITLE_TAG_FALLBACK = :h2
+      TITLE_TAG_OPTIONS = [:h1, TITLE_TAG_FALLBACK, :h3, :h4, :h5, :h6, :span].freeze
+
+      # Required Title
+      #
+      # @param tag [Symbol] Customize the element type of the rendered title container.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :title, lambda { |tag: TITLE_TAG_FALLBACK, **system_arguments, &block|
+        system_arguments[:tag] = fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_FALLBACK)
+        system_arguments[:font_size] ||= 3
+        system_arguments[:mr] ||= 2
+
+        Primer::OpenProject::Heading.new(**system_arguments, &block)
+      }
+
+      # Optional caption
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :caption, lambda { |**system_arguments, &block|
+        system_arguments[:color] ||= :subtle
+        system_arguments[:mr] ||= 2
+        system_arguments[:display] ||= [:none, :block]
+
+        Primer::Beta::Text.new(**system_arguments, &block)
+      }
+
+      # Optional right-side content
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :additional_information, lambda { |**system_arguments|
+        Primer::BaseComponent.new(tag: :div, **system_arguments)
+      }
+
+      # Required collapsible content
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :collapsible_content, lambda { |**system_arguments|
+        Primer::BaseComponent.new(tag: :div, **system_arguments)
+      }
+
+      # @param collapsed [Boolean] Whether the section is collapsed on initial render.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(collapsed: false, **system_arguments)
+        @collapsed = collapsed
+
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "collapsible-section"
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "CollapsibleSection",
+          "CollapsibleSection--collapsed" => @collapsed
+        )
+
+        @system_arguments[:data] ||= {}
+        @system_arguments[:data][:collapsed] = true if @collapsed
+      end
+
+      private
+
+      def render?
+        raise ArgumentError, "Title must be present" unless title.present?
+        raise ArgumentError, "Collapsible content must be present" unless collapsible_content.present?
+
+        true
+      end
+    end
+  end
+end

data/app/components/primer/open_project/collapsible_section.ts

@@ -0,0 +1,15 @@
+import {controller} from '@github/catalyst'
+import {CollapsibleElement} from './collapsible'
+
+@controller
+class CollapsibleSectionElement extends CollapsibleElement {
+  get baseClass(): string {
+    return 'CollapsibleSection'
+  }
+}
+
+declare global {
+  interface Window {
+    CollapsibleSectionElement: typeof CollapsibleSectionElement
+  }
+}

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

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

data/app/components/primer/primer.pcss

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

data/app/components/primer/primer.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'

data/lib/primer/view_components/version.rb

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

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

@@ -1,10 +1,11 @@
 <%= 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)) %>
+                                                                     collapsed: collapsed)) do |header| %>
+      <% header.with_title { title } %>
+      <% header.with_count(count: count) %>
+      <% header.with_description { description } %>
+    <% end %>
   <% end %>
   <% component.with_body { "Body" } %>
   <% component.with_row { "Row 1" } %>

data/previews/primer/open_project/collapsible_section_preview/collapsed.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::OpenProject::CollapsibleSection.new(collapsed: true)) do |section| %>
+  <% section.with_title { "Final question" } %>
+  <% section.with_collapsible_content do %>
+    <%= render(Primer::Alpha::Banner.new(mb: 3)) { "Please take one minute time to answer this question" } %>
+    <%= primer_form_with(url: "/foo") do |f| %>
+      <%= render(RadioButtonGroupForm.new(f)) %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/collapsible_section_preview/default.html.erb

@@ -0,0 +1,10 @@
+<%= render(Primer::OpenProject::CollapsibleSection.new) do |section| %>
+  <% section.with_title { "Feedback" } %>
+  <% section.with_collapsible_content do %>
+    <%= render(Primer::Alpha::Banner.new(mb: 3)) { "Please take one minute time to answer this question" } %>
+    <%= primer_form_with(url: "/foo") do |f| %>
+      <%= render(RadioButtonGroupForm.new(f)) %>
+    <% end %>
+
+  <% end %>
+<% end %>

data/previews/primer/open_project/collapsible_section_preview/playground.html.erb

@@ -0,0 +1,22 @@
+<%= render(Primer::OpenProject::CollapsibleSection.new) do |section| %>
+  <% section.with_title { "Advanced settings" } %>
+
+  <% if caption.present? %>
+    <% section.with_caption { caption } %>
+  <% end %>
+
+  <% if show_additional_information %>
+    <% section.with_additional_information do %>
+      <%= render(Primer::Beta::Link.new(href: "/")) do |component|
+        component.with_trailing_visual_icon(icon: :"link-external")
+        "More information"
+      end %>
+    <% end %>
+  <% end %>
+
+  <% section.with_collapsible_content do %>
+    <%= primer_form_with(url: "/foo") do |f| %>
+      <%= render(ArrayCheckBoxGroupForm.new(f)) %>
+    <% end %>
+  <% end %>
+<% end %>