card styles and previews

app/controllers/merged/styles_controller.rb

@@ -2,8 +2,8 @@ module Merged
   class StylesController < MergedController
 
     def index
-      @styles = Style.all
+      @sections , @cards = Style.all
     end
-    
+
   end
 end

app/models/merged/style.rb

@@ -2,6 +2,9 @@ module Merged
   class Style
     include ActiveModel::API
 
+    cattr_accessor :sections , :cards
+    @@sections = []
+    @@cards = []
 
     attr_reader :content
 
@@ -21,14 +24,29 @@ module Merged
     def cards
       @content["cards"] == true
     end
-    def preview
+    def section_preview
       "merged/section_preview/" + template
     end
+    def card_preview
+      "merged/card_preview/" + template
+    end
+
+    def self.cards
+      self.all
+      @@cards
+    end
+    def self.sections
+      self.all
+      @@sections
+    end
 
     def self.all
-      # should account for app styles. now just loading engines
+      if @@sections.length == 0
-      @@styles = YAML.load_file(Engine.root.join("config/styles.yaml"))
+        all = YAML.load_file(Engine.root.join("config/styles.yaml"))
-      @@styles.collect{ |content| Style.new(content) }
+        all["sections"].each { |content| @@sections << Style.new(content) }
+        all["cards"].each { |content| @@cards << Style.new(content) }
+      end
+      [@@sections , @@cards]
     end
 
   end

app/views/merged/styles/index.haml

@@ -1,7 +1,10 @@
+.px-4.py-8.mx-auto.text-center
+  %h1.text-4xl.font-bold
+    Section styles
 .grid.grid-cols-3.gap-4.m-8
-  -@styles.each do |style|
+  -@sections.each do |style|
     %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
-      =image_tag(style.preview , class: "h-56 w-full object-contain lg:h-72")
+      =image_tag(style.section_preview , class: "h-56 w-full object-contain lg:h-72")
       %p.mt-2.text-sm.text-gray-500
         =style.template
     %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
@@ -23,3 +26,25 @@
             Section may include cards. See card styles below
           -else
             Section may not include cards
+
+.px-4.py-8.mx-auto.text-center
+  %h1.text-4xl.font-bold
+    Card styles
+.grid.grid-cols-3.gap-4.m-8
+  -@cards.each do |style|
+    %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      =image_tag(style.card_preview , class: "h-56 w-full object-contain lg:h-72")
+      %p.mt-2.text-sm.text-gray-500
+        =style.template
+    %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      .p-6
+        %h3.text-lg.font-medium.text-gray-900
+          =style.header
+        %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3
+          = style.text
+    %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      .p-6
+        %h3.text-lg.font-medium.text-gray-900
+          Option
+        %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3
+          Following options: none (wip)

config/styles.yaml

@@ -1,3 +1,5 @@
+---
+sections:
 - template: section_2_col
   header: Two column  layout with header
   text: A header with text and two column layout. Columns have a little gap, so
@@ -18,4 +20,8 @@
   text: Image left, header and text on the right. Optional button.
 - template: section_spacer
   header: Spacer
-  text: Just for extra padding 
+  text: Just for extra padding
+cards:
+- template: card_full_image
+  header: Full background
+  text: With text in bottom right corner, offset with solid color