From 1ca9947ef4f7e331af79d88d7e46f37b13616780 Mon Sep 17 00:00:00 2001 From: mhenrixon Date: Sat, 8 Nov 2025 08:18:05 +0100 Subject: [PATCH 1/2] Add Steps component - Implements Steps component with DaisyUI styling - Adds comprehensive test coverage - Includes responsive class comments for Tailwind --- lib/phlexy_ui/steps.rb | 60 +++++++++++++++++++ spec/lib/phlexy_ui/steps_spec.rb | 98 ++++++++++++++++++++++++++++++++ 2 files changed, 158 insertions(+) create mode 100644 lib/phlexy_ui/steps.rb create mode 100644 spec/lib/phlexy_ui/steps_spec.rb diff --git a/lib/phlexy_ui/steps.rb b/lib/phlexy_ui/steps.rb new file mode 100644 index 0000000..6ddba45 --- /dev/null +++ b/lib/phlexy_ui/steps.rb @@ -0,0 +1,60 @@ +# frozen_string_literal: true + +module PhlexyUI + # @component html class="steps" + class Steps < Base + def initialize(*, as: :ul, **) + super(*, **) + @as = as + end + + def view_template(&) + generate_classes!( + # "steps" + component_html_class: :steps, + modifiers_map: modifiers, + base_modifiers:, + options: + ).then do |classes| + public_send(as, class: classes, **options, &) + end + end + + def step(**options, &) + generate_classes!( + # "step" + component_html_class: :step, + options: + ).then do |classes| + li(class: classes, **options, &) + end + end + + def icon(**options, &) + generate_classes!( + # "step-icon" + component_html_class: :"step-icon", + options: + ).then do |classes| + div(class: classes, **options, &) + end + end + + register_modifiers( + # "sm:steps-vertical" + # "@sm:steps-vertical" + # "md:steps-vertical" + # "@md:steps-vertical" + # "lg:steps-vertical" + # "@lg:steps-vertical" + vertical: "steps-vertical", + # "sm:steps-horizontal" + # "@sm:steps-horizontal" + # "md:steps-horizontal" + # "@md:steps-horizontal" + # "lg:steps-horizontal" + # "@lg:steps-horizontal" + horizontal: "steps-horizontal" + ) + end +end diff --git a/spec/lib/phlexy_ui/steps_spec.rb b/spec/lib/phlexy_ui/steps_spec.rb new file mode 100644 index 0000000..59779c5 --- /dev/null +++ b/spec/lib/phlexy_ui/steps_spec.rb @@ -0,0 +1,98 @@ +require "spec_helper" + +describe PhlexyUI::Steps 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 step and icon methods" do + subject(:output) do + render described_class.new do |s| + s.step { "Step 1" } + s.step { "Step 2" } + s.icon { "Icon" } + end + end + + it "renders all parts" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + end + end + + describe "conditions" do + { + vertical: "steps-vertical", + horizontal: "steps-horizontal" + }.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 + 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(:vertical, responsive: {viewport => :horizontal}) + 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: :ol) } + + it "renders as the given tag" do + expected_html = html <<~HTML +
    + HTML + + expect(output).to eq(expected_html) + end + end +end From 48a1b8735a3df409a4ac21c87f0ec2c9b0469772 Mon Sep 17 00:00:00 2001 From: mhenrixon Date: Sat, 8 Nov 2025 13:56:37 +0100 Subject: [PATCH 2/2] Add missing step color modifiers to Steps component - Add neutral, primary, secondary, accent, info, success, warning, error colors for individual steps - Add comprehensive test coverage for all step colors - Includes responsive class comments for Tailwind --- lib/phlexy_ui/steps.rb | 65 +++++++++++++++++++++++++++++++- spec/lib/phlexy_ui/steps_spec.rb | 31 +++++++++++++++ 2 files changed, 95 insertions(+), 1 deletion(-) diff --git a/lib/phlexy_ui/steps.rb b/lib/phlexy_ui/steps.rb index 6ddba45..d0847d9 100644 --- a/lib/phlexy_ui/steps.rb +++ b/lib/phlexy_ui/steps.rb @@ -20,16 +20,79 @@ def view_template(&) end end - def step(**options, &) + def step(*modifiers, **options, &) generate_classes!( # "step" component_html_class: :step, + modifiers_map: step_modifiers, + base_modifiers: modifiers, options: ).then do |classes| li(class: classes, **options, &) end end + def step_modifiers + { + # "sm:step-neutral" + # "@sm:step-neutral" + # "md:step-neutral" + # "@md:step-neutral" + # "lg:step-neutral" + # "@lg:step-neutral" + neutral: "step-neutral", + # "sm:step-primary" + # "@sm:step-primary" + # "md:step-primary" + # "@md:step-primary" + # "lg:step-primary" + # "@lg:step-primary" + primary: "step-primary", + # "sm:step-secondary" + # "@sm:step-secondary" + # "md:step-secondary" + # "@md:step-secondary" + # "lg:step-secondary" + # "@lg:step-secondary" + secondary: "step-secondary", + # "sm:step-accent" + # "@sm:step-accent" + # "md:step-accent" + # "@md:step-accent" + # "lg:step-accent" + # "@lg:step-accent" + accent: "step-accent", + # "sm:step-info" + # "@sm:step-info" + # "md:step-info" + # "@md:step-info" + # "lg:step-info" + # "@lg:step-info" + info: "step-info", + # "sm:step-success" + # "@sm:step-success" + # "md:step-success" + # "@md:step-success" + # "lg:step-success" + # "@lg:step-success" + success: "step-success", + # "sm:step-warning" + # "@sm:step-warning" + # "md:step-warning" + # "@md:step-warning" + # "lg:step-warning" + # "@lg:step-warning" + warning: "step-warning", + # "sm:step-error" + # "@sm:step-error" + # "md:step-error" + # "@md:step-error" + # "lg:step-error" + # "@lg:step-error" + error: "step-error" + } + end + def icon(**options, &) generate_classes!( # "step-icon" diff --git a/spec/lib/phlexy_ui/steps_spec.rb b/spec/lib/phlexy_ui/steps_spec.rb index 59779c5..d6c009c 100644 --- a/spec/lib/phlexy_ui/steps_spec.rb +++ b/spec/lib/phlexy_ui/steps_spec.rb @@ -52,6 +52,37 @@ end end + describe "step colors" do + { + neutral: "step-neutral", + primary: "step-primary", + secondary: "step-secondary", + accent: "step-accent", + info: "step-info", + success: "step-success", + warning: "step-warning", + error: "step-error" + }.each do |color, css| + context "when step is given :#{color} modifier" do + subject(:output) do + render described_class.new do |s| + s.step(color) { "Step 1" } + end + end + + it "renders step with color class" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + end + end + end + end + describe "data" do subject(:output) do render described_class.new(data: {foo: "bar"})