Responsive modifiers should be passed via a responsive: hash

In preparation for conditional modifiers.

lib/phlexy_ui/class_list.rb

@@ -67,8 +67,10 @@ def html_classes_for_modifiers(modifiers, responsive_prefix: nil)
     end
 
     def add_responsive_modifiers_classes(classes)
+      return unless (responsive_options = options.delete(:responsive))
+
       RESPONSIVE_PREFIXES.each do |responsive_prefix|
-        if (values = options.delete(responsive_prefix))
+        if (values = responsive_options[responsive_prefix])
           classes.concat(
             html_classes_for_modifiers(
               Array(values),

spec/lib/phlexy_ui/badge_spec.rb

@@ -7,7 +7,7 @@
     let(:component) do
       Class.new(Phlex::HTML) do
         def view_template(&)
-          render PhlexyUI::Badge.new(:neutral) do
+          render PhlexyUI::Badge.new(:neutral, primary: false, secondary: true) do
             div do
               "+"
             end
@@ -24,7 +24,7 @@ def view_template(&)
 
     it "is expected to match the formatted HTML" do
       expected_html = html <<~HTML
-        <span class="badge badge-neutral"><div>+</div>Badge</span>
+        <span class="badge badge-neutral badge-secondary"><div>+</div>Badge</span>
       HTML
 
       is_expected.to eq(expected_html)

spec/lib/phlexy_ui/button_spec.rb

@@ -118,7 +118,7 @@
     %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(:neutral, viewport => :primary)
+          render described_class.new(:neutral, responsive: {viewport => :primary})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -132,7 +132,7 @@
 
       context "when given multiple responsive options as an array" do
         subject(:output) do
-          render described_class.new(:neutral, viewport => [:primary, :active])
+          render described_class.new(:neutral, responsive: {viewport => [:primary, :active]})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -165,7 +165,7 @@
         end
 
         subject(:output) do
-          render described_class.new(:neutral, viewport => [:primary, :active])
+          render described_class.new(:neutral, responsive: {viewport => [:primary, :active]})
         end
 
         it "renders it separately with a responsive prefix" do

spec/lib/phlexy_ui/card_spec.rb

@@ -186,7 +186,7 @@
     %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 => :primary)
+          render described_class.new(:compact, responsive: {viewport => :primary})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -205,7 +205,7 @@
 
       context "when given multiple responsive options as an array" do
         subject(:output) do
-          render described_class.new(:compact, viewport => [:normal, :primary])
+          render described_class.new(:compact, responsive: {viewport => [:normal, :primary]})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -239,7 +239,7 @@
         end
 
         subject(:output) do
-          render described_class.new(:compact, viewport => [:normal, :primary])
+          render described_class.new(:compact, responsive: {viewport => [:normal, :primary]})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -283,7 +283,7 @@
         subject(:output) do
           render described_class.new(
             :my_modifier,
-            viewport => :my_other_modifier
+            responsive: {viewport => :my_other_modifier}
           )
         end
 

spec/lib/phlexy_ui/drawer_spec.rb

@@ -87,7 +87,7 @@
     %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(:open, viewport => :end, :id => :my_drawer)
+          render described_class.new(:open, responsive: {viewport => :end}, id: :my_drawer)
         end
 
         it "renders it separately with a responsive prefix" do
@@ -102,7 +102,7 @@
 
       context "when given multiple responsive options as an array" do
         subject(:output) do
-          render described_class.new(:open, viewport => [:open, :end], :id => :my_drawer)
+          render described_class.new(:open, responsive: {viewport => [:open, :end]}, id: :my_drawer)
         end
 
         it "renders it separately with a responsive prefix" do
@@ -135,7 +135,7 @@
         end
 
         subject(:output) do
-          render described_class.new(:open, viewport => [:open, :end], :id => :my_drawer)
+          render described_class.new(:open, responsive: {viewport => [:open, :end]}, id: :my_drawer)
         end
 
         it "renders it separately with a responsive prefix" do

spec/lib/phlexy_ui/menu_spec.rb

@@ -122,7 +122,7 @@
     %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(:xs, viewport => :vertical)
+          render described_class.new(:xs, responsive: {viewport => :vertical})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -137,7 +137,7 @@
 
       context "when given multiple responsive options as an array" do
         subject(:output) do
-          render described_class.new(:xs, viewport => [:horizontal, :vertical])
+          render described_class.new(:xs, responsive: {viewport => [:horizontal, :vertical]})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -170,7 +170,7 @@
         end
 
         subject(:output) do
-          render described_class.new(:xs, viewport => [:horizontal, :vertical])
+          render described_class.new(:xs, responsive: {viewport => [:horizontal, :vertical]})
         end
 
         it "renders it separately with a responsive prefix" do

spec/lib/phlexy_ui/table_spec.rb

@@ -167,7 +167,7 @@
     %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(:zebra, viewport => :pin_cols)
+          render described_class.new(:zebra, responsive: {viewport => :pin_cols})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -185,7 +185,7 @@
 
       context "when given multiple responsive options as an array" do
         subject(:output) do
-          render described_class.new(:zebra, viewport => [:pin_cols, :xs])
+          render described_class.new(:zebra, responsive: {viewport => [:pin_cols, :xs]})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -218,7 +218,7 @@
         end
 
         subject(:output) do
-          render described_class.new(:zebra, viewport => [:pin_cols, :xs])
+          render described_class.new(:zebra, responsive: {viewport => [:pin_cols, :xs]})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -261,7 +261,7 @@
         subject(:output) do
           render described_class.new(
             :my_modifier,
-            viewport => :my_other_modifier
+            responsive: {viewport => :my_other_modifier}
           )
         end
 
@@ -295,11 +295,33 @@
     end
   end
 
+  describe "conditional modifiers" do
+    subject(:output) do
+      render PhlexyUI::Table.new(
+        :zebra,
+        xs: false,
+        sm: true,
+        pin_cols: true,
+        responsive: {sm: :pin_cols}
+      )
+    end
+
+    it "renders it correctly" do
+      expected_html = html <<~HTML
+        <table 
+          class="table table-zebra table-pin-cols table-sm sm:table-pin-cols">
+        </table>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+
   describe "rendering a full table" do
     let(:component) do
       Class.new(Phlex::HTML) do
         def view_template(&)
-          render PhlexyUI::Table.new(:zebra) do |table|
+          render PhlexyUI::Table.new(:zebra, xs: false, sm: true, pin_cols: true) do |table|
             table.header do |header|
               header.row do |row|
                 row.head { "" }
@@ -345,7 +367,7 @@ def view_template(&)
 
     it "is expected to match the formatted HTML" do
       expected_html = html <<~HTML
-        <table class="table table-zebra">
+        <table class="table table-zebra table-pin-cols table-sm">
           <thead>
             <tr>
               <th></th>

spec/lib/phlexy_ui/tabs_spec.rb

@@ -115,7 +115,7 @@
     %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(:boxed, viewport => :bordered)
+          render described_class.new(:boxed, responsive: {viewport => :bordered})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -130,7 +130,7 @@
 
       context "when given multiple responsive options as an array" do
         subject(:output) do
-          render described_class.new(:boxed, viewport => [:boxed, :bordered])
+          render described_class.new(:boxed, responsive: {viewport => [:boxed, :bordered]})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -163,7 +163,7 @@
         end
 
         subject(:output) do
-          render described_class.new(:boxed, viewport => [:boxed, :bordered])
+          render described_class.new(:boxed, responsive: {viewport => [:boxed, :bordered]})
         end
 
         it "renders it separately with a responsive prefix" do
@@ -212,7 +212,7 @@
     let(:component) do
       Class.new(Phlex::HTML) do
         def view_template(&)
-          render PhlexyUI::Tabs.new :lifted, id: "my_tabs_2" do |tabs|
+          render PhlexyUI::Tabs.new :lifted, boxed: false, id: "my_tabs_2" do |tabs|
             tabs.tab "Tab 1", :active, :closed, data: {my: :tabs} do |tab|
               tab.content class: "bg-base-100 border-base-300 rounded-box p-6" do
                 "Tab content 1"

spec/lib/phlexy_ui/tooltip_spec.rb

@@ -4,18 +4,18 @@
   subject(:output) { render described_class.new }
 
   describe "rendering via Kit" do
-      subject(:output) do
-        Tooltip tip: "A tooltip"
-      end
-
-      it "renders it correctly" do
-        expected_html = html <<~HTML
-          <div class="tooltip" data-tip="A tooltip"></div>
-        HTML
-
-        expect(output).to eq(expected_html)
-      end
+    subject(:output) do
+      Tooltip tip: "A tooltip"
+    end
+
+    it "renders it correctly" do
+      expected_html = html <<~HTML
+        <div class="tooltip" data-tip="A tooltip"></div>
+      HTML
+
+      expect(output).to eq(expected_html)
     end
+  end
 
   describe "passing :as option" do
     subject(:output) { render described_class.new(as: :a, tip: "A tooltip") }