From e8a66cad0a04353441e22608aae6df9c4c9b83ce Mon Sep 17 00:00:00 2001 From: John Benavides Date: Wed, 27 Dec 2017 20:01:54 +0100 Subject: [PATCH] Add Message component --- README.md | 1 + src/__test__/__snapshots__/index.test.js.snap | 1 + .../__snapshots__/message.test.js.snap | 72 +++++++++++++++++++ .../message/__test__/message.test.js | 41 +++++++++++ src/components/message/components/body.js | 39 ++++++++++ src/components/message/components/header.js | 39 ++++++++++ src/components/message/index.js | 3 + src/components/message/message.js | 58 +++++++++++++++ src/components/message/message.sass | 2 + src/components/message/message.story.js | 47 ++++++++++++ src/components/navbar/navbar.js | 1 - src/index.js | 1 + 12 files changed, 304 insertions(+), 1 deletion(-) create mode 100644 src/components/message/__test__/__snapshots__/message.test.js.snap create mode 100644 src/components/message/__test__/message.test.js create mode 100644 src/components/message/components/body.js create mode 100644 src/components/message/components/header.js create mode 100644 src/components/message/index.js create mode 100644 src/components/message/message.js create mode 100644 src/components/message/message.sass create mode 100644 src/components/message/message.story.js diff --git a/README.md b/README.md index b4174abe..47c5ac0b 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,7 @@ The Following componets were ported: - Level ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Level)) ([Docs](http://bulma.io/documentation/layout/level/)) - Loader ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Loader)) - Media ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Media)) ([Docs](http://bulma.io/documentation/layout/media-object/)) +- Message ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Message)) ([Docs](http://bulma.io/documentation/components/message/)) - Menu ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Menu)) ([Docs](http://bulma.io/documentation/components/menu/)) - Modal ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Modal)) ([Docs](http://bulma.io/documentation/components/modal/)) - Navbar ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Navbar)) ([Docs](https://bulma.io/documentation/components/navbar/)) diff --git a/src/__test__/__snapshots__/index.test.js.snap b/src/__test__/__snapshots__/index.test.js.snap index 17ee4806..a750324c 100644 --- a/src/__test__/__snapshots__/index.test.js.snap +++ b/src/__test__/__snapshots__/index.test.js.snap @@ -29,6 +29,7 @@ Object { "Loader": [Function], "Media": [Function], "Menu": [Function], + "Message": [Function], "Modal": [Function], "Navbar": [Function], "Notification": [Function], diff --git a/src/components/message/__test__/__snapshots__/message.test.js.snap b/src/components/message/__test__/__snapshots__/message.test.js.snap new file mode 100644 index 00000000..2c0f893e --- /dev/null +++ b/src/components/message/__test__/__snapshots__/message.test.js.snap @@ -0,0 +1,72 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Message component Should Exist 1`] = `[Function]`; + +exports[`Message component Should accept a react Element as renderAs prop 1`] = ` +

+ Custom + This should be a p element +

+`; + +exports[`Message component Should concat Bulma class with classes in props 1`] = ` +
+
+ Lorem Ipsum +
+
+ Lorem Ipsum +
+
+`; + +exports[`Message component Should have custom inline styles 1`] = ` +
+ This should be a section with custom styles +
+`; + +exports[`Message component Should have message classnames 1`] = ` +
+
+ Lorem Ipsum +
+
+ Lorem Ipsum +
+
+`; + +exports[`Message component Should render as an html section 1`] = ` +
+ This should be a section +
+`; diff --git a/src/components/message/__test__/message.test.js b/src/components/message/__test__/message.test.js new file mode 100644 index 00000000..2ce44ec0 --- /dev/null +++ b/src/components/message/__test__/message.test.js @@ -0,0 +1,41 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import Message from '..'; + +describe('Message component', () => { + it('Should Exist', () => { + expect(Message).toMatchSnapshot(); + }); + it('Should have message classnames', () => { + const component = renderer.create( + + Lorem Ipsum + Lorem Ipsum + , + ); + expect(component.toJSON()).toMatchSnapshot(); + }); + it('Should concat Bulma class with classes in props', () => { + const component = renderer.create( + + Lorem Ipsum + Lorem Ipsum + , + ); + expect(component.toJSON()).toMatchSnapshot(); + }); + it('Should render as an html section', () => { + const component = renderer.create(This should be a section); + expect(component.toJSON()).toMatchSnapshot(); + }); + it('Should have custom inline styles', () => { + const component = renderer.create(This should be a section with custom styles); + expect(component.toJSON()).toMatchSnapshot(); + }); + it('Should accept a react Element as renderAs prop', () => { + // eslint-disable-next-line react/prop-types + const Custom = props => (

Custom {props.children}

); + const component = renderer.create(This should be a p element); + expect(component.toJSON()).toMatchSnapshot(); + }); +}); diff --git a/src/components/message/components/body.js b/src/components/message/components/body.js new file mode 100644 index 00000000..2ded5fb0 --- /dev/null +++ b/src/components/message/components/body.js @@ -0,0 +1,39 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; + +export default class MessageBody extends PureComponent { + static displayName = 'Message.Body' + + static propTypes = { + children: PropTypes.node, + className: PropTypes.string, + renderAs: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), + } + + static defaultProps = { + children: null, + className: '', + renderAs: 'div', + } + render() { + const { + children, + className, + renderAs, + ...props + } = this.props; + const Element = renderAs; + return ( + + {children} + + ); + } +} diff --git a/src/components/message/components/header.js b/src/components/message/components/header.js new file mode 100644 index 00000000..ba7a37eb --- /dev/null +++ b/src/components/message/components/header.js @@ -0,0 +1,39 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; + +export default class MessageHeader extends PureComponent { + static displayName = 'Message.Header' + + static propTypes = { + children: PropTypes.node, + className: PropTypes.string, + renderAs: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), + } + + static defaultProps = { + children: null, + className: '', + renderAs: 'div', + } + render() { + const { + children, + className, + renderAs, + ...props + } = this.props; + const Element = renderAs; + return ( + + {children} + + ); + } +} diff --git a/src/components/message/index.js b/src/components/message/index.js new file mode 100644 index 00000000..0612b3df --- /dev/null +++ b/src/components/message/index.js @@ -0,0 +1,3 @@ +import './message.sass'; + +export { default } from './message'; diff --git a/src/components/message/message.js b/src/components/message/message.js new file mode 100644 index 00000000..003241c4 --- /dev/null +++ b/src/components/message/message.js @@ -0,0 +1,58 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import CONSTANTS from '../../constants'; + +import MessageBody from './components/body'; +import MessageHeader from './components/header'; + +const colors = [null].concat(Object.keys(CONSTANTS.COLORS).map(key => CONSTANTS.COLORS[key])); + +export default class Message extends PureComponent { + static propTypes = { + children: PropTypes.node, + className: PropTypes.string, + style: PropTypes.shape({}), + renderAs: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), + size: PropTypes.oneOf(['small', 'medium', 'large']), + color: PropTypes.oneOf(colors), + } + + static defaultProps = { + children: null, + className: '', + style: {}, + renderAs: 'article', + color: null, + size: null, + } + + static Body = MessageBody + static Header = MessageHeader + + render() { + const { + children, + className, + renderAs, + color, + size, + ...props + } = this.props; + const Element = renderAs; + return ( + + {children} + + ); + } +} diff --git a/src/components/message/message.sass b/src/components/message/message.sass new file mode 100644 index 00000000..af570202 --- /dev/null +++ b/src/components/message/message.sass @@ -0,0 +1,2 @@ +@import '../utils.sass'; +@import '~bulma/sass/components/message.sass'; \ No newline at end of file diff --git a/src/components/message/message.story.js b/src/components/message/message.story.js new file mode 100644 index 00000000..7584a9ab --- /dev/null +++ b/src/components/message/message.story.js @@ -0,0 +1,47 @@ +import React from 'react'; + +import { storiesOf } from '@storybook/react'; +import { withInfo } from '@storybook/addon-info'; + +import Message from '.'; +import Button from '../button'; + +storiesOf('Message', module) + .addDecorator(story => ( +
+ {story()} +
+ )) + .add('Default', withInfo()(() => ( + + + Title +