more option work

app/helpers/merged/merged_helper.rb

@@ -21,70 +21,5 @@ module Merged
       end
     end
 
-    def order_option(section)
-      return {} unless section.has_option?("order")
-      option = section.option('order')
-      puts "Order #{option}"
-      return {} if option == "right"
-      {class: "order-last"}
-    end
-
-    def align_option(section)
-      return {} unless section.has_option?("align")
-      option = section.option('align')
-      puts "align #{option}"
-      # text-center , text-left , text-right , leave comment for tailwind
-      {class: "text-#{option}"}
-    end
-
-    def background_option(section)
-      return {} unless section.has_option?("background")
-      option = section.option('background')
-      puts "Background #{option}"
-      return {} if option == "white"
-      case option
-      when "light_blue"
-        background = "bg-cyan-100"
-      when "solid_blue"
-        background = "bg-cyan-700 text-white"
-      when "solid_red"
-        background = "bg-orange-800 text-white"
-      when "solid_green"
-        background = "bg-green-700 text-white"
-      when "solid_petrol"
-        background = "bg-teal-700 text-white"
-      when "solid_indigo"
-        background = "bg-indigo-800 text-white"
-      else
-        background = "white"
-      end
-      {class: background}
-    end
-
-    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"
-      when "4"
-        columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
-      else # two
-        columns = "grid-cols-1 md:grid-cols-2"
-      end
-      {class: columns }
-
-    end
-    def button(text , url , color)
-      link_to(url) do
-        content_tag(:button , class: color + " " + button_classes ) do
-          text
-        end
-      end
-    end
-    def button_classes
-      "ml-3 inline-block rounded-lg px-4 py-3 text-md font-medium text-white"
-    end
   end
 end

app/helpers/merged/options_helper.rb

