openproject-primer_view_components 0.57.0 → 0.59.0

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

@@ -1,4 +1,9 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if required_form_arguments_given? %>
+    <span data-select-panel-inputs="true">
+        <%= @form_builder.hidden_field(@input_name, multiple: multi_select?, skip_default_ids: true, value: @value) %>
+    </span>
+  <% end %>
   <dialog-helper>
     <%= show_button %>
     <%= render(@dialog) do %>

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

@@ -152,27 +152,6 @@ module Primer
     #   end
     # end
     # ```
-    #
-    # If items are provided dynamically, things become a bit more complicated. The `form_for` or `form_with` method call
-    # happens in the view that renders the `SelectPanel`, which means the form builder object but isn't available in the
-    # view that renders the list items. In such a case, it can be useful to create an instance of the form builder maually:
-    #
-    # ```erb
-    # <% builder = ActionView::Helpers::FormBuilder.new(
-    #   "address",  # the name of the model, used to wrap input names, eg 'address[country]'
-    #   nil,        # object (eg. the Address instance, which we can omit)
-    #   self,       # template
-    #   {}          # options
-    # ) %>
-    # <%= render(Primer::Alpha::SelectPanel::ItemList.new(
-    #   form_arguments: { builder: builder, name: "country" }
-    # )) do |list| %>
-    #   <% countries.each do |country| %>
-    #     <% menu.with_item(label: country.name, content_arguments: { data: { value: country.code } }) %>
-    #   <% end %>
-    # <% end %>
-    # ```
-    #
     # ### JavaScript API
     #
     # `SelectPanel`s render a `<select-panel>` custom element that exposes behavior to the client.
@@ -375,7 +354,9 @@ module Primer
       # @param dynamic_aria_label_prefix [String] If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button.
       # @param body_id [String] The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a "-body" suffix.
       # @param list_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::ActionList) %> component. Only has an effect for the local fetch strategy.
-      # @param form_arguments [Hash] Form arguments to pass to the underlying <%= link_to_component(Primer::Alpha::ActionList) %> component. Only has an effect for the local fetch strategy.
+      # @param form_arguments [Hash] Form arguments
+
+      # @param use_experimental_non_local_form [Boolean] A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values.
       # @param show_filter [Boolean] Whether or not to show the filter input.
       # @param open_on_load [Boolean] Open the panel when the page loads.
       # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
@@ -397,6 +378,7 @@ module Primer
         dynamic_label_prefix: nil,
         dynamic_aria_label_prefix: nil,
         body_id: nil,
+        use_experimental_non_local_form: false,
         list_arguments: {},
         form_arguments: {},
         show_filter: true,
@@ -429,6 +411,15 @@ module Primer
         @dynamic_aria_label_prefix = dynamic_aria_label_prefix
         @loading_label = loading_label
         @loading_description_id = nil
+
+        if use_experimental_non_local_form
+          @form_builder = form_arguments[:builder]
+          @value = form_arguments[:value]
+          @input_name = form_arguments[:name]
+        end
+
+        @list_form_arguments = use_experimental_non_local_form ? {} : form_arguments
+
         if loading_description.present?
           @loading_description_id = "#{@panel_id}-loading-description"
         end
