emjay 0.1.0

data/lib/emjay/components/body/mj_accordion_text.rb

@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+require_relative "../../body_component"
+require_relative "../../registry"
+
+module Emjay
+  module Components
+    class MjAccordionText < BodyComponent
+      def self.component_name
+        "mj-accordion-text"
+      end
+
+      def self.ending_tag?
+        true
+      end
+
+      def self.default_attributes
+        {
+          "font-size" => "13px",
+          "line-height" => "1",
+          "padding" => "16px"
+        }
+      end
+
+      def self.allowed_attributes
+        {
+          "background-color" => "color",
+          "font-size" => "unit(px)",
+          "font-family" => "string",
+          "font-weight" => "string",
+          "letter-spacing" => "unitWithNegative(px,em)",
+          "line-height" => "unit(px,%,)",
+          "color" => "color",
+          "padding-bottom" => "unit(px,%)",
+          "padding-left" => "unit(px,%)",
+          "padding-right" => "unit(px,%)",
+          "padding-top" => "unit(px,%)",
+          "padding" => "unit(px,%){1,4}"
+        }
+      end
+
+      def get_styles
+        {
+          td: {
+            "background" => get_attribute("background-color"),
+            "font-size" => get_attribute("font-size"),
+            "font-family" => resolve_font_family,
+            "font-weight" => get_attribute("font-weight"),
+            "letter-spacing" => get_attribute("letter-spacing"),
+            "line-height" => get_attribute("line-height"),
+            "color" => get_attribute("color"),
+            "padding" => get_attribute("padding"),
+            "padding-bottom" => get_attribute("padding-bottom"),
+            "padding-left" => get_attribute("padding-left"),
+            "padding-right" => get_attribute("padding-right"),
+            "padding-top" => get_attribute("padding-top")
+          },
+          table: {
+            "width" => "100%",
+            "border-bottom" => get_attribute("border")
+          }
+        }
+      end
+
+      def render
+        content_attrs = html_attributes(class: "mj-accordion-content")
+        table_attrs = html_attributes(
+          cellspacing: "0",
+          cellpadding: "0",
+          style: :table
+        )
+
+        <<~HTML
+          <div
+            #{content_attrs}
+          >
+            <table
+              #{table_attrs}
+            >
+              <tbody>
+                <tr>
+                  #{render_content}
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        HTML
+      end
+
+      private
+
+      def resolve_font_family
+        raw_attrs = @props[:raw_attrs] || {}
+        if raw_attrs.key?("font-family")
+          return get_attribute("font-family")
+        end
+        if @context[:elementFontFamily]
+          return @context[:elementFontFamily]
+        end
+        if @context[:accordionFontFamily]
+          return @context[:accordionFontFamily]
+        end
+        self.class.default_attributes["font-family"]
+      end
+
+      def render_content
+        td_attrs = html_attributes(
+          class: get_attribute("css-class"),
+          style: :td
+        )
+        <<~HTML
+          <td
+            #{td_attrs}
+          >
+            #{get_content}
+          </td>
+        HTML
+      end
+    end
+  end
+
+  Registry.register(Components::MjAccordionText)
+end

data/lib/emjay/components/body/mj_accordion_title.rb

