feat(responsive): add responsive modifier support

packages/mjml-accordion/README.md

@@ -62,7 +62,7 @@ Readers can interact by clicking on the tabs to reveal the content, providing a
 | font-family                | string                  | font                                               | `Ubuntu, sans-serif`              |
 | icon-align                 | `top` `middle` `bottom` | icon alignment                                     |                                   |
 | icon-height                | `px` `%`                | icon height                                        | `32px`                            |
-| icon-position              | left,<br>right          | display icon left or right                         | `right`                           |
+| icon-position              | `left` `right`          | display icon left or right                         | `right`                           |
 | icon-unwrapped-alt         | string                  | alt text when accordion is unwrapped               | `-`                               |
 | icon-unwrapped-url         | string                  | icon when accordion is unwrapped                   | `https://i.imgur.com/w4uTygT.png` |
 | icon-width                 | `px` `%`                | icon width                                         | `32px`                            |
@@ -90,6 +90,19 @@ Readers can interact by clicking on the tabs to reveal the content, providing a
   <p>All <code>--dark</code> modifier attributes require <code>support-dark-mode="true"</code> to be set on the <code>&lt;mjml&gt;</code> tag to work effectively in all supported clients.</p>
 </div>
 
+###### Responsive
+
+| attribute                  | accepts  | description                                    | default value |
+| -------------------------- | -------- | ---------------------------------------------- | ------------- |
+| icon-height--responsive    | `px` `%` | icon height                                    |               |
+| icon-width--responsive     | `px` `%` | icon width                                     |               |
+| padding--responsive        | `px` `%` | accordion padding, supports up to 4 parameters |               |
+| padding-bottom--responsive | `px` `%` | accordion bottom padding                       |               |
+| padding-left--responsive   | `px` `%` | accordion left padding                         |               |
+| padding-right--responsive  | `px` `%` | accordion right padding                        |               |
+| padding-top--responsive    | `px` `%` | accordion top padding                          |               |
+
+
 #### mj-accordion-element
 
 Creates an accordion title/text pair. An accordion can have any number of these pairs.
@@ -136,6 +149,14 @@ Creates an accordion title/text pair. An accordion can have any number of these
   <p>All <code>--dark</code> modifier attributes require <code>support-dark-mode="true"</code> to be set on the <code>&lt;mjml&gt;</code> tag to work effectively in all supported clients.</p>
 </div>
 
+###### Responsive
+
+| attribute               | accepts  | description | default value |
+| ----------------------- | -------- | ----------- | ------------- |
+| icon-height--responsive | `px` `%` | icon width  |               |
+| icon-width--responsive  | `px` `%` | icon height |               |
+
+
 #### mj-accordion-title
 
 Displays the title in a title/text pair.
@@ -172,6 +193,18 @@ Displays the title in a title/text pair.
   <p>All <code>--dark</code> modifier attributes require <code>support-dark-mode="true"</code> to be set on the <code>&lt;mjml&gt;</code> tag to work effectively in all supported clients.</p>
 </div>
 
+###### Responsive
+
+| attribute                  | accepts    | description                                          | default value |
+| -------------------------- | ---------- | ---------------------------------------------------- | ------------- |
+| font-size--responsive      | `px` `rem` | font size                                            |               |
+| padding--responsive        | `px` `%`   | accordion title padding, supports up to 4 parameters |               |
+| padding-bottom--responsive | `px` `%`   | accordion title bottom padding                       |               |
+| padding-left--responsive   | `px` `%`   | accordion title left padding                         |               |
+| padding-right--responsive  | `px` `%`   | accordion title right padding                        |               |
+| padding-top--responsive    | `px` `%`   | accordion title top padding                          |               |
+
+
 #### mj-accordion-text
 
 Displays the text in a title/text pair.
@@ -208,3 +241,15 @@ Displays the text in a title/text pair.
   <p>Note</p>
   <p>All <code>--dark</code> modifier attributes require <code>support-dark-mode="true"</code> to be set on the <code>&lt;mjml&gt;</code> tag to work effectively in all supported clients.</p>
 </div>
