mjml-rb 0.2.12 → 0.2.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b877cf70c778c4916d93167e650dd7238bc0a50044055b4784681cb9b72a2488
-  data.tar.gz: 642a476a1142ae386d8f6af1b05b555e46638e69cf83dfabbd8247c2c09d8f7d
+  metadata.gz: 2d1dc49d39635e3f4530f642a8699646f3bff8e545213387f91d95bb461ea67d
+  data.tar.gz: 15139737ec96a78601bd7d0e0a992b8743060d4923664eea05462a76e70dc7d3
 SHA512:
-  metadata.gz: 9da675856ef3de4e27f421c37a5a54f0b89065a13b3613000439d97493959269269d77d46416e7edb4550516b88a8b645c8847328595baa408eaac9045eaea5a
-  data.tar.gz: e14ef3402314fc2fbbb3b292945c5d7116340e5a14f8fe78d3f171054a25acdc43227396a00d6a12950e0492eefcfb04c7ea896618a9112f16a501ebe80b8921
+  metadata.gz: 486e95fb106f03ebb1ae929ec548996f9d53868b360fcff23cfd0aa28d9e4240e3a3181f611b3270837c9012e523c32f3089c0ebe3a82e9bd6e067735a955bec
+  data.tar.gz: 5bf0eb72f669aed9eb59dc1b8fbe16563082392bbc8d05e2f8d4ce4098a492606303cea65692757fdf5b8eed2c0fc2be7080daeac73f6f242b0a1dfc1c0d5551

data/README.md

@@ -44,7 +44,7 @@ The table below tracks current JS-to-Ruby migration status for MJML components i
 | `mj-section` | migrated | Implemented in `section.rb`. |
 | `mj-wrapper` | migrated | Implemented via `section.rb`. |
 | `mj-column` | migrated | Implemented in `column.rb`. |
-| `mj-group` | migrated | Rendered directly by the renderer. |
+| `mj-group` | migrated | Implemented in `group.rb`, including width-aware child rendering and Outlook table wrappers. |
 | `mj-text` | migrated | Implemented in `text.rb`. |
 | `mj-image` | migrated | Implemented in `image.rb`. |
 | `mj-button` | migrated | Implemented in `button.rb`. |
@@ -69,8 +69,8 @@ The table below tracks current JS-to-Ruby migration status for MJML components i
 | `mj-preview` | migrated | Implemented in `head.rb`. |
 | `mj-style` | migrated | Implemented in `head.rb`, including inline-style registration. |
 | `mj-font` | migrated | Implemented in `head.rb`. |
-| `mj-carousel` | not migrated | Declared in dependency rules but no renderer implementation yet. |
-| `mj-carousel-image` | not migrated | Declared in dependency rules but no renderer implementation yet. |
+| `mj-carousel` | migrated | Implemented in `carousel.rb`, including per-instance radio/thumbnail CSS, Outlook fallback rendering, and thumbnail/control output. |
+| `mj-carousel-image` | migrated | Implemented in `carousel_image.rb`, including radio, thumbnail, and main image rendering helpers used by `mj-carousel`. |
 | `mj-breakpoint` | migrated | Supported in `mj-head` and used to control desktop column media-query widths. |
 | `mj-html-attributes` | migrated | Supported in `mj-head` and applied to the rendered HTML via CSS selectors. |
 | `mj-selector` | migrated | Supported as the selector container for `mj-html-attribute` rules. |

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

