Show description: in Border Box List previews

lookbook/previews/open_project/common/border_box_list_component_preview.rb

@@ -32,11 +32,17 @@ module OpenProject
   module Common
     # @logical_path OpenProject/Common
     class BorderBoxListComponentPreview < ViewComponent::Preview
+      DEFAULT_DESCRIPTION = "Coordinate launch work and keep stakeholders aligned."
+      TRANSPARENT_DESCRIPTION = "Sprint goals, scope, and timing for the next iteration."
+      PLAYGROUND_DESCRIPTION =
+        "Preview a longer header description to check wrapping, spacing, and alignment with actions in this list."
+
       # @label Default
       # @param padding [Symbol] select [default, condensed, spacious]
+      # @param description text
       # @param interactive toggle
       # @param collapsible toggle
-      def default(padding: :default, interactive: false, collapsible: false)
+      def default(padding: :default, description: DEFAULT_DESCRIPTION, interactive: false, collapsible: false)
         render OpenProject::Common::BorderBoxListComponent.new(
           container: "border-box-list-preview",
           padding:,
@@ -44,7 +50,7 @@ module OpenProject
           collapsible: boolean_preview_param(collapsible)
         ) do |list|
           list.with_header(title: "Things we're building", count: true) do |header|
-            header.with_description { "There's lots to look forward to" }
+            header.with_description_content(description)
             header.with_action_button do |button|
               button.with_leading_visual_icon(icon: :pencil)
               "Edit"
@@ -65,9 +71,10 @@ module OpenProject
 
       # @label Transparent scheme
       # @param padding [Symbol] select [default, condensed, spacious]
+      # @param description text
       # @param interactive toggle
       # @param collapsible [Boolean] toggle
-      def transparent(padding: :default, interactive: false, collapsible: false)
+      def transparent(padding: :default, description: TRANSPARENT_DESCRIPTION, interactive: false, collapsible: false)
         render OpenProject::Common::BorderBoxListComponent.new(
           container: "border-box-list-transparent-preview",
           scheme: :transparent,
@@ -76,7 +83,7 @@ module OpenProject
           collapsible: boolean_preview_param(collapsible)
         ) do |list|
           list.with_header(title: "Sprint backlog", count: true) do |header|
-            header.with_description { "3 points remaining" }
+            header.with_description_content(description)
             header.with_action_button do |button|
               button.with_leading_visual_icon(icon: :rocket)
               "Start sprint"
@@ -119,6 +126,7 @@ module OpenProject
       # @param count_scheme [Symbol] select [primary, secondary]
       # @param hide_zero_count toggle
       # @param padding [Symbol] select [default, condensed, spacious]
+      # @param description text
       # @param interactive toggle
       # @param collapsible toggle
       def playground(
@@ -127,6 +135,7 @@ module OpenProject
         count_scheme: :primary,
         hide_zero_count: true,
         padding: :default,
+        description: PLAYGROUND_DESCRIPTION,
         interactive: false,
         collapsible: false
       )
@@ -146,7 +155,7 @@ module OpenProject
               aria: { label: "Visible list item count" }
             }
           ) do |header|
-            header.with_description { "Advanced header options" }
+            header.with_description_content(description)
           end
 
           list.with_item { "First item" }

spec/components/open_project/common/border_box_list_component_preview_spec.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+require "rails_helper"
+require Rails.root.join("lookbook/previews/open_project/common/border_box_list_component_preview").to_s
+
+RSpec.describe OpenProject::Common::BorderBoxListComponentPreview, type: :component do
+  it "renders a realistic default preview description" do
+    render_preview(:default, from: described_class)
+
+    expect(page).to have_text("Coordinate launch work and keep stakeholders aligned.")
+  end
+
+  it "renders the default preview with the provided description text" do
+    render_preview(
+      :default,
+      from: described_class,
+      params: {
+        description: "Default preview description that demonstrates how text wraps near the header action buttons."
+      }
+    )
+
+    expect(page).to have_text(
+      "Default preview description that demonstrates how text wraps near the header action buttons."
+    )
+  end
+
+  it "renders a realistic transparent preview description" do
+    render_preview(:transparent, from: described_class)
+
+    expect(page).to have_text("Sprint goals, scope, and timing for the next iteration.")
+  end
+
+  it "renders the transparent preview with the provided description text" do
+    render_preview(
+      :transparent,
+      from: described_class,
+      params: {
+        description: "Transparent preview description that demonstrates how text wraps near the sprint action buttons."
+      }
+    )
+
+    expect(page).to have_text(
+      "Transparent preview description that demonstrates how text wraps near the sprint action buttons."
+    )
+  end
+
+  it "renders the playground preview with the provided description text" do
+    render_preview(
+      :playground,
+      from: described_class,
+      params: {
+        description: "A longer playground description that demonstrates wrapping behavior in the list header preview."
+      }
+    )
+
+    expect(page).to have_text(
+      "A longer playground description that demonstrates wrapping behavior in the list header preview."
+    )
+  end
+end