+
+###### Responsive
+
+| attribute                  | accepts             | description                                         | default value |
+| -------------------------- | ------------------- | --------------------------------------------------- | ------------- |
+| font-size--responsive      | `px` `rem`          | font size                                           |               |
+| line-height--responsive    | `px` `%` `em` `rem` | space between the lines                             |               |
+| padding--responsive        | `px` `%`            | accordion text padding, supports up to 4 parameters |               |
+| padding-bottom--responsive | `px` `%`            | accordion text bottom padding                       |               |
+| padding-left--responsive   | `px` `%`            | accordion text left padding                         |               |
+| padding-right--responsive  | `px` `%`            | accordion text right padding                        |               |
+| padding-top--responsive    | `px` `%`            | accordion text top padding                          |               |

packages/mjml-accordion/src/Accordion.js

@@ -3,6 +3,10 @@ import {
   emitDarkModeHeadStyle,
   registerDarkModeRule,
 } from 'mjml-core/lib/helpers/colorSchemeDarkMode'
+import {
+  emitResponsiveHeadStyle,
+  registerResponsivePaddingGroup,
+} from 'mjml-core/lib/helpers/responsiveMode'
 
 export default class MjAccordion extends BodyComponent {
   static componentName = 'mj-accordion'
@@ -17,19 +21,26 @@ export default class MjAccordion extends BodyComponent {
     'font-family': 'string',
     'icon-align': 'enum(top,middle,bottom)',
     'icon-height': 'unit(px,%)',
+    'icon-height--responsive': 'unit(px,%)',
     'icon-position': 'enum(left,right)',
     'icon-width': 'unit(px,%)',
+    'icon-width--responsive': 'unit(px,%)',
     'icon-wrapped-url': 'string',
     'icon-wrapped-url--dark': 'string',
     'icon-wrapped-alt': 'string',
     'icon-unwrapped-url': 'string',
     'icon-unwrapped-url--dark': 'string',
     'icon-unwrapped-alt': 'string',
     padding: 'unit(px,%){1,4}',
+    'padding--responsive': 'unit(px,%){1,4}',
     'padding-bottom': 'unit(px,%)',
+    'padding-bottom--responsive': 'unit(px,%)',
     'padding-left': 'unit(px,%)',
+    'padding-left--responsive': 'unit(px,%)',
     'padding-right': 'unit(px,%)',
+    'padding-right--responsive': 'unit(px,%)',
     'padding-top': 'unit(px,%)',
+    'padding-top--responsive': 'unit(px,%)',
     role: 'string',
   }
 
@@ -48,6 +59,8 @@ export default class MjAccordion extends BodyComponent {
 
   darkClasses = null
 
+  responsiveClasses = null
+
   getDarkClasses() {
     if (this.darkClasses !== null) {
       return this.darkClasses
@@ -82,22 +95,40 @@ export default class MjAccordion extends BodyComponent {
     if (name === 'css-class') {
       const base = this.attributes['css-class']
       const containerDarkClass = this.getDarkClasses().container
-      return [base, containerDarkClass].filter(Boolean).join(' ') || undefined
+      const containerResponsiveClass = this.getResponsiveClasses().container
+      return [base, containerDarkClass, containerResponsiveClass]
+        .filter(Boolean)
+        .join(' ') || undefined
     }
 
     return this.attributes[name]
   }
 
+  getResponsiveClasses() {
+    if (this.responsiveClasses !== null) {
+      return this.responsiveClasses
+    }
+
+    const globalData = this.context && this.context.globalData
+
+    this.responsiveClasses = {
+      container: registerResponsivePaddingGroup(globalData, this.attributes),
+    }
+
+    return this.responsiveClasses
+  }
+
   componentHeadStyle = () => {
     emitDarkModeHeadStyle(this.context && this.context.globalData)
+    emitResponsiveHeadStyle(this.context && this.context.globalData)
     return ''
   }
 
   headStyle = () =>
     `
       noinput.mj-accordion-checkbox { display:block!important; }
 
-      @media yahoo, only screen and (min-width:0) {
+      @media only screen and (min-width:0) {
         .mj-accordion-element { display:block; }
         .mj-accordion-checkbox[type="checkbox"] { display:block!important; position: absolute; opacity:0; pointer-events:none; }
         .mj-accordion-checkbox[type="checkbox"]:focus-visible ~ div .mj-accordion-title { outline: 5px auto Highlight; outline-color:-webkit-focus-ring-color; }
@@ -142,11 +173,13 @@ export default class MjAccordion extends BodyComponent {
       'border-color--dark',
       'icon-align',
       'icon-height',
+      'icon-height--responsive',
       'icon-position',
       'icon-unwrapped-alt',
       'icon-unwrapped-url',
       'icon-unwrapped-url--dark',
       'icon-width',
+      'icon-width--responsive',
       'icon-wrapped-alt',
       'icon-wrapped-url',
       'icon-wrapped-url--dark',

packages/mjml-accordion/src/AccordionElement.js

@@ -5,6 +5,11 @@ import {
   emitDarkModeHeadStyle,
   registerDarkModeRule,
 } from 'mjml-core/lib/helpers/colorSchemeDarkMode'
+import {
+  emitResponsiveHeadStyle,
+  buildResponsiveDeclarations,
+  registerResponsiveRuleGroup,
+} from 'mjml-core/lib/helpers/responsiveMode'
 import AccordionText from './AccordionText'
 import AccordionTitle from './AccordionTitle'
 
@@ -19,11 +24,13 @@ export default class MjAccordionElement extends BodyComponent {
     'font-family': 'string',
     'icon-align': 'enum(top,middle,bottom)',
     'icon-height': 'unit(px,%)',
+    'icon-height--responsive': 'unit(px,%)',
     'icon-position': 'enum(left,right)',
     'icon-unwrapped-alt': 'string',
     'icon-unwrapped-url': 'string',
     'icon-unwrapped-url--dark': 'string',
     'icon-width': 'unit(px,%)',
+    'icon-width--responsive': 'unit(px,%)',
     'icon-wrapped-alt': 'string',
     'icon-wrapped-url': 'string',
     'icon-wrapped-url--dark': 'string',
@@ -40,6 +47,8 @@ export default class MjAccordionElement extends BodyComponent {
 
   darkClasses = null
 
+  responsiveClasses = null
+
   getDarkClasses() {
     if (this.darkClasses !== null) {
       return this.darkClasses
@@ -62,9 +71,29 @@ export default class MjAccordionElement extends BodyComponent {
 
   componentHeadStyle = () => {
     emitDarkModeHeadStyle(this.context && this.context.globalData)
+    emitResponsiveHeadStyle(this.context && this.context.globalData)
     return ''
   }
 
+  getResponsiveClasses() {
+    if (this.responsiveClasses !== null) {
+      return this.responsiveClasses
+    }
+
+    const globalData = this.context && this.context.globalData
+
+    this.responsiveClasses = {
+      icon: registerResponsiveRuleGroup(globalData, {
+        cssDeclarations: buildResponsiveDeclarations([
+          ['width', this.attributes['icon-width--responsive']],
+          ['height', this.attributes['icon-height--responsive']],
+        ]),
+      }),
+    }
+
+    return this.responsiveClasses
+  }
+
   getStyles() {
     return {
       td: {
@@ -85,7 +114,9 @@ export default class MjAccordionElement extends BodyComponent {
       'border',
       'icon-align',
       'icon-width',
+      'icon-width--responsive',
       'icon-height',
+      'icon-height--responsive',
       'icon-position',
       'icon-wrapped-url',
       'icon-wrapped-alt',
@@ -130,6 +161,7 @@ export default class MjAccordionElement extends BodyComponent {
   getChildContext() {
     return {
       ...this.context,
+      accordionIconResponsiveClass: this.getResponsiveClasses().icon,
       elementFontFamily: this.getAttribute('font-family'),
     }
   }

packages/mjml-accordion/src/AccordionText.js

@@ -4,6 +4,11 @@ import {
   emitDarkModeHeadStyle,
   registerDarkModeRule,
 } from 'mjml-core/lib/helpers/colorSchemeDarkMode'
+import {
+  emitResponsiveHeadStyle,
+  buildResponsiveDeclarations,
+  registerResponsiveRuleGroup,
+} from 'mjml-core/lib/helpers/responsiveMode'
 
 export default class MjAccordionText extends BodyComponent {
   static componentName = 'mj-accordion-text'
@@ -17,14 +22,21 @@ export default class MjAccordionText extends BodyComponent {
     'color--dark': 'color',
     'font-family': 'string',
     'font-size': 'unit(px,rem)',
+    'font-size--responsive': 'unit(px,rem)',
     'font-weight': 'string',
     'letter-spacing': 'unitWithNegative(px,em)',
     'line-height': 'unit(px,%,em,rem)',
+    'line-height--responsive': 'unit(px,%,em,rem)',
     padding: 'unit(px,%){1,4}',
+    'padding--responsive': 'unit(px,%){1,4}',
     'padding-bottom': 'unit(px,%)',
+    'padding-bottom--responsive': 'unit(px,%)',
     'padding-left': 'unit(px,%)',
+    'padding-left--responsive': 'unit(px,%)',
     'padding-right': 'unit(px,%)',
+    'padding-right--responsive': 'unit(px,%)',
     'padding-top': 'unit(px,%)',
+    'padding-top--responsive': 'unit(px,%)',
     role: 'string',
   }
 
@@ -37,6 +49,8 @@ export default class MjAccordionText extends BodyComponent {
 
   darkClasses = null
 
+  responsiveClasses = null
+
   registerDarkModeRuleGroup({
     cssDeclarations,
     supportOutlookDarkMode = false,
@@ -122,9 +136,34 @@ export default class MjAccordionText extends BodyComponent {
 
   componentHeadStyle = () => {
     emitDarkModeHeadStyle(this.context && this.context.globalData)
+    emitResponsiveHeadStyle(this.context && this.context.globalData)
     return ''
   }
 
+  getResponsiveClasses() {
+    if (this.responsiveClasses !== null) {
+      return this.responsiveClasses
+    }
+
+    const globalData = this.context && this.context.globalData
+
+    this.responsiveClasses = {
+      content: registerResponsiveRuleGroup(globalData, {
+        cssDeclarations: buildResponsiveDeclarations([
+          ['font-size', this.attributes['font-size--responsive']],
+          ['line-height', this.attributes['line-height--responsive']],
+          ['padding', this.attributes['padding--responsive']],
+          ['padding-top', this.attributes['padding-top--responsive']],
+          ['padding-right', this.attributes['padding-right--responsive']],
+          ['padding-bottom', this.attributes['padding-bottom--responsive']],
+          ['padding-left', this.attributes['padding-left--responsive']],
+        ]),
+      }),
+    }
+
+    return this.responsiveClasses
+  }
+
   getStyles() {
     return {
       td: {
@@ -151,11 +190,16 @@ export default class MjAccordionText extends BodyComponent {
 
   renderContent() {
     const contentDarkClass = this.getDarkClasses().content
+    const contentResponsiveClass = this.getResponsiveClasses().content
 
     return `
       <td
         ${this.htmlAttributes({
-          class: [this.getAttribute('css-class'), contentDarkClass]
+          class: [
+            this.getAttribute('css-class'),
+            contentDarkClass,
+            contentResponsiveClass,
+          ]
             .filter(Boolean)
             .join(' ') || undefined,
           style: 'td',