@@ -471,7 +462,7 @@ module Primer
 
         @list = Primer::Alpha::SelectPanel::ItemList.new(
           **list_arguments,
-          form_arguments: form_arguments,
+          form_arguments: @list_form_arguments, 
           id: "#{@panel_id}-list",
           select_variant: @select_variant,
           aria: {
@@ -546,6 +537,14 @@ module Primer
       def before_render
         content
       end
+
+      def required_form_arguments_given?
+        @input_name  && @form_builder
+      end
+
+      def multi_select?
+        select_variant == :multiple
+      end
     end
   end
-end
+end

data/app/components/primer/alpha/select_panel_element.js

@@ -893,7 +893,8 @@ _SelectPanelElement_setDynamicLabel = function _SelectPanelElement_setDynamicLab
 };
 _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
     if (this.selectVariant === 'single') {
-        const input = this.querySelector(`[data-list-inputs=true] input`);
+        const input = this.querySelector(`[data-select-panel-inputs=true] input`) ??
+            this.querySelector(`[data-list-inputs=true] input`);
         if (!input)
             return;
         const selectedItem = this.selectedItems[0];
@@ -903,13 +904,14 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
                 input.name = selectedItem.inputName;
             input.removeAttribute('disabled');
         }
-        else {
+        else if (__classPrivateFieldGet(this, _SelectPanelElement_hasLoadedData, "f")) {
             input.setAttribute('disabled', 'disabled');
         }
     }
     else if (this.selectVariant !== 'none') {
         // multiple select variant
-        const inputList = this.querySelector('[data-list-inputs=true]');
+        const isRemoteInput = !!this.querySelector('[data-select-panel-inputs=true]');
+        const inputList = this.querySelector('[data-select-panel-inputs=true]') ?? this.querySelector('[data-list-inputs=true]');
         if (!inputList)
             return;
         const inputs = inputList.querySelectorAll('input');
@@ -918,7 +920,7 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
         }
         for (const selectedItem of this.selectedItems) {
             const newInput = document.createElement('input');
-            newInput.setAttribute('data-list-input', 'true');
+            newInput.setAttribute(`${isRemoteInput ? 'data-select-panel-input' : 'data-list-input'}`, 'true');
             newInput.type = 'hidden';
             newInput.autocomplete = 'off';
             newInput.name = selectedItem.inputName || __classPrivateFieldGet(this, _SelectPanelElement_inputName, "f");

data/app/components/primer/alpha/select_panel_element.ts

@@ -959,7 +959,9 @@ export class SelectPanelElement extends HTMLElement {
 
   #updateInput() {
     if (this.selectVariant === 'single') {
-      const input = this.querySelector(`[data-list-inputs=true] input`) as HTMLInputElement
+      const input =
+        (this.querySelector(`[data-select-panel-inputs=true] input`) as HTMLInputElement) ??
+        (this.querySelector(`[data-list-inputs=true] input`) as HTMLInputElement)
       if (!input) return
 
       const selectedItem = this.selectedItems[0]
@@ -968,12 +970,14 @@ export class SelectPanelElement extends HTMLElement {
         input.value = (selectedItem.value || selectedItem.label || '').trim()
         if (selectedItem.inputName) input.name = selectedItem.inputName
         input.removeAttribute('disabled')
-      } else {
+      } else if (this.#hasLoadedData) {
         input.setAttribute('disabled', 'disabled')
       }
     } else if (this.selectVariant !== 'none') {
       // multiple select variant
-      const inputList = this.querySelector('[data-list-inputs=true]')
+      const isRemoteInput = !!this.querySelector('[data-select-panel-inputs=true]')
+      const inputList =
+        this.querySelector('[data-select-panel-inputs=true]') ?? this.querySelector('[data-list-inputs=true]')
       if (!inputList) return
 
       const inputs = inputList.querySelectorAll('input')
@@ -984,7 +988,7 @@ export class SelectPanelElement extends HTMLElement {
 
       for (const selectedItem of this.selectedItems) {
         const newInput = document.createElement('input')
-        newInput.setAttribute('data-list-input', 'true')
+        newInput.setAttribute(`${isRemoteInput ? 'data-select-panel-input' : 'data-list-input'}`, 'true')
         newInput.type = 'hidden'
         newInput.autocomplete = 'off'
         newInput.name = selectedItem.inputName || this.#inputName

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,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 {};

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,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);
+}

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,72 @@
+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
+
+  // 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
+    }
+  }
+
+  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,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 57
+      MINOR = 59
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/select_panel_preview/remote_fetch_form.html.erb

@@ -0,0 +1,34 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= form_with(url: generic_form_submission_path(format: route_format)) do |builder| %>
+  <%= render(Primer::Alpha::SelectPanel.new(
+    data: { interaction_subject: subject_id },
+    select_variant: :single,
+    src: select_panel_items_path(
+        select_variant: :single,
+        selected_items: selected_items,
+    ),
+    open_on_load: open_on_load,
+    dynamic_label: true,
+    dynamic_label_prefix: "Item",
+    use_experimental_non_local_form: true,
+    form_arguments: {
+      name: :item,
+      builder: builder,
+      value: 3,
+    }
+  )) do |panel| %>
+    <% panel.with_show_button { "Sci-fi equipment" } %>
+    <% panel.with_footer(show_divider: true) do %>
+        I'm a footer!
+    <% end %>
+  <% end %>
+
+  <hr>
+
+  <%= render(Primer::Beta::Button.new(type: :submit, scheme: :primary)) do %>
+    Submit
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview.rb

@@ -259,6 +259,15 @@ module Primer
         render_with_template(locals: { open_on_load: open_on_load, route_format: route_format })
       end
 
+      # @label Remote fetch form
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      # @param selected_items text
+      def remote_fetch_form(open_on_load: false, selected_items: "Phaser",  route_format: :html)
+        render_with_template(locals: { open_on_load: open_on_load, selected_items: selected_items, route_format: route_format })
+      end
+
       # @label Multi-select form
       #
       # @snapshot interactive

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