Add Card component

lib/phlexy_ui/base.rb

@@ -18,7 +18,8 @@ def initialize(*normal_conditions, sm: [], md: [], lg: [], **options)
       :md_conditions,
       :lg_conditions,
       :options,
-      :data
+      :data,
+      :as
 
     def classes
       [

lib/phlexy_ui/card.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Card < Base
+    CONDITIONS_CLASSES = {
+      # Modifiers
+      image_full: "image-full",
+      bordered: "card-bordered",
+      normal: "card-normal",
+      compact: "card-compact",
+      side: "card-side"
+    }.freeze
+
+    BASE_HTML_CLASS = "card"
+
+    def initialize(*, as: :section, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      public_send(as, class: classes, data: data, &)
+    end
+
+    def body(**options, &)
+      classes = ["card-body", options.delete(:class)]
+
+      div(class: classes, **options, &)
+    end
+
+    def title(**options, &)
+      classes = ["card-title", options.delete(:class)]
+
+      header(class: classes, **options, &)
+    end
+
+    def actions(**options, &)
+      classes = ["card-actions", options.delete(:class)]
+
+      footer(class: classes, **options, &)
+    end
+  end
+end

spec/lib/phlexy_ui/card_spec.rb

@@ -0,0 +1,115 @@
+require "spec_helper"
+
+describe PhlexyUI::Card do
+  subject(:output) { render described_class.new }
+
+  it { is_expected.to eq(%(<section class="card"></section>)) }
+
+  describe "conditions" do
+    {
+      # Modifiers
+      image_full: "image-full",
+      bordered: "card-bordered",
+      normal: "card-normal",
+      compact: "card-compact",
+      side: "card-side"
+    }.each do |condition, css|
+      context "when given :#{condition} condition" do
+        subject(:output) { render described_class.new(condition) }
+
+        it "renders it apart from the main class" do
+          expect(output).to eq(%(<section class="card #{css}"></section>))
+        end
+      end
+    end
+  end
+
+  describe "responsiveness" do
+    %i[sm md lg].each do |viewport|
+      context "when given an :#{viewport} responsive option as a single argument" do
+        subject(:output) do
+          render described_class.new(:compact, viewport => :bordered)
+        end
+
+        it "renders it separately with a responsive prefix" do
+          expect(output)
+            .to eq(%(<section class="card card-compact #{viewport}:card-bordered"></section>))
+        end
+      end
+
+      context "when given multiple responsive options as an array" do
+        subject(:output) do
+          render described_class.new(:compact, viewport => [:normal, :bordered])
+        end
+
+        it "renders it separately with a responsive prefix" do
+          expect(output)
+            .to eq(%(<section class="card card-compact #{viewport}:card-normal #{viewport}:card-bordered"></section>))
+        end
+      end
+
+      context "when it's prefixed" do
+        around do |example|
+          original_prefix = PhlexyUI.configuration.prefix
+
+          PhlexyUI.configure do |config|
+            config.prefix = "foo-"
+          end
+
+          example.run
+
+          PhlexyUI.configure do |config|
+            config.prefix = original_prefix
+          end
+        end
+
+        subject(:output) do
+          render described_class.new(:compact, viewport => [:normal, :bordered])
+        end
+
+        it "renders it separately with a responsive prefix" do
+          expect(output)
+            .to eq(%(<section class="foo-card foo-card-compact #{viewport}:foo-card-normal #{viewport}:foo-card-bordered"></section>))
+        end
+      end
+    end
+  end
+
+  describe "passing :as option" do
+    subject(:output) { render described_class.new(as: :div) }
+
+    it "renders the card as the given tag" do
+      expect(output).to eq(%(<div class="card"></div>))
+    end
+  end
+
+  describe "rendering a full card" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::Card.new(:compact) do |card|
+            card.body class: "my-body", data: {my: "bodies"}, style: "color: red;" do
+              card.figure class: "my-figure", data: {my: "figures"} do
+                card.img src: "image.jpg"
+              end
+
+              card.title class: "my-title", data: {my: "titles"} do
+                h1 { "My title" }
+              end
+
+              card.actions class: "my-actions", data: {my: "actions"} do
+                div { "My actions" }
+              end
+            end
+          end
+        end
+      end
+    end
+
+    subject(:output) do
+      render component.new
+    end
+
+    it { is_expected.to eq(%(<section class="card card-compact"><div class="card-body my-body" data-my="bodies" style="color: red;"><figure class="my-figure" data-my="figures"><img src="image.jpg"></figure><header class="card-title my-title" data-my="titles"><h1>My title</h1></header><footer class="card-actions my-actions" data-my="actions"><div>My actions</div></footer></div></section>)) }
+  end
+end