@@ -0,0 +1,171 @@
+# frozen_string_literal: true
+
+require_relative "../../body_component"
+require_relative "../../registry"
+require_relative "../../helpers/conditional_tag"
+
+module Emjay
+  module Components
+    class MjAccordionTitle < BodyComponent
+      def self.component_name
+        "mj-accordion-title"
+      end
+
+      def self.ending_tag?
+        true
+      end
+
+      def self.default_attributes
+        {
+          "font-size" => "13px",
+          "padding" => "16px"
+        }
+      end
+
+      def self.allowed_attributes
+        {
+          "background-color" => "color",
+          "color" => "color",
+          "font-size" => "unit(px)",
+          "font-family" => "string",
+          "font-weight" => "string",
+          "padding-bottom" => "unit(px,%)",
+          "padding-left" => "unit(px,%)",
+          "padding-right" => "unit(px,%)",
+          "padding-top" => "unit(px,%)",
+          "padding" => "unit(px,%){1,4}"
+        }
+      end
+
+      def get_styles
+        {
+          td: {
+            "width" => "100%",
+            "background-color" => get_attribute("background-color"),
+            "color" => get_attribute("color"),
+            "font-size" => get_attribute("font-size"),
+            "font-family" => resolve_font_family,
+            "font-weight" => get_attribute("font-weight"),
+            "padding" => get_attribute("padding"),
+            "padding-bottom" => get_attribute("padding-bottom"),
+            "padding-left" => get_attribute("padding-left"),
+            "padding-right" => get_attribute("padding-right"),
+            "padding-top" => get_attribute("padding-top")
+          },
+          table: {
+            "width" => "100%",
+            "border-bottom" => get_attribute("border")
+          },
+          td2: {
+            "padding" => "16px",
+            "background" => get_attribute("background-color"),
+            "vertical-align" => get_attribute("icon-align")
+          },
+          img: {
+            "display" => "none",
+            "width" => get_attribute("icon-width"),
+            "height" => get_attribute("icon-height")
+          }
+        }
+      end
+
+      def render
+        content_elements = [render_title, render_icons]
+        content = if get_attribute("icon-position") == "right"
+          content_elements
+        else
+          content_elements.reverse
+        end.join("\n")
+
+        table_attrs = html_attributes(
+          cellspacing: "0",
+          cellpadding: "0",
+          style: :table
+        )
+
+        <<~HTML
+          <div#{html_attributes(class: "mj-accordion-title")}>
+            <table
+              #{table_attrs}
+            >
+              <tbody>
+                <tr>
+                  #{content}
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        HTML
+      end
+
+      private
+
+      def resolve_font_family
+        raw_attrs = @props[:raw_attrs] || {}
+        if raw_attrs.key?("font-family")
+          return get_attribute("font-family")
+        end
+        if @context[:elementFontFamily]
+          return @context[:elementFontFamily]
+        end
+        if @context[:accordionFontFamily]
+          return @context[:accordionFontFamily]
+        end
+        self.class.default_attributes["font-family"]
+      end
+
+      def render_title
+        td_attrs = html_attributes(
+          class: get_attribute("css-class"),
+          style: :td
+        )
+        <<~HTML
+          <td
+            #{td_attrs}
+          >
+            #{get_content}
+          </td>
+        HTML
+      end
+
+      def render_icons
+        td2_attrs = html_attributes(
+          class: "mj-accordion-ico",
+          style: :td2
+        )
+
+        more_attrs = html_attributes(
+          src: get_attribute("icon-wrapped-url"),
+          alt: get_attribute("icon-wrapped-alt"),
+          class: "mj-accordion-more",
+          style: :img
+        )
+
+        less_attrs = html_attributes(
+          src: get_attribute("icon-unwrapped-url"),
+          alt: get_attribute("icon-unwrapped-alt"),
+          class: "mj-accordion-less",
+          style: :img
+        )
+
+        ConditionalTag.conditional_tag(
+          <<~ICON,
+            <td
+              #{td2_attrs}
+            >
+              <img
+                #{more_attrs}
+              />
+              <img
+                #{less_attrs}
+              />
+            </td>
+          ICON
+          negation: true
+        )
+      end
+    end
+  end
+
+  Registry.register(Components::MjAccordionTitle)
+end

