mjml-rb 0.2.16 → 0.2.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3808a2e62a0c9a19970937ba5890b4257e8623442efc738e7725b20b11f412e0
-  data.tar.gz: 82f3f5e33d4f0b302cc0329dde2b4402713349850865cf591ade0762650f8579
+  metadata.gz: 12ea5b420bd39082c2111d56d58acc08c7f79a198e81a5d9b144cca8965ad90b
+  data.tar.gz: 7905538950c04f1d6973a77bdcff821ab14f75276a29258d20a6024f07ea586d
 SHA512:
-  metadata.gz: 47b7c807c43e56df28c60a7c0fae60002c8a95782bc733e293aff5f3b41e06952fd94bedd421fb669fe3002ce261708146d628bce64a79a929706530f6069028
-  data.tar.gz: 740e73174150f6130b39f8be696e584a75f56a5daa5387bfd45458f1a44706f84d2c6d25e000229f9ba3a5b28036236de7fa16deb3c1158979d3a1d55e9afd6c
+  metadata.gz: 851b51c74451340b5e25742f0966f21bbc1fb3b77dee2ec6eff6bc19846271dfbbf7e8fe7a35d71cf9ef9d119f8aa5558ae0c1cd281e90959e5c69ddb1d0545a
+  data.tar.gz: cfd996177dd6703317f5f67e7dd7634eb8b603721db54e5021a65e8930f764466d533b1f2c4effe0d7c76ae3574ebc03984a373c369b317384f9f0ba210ddbd4

data/lib/mjml-rb/components/section.rb

@@ -29,6 +29,7 @@ module MjmlRb
       }.freeze
 
       WRAPPER_ALLOWED_ATTRIBUTES = SECTION_ALLOWED_ATTRIBUTES.merge(
+        "gap" => "unit(px)",
         "full-width" => "enum(full-width)"
       ).freeze
 
@@ -294,6 +295,7 @@ module MjmlRb
         bg_color     = a["background-color"]
         border_radius = a["border-radius"]
         bg_has       = has_background?(a)
+        wrapper_gap  = context[:_wrapper_child_gap]
 
         # Box width: container minus horizontal padding and borders
         border_left  = parse_border_width(a["border-left"] || a["border"])
@@ -311,7 +313,7 @@ module MjmlRb
           ["cellspacing", "0"],
           ["class",       outlook_class],
           ["role",        "presentation"],
-          ["style",       "width:#{container_px}px;"],
+          ["style",       style_join("width" => "#{container_px}px", "padding-top" => wrapper_gap) + ";"],
           ["width",       container_px.to_s]
         ]
         before_pairs << ["bgcolor", bg_color] if bg_color
@@ -334,6 +336,7 @@ module MjmlRb
             "background-repeat"   => bg_repeat,
             "background-size"     => bg_size,
             "margin"              => "0px auto",
+            "margin-top"          => wrapper_gap,
             "max-width"           => "#{container_px}px"
           )
           table_style = style_join(
@@ -365,6 +368,7 @@ module MjmlRb
             "background"       => bg_color,
             "background-color" => bg_color,
             "margin"           => "0px auto",
+            "margin-top"       => wrapper_gap,
             "max-width"        => "#{container_px}px"
           )
           table_style = style_join(
@@ -465,6 +469,7 @@ module MjmlRb
         css_class    = a["css-class"]
         bg_color     = a["background-color"]
         full_width   = a["full-width"] == "full-width"
+        wrapper_gap  = context[:_wrapper_child_gap]
 
         # renderBefore — same structure as section
         outlook_class = css_class ? "#{css_class}-outlook" : ""
@@ -475,7 +480,7 @@ module MjmlRb
           ["cellspacing", "0"],
           ["class",       outlook_class],
           ["role",        "presentation"],
-          ["style",       "width:#{container_px}px;"],
+          ["style",       style_join("width" => "#{container_px}px", "padding-top" => wrapper_gap) + ";"],
           ["width",       container_px.to_s]
         ]
         before_pairs << ["bgcolor", bg_color] if bg_color
@@ -486,6 +491,7 @@ module MjmlRb
           "background"       => bg_color,
           "background-color" => bg_color,
           "margin"           => "0px auto",
+          "margin-top"       => wrapper_gap,
           "max-width"        => (full_width ? nil : "#{container_px}px")
         )
 
@@ -507,7 +513,7 @@ module MjmlRb
         )
 
         div_attrs = {"class" => css_class, "style" => div_style}
