diff --git a/.gitignore b/.gitignore index 9b26ed0..af63895 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ node_modules -lib \ No newline at end of file +lib +.idea +coverage diff --git a/__tests__/renderEmail.test.js b/__tests__/renderEmail.test.js index c2c4626..7760642 100644 --- a/__tests__/renderEmail.test.js +++ b/__tests__/renderEmail.test.js @@ -13,14 +13,14 @@ describe('renderEmail', () => { it('produces expected output from a kitchen sink example', () => { const actualOutput = renderEmail(kitchenSink) - const expectedOutput = 'Test Email
Hello, world!
Generated by react-html-emailreactSource code
' + const expectedOutput = 'Test Email
Hello, world!
Generated by react-html-emailreactSource code
Column1Column2
' expect(actualOutput).toBe(expectedOutput) }) it('warns on usage of an unsupported property', () => { const spy = jest.spyOn(console, 'error').mockImplementation() const actualOutput = renderEmail() - const expectedOutput = '' + const expectedOutput = '' expect(actualOutput).toBe(expectedOutput) expect(spy).toHaveBeenCalled() expect(spy).toHaveBeenCalledWith('Warning: Failed prop type: Style property `list-style-position` supplied to `A` unsupported in: outlook, outlook-web.\n in A') diff --git a/examples/kitchenSink.jsx b/examples/kitchenSink.jsx index c74c183..10ef1ab 100644 --- a/examples/kitchenSink.jsx +++ b/examples/kitchenSink.jsx @@ -1,5 +1,5 @@ import React from 'react' -import { Box, Email, Image, Item, Span, A } from '../src/index' +import { Box, Email, Image, Item, Span, A, Row, Col } from '../src/index' const css = ` @media only screen and (max-device-width: 480px) { @@ -22,6 +22,12 @@ const email = ( + + + Column1 + Column2 + + ) diff --git a/src/components/A.jsx b/src/components/A.jsx index ef601b1..4446610 100644 --- a/src/components/A.jsx +++ b/src/components/A.jsx @@ -10,6 +10,7 @@ export default function A(props) { download={props.download} href={props.href} target="_blank" + rel="noopener noreferrer" style={{ color: props.color, textDecoration: props.textDecoration, diff --git a/src/components/Col.jsx b/src/components/Col.jsx new file mode 100644 index 0000000..05b3f4f --- /dev/null +++ b/src/components/Col.jsx @@ -0,0 +1,40 @@ +import React from 'react' +import PropTypes from 'prop-types' +import EmailPropTypes from '../PropTypes' +import includeDataProps from '../includeDataProps' + +export default function Col(props) { + return ( + + {props.children} + + ) +} + +Col.propTypes = { + className: PropTypes.string, + bgcolor: PropTypes.string, + colSpan: PropTypes.number, + align: PropTypes.oneOf(['left', 'center', 'right']), + valign: PropTypes.oneOf(['top', 'middle', 'bottom']), + style: EmailPropTypes.style, + children: PropTypes.node, +} + +Col.defaultProps = { + colSpan: null, + children: null, + className: null, + bgcolor: null, + align: 'center', + valign: 'top', + style: null, +} diff --git a/src/components/Row.jsx b/src/components/Row.jsx new file mode 100644 index 0000000..0ce71d1 --- /dev/null +++ b/src/components/Row.jsx @@ -0,0 +1,37 @@ +import React from 'react' +import PropTypes from 'prop-types' +import EmailPropTypes from '../PropTypes' +import includeDataProps from '../includeDataProps' + +export default function Row(props) { + return ( + + {props.children} + + ) +} + +Row.propTypes = { + className: PropTypes.string, + bgcolor: PropTypes.string, + align: PropTypes.oneOf(['left', 'center', 'right']), + valign: PropTypes.oneOf(['top', 'middle', 'bottom']), + style: EmailPropTypes.style, + children: PropTypes.node, +} + +Row.defaultProps = { + children: null, + className: null, + bgcolor: null, + align: 'center', + valign: 'top', + style: null, +} diff --git a/src/index.js b/src/index.js index df48c5a..4a6048f 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,8 @@ import Box from './components/Box' import Email from './components/Email' import Image from './components/Image' import Item from './components/Item' +import Row from './components/Row' +import Col from './components/Col' import Span from './components/Span' import A from './components/A' import renderEmail from './renderEmail' @@ -19,6 +21,8 @@ export { Email, Image, Item, + Row, + Col, Span, A, configStyleValidator,