Add Status component

lib/phlexy_ui/status.rb

@@ -0,0 +1,118 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Status < Base
+    def initialize(*, as: :span, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        # "status"
+        component_html_class: :status,
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    private
+
+    register_modifiers(
+      # "sm:status-xs"
+      # "@sm:status-xs"
+      # "md:status-xs"
+      # "@md:status-xs"
+      # "lg:status-xs"
+      # "@lg:status-xs"
+      xs: "status-xs",
+      # "sm:status-sm"
+      # "@sm:status-sm"
+      # "md:status-sm"
+      # "@md:status-sm"
+      # "lg:status-sm"
+      # "@lg:status-sm"
+      sm: "status-sm",
+      # "sm:status-md"
+      # "@sm:status-md"
+      # "md:status-md"
+      # "@md:status-md"
+      # "lg:status-md"
+      # "@lg:status-md"
+      md: "status-md",
+      # "sm:status-lg"
+      # "@sm:status-lg"
+      # "md:status-lg"
+      # "@md:status-lg"
+      # "lg:status-lg"
+      # "@lg:status-lg"
+      lg: "status-lg",
+      # "sm:status-xl"
+      # "@sm:status-xl"
+      # "md:status-xl"
+      # "@md:status-xl"
+      # "lg:status-xl"
+      # "@lg:status-xl"
+      xl: "status-xl",
+      # "sm:status-neutral"
+      # "@sm:status-neutral"
+      # "md:status-neutral"
+      # "@md:status-neutral"
+      # "lg:status-neutral"
+      # "@lg:status-neutral"
+      neutral: "status-neutral",
+      # "sm:status-primary"
+      # "@sm:status-primary"
+      # "md:status-primary"
+      # "@md:status-primary"
+      # "lg:status-primary"
+      # "@lg:status-primary"
+      primary: "status-primary",
+      # "sm:status-secondary"
+      # "@sm:status-secondary"
+      # "md:status-secondary"
+      # "@md:status-secondary"
+      # "lg:status-secondary"
+      # "@lg:status-secondary"
+      secondary: "status-secondary",
+      # "sm:status-accent"
+      # "@sm:status-accent"
+      # "md:status-accent"
+      # "@md:status-accent"
+      # "lg:status-accent"
+      # "@lg:status-accent"
+      accent: "status-accent",
+      # "sm:status-info"
+      # "@sm:status-info"
+      # "md:status-info"
+      # "@md:status-info"
+      # "lg:status-info"
+      # "@lg:status-info"
+      info: "status-info",
+      # "sm:status-success"
+      # "@sm:status-success"
+      # "md:status-success"
+      # "@md:status-success"
+      # "lg:status-success"
+      # "@lg:status-success"
+      success: "status-success",
+      # "sm:status-warning"
+      # "@sm:status-warning"
+      # "md:status-warning"
+      # "@md:status-warning"
+      # "lg:status-warning"
+      # "@lg:status-warning"
+      warning: "status-warning",
+      # "sm:status-error"
+      # "@sm:status-error"
+      # "md:status-error"
+      # "@md:status-error"
+      # "lg:status-error"
+      # "@lg:status-error"
+      error: "status-error"
+    )
+  end
+end

spec/lib/phlexy_ui/status_spec.rb

@@ -0,0 +1,153 @@
+require "spec_helper"
+
+describe PhlexyUI::Status do
+  subject(:output) { render described_class.new }
+
+  it "is expected to match the formatted HTML" do
+    expected_html = html <<~HTML
+      <span class="status"></span>
+    HTML
+
+    is_expected.to eq(expected_html)
+  end
+
+  describe "conditions" do
+    {
+      xs: "status-xs",
+      sm: "status-sm",
+      md: "status-md",
+      lg: "status-lg",
+      xl: "status-xl",
+      neutral: "status-neutral",
+      primary: "status-primary",
+      secondary: "status-secondary",
+      accent: "status-accent",
+      info: "status-info",
+      success: "status-success",
+      warning: "status-warning",
+      error: "status-error"
+    }.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
+            <span class="status #{css}"></span>
+          HTML
+
+          expect(output).to eq(expected_html)
+        end
+      end
+    end
+
+    context "when given multiple conditions" do
+      subject(:output) { render described_class.new(:primary, :lg) }
+
+      it "renders them separately" do
+        expected_html = html <<~HTML
+          <span class="status status-primary status-lg"></span>
+        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
+        <span class="status" data-foo="bar"></span>
+      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(:primary, responsive: {viewport => :secondary})
+        end
+
+        it "renders it separately with a responsive prefix" do
+          expected_html = html <<~HTML
+            <span class="status status-primary #{viewport}:status-secondary"></span>
+          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="status"></div>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+
+  describe "rendering via Kit" do
+    subject(:output) do
+      Status :primary, :lg
+    end
+
+    it "renders it correctly" do
+      expected_html = html <<~HTML
+        <span class="status status-primary status-lg"></span>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+
+  describe "rendering a full status" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::Status.new(:primary)
+          render PhlexyUI::Status.new(:secondary)
+          render PhlexyUI::Status.new(:accent)
+          render PhlexyUI::Status.new(:neutral)
+
+          render PhlexyUI::Status.new(:info)
+          render PhlexyUI::Status.new(:success)
+          render PhlexyUI::Status.new(:warning)
+          render PhlexyUI::Status.new(:error)
+          render PhlexyUI::Status.new
+        end
+      end
+    end
+
+    subject(:output) do
+      render component.new
+    end
+
+    it "renders it correctly" do
+      expected_html = html <<~HTML
+        <span class="status status-primary"></span>
+        <span class="status status-secondary"></span>
+        <span class="status status-accent"></span>
+        <span class="status status-neutral"></span>
+
+        <span class="status status-info"></span>
+        <span class="status status-success"></span>
+        <span class="status status-warning"></span>
+        <span class="status status-error"></span>
+        <span class="status"></span>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+end