heml/packages/heml-elements/src/Button.js at 4d30aedf8a89b8cef90f5ea0abb92832958eb448 · SparkPost/heml · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import HEML, { createElement, transforms, cssGroups } from '@heml/utils' // eslint-disable-line no-unused-vars
import { omit, pick } from 'lodash'

const {
  background,
  margin,
  padding,
  border,
  borderRadius,
  width,
  height,
  table,
  text,
  font,
  box } = cssGroups

export default createElement('button', {
  attrs: [ 'href', 'target' ],
  defaultAttrs: {
    href: '#'
  },

  rules: {
    '.button': [
      { '@pseudo': 'root' }, { display: transforms.trueHide('block') } ],

    '.button__table': [
      { '@pseudo': 'table' }, margin, table ],

    '.button__cell': [
      { '@pseudo': 'cell' }, background, padding, borderRadius, border, height, width, box ],

    '.button__link': [
      { '@pseudo': 'link' }, background, text, font ],
    '.button__text': [
      { '@pseudo': 'text' }, 'color', 'text-decoration' ]
  },

  css (Style) {
    return <Style>{`
      button {
        margin: auto;
        border-radius: 3px;
        padding: 6px 12px;
        background-color: #2097e4;
        color: #ffffff;
        text-decoration: none;
      }
    `}</Style>
  },

  render (attrs, contents) {
    attrs.class += ' button'

    return (
      <div {...omit(attrs, [ 'href', 'target' ])}>
        <table role='presentation' width='100%' align='left' border='0' cellpadding='0' cellspacing='0'>
          <tr>
            <td>
              <table role='presentation' width='auto' align='center' border='0' cellspacing='0' cellpadding='0' class='button__table'>
                <tr>
                  <td align='center' class='button__cell'>
                    <a {...pick(attrs, [ 'href', 'target' ])} class='button__link' style='display: inline-block;'>
                      <span class='button__text'>{contents}</span>
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>)
  }
})