Add Message component

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/))

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],

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`] = `
+<p
+  className="message"
+  style={Object {}}
+>
+  Custom 
+  This should be a p element
+</p>
+`;
+
+exports[`Message component Should concat Bulma class with classes in props 1`] = `
+<article
+  className="message other-class"
+  style={Object {}}
+>
+  <div
+    className="message-header"
+  >
+    Lorem Ipsum
+  </div>
+  <div
+    className="message-body"
+  >
+    Lorem Ipsum
+  </div>
+</article>
+`;
+
+exports[`Message component Should have custom inline styles 1`] = `
+<section
+  className="message"
+  style={
+    Object {
+      "width": 200,
+      "zIndex": 1,
+    }
+  }
+>
+  This should be a section with custom styles
+</section>
+`;
+
+exports[`Message component Should have message classnames 1`] = `
+<article
+  className="message"
+  style={Object {}}
+>
+  <div
+    className="message-header"
+  >
+    Lorem Ipsum
+  </div>
+  <div
+    className="message-body"
+  >
+    Lorem Ipsum
+  </div>
+</article>
+`;
+
+exports[`Message component Should render as an html section 1`] = `
+<section
+  className="message"
+  style={Object {}}
+>
+  This should be a section
+</section>
+`;

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(
+      <Message>
+        <Message.Header>Lorem Ipsum</Message.Header>
+        <Message.Body>Lorem Ipsum</Message.Body>
+      </Message>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should concat Bulma class with classes in props', () => {
+    const component = renderer.create(
+      <Message className="other-class">
+        <Message.Header>Lorem Ipsum</Message.Header>
+        <Message.Body>Lorem Ipsum</Message.Body>
+      </Message>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should render as an html section', () => {
+    const component = renderer.create(<Message renderAs="section">This should be a section</Message>);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should have custom inline styles', () => {
+    const component = renderer.create(<Message renderAs="section" style={{ width: 200, zIndex: 1 }}>This should be a section with custom styles</Message>);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should accept a react Element as renderAs prop', () => {
+    // eslint-disable-next-line react/prop-types
+    const Custom = props => (<p {...props}>Custom {props.children}</p>);
+    const component = renderer.create(<Message renderAs={Custom}>This should be a p element</Message>);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});

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 (
+      <Element
+        {...props}
+        className={classnames('message-body', className)}
+      >
+        {children}
+      </Element>
+    );
+  }
+}

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 (
+      <Element
+        {...props}
+        className={classnames('message-header', className)}
+      >
+        {children}
+      </Element>
+    );
+  }
+}

src/components/message/index.js

@@ -0,0 +1,3 @@
+import './message.sass';
+
+export { default } from './message';

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 (
+      <Element
+        {...props}
+        className={classnames('message', className, {
+          [`is-${color}`]: color,
+          [`is-${size}`]: size,
+        })}
+      >
+        {children}
+      </Element>
+    );
+  }
+}

src/components/message/message.sass

@@ -0,0 +1,2 @@
+@import '../utils.sass';
+@import '~bulma/sass/components/message.sass';

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 => (
+    <div style={{ margin: 10 }}>
+      {story()}
+    </div>
+  ))
+  .add('Default', withInfo()(() => (
+    <Message>
+      <Message.Header>
+        Title
+        <Button remove />
+      </Message.Header>
+      <Message.Body>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+      </Message.Body>
+    </Message>
+  )))
+  .add('Color', withInfo()(() => (
+    <React.Fragment>
+      <Message color="info">
+        <Message.Header>
+          Title
+          <Button remove />
+        </Message.Header>
+        <Message.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+        </Message.Body>
+      </Message>
+      <Message color="danger">
+        <Message.Header>
+          Title
+          <Button remove />
+        </Message.Header>
+        <Message.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+        </Message.Body>
+      </Message>
+    </React.Fragment>
+  )));

src/components/navbar/navbar.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-// eslint-disable-next-line
 import canUseDOM from '../../services/can-use-dom';
 import Brand from './components/brand';
 import Burger from './components/burger';

src/index.js

@@ -28,3 +28,4 @@ export { default as Navbar } from './components/navbar';
 export { default as Tabs } from './components/tabs';
 export { default as Pagination } from './components/pagination';
 export { default as Menu } from './components/menu';
+export { default as Message } from './components/message';