more option work

app/helpers/merged/options_helper.rb

@@ -29,7 +29,7 @@ module Merged
     def background_option(section , clazz = "")
       if section.has_option?("background")
         option = section.option('background')
-        clazz += bg_for(option)
+        clazz += bg_for(section)
         clazz += " text-white" if option.include?("solid")
       end
       {class: clazz}
@@ -37,21 +37,21 @@ module Merged
 
     def margin_option(section , clazz = "")
       if section.has_option?("margin")
-        clazz += margin_for(section.option("margin"))
+        clazz += margin_for(section)
       end
       {class: clazz}
     end
 
     def color_option(section , clazz = "")
       if section.has_option?("color")
-        clazz += color_for(section.option("color"))
+        clazz += color_for(section)
       end
       {class: clazz }
     end
 
-    def shade_option(section)
+    def shade_option(section , clazz = "")
       if section.has_option?("shade_color")
-        clazz += shade_for(section.option("shade_color"))
+        clazz += shade_for(section)
       end
       {class: clazz }
     end
@@ -59,7 +59,6 @@ module Merged
     def column_option(section)
       option = section.option('columns')
       option = 2 if option.blank?
-      puts "Columns #{option}"
       case option
       when "3"
         columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
@@ -73,7 +72,7 @@ module Merged
 
     private
     # need full color names for tailwind to pick it up
-    def bg_for( option )
+    def bg_for( section )
       { "white" =>  " bg-white" ,
         "none" =>  "" ,
         "light_blue" => " bg-cyan-100" ,
@@ -85,31 +84,32 @@ module Merged
         "solid_petrol" => " bg-teal-700" ,
         "solid_indigo" => " bg-indigo-800" ,
         "solid_black" => " bg-slate-900" ,
-      }[option] || ""
+      }[section.option('background')] || ""
     end
     # need full margin names for tailwind to pick it up
-    def margin_for( option )
+    def margin_for( section )
       { "0" =>  " m-0" ,
         "none" =>  "" ,
         "20" => " m-20" ,
-      }[option] || ""
+      }[section.option("margin")] || ""
     end
     # need full color names for tailwind to pick it up
-    def color_for( option )
+    def color_for( section )
       { "white" => " text-white",
         "none" => "",
         "light_blue" => " text-cyan-100" ,
+        "light_gray" => " text-gray-100" ,
         "solid_blue" => " text-cyan-700" ,
         "solid_red" => " text-orange-800" ,
         "solid_green" => " text-green-700" ,
         "solid_petrol" => " text-teal-700" ,
         "solid_indigo" => " text-indigo-800" ,
-        "solid_black" => " text-slate-900" ,
-      }[option] || ""
+        "solid_black" => " text-slate-800" ,
+      }[section.option("color")] || ""
     end
     # need full color names for tailwind to pick it up
 
-    def shade_for( option )
+    def shade_for( section )
       { "white_25" => " bg-white/25",
         "none" => "",
         "black_25" => " bg-black/25" ,
@@ -117,7 +117,7 @@ module Merged
         "light_red_25" => " bg-orange-300/25" ,
         "solid_blue_25" => " bg-cyan-700/25" ,
         "solid_red_25" => " bg-orange-800/25" ,
-      }[option] || ""
+      }[section.option("shade_color")] || ""
     end
   end
 end

app/views/merged/view/_section_full_up.haml

@@ -1,7 +1,10 @@
 .flex.flex-col{ options(section , :background , :color , :margin)}
   .flex.items-center.justify-center.flex-1
-    .max-w-prose.px-4.py-16.mx-auto.text-center
+    .max-w-prose.px-4.py-16.mx-auto.text-center{options(section , :align , :color)}
       %h1.text-2xl.font-bold.tracking-tight.sm:text-4xl
         = section.header
+      -if section.has_option?("subheader")
+        %h4.text-xl.mt-10.md:text-2xl
+          = section.option("subheader")
       %p.mt-4.text-lg.pt-10
-        = section.text
+        = section.text.html_safe

app/views/merged/view/_section_large_image.haml

@@ -1,8 +1,11 @@
-.flex.justify-center.h-96.p-8{margin_option(section )}
+.flex.justify-center.h-96.p-8{options(section , :margin , :background )}
   .flex.items-center.w-full.overflow-hidden{order_option(section, "w-2/3")}
     = image_for(section ,"")
   .flex.items-center.w-full.max-w-md.px-6.mx-auto{:class => "w-1/3"}
     .flex-1{color_option(section)}
       .text-center
         %h2.text-4xl.font-bold.text-center.mb-8= section.header
+        -if section.has_option?("subheader")
+          %h4.text-xl.mt-10.md:text-2xl
+            = section.option("subheader")
         %p.mt-3= section.text

config/styles.yaml

@@ -22,6 +22,7 @@ sections:
     - background
     - color
     - margin
+    - subheader
     - button_link
     - button_text
 - template: section_half_image
@@ -64,6 +65,8 @@ sections:
     - header
     - text
   options:
+    - subheader
+    - margin
     - order
     - color
     - background