WIP

Author: mrmir

app/components/primer/beta/border_box.rb

@@ -89,6 +89,10 @@ def initialize(padding: DEFAULT_PADDING, **system_arguments)
       end
 
       def render?
+        puts "~~~~~~~~~~~~~~~~~~~~~~~~~~~~@@@@@@@@@@@@#############&@(^(&#*@&#(@*&(#*~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
+        puts rows.any?
+        puts body.present?
+        puts footer.present?
         rows.any? || header.present? || body.present? || footer.present?
       end
 

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

@@ -0,0 +1,2 @@
+<%= render(@border_box) %>
+<span>HELLO</span>

app/components/primer/open_project/collapsible_border_box.pcss

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

app/components/primer/open_project/collapsible_border_box.rb

@@ -0,0 +1,36 @@
+# 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 < Primer::Component
+      status :open_project
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+
+        @border_box = Primer::Beta::BorderBox.new(**@system_arguments)
+      end
+
+      delegate :body?, :body, :with_body, :with_body_content,
+               :footer?, :footer, :with_footer, :with_footer_content,
+               :rows?, :rows, :with_row, :with_row_content,
+               to: :@border_box
+    end
+
+    private
+
+    def before_render
+      content
+    end
+
+    def render?
+      puts "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
+      puts body.present?
+      true
+    end
+  end
+end

app/components/primer/open_project/collapsible_border_box.ts

@@ -0,0 +1 @@
+import '@github/catalyst'

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/collapsible_border_box.pcss";

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/collapsible_border_box'

demo/Gemfile.lock

@@ -96,9 +96,9 @@ GEM
     faraday-patron (1.0.0)
     faraday-rack (1.0.0)
     faraday-retry (1.0.3)
-    ffi (1.17.0-arm64-darwin)
-    ffi (1.17.0-x86_64-darwin)
-    ffi (1.17.0-x86_64-linux-gnu)
+    ffi (1.17.1-arm64-darwin)
+    ffi (1.17.1-x86_64-darwin)
+    ffi (1.17.1-x86_64-linux-gnu)
     ffi-compiler (1.3.2)
       ffi (>= 1.15.5)
       rake
@@ -236,11 +236,11 @@ GEM
     mutex_m (0.2.0)
     netrc (0.11.0)
     nio4r (2.7.4)
-    nokogiri (1.16.7-arm64-darwin)
+    nokogiri (1.18.6-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-darwin)
+    nokogiri (1.18.6-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
+    nokogiri (1.18.6-x86_64-linux-gnu)
       racc (~> 1.4)
     oj (3.16.3)
       bigdecimal (>= 3.0)

package-lock.json

@@ -45,17 +45,17 @@
   "dependencies": {
     "@github/auto-check-element": "^5.2.0",
     "@github/auto-complete-element": "^3.6.2",
-    "@github/catalyst": "^1.6.0",
+    "@github/catalyst": "^1.7.0",
     "@github/clipboard-copy-element": "^1.3.0",
     "@github/details-menu-element": "^1.0.12",
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.1.1",
     "@github/relative-time-element": "^4.0.0",
     "@github/remote-input-element": "^0.4.0",
     "@github/tab-container-element": "^3.1.2",
-    "@primer/live-region-element": "^0.7.1",
     "@oddbird/popover-polyfill": "^0.5.2",
-    "@primer/behaviors": "^1.3.4"
+    "@primer/behaviors": "^1.3.4",
+    "@primer/live-region-element": "^0.7.1"
   },
   "peerDependencies": {
     "@primer/primitives": "9.x || 10.x"

package.json

@@ -0,0 +1,22 @@
+# 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
+    class CollapsibleBorderBoxPreview < ViewComponent::Preview
+      # @label Playground
+      # def playground(string_example: "Some value", boolean_example: false, select_example: :one)
+      #   render(Primer::OpenProject::CollapsibleBorderBox.new(string_example: string_example, boolean_example: boolean_example, select_example: select_example))
+      # end
+
+      def default
+        render(Primer::OpenProject::CollapsibleBorderBox.new) do |component|
+          component.with_body { "Body" }
+        end
+      end
+    end
+  end
+end

previews/primer/open_project/collapsible_border_box_preview.rb

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

test/components/component_test.rb

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

test/components/primer/open_project/collapsible_border_box_test.rb

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