data/lib/emjay/components/body/mj_body.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+require_relative "../../body_component"
+require_relative "../../registry"
+
+module Emjay
+  module Components
+    class MjBody < BodyComponent
+      def self.component_name
+        "mj-body"
+      end
+
+      def self.default_attributes
+        {"width" => "600px"}
+      end
+
+      def self.allowed_attributes
+        {
+          "width" => "unit(px)",
+          "background-color" => "color",
+          "id" => "string"
+        }
+      end
+
+      def get_child_context
+        @context.merge(container_width: get_attribute("width"))
+      end
+
+      def get_styles
+        {
+          body: {
+            "word-spacing" => "normal",
+            "background-color" => get_attribute("background-color")
+          },
+          div: {
+            "word-spacing" => "normal",
+            "background-color" => get_attribute("background-color")
+          }
+        }
+      end
+
+      def render
+        global_data = @context[:global_data]
+        lang = global_data&.lang || "und"
+        dir = global_data&.dir || "auto"
+        title = global_data&.title || ""
+        preview = global_data&.preview || ""
+
+        preview_html = if preview.empty?
+          ""
+        else
+          %(\n    <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">#{preview}</div>\n  )
+        end
+
+        title_attr = title.empty? ? "" : " aria-label=\"#{title}\""
+
+        <<~HTML
+          <body#{html_attributes(id: get_attribute("id"), class: get_attribute("css-class"), style: :body)}>
+            #{preview_html}
+            <div#{title_attr} aria-roledescription="email" role="article" lang="#{lang}" dir="#{dir}"#{html_attributes(style: :div)}>
+            #{render_children}
+          </div>
+          </body>
+        HTML
+      end
+    end
+  end
+
+  Registry.register(Components::MjBody)
+end

data/lib/emjay/components/body/mj_button.rb

@@ -0,0 +1,198 @@
+# frozen_string_literal: true
+
+require_relative "../../body_component"
+require_relative "../../registry"
+require_relative "../../helpers/width_parser"
+
+module Emjay
+  module Components
+    class MjButton < BodyComponent
+      def self.component_name
+        "mj-button"
+      end
+
+      def self.ending_tag?
+        true
+      end
+
+      def self.default_attributes
+        {
+          "align" => "center",
+          "background-color" => "#414141",
+          "border" => "none",
+          "border-radius" => "3px",
+          "color" => "#ffffff",
+          "font-family" => "Ubuntu, Helvetica, Arial, sans-serif",
+          "font-size" => "13px",
+          "font-weight" => "normal",
+          "inner-padding" => "10px 25px",
+          "line-height" => "120%",
+          "padding" => "10px 25px",
+          "target" => "_blank",
+          "text-decoration" => "none",
+          "text-transform" => "none",
+          "vertical-align" => "middle"
+        }
+      end
+
+      def self.allowed_attributes
+        {
+          "align" => "enum(left,center,right)",
+          "background-color" => "color",
+          "border-bottom" => "string",
+          "border-left" => "string",
+          "border-radius" => "string",
+          "border-right" => "string",
+          "border-top" => "string",
+          "border" => "string",
+          "color" => "color",
+          "container-background-color" => "color",
+          "font-family" => "string",
+          "font-size" => "unit(px)",
+          "font-style" => "string",
+          "font-weight" => "string",
+          "height" => "unit(px,%)",
+          "href" => "string",
+          "name" => "string",
+          "title" => "string",
+          "inner-padding" => "unit(px,%){1,4}",
+          "letter-spacing" => "unitWithNegative(px,em)",
+          "line-height" => "unit(px,%,)",
+          "padding-bottom" => "unit(px,%)",
+          "padding-left" => "unit(px,%)",
+          "padding-right" => "unit(px,%)",
+          "padding-top" => "unit(px,%)",
+          "padding" => "unit(px,%){1,4}",
+          "rel" => "string",
+          "target" => "string",
+          "text-decoration" => "string",
+          "text-transform" => "string",
+          "vertical-align" => "enum(top,bottom,middle)",
+          "text-align" => "enum(left,right,center)",
+          "width" => "unit(px,%)"
+        }
+      end
+
+      def get_styles
+        {
+          table: {
+            "border-collapse" => "separate",
+            "width" => get_attribute("width"),
+            "line-height" => "100%"
+          },
+          td: {
+            "border" => get_attribute("border"),
+            "border-bottom" => get_attribute("border-bottom"),
+            "border-left" => get_attribute("border-left"),
+            "border-radius" => get_attribute("border-radius"),
+            "border-right" => get_attribute("border-right"),
+            "border-top" => get_attribute("border-top"),
+            "cursor" => "auto",
+            "font-style" => get_attribute("font-style"),
+            "height" => get_attribute("height"),
+            "mso-padding-alt" => get_attribute("inner-padding"),
+            "text-align" => get_attribute("text-align"),
+            "background" => get_attribute("background-color")
+          },
+          content: {
+            "display" => "inline-block",
+            "width" => calculate_a_width(get_attribute("width")),
+            "background" => get_attribute("background-color"),
+            "color" => get_attribute("color"),
+            "font-family" => get_attribute("font-family"),
+            "font-size" => get_attribute("font-size"),
+            "font-style" => get_attribute("font-style"),
+            "font-weight" => get_attribute("font-weight"),
+            "line-height" => get_attribute("line-height"),
+            "letter-spacing" => get_attribute("letter-spacing"),
+            "margin" => "0",
+            "text-decoration" => get_attribute("text-decoration"),
+            "text-transform" => get_attribute("text-transform"),
+            "padding" => get_attribute("inner-padding"),
+            "mso-padding-alt" => "0px",
+            "border-radius" => get_attribute("border-radius")
+          }
+        }
+      end
+
+      def render
+        tag = get_attribute("href") ? "a" : "p"
+
+        bgcolor = get_attribute("background-color")
+        bgcolor_attr = (bgcolor == "none") ? nil : bgcolor
+
+        tag_attrs = if tag == "a"
+          html_attributes(
+            href: get_attribute("href"),
+            name: get_attribute("name"),
+            rel: get_attribute("rel"),
+            title: get_attribute("title"),
+            style: :content,
+            target: get_attribute("target")
+          )
+        else
+          html_attributes(
+            href: get_attribute("href"),
+            name: get_attribute("name"),
+            rel: get_attribute("rel"),
+            title: get_attribute("title"),
+            style: :content
+          )
+        end
+
+        table_attrs = html_attributes(
+          border: "0",
+          cellpadding: "0",
+          cellspacing: "0",
+          role: "presentation",
+          style: :table
+        )
+
+        td_attrs = html_attributes(
+          align: "center",
+          bgcolor: bgcolor_attr,
+          role: "presentation",
+          style: :td,
+          valign: get_attribute("vertical-align")
+        )
+
+        <<~HTML
+          <table
+            #{table_attrs}
+          >
+            <tbody>
+              <tr>
+                <td
+                  #{td_attrs}
+                >
+                  <#{tag}
+                    #{tag_attrs}
+                  >
+                    #{get_content}
+                  </#{tag}>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        HTML
+      end
+
+      private
+
+      def calculate_a_width(width)
+        return nil unless width
+
+        parsed = WidthParser.call(width)
+        return nil unless parsed[:unit] == "px"
+
+        borders = get_box_widths[:borders]
+        inner_paddings = get_shorthand_attr_value("inner-padding", "left") +
+          get_shorthand_attr_value("inner-padding", "right")
+
+        "#{parsed[:parsed_width] - inner_paddings - borders}px"
+      end
+    end
+  end
+
+  Registry.register(Components::MjButton)
+end