@@ -0,0 +1,449 @@
+require "securerandom"
+
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Carousel < Base
+      TAGS = ["mj-carousel"].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "align" => "enum(left,center,right)",
+        "border-radius" => "unit(px,%){1,4}",
+        "container-background-color" => "color",
+        "icon-width" => "unit(px,%)",
+        "left-icon" => "string",
+        "padding" => "unit(px,%){1,4}",
+        "padding-top" => "unit(px,%)",
+        "padding-bottom" => "unit(px,%)",
+        "padding-left" => "unit(px,%)",
+        "padding-right" => "unit(px,%)",
+        "right-icon" => "string",
+        "thumbnails" => "enum(visible,hidden,supported)",
+        "tb-border" => "string",
+        "tb-border-radius" => "unit(px,%)",
+        "tb-hover-border-color" => "color",
+        "tb-selected-border-color" => "color",
+        "tb-width" => "unit(px,%)"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "align" => "center",
+        "border-radius" => "6px",
+        "icon-width" => "44px",
+        "left-icon" => "https://i.imgur.com/xTh3hln.png",
+        "right-icon" => "https://i.imgur.com/os7o9kz.png",
+        "thumbnails" => "visible",
+        "tb-border" => "2px solid transparent",
+        "tb-border-radius" => "6px",
+        "tb-hover-border-color" => "#fead0d",
+        "tb-selected-border-color" => "#ccc"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        a = DEFAULT_ATTRIBUTES.merge(attrs)
+        children = carousel_images(node)
+        return "" if children.empty?
+
+        carousel_id = SecureRandom.hex(8)
+        context[:head_styles] << component_head_style(carousel_id, children.length, a)
+
+        outer_td_attrs = {
+          "align" => a["align"],
+          "class" => a["css-class"],
+          "style" => style_join(
+            "background" => a["container-background-color"],
+            "font-size" => "0px",
+            "padding" => a["padding"],
+            "padding-top" => a["padding-top"],
+            "padding-right" => a["padding-right"],
+            "padding-bottom" => a["padding-bottom"],
+            "padding-left" => a["padding-left"],
+            "word-break" => "break-word"
+          )
+        }
+
+        inner_container_width = content_width(context[:container_width], a)
+
+        content = <<~HTML
+          #{mso_conditional_tag(interactive_markup(node, children, context, a, carousel_id, inner_container_width), true)}
+          #{render_fallback(node, children.first, context, a, inner_container_width)}
+        HTML
+
+        %(<tr><td#{html_attrs(outer_td_attrs)}>#{content}</td></tr>)
+      end
+
+      private
+
+      def interactive_markup(node, children, context, attrs, carousel_id, inner_container_width)
+        carousel_classes = ["mj-carousel", attrs["css-class"]].compact.reject(&:empty?).join(" ")
+
+        <<~HTML
+          <div#{html_attrs("class" => carousel_classes)}>
+            #{generate_radios(children, carousel_id)}
+            <div#{html_attrs(
+              "class" => "mj-carousel-content mj-carousel-#{carousel_id}-content",
+              "style" => style_join(
+                "display" => "table",
+                "width" => "100%",
+                "table-layout" => "fixed",
+                "text-align" => "center",
+                "font-size" => "0px"
+              )
+            )}>
+              #{generate_thumbnails(node, children, context, attrs, carousel_id, inner_container_width)}
+              #{generate_carousel(node, children, context, attrs, carousel_id, inner_container_width)}
+            </div>
+          </div>
+        HTML
+      end
+
+      def generate_radios(children, carousel_id)
+        image_component = carousel_image_component
+        children.each_with_index.map do |child, index|
+          image_component.render_radio(index: index, carousel_id: carousel_id)
+        end.join
+      end
+
+      def generate_thumbnails(node, children, context, attrs, carousel_id, inner_container_width)
+        thumbnails = attrs["thumbnails"]
+        return "" unless %w[visible supported].include?(thumbnails)
+
+        image_component = carousel_image_component
+        tb_width = thumbnail_width(attrs, children.length, inner_container_width)
+
+        with_inherited_mj_class(context, node) do
+          children.each_with_index.map do |child, index|
+            child_attrs = child_pass_through_attributes(child, context, attrs, tb_width)
+            image_component.render_thumbnail(
+              child,
+              attrs: child_attrs,
+              index: index,
+              carousel_id: carousel_id,
+              thumbnails: thumbnails,
+              tb_width: tb_width
+            )
+          end.join
+        end
+      end
+
+      def generate_carousel(node, children, context, attrs, carousel_id, inner_container_width)
+        <<~HTML
+          <table#{html_attrs(
+            "style" => style_join(
+              "caption-side" => "top",
+              "display" => "table-caption",
+              "table-layout" => "fixed",
+              "width" => "100%"
+            ),
+            "border" => "0",
+            "cellpadding" => "0",
+            "cellspacing" => "0",
+            "width" => "100%",
+            "role" => "presentation",
+            "class" => "mj-carousel-main"
+          )}>
+            <tbody>
+              <tr>
+                #{generate_controls("previous", attrs["left-icon"], carousel_id, children.length, attrs["icon-width"])}
+                #{generate_images(node, children, context, attrs, inner_container_width)}
+                #{generate_controls("next", attrs["right-icon"], carousel_id, children.length, attrs["icon-width"])}
+              </tr>
+            </tbody>
+          </table>
+        HTML
+      end
+
+      def generate_controls(direction, icon, carousel_id, child_count, icon_width)
+        parsed_icon_width = parse_pixel_value(icon_width).to_i
+
+        labels = (1..child_count).map do |index|
+          <<~HTML
+            <label#{html_attrs(
+              "for" => "mj-carousel-#{carousel_id}-radio-#{index}",
+              "class" => "mj-carousel-#{direction} mj-carousel-#{direction}-#{index}"
+            )}>
+              <img#{html_attrs(
+                "src" => icon,
+                "alt" => direction,
+                "style" => style_join(
+                  "display" => "block",
+                  "width" => icon_width,
+                  "height" => "auto"
+                ),
+                "width" => parsed_icon_width.to_s
+              )} />
+            </label>
+          HTML
+        end.join
+
+        <<~HTML
+          <td#{html_attrs(
+            "class" => "mj-carousel-#{carousel_id}-icons-cell",
+            "style" => style_join(
+              "font-size" => "0px",
+              "display" => "none",
+              "mso-hide" => "all",
+              "padding" => "0px"
+            )
+          )}>
+            <div#{html_attrs(
+              "class" => "mj-carousel-#{direction}-icons",
+              "style" => style_join(
+                "display" => "none",
+                "mso-hide" => "all"
+              )
+            )}>
+              #{labels}
+            </div>
+          </td>
+        HTML
+      end
+
+      def generate_images(node, children, context, attrs, inner_container_width)
+        image_component = carousel_image_component
+        images = with_inherited_mj_class(context, node) do
+          children.each_with_index.map do |child, index|
+            child_attrs = child_pass_through_attributes(child, context, attrs, nil)
+            image_component.render_item(
+              child,
+              attrs: child_attrs,
+              index: index,
+              container_width: inner_container_width,
+              visible: index.zero?
+            )
+          end.join
+        end
+
+        <<~HTML
+          <td#{html_attrs("style" => "padding:0px;")}>
+            <div#{html_attrs("class" => "mj-carousel-images")}>
+              #{images}
+            </div>
+          </td>
+        HTML
+      end
+
+      def render_fallback(node, first_child, context, attrs, inner_container_width)
+        return "" unless first_child
+
+        child_attrs = with_inherited_mj_class(context, node) do
+          child_pass_through_attributes(first_child, context, attrs, nil)
+        end
+        fallback = carousel_image_component.render_item(
+          first_child,
+          attrs: child_attrs,
+          index: 0,
+          container_width: inner_container_width,
+          visible: true
+        )
+        mso_conditional_tag(fallback)
+      end
+
+      def child_pass_through_attributes(child, context, parent_attrs, tb_width)
+        child_attrs = resolved_attributes(child, context)
+        pass_through = {
+          "border-radius" => parent_attrs["border-radius"],
+          "tb-border" => parent_attrs["tb-border"],
+          "tb-border-radius" => parent_attrs["tb-border-radius"]
+        }
+        pass_through["tb-width"] = tb_width if tb_width
+        pass_through.merge(child_attrs)
+      end
+
+      def carousel_images(node)
+        node.element_children.select { |child| child.tag_name == "mj-carousel-image" }
+      end
+
+      def carousel_image_component
+        renderer.send(:component_for, "mj-carousel-image")
+      end
+
+      def thumbnail_width(attrs, child_count, inner_container_width)
+        return attrs["tb-width"] if attrs["tb-width"] && !attrs["tb-width"].empty?
+        return "0px" if child_count.zero?
+
+        "#{[inner_container_width.to_f / child_count, 110].min}px"
+      end
+
+      def content_width(container_width, attrs)
+        total = parse_pixel_value(container_width || "600px")
+        total -= padding_side(attrs, "left")
+        total -= padding_side(attrs, "right")
+        [total, 0].max
+      end
+
+      def padding_side(attrs, side)
+        specific = attrs["padding-#{side}"]
+        return parse_pixel_value(specific) unless blank?(specific)
+
+        shorthand_padding_value(attrs["padding"], side)
+      end
+
+      def shorthand_padding_value(value, side)
+        return 0 if blank?(value)
+
+        parts = value.to_s.strip.split(/\s+/)
+        case parts.length
+        when 1
+          parse_pixel_value(parts[0])
+        when 2
+          %w[left right].include?(side) ? parse_pixel_value(parts[1]) : parse_pixel_value(parts[0])
+        when 3
+          %w[left right].include?(side) ? parse_pixel_value(parts[1]) : parse_pixel_value(side == "top" ? parts[0] : parts[2])
+        when 4
+          parse_pixel_value(parts[side == "left" ? 3 : 1])
+        else
+          0
+        end
+      end
+
+      def component_head_style(carousel_id, length, attrs)
+        return "" if length.zero?
+
+        hide_non_selected = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-radio:checked #{adjacent_siblings(index)}+ .mj-carousel-content .mj-carousel-image"
+        end.join(",\n")
+
+        show_selected = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-radio-#{index + 1}:checked #{adjacent_siblings(length - index - 1)}+ .mj-carousel-content .mj-carousel-image-#{index + 1}"
+        end.join(",\n")
+
+        next_icons = (0...length).map do |index|
+          target = ((index + 1) % length) + 1
+          ".mj-carousel-#{carousel_id}-radio-#{index + 1}:checked #{adjacent_siblings(length - index - 1)}+ .mj-carousel-content .mj-carousel-next-#{target}"
+        end.join(",\n")
+
+        previous_icons = (0...length).map do |index|
+          target = ((index - 1) % length) + 1
+          ".mj-carousel-#{carousel_id}-radio-#{index + 1}:checked #{adjacent_siblings(length - index - 1)}+ .mj-carousel-content .mj-carousel-previous-#{target}"
+        end.join(",\n")
+
+        selected_thumbnail = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-radio-#{index + 1}:checked #{adjacent_siblings(length - index - 1)}+ .mj-carousel-content .mj-carousel-#{carousel_id}-thumbnail-#{index + 1}"
+        end.join(",\n")
+
+        show_thumbnails = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-radio-#{index + 1}:checked #{adjacent_siblings(length - index - 1)}+ .mj-carousel-content .mj-carousel-#{carousel_id}-thumbnail"
+        end.join(",\n")
+
+        hide_on_hover = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-thumbnail:hover #{adjacent_siblings(length - index - 1)}+ .mj-carousel-main .mj-carousel-image"
+        end.join(",\n")
+
+        show_on_hover = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-thumbnail-#{index + 1}:hover #{adjacent_siblings(length - index - 1)}+ .mj-carousel-main .mj-carousel-image-#{index + 1}"
+        end.join(",\n")
+
+        <<~CSS
+          .mj-carousel {
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            user-select: none;
+          }
+
+          .mj-carousel-#{carousel_id}-icons-cell {
+            display: table-cell !important;
+            width: #{attrs["icon-width"]} !important;
+          }
+
+          .mj-carousel-radio,
+          .mj-carousel-next,
+          .mj-carousel-previous {
+            display: none !important;
+          }
+
+          .mj-carousel-thumbnail,
+          .mj-carousel-next,
+          .mj-carousel-previous {
+            touch-action: manipulation;
+          }
+
+          #{hide_non_selected} {
+            display: none !important;
+          }
+
+          #{show_selected} {
+            display: block !important;
+          }
+
+          .mj-carousel-previous-icons,
+          .mj-carousel-next-icons,
+          #{next_icons},
+          #{previous_icons} {
+            display: block !important;
+          }
+
+          #{selected_thumbnail} {
+            border-color: #{attrs["tb-selected-border-color"]} !important;
+          }
+
+          #{show_thumbnails} {
+            display: inline-block !important;
+          }
+
+          .mj-carousel-image img + div,
+          .mj-carousel-thumbnail img + div {
+            display: none !important;
+          }
+
+          #{hide_on_hover} {
+            display: none !important;
+          }
+
+          .mj-carousel-thumbnail:hover {
+            border-color: #{attrs["tb-hover-border-color"]} !important;
+          }
+
+          #{show_on_hover} {
+            display: block !important;
+          }
+
+          .mj-carousel noinput { display:block !important; }
+          .mj-carousel noinput .mj-carousel-image-1 { display: block !important; }
+          .mj-carousel noinput .mj-carousel-arrows,
+          .mj-carousel noinput .mj-carousel-thumbnails { display: none !important; }
+
+          [owa] .mj-carousel-thumbnail { display: none !important; }
+
+          @media screen yahoo {
+            .mj-carousel-#{carousel_id}-icons-cell,
+            .mj-carousel-previous-icons,
+            .mj-carousel-next-icons {
+              display: none !important;
+            }
+
+            .mj-carousel-#{carousel_id}-radio-1:checked #{adjacent_siblings(length - 1)}+ .mj-carousel-content .mj-carousel-#{carousel_id}-thumbnail-1 {
+              border-color: transparent;
+            }
+          }
+        CSS
+      end
+
+      def adjacent_siblings(count)
+        "+ * " * count
+      end
+
+      def mso_conditional_tag(content, negation = false)
+        if negation
+          "<!--[if !mso]><!-->#{content}<!--<![endif]-->"
+        else
+          "<!--[if mso]>#{content}<![endif]-->"
+        end
+      end
+
+      def parse_pixel_value(value)
+        matched = value.to_s.match(/(-?\d+(?:\.\d+)?)/)
+        matched ? matched[1].to_f : 0.0
+      end
+
+      def blank?(value)
+        value.nil? || value.to_s.strip.empty?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,162 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class CarouselImage < Base
+      TAGS = ["mj-carousel-image"].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "alt" => "string",
+        "href" => "string",
+        "rel" => "string",
+        "target" => "string",
+        "title" => "string",
+        "src" => "string",
+        "thumbnails-src" => "string",
+        "border-radius" => "unit(px,%){1,4}",
+        "tb-border" => "string",
+        "tb-border-radius" => "unit(px,%){1,4}"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "alt" => "",
+        "target" => "_blank"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        render_item(
+          node,
+          attrs: DEFAULT_ATTRIBUTES.merge(attrs),
+          index: 0,
+          container_width: parse_pixel_value(context[:container_width] || "600px"),
+          visible: true
+        )
+      end
+
+      def render_radio(index:, carousel_id:)
+        input_attrs = {
+          "class" => "mj-carousel-radio mj-carousel-#{carousel_id}-radio mj-carousel-#{carousel_id}-radio-#{index + 1}",
+          "checked" => (index.zero? ? "checked" : nil),
+          "type" => "radio",
+          "name" => "mj-carousel-radio-#{carousel_id}",
+          "id" => "mj-carousel-#{carousel_id}-radio-#{index + 1}",
+          "style" => style_join(
+            "display" => "none",
+            "mso-hide" => "all"
+          )
+        }
+
+        %(<input#{html_attrs(input_attrs)} />)
+      end
+
+      def render_thumbnail(node, attrs:, index:, carousel_id:, thumbnails:, tb_width:)
+        a = DEFAULT_ATTRIBUTES.merge(attrs)
+        css_class = suffix_css_classes(a["css-class"], "thumbnail")
+        link_classes = [
+          "mj-carousel-thumbnail",
+          "mj-carousel-#{carousel_id}-thumbnail",
+          "mj-carousel-#{carousel_id}-thumbnail-#{index + 1}",
+          css_class
+        ].compact.reject(&:empty?).join(" ")
+
+        link_attrs = {
+          "style" => style_join(
+            "border" => a["tb-border"],
+            "border-radius" => a["tb-border-radius"],
+            "display" => (thumbnails == "supported" ? "none" : "inline-block"),
+            "overflow" => "hidden",
+            "width" => tb_width
+          ),
+          "href" => "##{index + 1}",
+          "target" => a["target"],
+          "class" => link_classes
+        }
+        label_attrs = {
+          "for" => "mj-carousel-#{carousel_id}-radio-#{index + 1}"
+        }
+        image_attrs = {
+          "style" => style_join(
+            "display" => "block",
+            "width" => "100%",
+            "height" => "auto"
+          ),
+          "src" => a["thumbnails-src"] || a["src"],
+          "alt" => a["alt"],
+          "width" => parse_pixel_value(tb_width).to_i.to_s
+        }
+
+        <<~HTML.chomp
+          <a#{html_attrs(link_attrs)}>
+            <label#{html_attrs(label_attrs)}>
+              #{build_img_tag(image_attrs)}
+            </label>
+          </a>
+        HTML
+      end
+
+      def render_item(node, attrs:, index:, container_width:, visible:)
+        a = DEFAULT_ATTRIBUTES.merge(attrs)
+        css_class = a["css-class"].to_s
+        classes = ["mj-carousel-image", "mj-carousel-image-#{index + 1}", css_class].reject(&:empty?).join(" ")
+        div_style = visible ? nil : style_join("display" => "none", "mso-hide" => "all")
+        img_attrs = {
+          "title" => a["title"],
+          "src" => a["src"],
+          "alt" => a["alt"],
+          "style" => style_join(
+            "border-radius" => a["border-radius"],
+            "display" => "block",
+            "width" => "#{container_width.to_i}px",
+            "max-width" => "100%",
+            "height" => "auto"
+          ),
+          "width" => container_width.to_i.to_s,
+          "border" => "0"
+        }
+        image_tag = build_img_tag(img_attrs)
+
+        content = if a["href"]
+                    link_attrs = {
+                      "href" => a["href"],
+                      "rel" => a["rel"],
+                      "target" => a["target"] || "_blank"
+                    }
+                    %(<a#{html_attrs(link_attrs)}>#{image_tag}</a>)
+                  else
+                    image_tag
+                  end
+
+        %(<div#{html_attrs("class" => classes, "style" => div_style)}>#{content}</div>)
+      end
+
+      private
+
+      def parse_pixel_value(value)
+        matched = value.to_s.match(/(-?\d+(?:\.\d+)?)/)
+        matched ? matched[1].to_f : 0.0
+      end
+
+      def suffix_css_classes(classes, suffix)
+        return nil if classes.nil? || classes.empty?
+
+        classes.split(/\s+/).map { |klass| "#{klass}-#{suffix}" }.join(" ")
+      end
+
+      def build_img_tag(attrs)
+        ordered_keys = %w[title src alt style width border]
+        rendered = ordered_keys.filter_map do |key|
+          next unless attrs.key?(key)
+          next if key != "alt" && (attrs[key].nil? || attrs[key].to_s.empty?)
+
+          %(#{key}="#{escape_attr(attrs[key].to_s)}")
+        end
+
+        "<img #{rendered.join(' ')} />"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,134 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Group < Base
+      TAGS = ["mj-group"].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "background-color" => "color",
+        "direction" => "enum(ltr,rtl)",
+        "vertical-align" => "enum(top,bottom,middle)",
+        "width" => "unit(px,%)"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "direction" => "ltr"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        width_pct = context.delete(:_column_width_pct) || 100.0
+        a = DEFAULT_ATTRIBUTES.merge(attrs)
+        css_class = a["css-class"]
+
+        pct_str = width_pct.to_f.to_s.sub(/\.?0+$/, "")
+        class_suffix = pct_str.gsub(".", "-")
+        context[:column_widths][class_suffix] = pct_str if context[:column_widths]
+
+        group_class = "mj-column-per-#{class_suffix} mj-outlook-group-fix"
+        group_class = "#{group_class} #{css_class}" if css_class && !css_class.empty?
+
+        group_width = group_container_width(context, a, width_pct)
+        div_style = style_join(
+          "font-size" => "0",
+          "line-height" => "0",
+          "text-align" => "left",
+          "display" => "inline-block",
+          "width" => "100%",
+          "direction" => a["direction"],
+          "vertical-align" => a["vertical-align"],
+          "background-color" => a["background-color"]
+        )
+
+        inner = with_group_container_width(context, group_width) do
+          render_group_children(node, context, a, group_width)
+        end
+
+        %(<div class="#{escape_attr(group_class)}" style="#{div_style}">#{inner}</div>)
+      end
+
+      private
+
+      def render_group_children(node, context, attrs, group_width)
+        columns = node.element_children.select { |child| child.tag_name == "mj-column" }
+        widths = renderer.send(:compute_column_widths, columns, context)
+        group_width_px = parse_pixel_value(group_width)
+        group_bg = attrs["background-color"]
+        table_attrs = {
+          "bgcolor" => (group_bg == "none" ? nil : group_bg),
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation"
+        }
+
+        open_table = %(<!--[if mso | IE]><table#{html_attrs(table_attrs)}><tr><![endif]-->)
+        close_table = %(<!--[if mso | IE]></tr></table><![endif]-->)
+        column_index = 0
+
+        body = with_inherited_mj_class(context, node) do
+          node.children.map do |child|
+            case child.tag_name
+            when "mj-column"
+              width_pct = widths[column_index] || 100.0
+              column_index += 1
+              context[:_column_width_pct] = width_pct
+              td_style = style_join(
+                "vertical-align" => resolved_attributes(child, context)["vertical-align"] || "top",
+                "width" => "#{(group_width_px * width_pct / 100.0).round}px"
+              )
+              td_open = %(<!--[if mso | IE]><td#{html_attrs("style" => td_style)}><![endif]-->)
+              td_close = %(<!--[if mso | IE]></td><![endif]-->)
+              "#{td_open}#{render_node(child, context, parent: "mj-group")}#{td_close}"
+            when "mj-raw"
+              render_node(child, context, parent: "mj-group")
+            else
+              render_node(child, context, parent: "mj-group")
+            end
+          end.join("\n")
+        end
+
+        "#{open_table}#{body}#{close_table}"
+      end
+
+      def with_group_container_width(context, width)
+        previous = context[:container_width]
+        context[:container_width] = width
+        yield
+      ensure
+        context[:container_width] = previous
+      end
+
+      def group_container_width(context, attrs, width_pct)
+        parent_width = parse_pixel_value(context[:container_width] || "600px")
+        width = attrs["width"]
+
+        raw_width =
+          if present_attr?(width) && width.end_with?("%")
+            parent_width * parse_pixel_value(width) / 100.0
+          elsif present_attr?(width) && width.end_with?("px")
+            parse_pixel_value(width)
+          else
+            parent_width * width_pct / 100.0
+          end
+
+        "#{[raw_width, 0].max}px"
+      end
+
+      def present_attr?(value)
+        value && !value.empty?
+      end
+
+      def parse_pixel_value(value)
+        return 0.0 unless present_attr?(value)
+
+        matched = value.to_s.match(/(-?\d+(?:\.\d+)?)/)
+        matched ? matched[1].to_f : 0.0
+      end
+    end
+  end
+end

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

@@ -233,12 +233,8 @@ module MjmlRb
             td_open  = %(<!--[if mso | IE]><td class="" style="vertical-align:#{v_align};width:#{col_px}px;" ><![endif]-->)
             td_close = %(<!--[if mso | IE]></td><![endif]-->)
 
-            col_html = if col.tag_name == "mj-group"
-                         renderer.send(:render_group, col, context, widths[i])
-                       else
-                         context[:_column_width_pct] = widths[i]
-                         render_node(col, context, parent: "mj-section")
-                       end
+            context[:_column_width_pct] = widths[i]
+            col_html = render_node(col, context, parent: "mj-section")
 
             "#{td_open}\n#{col_html}\n#{td_close}"
           end

data/lib/mjml-rb/renderer.rb

@@ -5,6 +5,9 @@ require_relative "components/attributes"
 require_relative "components/body"
 require_relative "components/breakpoint"
 require_relative "components/button"
+require_relative "components/carousel"
+require_relative "components/carousel_image"
+require_relative "components/group"
 require_relative "components/head"
 require_relative "components/hero"
 require_relative "components/image"
@@ -161,24 +164,7 @@ module MjmlRb
       if (component = component_for(node.tag_name))
         return component.render(tag_name: node.tag_name, node: node, context: context, attrs: attrs, parent: parent)
       end
-
-      case node.tag_name
-      when "mj-group"
-        render_group(node, context)
-      else
-        render_children(node, context, parent: node.tag_name)
-      end
-    end
-
-    def render_group(node, context, width_pct = 100)
-      items = node.element_children.select { |e| e.tag_name == "mj-column" }
-      widths = compute_column_widths(items, context)
-      with_inherited_mj_class(context, node) do
-        items.each_with_index.map do |item, i|
-          context[:_column_width_pct] = widths[i]
-          render_node(item, context, parent: "mj-group")
-        end.join("\n")
-      end
+      render_children(node, context, parent: node.tag_name)
     end
 
     def compute_column_widths(columns, context)
@@ -440,6 +426,9 @@ module MjmlRb
         register_component(registry, Components::Breakpoint.new(self))
         register_component(registry, Components::Accordion.new(self))
         register_component(registry, Components::Button.new(self))
+        register_component(registry, Components::Carousel.new(self))
+        register_component(registry, Components::CarouselImage.new(self))
+        register_component(registry, Components::Group.new(self))
         register_component(registry, Components::Hero.new(self))
         register_component(registry, Components::Image.new(self))
         register_component(registry, Components::Navbar.new(self))

data/lib/mjml-rb/version.rb

@@ -1,3 +1,3 @@
 module MjmlRb
-  VERSION = "0.2.12".freeze
+  VERSION = "0.2.14".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mjml-rb
 version: !ruby/object:Gem::Version
-  version: 0.2.12
+  version: 0.2.14
 platform: ruby
 authors:
 - Andrei Andriichuk
@@ -59,8 +59,11 @@ files:
 - lib/mjml-rb/components/body.rb
 - lib/mjml-rb/components/breakpoint.rb
 - lib/mjml-rb/components/button.rb
+- lib/mjml-rb/components/carousel.rb
+- lib/mjml-rb/components/carousel_image.rb
 - lib/mjml-rb/components/column.rb
 - lib/mjml-rb/components/divider.rb
+- lib/mjml-rb/components/group.rb
 - lib/mjml-rb/components/head.rb
 - lib/mjml-rb/components/hero.rb
 - lib/mjml-rb/components/html_attributes.rb