-        inner = merge_outlook_conditionals(render_wrapped_children_wrapper(node, context, container_px))
+        inner = merge_outlook_conditionals(render_wrapped_children_wrapper(node, context, container_px, a["gap"]))
 
         wrapper_html =
           %(<div#{html_attrs(div_attrs)}>) +
@@ -520,7 +526,7 @@ module MjmlRb
       end
 
       # Wrap each child mj-section/mj-wrapper in an Outlook conditional <td>.
-      def render_wrapped_children_wrapper(node, context, container_px)
+      def render_wrapped_children_wrapper(node, context, container_px, gap)
         children = node.element_children.select { |e| %w[mj-section mj-wrapper].include?(e.tag_name) }
         return render_children(node, context, parent: "mj-wrapper") if children.empty?
 
@@ -530,16 +536,26 @@ module MjmlRb
         close_table = %(<!--[if mso | IE]></table><![endif]-->)
 
         section_parts = with_inherited_mj_class(context, node) do
-          children.map do |child|
+          children.each_with_index.map do |child, index|
             td_open  = %(<!--[if mso | IE]><td class="" width="#{container_px}px" ><![endif]-->)
             td_close = %(<!--[if mso | IE]></td><![endif]-->)
-            child_html = render_node(child, context, parent: "mj-wrapper")
+            child_html = with_wrapper_child_gap(context, index.zero? ? nil : gap) do
+              render_node(child, context, parent: "mj-wrapper")
+            end
             "#{td_open}\n#{child_html}\n#{td_close}"
           end
         end
 
         ([open_table, open_tr] + section_parts + [close_tr, close_table]).join("\n")
       end
+
+      def with_wrapper_child_gap(context, gap)
+        previous = context[:_wrapper_child_gap]
+        context[:_wrapper_child_gap] = gap
+        yield
+      ensure
+        context[:_wrapper_child_gap] = previous
+      end
     end
   end
 end

data/lib/mjml-rb/components/table.rb

@@ -5,6 +5,28 @@ module MjmlRb
     class Table < Base
       TAGS = ["mj-table"].freeze
 
+      ALLOWED_ATTRIBUTES = {
+        "align" => "enum(left,right,center)",
+        "border" => "string",
+        "cellpadding" => "string",
+        "cellspacing" => "string",
+        "color" => "color",
+        "container-background-color" => "color",
+        "font-family" => "string",
+        "font-size" => "string",
+        "font-weight" => "string",
+        "line-height" => "string",
+        "padding" => "unit(px,%){1,4}",
+        "padding-top" => "unit(px,%)",
+        "padding-right" => "unit(px,%)",
+        "padding-bottom" => "unit(px,%)",
+        "padding-left" => "unit(px,%)",
+        "role" => "string",
+        "table-layout" => "enum(auto,fixed)",
+        "vertical-align" => "enum(top,bottom,middle)",
+        "width" => "string"
+      }.freeze
+
       DEFAULTS = {
         "align"        => "left",
         "border"       => "none",
@@ -49,6 +71,7 @@ module MjmlRb
           "color"           => a["color"],
           "font-family"     => a["font-family"],
           "font-size"       => a["font-size"],
+          "font-weight"     => a["font-weight"],
           "line-height"     => a["line-height"],
           "table-layout"    => a["table-layout"],
           "width"           => a["width"],

data/lib/mjml-rb/components/text.rb

@@ -5,6 +5,28 @@ module MjmlRb
     class Text < Base
       TAGS = ["mj-text"].freeze
 
+      ALLOWED_ATTRIBUTES = {
+        "align" => "enum(left,right,center,justify)",
+        "background-color" => "color",
+        "color" => "color",
+        "container-background-color" => "color",
+        "font-family" => "string",
+        "font-size" => "string",
+        "font-style" => "string",
+        "font-weight" => "string",
+        "height" => "string",
+        "letter-spacing" => "string",
+        "line-height" => "string",
+        "padding" => "unit(px,%){1,4}",
+        "padding-top" => "unit(px,%)",
+        "padding-right" => "unit(px,%)",
+        "padding-bottom" => "unit(px,%)",
+        "padding-left" => "unit(px,%)",
+        "text-decoration" => "string",
+        "text-transform" => "string",
+        "vertical-align" => "enum(top,bottom,middle)"
+      }.freeze
+
       DEFAULTS = {
         "align" => "left",
         "color" => "#000000",
@@ -40,6 +62,7 @@ module MjmlRb
         }
 
         div_style = style_join(
+          "background-color" => a["background-color"],
           "font-family" => a["font-family"],
           "font-size" => a["font-size"],
           "font-style" => a["font-style"],

data/lib/mjml-rb/version.rb

@@ -1,3 +1,3 @@
 module MjmlRb
-  VERSION = "0.2.16".freeze
+  VERSION = "0.2.19".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mjml-rb
 version: !ruby/object:Gem::Version
-  version: 0.2.16
+  version: 0.2.19
 platform: ruby
 authors:
 - Andrei Andriichuk