@@ -0,0 +1,91 @@
+module Merged
+  module OptionsHelper
+
+    # use options with as many option names as neccessary
+    def options(section, *args )
+      all = {}
+      args.each do |option_name|
+        hash = send "#{option_name}_option".to_sym , section
+        all.merge!(hash) { |key, one, two| one.to_s + " " + two.to_s }
+      end
+      all
+    end
+
+    def order_option(section)
+      return {} unless section.has_option?("order")
+      option = section.option('order')
+      puts "Order #{option}"
+      return {} if option == "left"
+      {class: "order-last"}
+    end
+
+    def align_option(section)
+      return {} unless section.has_option?("align")
+      option = section.option('align')
+      puts "align #{option}"
+      # text-center , text-left , text-right , leave comment for tailwind
+      {class: "text-#{option}"}
+    end
+
+    def background_option(section)
+      return {} unless section.has_option?("background")
+      option = section.option('background')
+      puts "Background #{option}"
+      background = bg_for(option)
+      background += " text-white" if option.include?("solid")
+      {class: background}
+    end
+
+    def color_option(section)
+      return {} unless section.has_option?("color")
+      option = section.option('color')
+      puts "Text color #{option} , #{color_for(option)}"
+      {class: color_for(option) }
+    end
+
+    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"
+      when "4"
+        columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+      else # two
+        columns = "grid-cols-1 md:grid-cols-2"
+      end
+      {class: columns }
+    end
+
+    private
+    # need full color names for tailwind to pick it up
+    def bg_for( option )
+      { "white" =>  "bg-white" ,
+        "none" =>  "" ,
+        "light_blue" => "bg-cyan-100" ,
+        "light_grey" => "bg-grey-100" ,
+        "light_orange" => "bg-orange-50" ,
+        "solid_blue" => "bg-cyan-700" ,
+        "solid_red" => "bg-orange-800" ,
+        "solid_green" => "bg-green-700" ,
+        "solid_petrol" => "bg-teal-700" ,
+        "solid_indigo" => "bg-indigo-800" ,
+        "solid_black" => "bg-slate-900" ,
+      }[option] || ""
+    end
+    # need full color names for tailwind to pick it up
+    def color_for( option )
+      { "white" => "text-white",
+        "none" => "",
+        "light_blue" => "text-cyan-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] || ""
+    end
+  end
+end

app/helpers/merged/view_helper.rb

@@ -1,6 +1,6 @@
 module Merged
   module ViewHelper
-    include MergedHelper
+    include OptionsHelper
     # section should be hash with at least 'template' key
     def find_template(section)
       "merged/view/" + section.template
@@ -25,5 +25,16 @@ module Merged
       image_tag("#{Image.image_root}/#{element.image}" , class: classes)
     end
 
+    def button(text , url , color)
+      link_to(url) do
+        content_tag(:button , class: color + " " + button_classes ) do
+          text
+        end
+      end
+    end
+    def button_classes
+      "ml-3 inline-block rounded-lg px-4 py-3 text-md font-medium text-white"
+    end
+
   end
 end

app/views/merged/cards/index.haml

@@ -16,7 +16,7 @@
   - @section.cards.each_with_index do |card , index|
     .relative.block.border.border-gray-100
       .p-4
-        %h3.mt-4.text-lg.font-bold Card #{index + 1}
+        %h3.mt-4.text-lg.font-bold Card #{index + 1}:#{card.header}
         = blue_button( "Up" , card_move_url(card.id , dir: :up) )
         = blue_button( "Down" , card_move_url(card.id , dir: :down) )
         = form_tag( card_url(card.id) , {method: :delete  } ) do

app/views/merged/view/_section_cards.haml

@@ -1,9 +1,9 @@
-.flex.flex-col.m-20{ background_option(section)}
+.flex.flex-col.m-20{ options(section , :background , :color)}
   .flex.items-center.justify-center.flex-1
     .max-w-prose.px-4.py-16.mx-auto.text-center
-      %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
+      %h1.text-2xl.font-bold.tracking-tight.sm:text-4xl
         = section.header
-      %p.mt-4.text-gray-700.pt-10
+      %p.mt-4.text-lg.pt-10
         = section.text
   - template = "merged/view/cards/" + section.card_template
   .grid{ column_option(section)}

app/views/merged/view/_section_half_image.haml

@@ -2,11 +2,17 @@
   %div{ order_option(section)}
     = image_for( section , "h-56 w-full object-cover sm:h-full")
   .p-8.md:p-12.lg:px-16.lg:py-24{ background_option(section)}
-    .mx-auto.max-w-xl.text-center.sm:text-left
-      %h2.text-2xl.font-bold.text-gray-900.md:text-3xl
+    .mx-auto.max-w-xl{options(section , :align , :color)}
+      %h2.mt-12.text-2xl.font-bold.md:text-4xl
         = section.header
-      %p.text-gray-500.mt-4.md:block
+      -if section.has_option?("subheader")
+        %h4.text-xl.mt-10.md:text-2xl
+          = section.option("subheader")
+      %p.mt-8.md:block
         = section.text
-      .mt-4.md:mt-8
+      -if section.has_option?("text")
+        %p.mt-8.md:block
+          = section.option("text")
+      .mt-8.md:mt-8
         -if section.has_option?("button_text")
           = render 'merged/view/elements/button' , section: section

app/views/merged/view/cards/_card_normal_square.haml

@@ -1,5 +1,7 @@
 %div.m-10{background_option(card)}
   = image_for( card , "h-96 w-full object-cover")
-  %div.m-4{align_option(card)}
-    %h3.mt-4.p-4.text-xl.font-bold= card.header
+  %div.m-6{options(card , :align , :color)}
+    %h3.p-4.text-2xl.font-bold= card.header
+    -if card.has_option?("subheader")
+      %h4.p-4.text-xl= card.option("subheader")
     %p.mt-2.p-4= card.text

config/styles.yaml

@@ -11,6 +11,8 @@ sections:
   options:
     - background
     - columns
+    - color
+    - align
     - button_link
     - button_text
 - template: section_full_up
@@ -27,10 +29,14 @@ sections:
     - header
     - text
   options:
-    - button_link
-    - button_text
     - order
     - background
+    - color
+    - subheader
+    - text
+    - align
+    - button_link
+    - button_text
 - template: section_full_left
   header: Full image header, text left
   text: Large picture background with Header and text towards the left.
@@ -59,7 +65,9 @@ cards:
     - text
   options:
     - background
+    - color
     - align
+    - subheader
 - template: card_normal_round
   header: Standard card with square image
   text: Image, header, text, normal stuff
@@ -82,8 +90,14 @@ options:
     desciption:
       Background colors. Light colors stay with black text.
       Solid colors invert to white text.
-    values: white light_blue solid_blue solid_red solid_indigo
-    default: white
+    values: white none light_blue light_grey light_orange solid_blue solid_red solid_indigo
+    default: none
+  - name: color
+    desciption:
+      Text colors. Don't use with solid background colors.
+      Same colors as background available. Default none, meas as parent.
+    values: none white light_blue light_grey solid_black solid_blue solid_red solid_indigo
+    default: none
   - name: align
     desciption:
       Align text of children. Normal Word meaning
@@ -93,6 +107,7 @@ options:
     desciption:
       For two column layout determine order of sub-cards
       Values of left and right usually refer to where the image is
+      For cards it can also mean up and down
     values: left right
     default: left
   - name: button_text
@@ -100,6 +115,16 @@ options:
       Text for an optional button. Must also set button_link
     values:
     default:
+  - name: subheader
+    desciption:
+      Smaller header between Header and text
+    values:
+    default:
+  - name: text
+    desciption:
+      Second text. Just a second paragraph
+    values:
+    default:
   - name: button_link
     desciption:
       Link for an option button. Must also set button_text.