From 6408e96bd924d227aee8f1f8e6f073f4e3fe6fb3 Mon Sep 17 00:00:00 2001 From: mhenrixon Date: Sat, 8 Nov 2025 08:16:32 +0100 Subject: [PATCH 1/2] Add Carousel component - Implements Carousel component with DaisyUI styling - Adds comprehensive test coverage - Includes responsive class comments for Tailwind --- lib/phlexy_ui/carousel.rb | 64 ++++++++++++++++ spec/lib/phlexy_ui/carousel_spec.rb | 110 ++++++++++++++++++++++++++++ 2 files changed, 174 insertions(+) create mode 100644 lib/phlexy_ui/carousel.rb create mode 100644 spec/lib/phlexy_ui/carousel_spec.rb diff --git a/lib/phlexy_ui/carousel.rb b/lib/phlexy_ui/carousel.rb new file mode 100644 index 0000000..8fa8bbb --- /dev/null +++ b/lib/phlexy_ui/carousel.rb @@ -0,0 +1,64 @@ +# frozen_string_literal: true + +module PhlexyUI + # @component html class="carousel" + class Carousel < Base + def initialize(*, as: :div, **) + super(*, **) + @as = as + end + + def view_template(&) + generate_classes!( + # "carousel" + component_html_class: :carousel, + modifiers_map: modifiers, + base_modifiers:, + options: + ).then do |classes| + public_send(as, class: classes, **options, &) + end + end + + def item(**options, &) + generate_classes!( + # "carousel-item" + component_html_class: :"carousel-item", + options: + ).then do |classes| + div(class: classes, **options, &) + end + end + + register_modifiers( + # "sm:carousel-start" + # "@sm:carousel-start" + # "md:carousel-start" + # "@md:carousel-start" + # "lg:carousel-start" + # "@lg:carousel-start" + start: "carousel-start", + # "sm:carousel-center" + # "@sm:carousel-center" + # "md:carousel-center" + # "@md:carousel-center" + # "lg:carousel-center" + # "@lg:carousel-center" + center: "carousel-center", + # "sm:carousel-end" + # "@sm:carousel-end" + # "md:carousel-end" + # "@md:carousel-end" + # "lg:carousel-end" + # "@lg:carousel-end" + end: "carousel-end", + # "sm:carousel-vertical" + # "@sm:carousel-vertical" + # "md:carousel-vertical" + # "@md:carousel-vertical" + # "lg:carousel-vertical" + # "@lg:carousel-vertical" + vertical: "carousel-vertical" + ) + end +end diff --git a/spec/lib/phlexy_ui/carousel_spec.rb b/spec/lib/phlexy_ui/carousel_spec.rb new file mode 100644 index 0000000..e141db7 --- /dev/null +++ b/spec/lib/phlexy_ui/carousel_spec.rb @@ -0,0 +1,110 @@ +require "spec_helper" + +describe PhlexyUI::Carousel do + subject(:output) { render described_class.new } + + it "is expected to match the formatted HTML" do + expected_html = html <<~HTML +
+ HTML + + is_expected.to eq(expected_html) + end + + describe "with item method" do + subject(:output) do + render described_class.new do |c| + c.item { "Item 1" } + c.item { "Item 2" } + end + end + + it "renders items" do + expected_html = html <<~HTML +
+
Item 1
+
Item 2
+
+ HTML + + expect(output).to eq(expected_html) + end + end + + describe "conditions" do + { + start: "carousel-start", + center: "carousel-center", + end: "carousel-end", + vertical: "carousel-vertical" + }.each do |modifier, css| + context "when given :#{modifier} modifier" do + subject(:output) { render described_class.new(modifier) } + + it "renders it apart from the main class" do + expected_html = html <<~HTML +
+ HTML + + expect(output).to eq(expected_html) + end + end + end + + context "when given multiple conditions" do + subject(:output) { render described_class.new(:center, :vertical) } + + it "renders them separately" do + expected_html = html <<~HTML +
+ HTML + + expect(output).to eq(expected_html) + end + end + end + + describe "data" do + subject(:output) do + render described_class.new(data: {foo: "bar"}) + end + + it "renders it correctly" do + expected_html = html <<~HTML +
+ HTML + + expect(output).to eq(expected_html) + end + end + + describe "responsiveness" do + %i[sm md lg xl @sm @md @lg @xl].each do |viewport| + context "when given an :#{viewport} responsive option" do + subject(:output) do + render described_class.new(:start, responsive: {viewport => :center}) + end + + it "renders it separately with a responsive prefix" do + expected_html = html <<~HTML +
+ HTML + + expect(output).to eq(expected_html) + end + end + end + end + + describe "passing :as option" do + subject(:output) { render described_class.new(as: :section) } + + it "renders as the given tag" do + expected_html = html <<~HTML +
+ HTML + + expect(output).to eq(expected_html) + end + end +end From 3758127a433b38e0cf2f11bda8d58d127d7584a7 Mon Sep 17 00:00:00 2001 From: mhenrixon Date: Sat, 8 Nov 2025 13:44:58 +0100 Subject: [PATCH 2/2] Add missing carousel-horizontal modifier to Carousel component --- lib/phlexy_ui/carousel.rb | 9 ++++++++- spec/lib/phlexy_ui/carousel_spec.rb | 3 ++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/lib/phlexy_ui/carousel.rb b/lib/phlexy_ui/carousel.rb index 8fa8bbb..4470298 100644 --- a/lib/phlexy_ui/carousel.rb +++ b/lib/phlexy_ui/carousel.rb @@ -58,7 +58,14 @@ def item(**options, &) # "@md:carousel-vertical" # "lg:carousel-vertical" # "@lg:carousel-vertical" - vertical: "carousel-vertical" + vertical: "carousel-vertical", + # "sm:carousel-horizontal" + # "@sm:carousel-horizontal" + # "md:carousel-horizontal" + # "@md:carousel-horizontal" + # "lg:carousel-horizontal" + # "@lg:carousel-horizontal" + horizontal: "carousel-horizontal" ) end end diff --git a/spec/lib/phlexy_ui/carousel_spec.rb b/spec/lib/phlexy_ui/carousel_spec.rb index e141db7..795fddf 100644 --- a/spec/lib/phlexy_ui/carousel_spec.rb +++ b/spec/lib/phlexy_ui/carousel_spec.rb @@ -36,7 +36,8 @@ start: "carousel-start", center: "carousel-center", end: "carousel-end", - vertical: "carousel-vertical" + vertical: "carousel-vertical", + horizontal: "carousel-horizontal" }.each do |modifier, css| context "when given :#{modifier} modifier" do subject(:output) { render described_class.new(modifier) }