From 078cbb78e1a31d317c71e23b087cccbf25ad4d9b Mon Sep 17 00:00:00 2001 From: Alexander Brandon Coles Date: Tue, 19 May 2026 12:26:54 +0200 Subject: [PATCH] Show description: in Border Box List previews --- .../border_box_list_component_preview.rb | 19 ++-- .../border_box_list_component_preview_spec.rb | 88 +++++++++++++++++++ 2 files changed, 102 insertions(+), 5 deletions(-) create mode 100644 spec/components/open_project/common/border_box_list_component_preview_spec.rb diff --git a/lookbook/previews/open_project/common/border_box_list_component_preview.rb b/lookbook/previews/open_project/common/border_box_list_component_preview.rb index 8b7e459222e..fd610311310 100644 --- a/lookbook/previews/open_project/common/border_box_list_component_preview.rb +++ b/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" } diff --git a/spec/components/open_project/common/border_box_list_component_preview_spec.rb b/spec/components/open_project/common/border_box_list_component_preview_spec.rb new file mode 100644 index 00000000000..72d290f4f97 --- /dev/null +++ b/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