WIP Add toggle behaviour

Author: mrmir

app/components/primer/open_project/collapsible_border_box.html.erb

@@ -1 +1,18 @@
-<%= render(@border_box) %>
+<%=
+  render(@border_box) do |box|
+    box.with_header do
+      render(Primer::BaseComponent.new(
+        tag: "collapsible-border-box-trigger",
+        data: {
+                action: "click:collapsible-border-box#toggle"
+      })) do
+        render(Primer::OpenProject::FlexLayout.new) do |flex|
+          flex.with_column(mr: 2) { @title }
+          flex.with_column(mr: 2) { render(Primer::Beta::Counter.new(count: @count)) }
+          flex.with_column { render(Primer::Beta::Octicon.new(icon: "chevron-up", classes: "up-icon")) }
+          flex.with_column { render(Primer::Beta::Octicon.new(icon: "chevron-down", classes: "down-icon", display: :none)) }
+        end
+      end
+    end
+  end
+%>

app/components/primer/open_project/collapsible_border_box.rb

@@ -5,8 +5,14 @@ module OpenProject
     class CollapsibleBorderBox < Primer::Component
       status :open_project
 
+      # renders_one :header, lambda { |title:, count: nil, **system_arguments|
+      #   Primer::OpenProject::CollapsibleBorderBox::Header.new(title: title, count: count, **system_arguments)
+      # }
+
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
+      def initialize(title:, count: nil, **system_arguments)
+        @title = title
+        @count = count
         @system_arguments = system_arguments
 
         @border_box = Primer::Beta::BorderBox.new(**@system_arguments)
@@ -20,6 +26,8 @@ def initialize(**system_arguments)
       private
 
       def before_render
+
+
         content
       end
     end

app/components/primer/open_project/collapsible_border_box.ts

@@ -1 +1,63 @@
-import '@github/catalyst'
+import {controller, target} from '@github/catalyst'
+
+@controller
+class CollapsibleBorderBoxTriggerElement extends HTMLElement {
+    container = null
+    collapsed = false // Needs to be retrieved from the component call, to be set-able externally
+
+    // eslint-disable-next-line custom-elements/no-constructor
+    constructor() {
+        super()
+
+        this.container = this.closest('.Box')
+
+        // Only to test as I couldn't get the action to trigger on click
+        setTimeout(() => {
+            this.toggle()
+        }, 1000)
+    }
+
+    public toggle() {
+        if (this.collapsed) {
+            this.collapsed = false
+            this.expandAll()
+        } else {
+            this.collapsed = true
+            this.hideAll()
+        }
+    }
+
+    private hideAll() {
+        const rows = this.container.querySelectorAll('.Box-row, .Box-body, .Box-footer')
+
+        rows.forEach(row => {
+            row.style.display = 'none';
+        })
+
+        this.container.querySelector('.down-icon').style.display = 'block'
+        this.container.querySelector('.up-icon').style.display = 'none'
+    }
+
+    private expandAll() {
+        const rows = this.container.querySelectorAll('.Box-row, .Box-body, .Box-footer')
+
+        rows.forEach(row => {
+            row.style.display = 'block';
+        })
+
+        this.container.querySelector('.down-icon').style.display = 'none'
+        this.container.querySelector('.up-icon').style.display = 'block'
+
+    }
+}
+
+declare global {
+    interface Window {
+        CollapsibleBorderBoxTriggerElement: typeof CollapsibleBorderBoxTriggerElement
+    }
+}
+
+if (!window.customElements.get('collapsible-border-box-trigger')) {
+    window.CollapsibleBorderBoxTriggerElement = CollapsibleBorderBoxTriggerElement
+    window.customElements.define('collapsible-border-box-trigger', CollapsibleBorderBoxTriggerElement)
+}

app/components/primer/open_project/collapsible_border_box/header.html.erb

@@ -0,0 +1,4 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= @title %>
+  <%= @count %>
+<% end %>

app/components/primer/open_project/collapsible_border_box/header.pcss

@@ -0,0 +1,5 @@
+/* CSS for CollapsibleBorderBox::Header  */
+
+.CollapsibleBorderBox::Header {
+
+}

app/components/primer/open_project/collapsible_border_box/header.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # 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 CollapsibleBorderBox::Header < Primer::Component
+      status :open_project
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(title:, count: nil, **system_arguments)
+        puts "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~123"
+        @title = title
+        @count = count
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "div"
+      end
+
+      private
+
+      def before_render
+        content
+      end
+    end
+  end
+end

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/collapsible_border_box.pcss";
+@import "./open_project/collapsible_border_box/header.pcss";

previews/primer/open_project/collapsible_border_box/header_preview.rb

@@ -0,0 +1,27 @@
+# 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
+    # @label CollapsibleBorderBox::Header
+    class CollapsibleBorderBox::HeaderPreview < ViewComponent::Preview
+      # @label Playground
+      # @param string_example text
+      # @param boolean_example toggle
+      # @param email_example email
+      # @param number_example number
+      # @param url_example url
+      # @param tel_example tel
+      # @param textarea_example textarea
+      # @param select_example select [one, two, three]
+      # @param select_custom_labels select [[One label, one], [Two label, two], [Three label, three]]
+      # With empty option (`~` in YAML)
+      # @param select_empty_option select [~, one, two, three]
+      def playground(string_example: "Some value", boolean_example: false, select_example: :one)
+        render(Primer::OpenProject::CollapsibleBorderBox::Header.new(string_example: string_example, boolean_example: boolean_example, select_example: select_example))
+      end
+    end
+  end
+end

previews/primer/open_project/collapsible_border_box_preview.rb

@@ -13,7 +13,7 @@ class CollapsibleBorderBoxPreview < ViewComponent::Preview
       # end
 
       def default
-        render(Primer::OpenProject::CollapsibleBorderBox.new) do |component|
+        render(Primer::OpenProject::CollapsibleBorderBox.new(title: "Test", count: 2)) do |component|
           component.with_body { "Body" }
           component.with_row { "Row 1" }
           component.with_row { "Row 2" }

test/components/component_test.rb

@@ -8,6 +8,7 @@ class PrimerComponentTest < Minitest::Test
 
   # Components with any arguments necessary to make them render
   COMPONENTS_WITH_ARGS = [
+    [Primer::OpenProject::CollapsibleBorderBox::Header, {}],
     [Primer::OpenProject::CollapsibleBorderBox, {}],
     [Primer::OpenProject::Heading, { tag: :h2 }],
     [Primer::OpenProject::DangerDialog, { title: "Danger action" }, proc { |component|

test/components/primer/open_project/collapsible_border_box/header_test.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require "components/test_helper"
+
+class PrimerOpenProjectCollapsibleBorderBox::HeaderTest < Minitest::Test
+  include Primer::ComponentTestHelpers
+
+  def test_renders
+    render_inline(Primer::CollapsibleBorderBox::Header.new)
+
+    assert_text("Add a test here")
+  end
+end

test/system/open_project/collapsible_border_box/header_test.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require "system/test_case"
+
+class IntegrationOpenProjectCollapsibleBorderBox::HeaderTest < System::TestCase
+  def test_renders_component
+    visit_preview(:default)
+
+    assert_selector(".collapsible-border-box/header")
+  end
+end