Add Timeline component

lib/phlexy_ui/timeline.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  # @component html class="timeline"
+  class Timeline < Base
+    def initialize(*, as: :ul, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        # "timeline"
+        component_html_class: :timeline,
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def start(**options, &)
+      generate_classes!(
+        # "timeline-start"
+        component_html_class: :"timeline-start",
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
+    end
+
+    def middle(**options, &)
+      generate_classes!(
+        # "timeline-middle"
+        component_html_class: :"timeline-middle",
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
+    end
+
+    def end(**options, &)
+      generate_classes!(
+        # "timeline-end"
+        component_html_class: :"timeline-end",
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
+    end
+
+    register_modifiers(
+      # "sm:timeline-snap-icon"
+      # "@sm:timeline-snap-icon"
+      # "md:timeline-snap-icon"
+      # "@md:timeline-snap-icon"
+      # "lg:timeline-snap-icon"
+      # "@lg:timeline-snap-icon"
+      snap_icon: "timeline-snap-icon",
+      # "sm:timeline-box"
+      # "@sm:timeline-box"
+      # "md:timeline-box"
+      # "@md:timeline-box"
+      # "lg:timeline-box"
+      # "@lg:timeline-box"
+      box: "timeline-box",
+      # "sm:timeline-compact"
+      # "@sm:timeline-compact"
+      # "md:timeline-compact"
+      # "@md:timeline-compact"
+      # "lg:timeline-compact"
+      # "@lg:timeline-compact"
+      compact: "timeline-compact",
+      # "sm:timeline-vertical"
+      # "@sm:timeline-vertical"
+      # "md:timeline-vertical"
+      # "@md:timeline-vertical"
+      # "lg:timeline-vertical"
+      # "@lg:timeline-vertical"
+      vertical: "timeline-vertical",
+      # "sm:timeline-horizontal"
+      # "@sm:timeline-horizontal"
+      # "md:timeline-horizontal"
+      # "@md:timeline-horizontal"
+      # "lg:timeline-horizontal"
+      # "@lg:timeline-horizontal"
+      horizontal: "timeline-horizontal"
+    )
+  end
+end

spec/lib/phlexy_ui/timeline_spec.rb

@@ -0,0 +1,113 @@
+require "spec_helper"
+
+describe PhlexyUI::Timeline do
+  subject(:output) { render described_class.new }
+
+  it "is expected to match the formatted HTML" do
+    expected_html = html <<~HTML
+      <ul class="timeline"></ul>
+    HTML
+
+    is_expected.to eq(expected_html)
+  end
+
+  describe "with part methods" do
+    subject(:output) do
+      render described_class.new do |t|
+        t.start { "Start" }
+        t.middle { "Middle" }
+        t.end { "End" }
+      end
+    end
+
+    it "renders all parts" do
+      expected_html = html <<~HTML
+        <ul class="timeline">
+          <div class="timeline-start">Start</div>
+          <div class="timeline-middle">Middle</div>
+          <div class="timeline-end">End</div>
+        </ul>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+
+  describe "conditions" do
+    {
+      snap_icon: "timeline-snap-icon",
+      box: "timeline-box",
+      compact: "timeline-compact",
+      vertical: "timeline-vertical",
+      horizontal: "timeline-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
+            <ul class="timeline #{css}"></ul>
+          HTML
+
+          expect(output).to eq(expected_html)
+        end
+      end
+    end
+
+    context "when given multiple conditions" do
+      subject(:output) { render described_class.new(:vertical, :box) }
+
+      it "renders them separately" do
+        expected_html = html <<~HTML
+          <ul class="timeline timeline-vertical timeline-box"></ul>
+        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
+        <ul class="timeline" data-foo="bar"></ul>
+      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
+            <ul class="timeline timeline-vertical #{viewport}:timeline-horizontal"></ul>
+          HTML
+
+          expect(output).to eq(expected_html)
+        end
+      end
+    end
+  end
+
+  describe "passing :as option" do
+    subject(:output) { render described_class.new(as: :div) }
+
+    it "renders as the given tag" do
+      expected_html = html <<~HTML
+        <div class="timeline"></div>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+end