Add Mockup components

lib/phlexy_ui/mockup_browser.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  # @component html class="mockup-browser"
+  class MockupBrowser < Base
+    def initialize(*, as: :div, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        # "mockup-browser"
+        component_html_class: :"mockup-browser",
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def toolbar(**options, &)
+      generate_classes!(
+        # "mockup-browser-toolbar"
+        component_html_class: :"mockup-browser-toolbar",
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
+    end
+  end
+end

lib/phlexy_ui/mockup_code.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  # @component html class="mockup-code"
+  class MockupCode < Base
+    def initialize(*, as: :div, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        # "mockup-code"
+        component_html_class: :"mockup-code",
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+  end
+end

lib/phlexy_ui/mockup_phone.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  # @component html class="mockup-phone"
+  class MockupPhone < Base
+    def initialize(*, as: :div, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        # "mockup-phone"
+        component_html_class: :"mockup-phone",
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def camera(**options, &)
+      generate_classes!(
+        # "mockup-phone-camera"
+        component_html_class: :"mockup-phone-camera",
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
+    end
+
+    def display(**options, &)
+      generate_classes!(
+        # "mockup-phone-display"
+        component_html_class: :"mockup-phone-display",
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
+    end
+  end
+end

lib/phlexy_ui/mockup_window.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  # @component html class="mockup-window"
+  class MockupWindow < Base
+    def initialize(*, as: :div, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        # "mockup-window"
+        component_html_class: :"mockup-window",
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+  end
+end

spec/lib/phlexy_ui/mockup_browser_spec.rb

@@ -0,0 +1,57 @@
+require "spec_helper"
+
+describe PhlexyUI::MockupBrowser do
+  subject(:output) { render described_class.new }
+
+  it "is expected to match the formatted HTML" do
+    expected_html = html <<~HTML
+      <div class="mockup-browser"></div>
+    HTML
+
+    is_expected.to eq(expected_html)
+  end
+
+  describe "with toolbar method" do
+    subject(:output) do
+      render described_class.new do |m|
+        m.toolbar { "Toolbar" }
+      end
+    end
+
+    it "renders toolbar" do
+      expected_html = html <<~HTML
+        <div class="mockup-browser">
+          <div class="mockup-browser-toolbar">Toolbar</div>
+        </div>
+      HTML
+
+      expect(output).to eq(expected_html)
+    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
+        <div class="mockup-browser" data-foo="bar"></div>
+      HTML
+
+      expect(output).to eq(expected_html)
+    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
+        <section class="mockup-browser"></section>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+end

spec/lib/phlexy_ui/mockup_code_spec.rb

@@ -0,0 +1,39 @@
+require "spec_helper"
+
+describe PhlexyUI::MockupCode do
+  subject(:output) { render described_class.new }
+
+  it "is expected to match the formatted HTML" do
+    expected_html = html <<~HTML
+      <div class="mockup-code"></div>
+    HTML
+
+    is_expected.to eq(expected_html)
+  end
+
+  describe "data" do
+    subject(:output) do
+      render described_class.new(data: {foo: "bar"})
+    end
+
+    it "renders it correctly" do
+      expected_html = html <<~HTML
+        <div class="mockup-code" data-foo="bar"></div>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+
+  describe "passing :as option" do
+    subject(:output) { render described_class.new(as: :pre) }
+
+    it "renders as the given tag" do
+      expected_html = html <<~HTML
+        <pre class="mockup-code"></pre>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+end

spec/lib/phlexy_ui/mockup_phone_spec.rb

@@ -0,0 +1,59 @@
+require "spec_helper"
+
+describe PhlexyUI::MockupPhone do
+  subject(:output) { render described_class.new }
+
+  it "is expected to match the formatted HTML" do
+    expected_html = html <<~HTML
+      <div class="mockup-phone"></div>
+    HTML
+
+    is_expected.to eq(expected_html)
+  end
+
+  describe "with part methods" do
+    subject(:output) do
+      render described_class.new do |m|
+        m.camera { "Camera" }
+        m.display { "Display" }
+      end
+    end
+
+    it "renders all parts" do
+      expected_html = html <<~HTML
+        <div class="mockup-phone">
+          <div class="mockup-phone-camera">Camera</div>
+          <div class="mockup-phone-display">Display</div>
+        </div>
+      HTML
+
+      expect(output).to eq(expected_html)
+    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
+        <div class="mockup-phone" data-foo="bar"></div>
+      HTML
+
+      expect(output).to eq(expected_html)
+    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
+        <section class="mockup-phone"></section>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+end

spec/lib/phlexy_ui/mockup_window_spec.rb

@@ -0,0 +1,39 @@
+require "spec_helper"
+
+describe PhlexyUI::MockupWindow do
+  subject(:output) { render described_class.new }
+
+  it "is expected to match the formatted HTML" do
+    expected_html = html <<~HTML
+      <div class="mockup-window"></div>
+    HTML
+
+    is_expected.to eq(expected_html)
+  end
+
+  describe "data" do
+    subject(:output) do
+      render described_class.new(data: {foo: "bar"})
+    end
+
+    it "renders it correctly" do
+      expected_html = html <<~HTML
+        <div class="mockup-window" data-foo="bar"></div>
+      HTML
+
+      expect(output).to eq(expected_html)
+    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
+        <section class="mockup-window"></section>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+end