moved the elements to use the new utils structure

SparkPost · Oct 26, 2017 · 8ff40ff · 8ff40ff
1 parent 7cdcd9b
commit 8ff40ff
Show file tree

Hide file tree

Showing 12 changed files with 98 additions and 44 deletions.
diff --git a/packages/heml-elements/src/Block.js b/packages/heml-elements/src/Block.js
@@ -1,13 +1,9 @@
-import HEML, { createElement, utils } from '@heml/utils' // eslint-disable-line no-unused-vars
+import HEML, { createElement, transforms, cssGroups, condition } from '@heml/utils' // eslint-disable-line no-unused-vars
 import Style from './Style'
 
 const {
-  condition,
   trueHide,
-  convertProp,
-  ieAlignFallback,
-  fallbackFor,
-  cssGroups } = utils
+  ieAlignFallback } = transforms
 
 const {
   background,
@@ -26,7 +22,7 @@ export default createElement('block', {
   rules: {
     '.block': [ { '@pseudo': 'root' }, { display: trueHide('block') }, margin, width ],
 
-    '.block__table__ie': [ { 'max-width': convertProp('width') }, { width: fallbackFor('max-width') }, { [margin]: ieAlignFallback } ],
+    '.block__table__ie': [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
 
     '.block__table': [ { '@pseudo': 'table' }, table ],
 
@@ -40,7 +36,7 @@ export default createElement('block', {
     return (
       <div {...attrs}>
         {condition('mso | IE', `<table class="block__table__ie" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
-        <table class='block__table' role='presentation' border='0' align='left' cellpadding='0' cellspacing='0' width='100%'>
+        <table class='block__table' role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%'>
           <tr class='block__row'>
             <td class='block__cell' width='100%' align='left' valign='top'>{contents}</td>
           </tr>

diff --git a/packages/heml-elements/src/Body.js b/packages/heml-elements/src/Body.js
@@ -1,12 +1,12 @@
-import HEML, { createElement, utils } from '@heml/utils' // eslint-disable-line no-unused-vars
+import HEML, { createElement, transforms, cssGroups } from '@heml/utils' // eslint-disable-line no-unused-vars
 import Style from './Style'
 import Preview from './Preview'
 
 const {
   background,
   padding,
   font,
-  text } = utils.cssGroups
+  text } = cssGroups
 
 export default createElement('body', {
   unique: true,
@@ -20,7 +20,7 @@ export default createElement('body', {
 
     '.body__content': [ { '@pseudo': 'content' }, padding, font, text ],
 
-    '.preview': [ { 'background-color': utils.convertProp('color') } ]
+    '.preview': [ { 'background-color': transforms.convertProp('color') } ]
   },
 
   async render (attrs, contents) {

diff --git a/packages/heml-elements/src/Column.js b/packages/heml-elements/src/Column.js
@@ -1,12 +1,12 @@
-import HEML, { createElement, utils } from '@heml/utils' // eslint-disable-line no-unused-vars
+import HEML, { createElement, transforms, cssGroups } from '@heml/utils' // eslint-disable-line no-unused-vars
 import Style from './Style'
 
 const {
   background,
   box,
   padding,
   border,
-  borderRadius } = utils.cssGroups
+  borderRadius } = cssGroups
 
 const breakpoint = 600
 
@@ -17,7 +17,7 @@ export default createElement('column', {
   containsText: true,
 
   rules: {
-    '.column': [ { '@pseudo': 'root' }, { display: utils.trueHide(undefined, true) }, background, box, padding, border, borderRadius, 'vertical-align' ]
+    '.column': [ { '@pseudo': 'root' }, { display: transforms.trueHide(undefined, true) }, background, box, padding, border, borderRadius, 'vertical-align' ]
   },
 
   render (attrs, contents) {

diff --git a/packages/heml-elements/src/Container.js b/packages/heml-elements/src/Container.js
@@ -1,13 +1,9 @@
-import HEML, { createElement, utils } from '@heml/utils' // eslint-disable-line no-unused-vars
+import HEML, { createElement, transforms, cssGroups, condition } from '@heml/utils' // eslint-disable-line no-unused-vars
 import Style from './Style'
 
 const {
-  condition,
   trueHide,
-  convertProp,
-  ieAlignFallback,
-  fallbackFor,
-  cssGroups } = utils
+  ieAlignFallback } = transforms
 
 const {
   background,
@@ -26,7 +22,7 @@ export default createElement('container', {
   rules: {
     '.container': [ { '@pseudo': 'root' }, { display: trueHide('block') }, margin, width ],
 
-    '.container__table__ie': [ { 'max-width': convertProp('width') }, { width: fallbackFor('max-width') }, { [margin]: ieAlignFallback } ],
+    '.container__table__ie': [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
 
     '.container__table': [ { '@pseudo': 'table' }, table ],
 

diff --git a/packages/heml-elements/src/Head.js b/packages/heml-elements/src/Head.js
@@ -33,6 +33,11 @@ export default createElement('head', {
       `}</style>
         <style type='text/css'>{`
         h1, h2, h3, h4, h5, h6 { margin: 20px 0; }
+        h1 { line-height: 40px; }
+        h2 { line-height: 30px; }
+        h3 { line-height: 24px; }
+        h5 { line-height: 17px; }
+        h6 { line-height: 12px; }
         p { display: block; margin: 14px 0; }
         ul { margin-left: 20px; margin-top: 16px; margin-bottom: 16px; padding: 0; list-style-type: disc; }
       `}</style>

diff --git a/packages/heml-elements/src/Hr.js b/packages/heml-elements/src/Hr.js
@@ -0,0 +1,55 @@
+import HEML, { createElement, transforms, cssGroups, condition } from '@heml/utils' // eslint-disable-line no-unused-vars
+import Style from './Style'
+
+const {
+  trueHide,
+  ieAlignFallback } = transforms
+
+const {
+  background,
+  margin,
+  padding,
+  border,
+  borderRadius,
+  width,
+  height,
+  table,
+  box } = cssGroups
+
+export default createElement('hr', {
+  children: false,
+
+  rules: {
+    '.hr': [ { '@pseudo': 'root' }, { display: trueHide() }, margin, width ],
+
+    '.hr__table__ie': [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
+
+    '.hr__table': [ { '@pseudo': 'table' }, table ],
+
+    '.hr__row': [ { '@pseudo': 'row' } ],
+
+    '.hr__cell': [ { '@pseudo': 'cell' }, height, background, box, padding, border, borderRadius, 'vertical-align' ]
+  },
+
+  render (attrs, contents) {
+    attrs.class += ' hr'
+    return (
+      <div {...attrs}>
+        {condition('mso | IE', `<table class="hr__table__ie" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
+        <table class='hr__table' role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%' style='table-layout: fixed;'>
+          <tr class='hr__row'>
+            <td class='hr__cell' width='100%' align='left' valign='top'>{`&nbsp;`}</td>
+          </tr>
+        </table>
+        {condition('mso | IE', `</td></tr></table>`)}
+        <Style for='hr'>{`
+          hr {
+            width: 100%;
+            margin: auto;
+            border-top: 1px solid #9A9A9A;
+          }
+        `}</Style>
+      </div>
+    )
+  }
+})
diff --git a/packages/heml-elements/src/Img.js b/packages/heml-elements/src/Img.js
@@ -1,4 +1,4 @@
-import HEML, { createElement, utils } from '@heml/utils' // eslint-disable-line no-unused-vars
+import HEML, { createElement, transforms } from '@heml/utils' // eslint-disable-line no-unused-vars
 import Style from './Style'
 import { omit, has } from 'lodash'
 import fs from 'fs-extra'
@@ -15,7 +15,7 @@ export default createElement('img', {
   },
 
   rules: {
-    'img': [ { '@pseudo': 'root' }, { display: utils.trueHide() }, '@default' ]
+    'img': [ { '@pseudo': 'root' }, { display: transforms.trueHide() }, '@default' ]
   },
 
   async render (attrs, contents) {

diff --git a/packages/heml-elements/src/Preview.js b/packages/heml-elements/src/Preview.js
@@ -14,6 +14,6 @@ export default createElement('preview', {
   flush () {
     const preview = Meta.get('preview')
 
-    return preview ? <div class='preview' style='display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;'>{preview}{'&nbsp; '.repeat(100 - preview.length)}</div> : ''
+    return preview ? <div class='preview' style='display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;'>{preview}{'&nbsp;&zwnj;'.repeat(200 - preview.length)}</div> : ''
   }
 })
diff --git a/packages/heml-elements/src/Row.js b/packages/heml-elements/src/Row.js
@@ -1,14 +1,13 @@
-import HEML, { createElement, utils } from '@heml/utils' // eslint-disable-line no-unused-vars
+import HEML, { createElement, transforms } from '@heml/utils' // eslint-disable-line no-unused-vars
 import { sum, max, isUndefined } from 'lodash'
-const { margin } = utils.cssGroups
 
 export default createElement('row', {
   children: [ 'column' ],
 
   rules: {
-    '.row': [ { '@pseudo': 'root' }, { display: utils.trueHide('block') } ],
+    '.row': [ { '@pseudo': 'root' }, { display: transforms.trueHide('block') } ],
 
-    '.row__table': [ { '@pseudo': 'table' }, margin ],
+    '.row__table': [ { '@pseudo': 'table' } ],
 
     '.row__row': [ { '@pseudo': 'row' } ]
   },

diff --git a/packages/heml-elements/src/Table.js b/packages/heml-elements/src/Table.js
@@ -1,10 +1,10 @@
-import HEML, { createElement, utils } from '@heml/utils' // eslint-disable-line no-unused-vars
+import HEML, { createElement, transforms } from '@heml/utils' // eslint-disable-line no-unused-vars
 
 const Table = createElement('table', {
   attrs: true,
   containsText: true,
   rules: {
-    '.table': [ { '@pseudo': 'root' }, '@default', { display: utils.trueHide('table') } ]
+    '.table': [ { '@pseudo': 'root' }, '@default', { display: transforms.trueHide('table') } ]
   },
 
   render (attrs, contents) {

diff --git a/packages/heml-elements/src/Typography.js b/packages/heml-elements/src/Typography.js
@@ -1,9 +1,9 @@
-import HEML, { createElement, utils } from '@heml/utils' // eslint-disable-line no-unused-vars
+import HEML, { createElement, transforms, cssGroups } from '@heml/utils' // eslint-disable-line no-unused-vars
 import { merge } from 'lodash'
 
 const {
   margin, background, border, borderRadius, text, font
-} = utils.cssGroups
+} = cssGroups
 
 /**
  * create mergable text element
@@ -12,19 +12,22 @@ const {
  * @return {Object}
  */
 function createTextElement (name, element = {}) {
+  let classToAdd = ''
+  const Tag = name
+
+  if (/^h\d$/i.test(name)) {
+    classToAdd = 'header'
+  } else {
+    classToAdd = 'text'
+  }
+
   return createElement(name, merge({
     attrs: true,
     rules: {
-      [`${name}`]: [ { '@pseudo': 'root' }, '@default', { display: utils.trueHide() }, margin, background, border, borderRadius, text, font ]
+      [`.${name}.${classToAdd}`]: [ { '@pseudo': 'root' }, '@default', { display: transforms.trueHide() }, margin, background, border, borderRadius, text, font ]
     },
     render (attrs, contents) {
-      const Tag = name
-
-      if (/^h\d$/i.test(name)) {
-        attrs.class += ' header'
-      } else {
-        attrs.class += ' text'
-      }
+      attrs.class += ` ${classToAdd} ${name}`
 
       return <Tag {...attrs}>{contents}</Tag>
     }
@@ -47,7 +50,7 @@ const A = createElement('a', {
   defaultAttrs: { href: '#' },
 
   rules: {
-    '.a': [ { '@pseudo': 'root' }, { '@default': true }, { display: utils.trueHide('inline') }, 'color', 'text-decoration' ],
+    '.a': [ { '@pseudo': 'root' }, { '@default': true }, { display: transforms.trueHide('inline') }, 'color', 'text-decoration' ],
     '.a__text': [ { '@pseudo': 'text' }, 'color', 'text-decoration' ]
   },
 

diff --git a/packages/heml-elements/src/button.js b/packages/heml-elements/src/button.js
@@ -1,4 +1,4 @@
-import HEML, { createElement, utils } from '@heml/utils' // eslint-disable-line no-unused-vars
+import HEML, { createElement, transforms, cssGroups } from '@heml/utils' // eslint-disable-line no-unused-vars
 import { omit, pick } from 'lodash'
 import Style from './Style'
 
@@ -13,7 +13,7 @@ const {
   table,
   text,
   font,
-  box } = utils.cssGroups
+  box } = cssGroups
 
 export default createElement('button', {
   attrs: [ 'href', 'target' ],
@@ -23,7 +23,7 @@ export default createElement('button', {
 
   rules: {
     '.button': [
-      { '@pseudo': 'root' }, { display: utils.trueHide('block') } ],
+      { '@pseudo': 'root' }, { display: transforms.trueHide('block') } ],
 
     '.button__table': [
       { '@pseudo': 'table' }, margin, table ],