mjml-button - npm Package Compare versions

Comparing version 3.3.3-beta.1 to 3.3.3-beta.2

lib/index.js

@@ -51,3 +51,4 @@ 'use strict';
     "inner-padding": "10px 25px",
-    "padding": '10px 25px',
+    "line-height": "120%",
+    "padding": "10px 25px",
     "padding-top": null,
@@ -58,53 +59,11 @@ "padding-bottom": null,
     "width": null,
-    "height": null,
-    "box-shadow": "none",
-    "line-height": "1.2",
-    "text-align": "center"
+    "height": null
   }
 };
 var baseStyles = {
-  tableRoot: {
-    borderCollapse: 'collapse',
-    borderSpacing: '0',
-    padding: '0',
-    textAlign: 'left'
+  table: {
+    borderCollapse: 'separate'
   },
-  trRoot: {
-    padding: '0',
-    textAlign: 'left',
-    verticalAlign: 'top'
-  },
-  tdRoot: {
-    padding: '0',
-    borderCollapse: 'collapse',
-    textAlign: 'left',
-    verticalAlign: 'top'
-  },
-  containerTable: {
-    width: '100%'
-  },
-  containerTr: {
-    padding: 0,
-    textAlign: 'left'
-  },
-  containerTd: {
-    border: 'none',
-    borderCollapse: 'collapse',
-    hyphens: 'auto',
-    MozHyphens: 'auto',
-    padding: '0',
-    WebkitHyphens: 'auto',
-    wordWrap: 'break-word'
-  },
-  buttonA: {
-    display: 'block',
-    textTransform: 'none'
-  },
-  buttonTable: {
-    borderCollapse: 'separate',
-    width: '100%'
-  },
-  buttonP: {
-    margin: '0',
-    padding: '0'
+  a: {
+    textDecoration: 'none'
   }
@@ -137,47 +96,31 @@ };
 
-      var width = defaultUnit(mjAttribute('width'), 'px');
-      var isWidthPerCent = width && width.indexOf('%') >= 0;
 
       return _mjmlCore.helpers.merge({}, baseStyles, {
-        tableRoot: {
-          width: isWidthPerCent ? width : null
+        table: {
+          width: mjAttribute('width')
         },
-        tdRoot: {
-          backgroundColor: mjAttribute('container-background-color'),
-          width: isWidthPerCent ? null : width
-        },
-        containerTd: {
+        td: {
+          border: mjAttribute('border'),
+          borderBottom: mjAttribute('border-bottom'),
+          borderLeft: mjAttribute('border-left'),
+          borderRadius: defaultUnit(mjAttribute('border-radius'), "px"),
+          borderRight: mjAttribute('border-right'),
+          borderTop: mjAttribute('border-top'),
           color: mjAttribute('color'),
-          backgroundColor: mjAttribute('container-background-color'),
-          fontFamily: mjAttribute('font-family'),
-          fontSize: defaultUnit(mjAttribute('font-size'), 'px'),
-          fontWeight: mjAttribute('font-weight'),
-          lineHeight: mjAttribute('line-height'),
-          textAlign: mjAttribute('text-align'),
-          width: width
+          cursor: 'auto',
+          fontStyle: mjAttribute('font-style'),
+          height: mjAttribute('height'),
+          padding: defaultUnit(mjAttribute('inner-padding'), "px")
         },
-        buttonA: {
-          textDecoration: mjAttribute('text-decoration')
-        },
-        buttonP: {
+        a: {
+          background: mjAttribute('background-color'),
           color: mjAttribute('color'),
           fontFamily: mjAttribute('font-family'),
-          fontSize: defaultUnit(mjAttribute('font-size'), 'px'),
+          fontSize: defaultUnit(mjAttribute('font-size')),
           fontStyle: mjAttribute('font-style'),
           fontWeight: mjAttribute('font-weight'),
           lineHeight: mjAttribute('line-height'),
-          textAlign: mjAttribute('text-align')
-        },
-        buttonTd: {
-          backgroundColor: mjAttribute('background-color'),
-          border: mjAttribute('border'),
-          borderBottom: mjAttribute('border-bottom'),
-          borderLeft: mjAttribute('border-left'),
-          borderRadius: mjAttribute('border-radius'),
-          borderRight: mjAttribute('border-right'),
-          borderTop: mjAttribute('border-top'),
-          boxShadow: mjAttribute('box-shadow'),
-          height: defaultUnit(mjAttribute('height'), 'px'),
-          padding: defaultUnit(mjAttribute('inner-padding'), 'px'),
-          verticalAlign: mjAttribute('vertical-align')
+          textDecoration: mjAttribute('text-decoration'),
+          textTransform: mjAttribute('text-transform'),
+          margin: "0px"
         }
@@ -193,29 +136,15 @@ });
 
-      var button = _react2.default.createElement(
-        'table',
-        { style: this.styles.buttonTable },
-        _react2.default.createElement(
-          'tbody',
-          null,
-          _react2.default.createElement(
-            'tr',
-            null,
-            _react2.default.createElement(
-              'td',
-              { style: this.styles.buttonTd },
-              _react2.default.createElement('p', { dangerouslySetInnerHTML: { __html: mjContent() }, style: this.styles.buttonP })
-            )
-          )
-        )
-      );
 
       if (mjAttribute('href')) {
-        return _react2.default.createElement(
-          'a',
-          { href: mjAttribute('href'), style: this.styles.buttonA, target: '_blank', rel: mjAttribute('rel') },
-          button
-        );
+        return _react2.default.createElement('a', {
+          dangerouslySetInnerHTML: { __html: mjContent() },
+          href: mjAttribute('href'),
+          rel: mjAttribute('rel'),
+          style: this.styles.a,
+          target: '_blank' });
       }
 
-      return button;
+      return _react2.default.createElement('p', {
+        dangerouslySetInnerHTML: { __html: mjContent() },
+        style: this.styles.a });
     }
@@ -227,2 +156,3 @@ }, {
 
+
       return _react2.default.createElement(
@@ -234,6 +164,5 @@ 'table',
           cellSpacing: '0',
-          align: mjAttribute('align'),
           'data-legacy-align': mjAttribute('align'),
           'data-legacy-border': '0',
-          style: this.styles.tableRoot },
+          style: this.styles.table },
         _react2.default.createElement(
@@ -244,26 +173,11 @@ 'tbody',
             'tr',
-            { style: this.styles.trRoot },
+            null,
             _react2.default.createElement(
               'td',
-              { style: this.styles.tdRoot },
-              _react2.default.createElement(
-                'table',
-                {
-                  cellPadding: '0',
-                  cellSpacing: '0',
-                  style: this.styles.containerTable },
-                _react2.default.createElement(
-                  'tbody',
-                  null,
-                  _react2.default.createElement(
-                    'tr',
-                    { style: this.styles.containerTr },
-                    _react2.default.createElement(
-                      'td',
-                      { style: this.styles.containerTd },
-                      this.renderButton()
-                    )
-                  )
-                )
-              )
+              {
+                'data-legacy-align': 'center',
+                'data-legacy-bgcolor': mjAttribute('background-color') === "none" ? "" : mjAttribute('background-color'),
+                'data-legacy-valign': mjAttribute('vertical-align'),
+                style: this.styles.td },
+              this.renderButton()
             )
@@ -270,0 +184,0 @@ )

package.json

 {
   "name": "mjml-button",
   "description": "mjml-button",
-  "version": "3.3.3-beta.1",
+  "version": "3.3.3-beta.2",
   "main": "lib/index.js",
@@ -17,5 +17,5 @@ "repository": {
     "lodash": "^4.17.4",
-    "mjml-core": "~3.3.3-beta.1",
+    "mjml-core": "~3.3.3-beta.2",
     "react": "^15.4.2"
   }
 }

README.md

@@ -41,3 +41,2 @@ ## mjml-button
 border-radius               | px          | border radius                                    | 3px
-box-shadow	                | string      | box shadow	                                     | n/a
 font-style                  | string      | normal/italic/oblique                            | n/a
@@ -48,4 +47,2 @@ font-size                   | px          | text size                                        | 13px
 color                       | color       | text color                                       | #ffffff
-line-height                 | px          | Line height to prevent cropped font              | 16px
-text-align                  | string      | left/center/right                                | center
 text-decoration             | string      | underline/overline/none                          | none
@@ -55,6 +52,7 @@ text-transform              | string      | capitalize/uppercase/lowercase                   | none
 vertical-align              | string      | vertical alignment                               | middle
+line-height                 | px/%/none   | line-height on link                              | 120%
 href                        | link        | link to be triggered when the button is clicked  | n/a
 rel                         | string      | specify the rel attribute for the button link    | n/a
-inner-padding               | px          | inner button padding                             | 15px 25px
-padding                     | px          | supports up to 4 parameters                      | 15px 25px
+inner-padding               | px          | inner button padding                             | 10px 25px
+padding                     | px          | supports up to 4 parameters                      | 10px 25px
 padding-top                 | px          | top offset                                       | n/a
@@ -61,0 +59,0 @@ padding-bottom              | px          | bottom offset                                    | n/a

No alert changes

Worsened metrics

Total package byte prevSize

44944

decreased by-5.32%

Lines of code

165

decreased by-34.52%

Number of lines in readme file

61

decreased by-3.17%

Dependency changes

• Updatedmjml-core@~3.3.3-beta.2