activemail 1.2.2 → 2.0.0

data/lib/activemail/components/button_renderer.rb

@@ -0,0 +1,65 @@
+# typed: strict
+# frozen_string_literal: true
+
+require_relative 'base'
+
+module ActiveMail
+  module Components
+    # Bulletproof button shared by <button> and <cta>: styles are inlined from the
+    # tokens (read at transform time) so it survives clients that strip <style>.
+    class ButtonRenderer < Base
+      extend T::Sig
+      extend T::Helpers
+
+      abstract!
+
+      CONTROL_PADDING = 'padding:12px 24px;'
+
+      sig { abstract.returns(String) }
+      def root_class; end
+
+      sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
+      def transform(node, inner)
+        style = core.config.tokens.button_style(class?(node, 'secondary') ? :secondary : :primary)
+        expand = class?(node, 'expand')
+        width = expand ? ' style="width:100%;"' : ''
+        [
+          %(<table#{class_attribute(node, root_class)} #{TABLE_RESET}#{width}><tbody><tr><td>),
+          %(<table #{TABLE_RESET}#{width}><tbody><tr><td style="#{cell_style(style, expand)}">),
+          control(node, inner, style, expand),
+          '</td></tr></tbody></table></td></tr></tbody></table>'
+        ].join
+      end
+
+      private
+
+      sig { override.returns(T::Array[String]) }
+      def consumed_attributes
+        LINK_ATTRIBUTES
+      end
+
+      # Padding on the control makes the whole button a clickable target.
+      sig { params(node: Nokogiri::XML::Node, inner: String, style: ActiveMail::Tokens::ButtonStyle, expand: T::Boolean).returns(String) }
+      def control(node, inner, style, expand)
+        css = control_style(style, expand)
+        extra = passthrough_attributes(node)
+        return %(<span#{extra}#{style_attribute(node, css)}>#{inner}</span>) unless node.attr('href')
+
+        anchor(node, inner, before: extra, after: style_attribute(node, css))
+      end
+
+      # The outline lives on the cell only: repeating it on the control would double the line.
+      sig { params(style: ActiveMail::Tokens::ButtonStyle, expand: T::Boolean).returns(String) }
+      def cell_style(style, expand)
+        border = style.border ? "border:1px solid #{style.border};" : ''
+        "background:#{style.background};border-radius:#{style.radius};#{border}#{'text-align:center;' if expand}"
+      end
+
+      sig { params(style: ActiveMail::Tokens::ButtonStyle, expand: T::Boolean).returns(String) }
+      def control_style(style, expand)
+        "display:#{expand ? 'block' : 'inline-block'};text-decoration:none;#{CONTROL_PADDING}" \
+          "background:#{style.background};color:#{style.color};font-weight:bold;border-radius:#{style.radius};"
+      end
+    end
+  end
+end

data/lib/activemail/components/callout.rb

@@ -1,20 +1,19 @@
 # typed: strict
 # frozen_string_literal: true
 
-require_relative 'base'
+require_relative 'table_component'
 
 module ActiveMail
   module Components
-    class Callout < Base
+    class Callout < TableComponent
       extend T::Sig
 
       sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
         classes = combine_classes(node, 'callout-inner')
-        attributes = pass_through_attributes(node)
         [
-          %(<table #{attributes}class="callout" #{TABLE_RESET}#{style_attribute(node, 'width:100%;')}><tbody><tr>),
-          %(<th class="#{classes}">#{inner}</th><th class="expander"></th>),
+          %(<table class="callout"#{passthrough_attributes(node)}#{style_attribute(node, 'width:100%;')} #{TABLE_RESET}><tbody><tr>),
+          %(<th class="#{escape_attr(classes)}">#{inner}</th><th class="expander"></th>),
           '</tr></tbody></table>'
         ].join
       end

data/lib/activemail/components/center.rb

@@ -8,16 +8,14 @@ module ActiveMail
     class Center < Base
       extend T::Sig
 
-      sig { override.params(node: Nokogiri::XML::Node, _inner: String).returns(String) }
-      def transform(node, _inner)
-        elements = node.elements
-        elements.each do |child|
+      sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
+      def transform(node, inner)
+        node.elements.each do |child|
           child['align'] = 'center'
           child['class'] = combine_classes(child, 'float-center')
         end
-        items = elements.css('.menu-item').to_a.concat(elements.css('item').to_a)
-        items.each { |item| item['class'] = combine_classes(item, 'float-center') }
-        node.to_s
+        node.css('.menu-item').each { |item| item['class'] = combine_classes(item, 'float-center') }
+        %(<center#{root_attributes(node, classes: nil)}>#{inner}</center>)
       end
     end
   end

data/lib/activemail/components/columns.rb

@@ -22,26 +22,45 @@ module ActiveMail
 
       private
 
+      sig { override.returns(T::Array[String]) }
+      def consumed_attributes
+        %w[small large]
+      end
+
       sig { params(node: Nokogiri::XML::Node).returns([Integer, Integer]) }
       def column_sizes(node)
         small = positive_int(node.attr('small'))
         large = positive_int(node.attr('large'))
-        siblings = node.parent ? node.parent.elements.size : 1
-        [small || column_count, large || small || [column_count / siblings, 1].max]
+        [small || column_count, large || small || [column_count / column_siblings(node).size, 1].max]
+      end
+
+      # Already transformed columns are interim <th class="columns"> elements; other siblings take no width.
+      sig { params(node: Nokogiri::XML::Node).returns(T::Array[Nokogiri::XML::Node]) }
+      def column_siblings(node)
+        return [node] unless node.parent
+
+        node.parent.elements.select { |sibling| sibling.name == node.name || column?(sibling) }
+      end
+
+      sig { params(node: Nokogiri::XML::Node).returns(T::Boolean) }
+      def column?(node)
+        return false unless node.name == ::ActiveMail::Core::INTERIM_TH_TAG
+
+        class?(node, 'columns')
       end
 
       sig { params(node: Nokogiri::XML::Node, small: Integer, large: Integer).returns(String) }
       def column_classes(node, small, large)
+        siblings = column_siblings(node)
         classes = combine_classes(node, "small-#{small} large-#{large} columns")
-        classes += ' first' unless node.previous_element
-        classes += ' last' unless node.next_element
+        classes += ' first' if siblings.first == node
+        classes += ' last' if siblings.last == node
         classes
       end
 
       sig { params(node: Nokogiri::XML::Node, large: Integer).returns(String) }
       def expander(node, large)
-        subrows = node.elements.css('.row').to_a.concat(node.elements.css('row').to_a)
-        return '' unless large == column_count && subrows.empty?
+        return '' unless large == column_count && node.at_css('.row').nil?
 
         %(<th class="expander"></th>)
       end
@@ -61,7 +80,7 @@ module ActiveMail
         # Neutralize the client default th rendering (bold, centered).
         content_style = 'font-weight:normal;text-align:left;'
         [
-          %(<#{::ActiveMail::Core::INTERIM_TH_TAG} class="#{classes}"#{style_attribute(node, style)} #{pass_through_attributes(node)}>),
+          %(<#{::ActiveMail::Core::INTERIM_TH_TAG}#{root_attributes(node, classes: classes, layout_style: style)}>),
           %(<table #{TABLE_RESET} style="width:100%;"><tbody><tr>),
           %(<th style="#{content_style}">#{inner}</th>#{expander}),
           %(</tr></tbody></table></#{::ActiveMail::Core::INTERIM_TH_TAG}>)

data/lib/activemail/components/container.rb

@@ -1,25 +1,32 @@
 # typed: strict
 # frozen_string_literal: true
 
-require_relative 'base'
+require_relative 'table_component'
 
 module ActiveMail
   module Components
-    class Container < Base
+    class Container < TableComponent
       extend T::Sig
 
       sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
-        attributes = combine_attributes(node, 'container')
         width = container_width
+        attributes = root_attributes(node, classes: 'container', layout_style: "width:100%;max-width:#{width}px;margin:0 auto;")
         # Outlook Word ignores max-width; the MSO ghost table pins the width.
         [
           %(<!--[if mso | IE]><table #{TABLE_RESET} align="center" width="#{width}"><tr><td><![endif]-->),
-          %(<table #{attributes} #{TABLE_RESET} align="center"#{style_attribute(node, "width:100%;max-width:#{width}px;margin:0 auto;")}>),
+          %(<table#{attributes} #{TABLE_RESET} align="center">),
           %(<tbody><tr><td>#{inner}</td></tr></tbody></table>),
           '<!--[if mso | IE]></td></tr></table><![endif]-->'
         ].join
       end
+
+      private
+
+      sig { override.returns(T::Array[String]) }
+      def consumed_attributes
+        [*super, 'align']
+      end
     end
   end
 end

data/lib/activemail/components/cta.rb

@@ -1,48 +1,24 @@
 # typed: strict
 # frozen_string_literal: true
 
-require_relative 'base'
+require_relative 'button_renderer'
 
 module ActiveMail
   module Components
-    # Colors read from tokens at transform time (runtime config), not load-time constants.
-    # Styles are inlined so the button survives clients that strip <style> (Gmail mobile…).
-    class Cta < Base
+    class Cta < ButtonRenderer
       extend T::Sig
 
-      sig { override.overridable.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
+      sig { override.returns(String) }
+      def root_class
+        'cta'
+      end
+
+      sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
         # A CTA without a link is an authoring bug — surface it at render time.
         raise ArgumentError, '<cta> requires an href attribute' if node.attr('href').to_s.strip.empty?
 
-        style = ActiveMail.tokens.button_style(class?(node, 'secondary') ? :secondary : :primary)
-        anchor = %(<a href="#{escape_attr(node.attr('href'))}"#{link_attributes(node)} ) +
-                 %(style="#{link_style(style)}">#{inner}</a>)
-        bulletproof_button_table(
-          outer_classes: combine_classes(node, 'cta'),
-          inner: anchor,
-          cell_style: cell_style(style)
-        )
-      end
-
-      private
-
-      sig { params(style: ActiveMail::Tokens::ButtonStyle).returns(String) }
-      def cell_style(style)
-        "background:#{style.background};border-radius:#{style.radius};#{border_css(style)}"
-      end
-
-      # No border here: it lives on the cell only — a repeated <a> border doubles the line.
-      sig { params(style: ActiveMail::Tokens::ButtonStyle).returns(String) }
-      def link_style(style)
-        "display:inline-block;text-decoration:none;#{BUTTON_PADDING}" \
-          "background:#{style.background};color:#{style.color};font-weight:bold;" \
-          "border-radius:#{style.radius};"
-      end
-
-      sig { params(style: ActiveMail::Tokens::ButtonStyle).returns(String) }
-      def border_css(style)
-        style.border ? "border:1px solid #{style.border};" : ''
+        super
       end
     end
   end

data/lib/activemail/components/h_line.rb

@@ -1,18 +1,16 @@
 # typed: strict
 # frozen_string_literal: true
 
-require_relative 'base'
+require_relative 'table_component'
 
 module ActiveMail
   module Components
-    class HLine < Base
+    class HLine < TableComponent
       extend T::Sig
 
       sig { override.params(node: Nokogiri::XML::Node, _inner: String).returns(String) }
       def transform(node, _inner)
-        classes = combine_classes(node, 'h-line')
-        attributes = pass_through_attributes(node)
-        %(<table #{attributes}class="#{classes}" #{TABLE_RESET}#{style_attribute(node, 'width:100%;')}><tbody><tr><th>&nbsp;</th></tr></tbody></table>)
+        %(<table#{root_attributes(node, classes: 'h-line', layout_style: 'width:100%;')} #{TABLE_RESET}><tbody><tr><th>&nbsp;</th></tr></tbody></table>)
       end
     end
   end

data/lib/activemail/components/info_box.rb

@@ -1,19 +1,18 @@
 # typed: strict
 # frozen_string_literal: true
 
-require_relative 'base'
+require_relative 'table_component'
 
 module ActiveMail
   module Components
     # Colors read from tokens at transform time (runtime config), not load-time constants.
-    class InfoBox < Base
+    class InfoBox < TableComponent
       extend T::Sig
 
       sig { override.overridable.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
-        classes = combine_classes(node, 'info-box')
         [
-          %(<table class="#{classes}" #{TABLE_RESET} style="width:100%;"><tbody><tr>),
+          %(<table#{root_attributes(node, classes: 'info-box', layout_style: 'width:100%;')} #{TABLE_RESET}><tbody><tr>),
           %(<td style="#{cell_style}">#{inner}</td>),
           '</tr></tbody></table>'
         ].join
@@ -21,16 +20,11 @@ module ActiveMail
 
       private
 
-      # Box-scoped tokens (fall back to page-level ones) so a host can give the box
-      # a distinct surface without colliding with :background/:border/:text.
       sig { returns(String) }
       def cell_style
-        tokens = ActiveMail.tokens
-        background = tokens.color(:info_box_background) || tokens.color!(:background)
-        border = tokens.color(:info_box_border) || tokens.color!(:border)
-        text = tokens.color(:info_box_text) || tokens.color!(:text)
-        "background-color:#{background};border-left:5px solid #{border};border-radius:#{tokens.radius!(:box)};" \
-          "color:#{text};padding:#{tokens.spacing!(:md)};"
+        tokens = core.config.tokens
+        "background-color:#{tokens.color!(:info_box_background)};border-left:5px solid #{tokens.color!(:info_box_border)};" \
+          "border-radius:#{tokens.radius!(:box)};color:#{tokens.color!(:info_box_text)};padding:#{tokens.spacing!(:md)};"
       end
     end
   end

data/lib/activemail/components/menu.rb

@@ -1,18 +1,17 @@
 # typed: strict
 # frozen_string_literal: true
 
-require_relative 'base'
+require_relative 'table_component'
 
 module ActiveMail
   module Components
-    class Menu < Base
+    class Menu < TableComponent
       extend T::Sig
 
       sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
-        attributes = combine_attributes(node, 'menu')
         [
-          %(<table #{attributes} #{TABLE_RESET}#{style_attribute(node)}><tbody><tr><td>),
+          %(<table#{root_attributes(node, classes: 'menu')} #{TABLE_RESET}><tbody><tr><td>),
           %(<table #{TABLE_RESET}><tbody><tr>#{inner}</tr></tbody></table>),
           '</td></tr></tbody></table>'
         ].join

data/lib/activemail/components/menu_item.rb

@@ -10,11 +10,18 @@ module ActiveMail
 
       sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
-        attributes = combine_attributes(node, 'menu-item')
+        attributes = root_attributes(node, classes: 'menu-item')
         # No href → a non-link item, not a broken <a href="">; mirrors <button>.
-        content = node.attr('href') ? %(<a href="#{escape_attr(node.attr('href'))}"#{link_attributes(node)}>#{inner}</a>) : inner
+        content = node.attr('href') ? anchor(node, inner) : inner
         th = ::ActiveMail::Core::INTERIM_TH_TAG
-        %(<#{th} #{attributes}#{style_attribute(node)}>#{content}</#{th}>)
+        %(<#{th}#{attributes}>#{content}</#{th}>)
+      end
+
+      private
+
+      sig { override.returns(T::Array[String]) }
+      def consumed_attributes
+        LINK_ATTRIBUTES
       end
     end
   end

data/lib/activemail/components/row.rb

@@ -1,17 +1,16 @@
 # typed: strict
 # frozen_string_literal: true
 
-require_relative 'base'
+require_relative 'table_component'
 
 module ActiveMail
   module Components
-    class Row < Base
+    class Row < TableComponent
       extend T::Sig
 
       sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
-        attributes = combine_attributes(node, 'row')
-        %(<table #{attributes} #{TABLE_RESET}#{style_attribute(node, 'width:100%;')}><tbody><tr>#{inner}</tr></tbody></table>)
+        %(<table#{root_attributes(node, classes: 'row', layout_style: 'width:100%;')} #{TABLE_RESET}><tbody><tr>#{inner}</tr></tbody></table>)
       end
     end
   end

data/lib/activemail/components/spacer.rb

@@ -1,41 +1,45 @@
 # typed: strict
 # frozen_string_literal: true
 
-require_relative 'base'
+require_relative 'table_component'
 
 module ActiveMail
   module Components
-    class Spacer < Base
+    class Spacer < TableComponent
       extend T::Sig
 
       sig { override.params(node: Nokogiri::XML::Node, _inner: String).returns(String) }
       def transform(node, _inner)
-        classes = combine_classes(node, 'spacer')
         size_sm = node.attr('size-sm')
         size_lg = node.attr('size-lg')
 
-        return build_table(node, classes, nil, size_for(node.attr('size'))) unless size_sm || size_lg
+        return build_table(node, 'spacer', size_for(node.attr('size')), skip: []) unless size_sm || size_lg
 
-        html = +''
-        html << build_table(node, classes, 'hide-for-large', size_for(size_sm)) if size_sm
-        html << build_table(node, classes, 'show-for-large', size_for(size_lg)) if size_lg
-        html
+        tables = []
+        tables << ['spacer hide-for-large', size_for(size_sm)] if size_sm
+        tables << ['spacer show-for-large', size_for(size_lg)] if size_lg
+        tables.each_with_index.map { |(classes, size), index| build_table(node, classes, size, skip: index.zero? ? [] : %w[id]) }.join
       end
 
       private
 
+      sig { override.returns(T::Array[String]) }
+      def consumed_attributes
+        [*super, 'size', 'size-sm', 'size-lg']
+      end
+
       sig { params(value: T.untyped).returns(Integer) }
       def size_for(value)
         positive_int(value) || 16
       end
 
-      sig { params(node: Nokogiri::XML::Node, classes: String, extra: T.nilable(String), size: Integer).returns(String) }
-      def build_table(node, classes, extra, size)
-        css_class = extra ? "#{classes} #{extra}" : classes
+      # A repeated id would be invalid HTML: only the first table carries it.
+      sig { params(node: Nokogiri::XML::Node, classes: String, size: Integer, skip: T::Array[String]).returns(String) }
+      def build_table(node, classes, size, skip:)
         # mso-line-height-rule:exactly keeps Outlook from inflating the spacer.
         style = "font-size:#{size}px;line-height:#{size}px;mso-line-height-rule:exactly;"
         [
-          %(<table class="#{css_class}" #{TABLE_RESET}#{style_attribute(node, 'width:100%;')}><tbody><tr>),
+          %(<table#{root_attributes(node, classes: classes, layout_style: 'width:100%;', skip: skip)} #{TABLE_RESET}><tbody><tr>),
           %(<td height="#{size}" style="#{style}">&nbsp;</td>),
           '</tr></tbody></table>'
         ].join

data/lib/activemail/components/table_component.rb

@@ -0,0 +1,23 @@
+# typed: strict
+# frozen_string_literal: true
+
+require_relative 'base'
+
+module ActiveMail
+  module Components
+    # Root element is a layout table: its reset attributes are fixed, not author-overridable.
+    class TableComponent < Base
+      extend T::Sig
+      extend T::Helpers
+
+      abstract!
+
+      private
+
+      sig { override.overridable.returns(T::Array[String]) }
+      def consumed_attributes
+        TABLE_RESET_ATTRIBUTES
+      end
+    end
+  end
+end

data/lib/activemail/components/wrapper.rb

@@ -1,21 +1,27 @@
 # typed: strict
 # frozen_string_literal: true
 
-require_relative 'base'
+require_relative 'table_component'
 
 module ActiveMail
   module Components
-    class Wrapper < Base
+    class Wrapper < TableComponent
       extend T::Sig
 
       sig { override.params(node: Nokogiri::XML::Node, inner: String).returns(String) }
       def transform(node, inner)
-        attributes = combine_attributes(node, 'wrapper')
         [
-          %(<table #{attributes} #{TABLE_RESET} align="center"#{style_attribute(node, 'width:100%;')}><tbody><tr>),
+          %(<table#{root_attributes(node, classes: 'wrapper', layout_style: 'width:100%;')} #{TABLE_RESET} align="center"><tbody><tr>),
           %(<td class="wrapper-inner">#{inner}</td></tr></tbody></table>)
         ].join
       end
+
+      private
+
+      sig { override.returns(T::Array[String]) }
+      def consumed_attributes
+        [*super, 'align']
+      end
     end
   end
 end