# add-Toast

PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
-# Pull Request Template
+# add-Toast
 
 ## Types of changes
 

docs/package.json

@@ -14,6 +14,7 @@
     "react-spectre": "../src/"
   },
   "devDependencies": {
+    "babel-core": "^6.26.3",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",

docs/src/index.js

@@ -6,5 +6,6 @@ import App from './components/App'
 render(
   <div>
     <App />
-  </div>
-  , document.getElementById('root'))
+  </div>,
+  document.getElementById('root')
+)

package.json

@@ -81,7 +81,7 @@
     "standard": "^12.0.1"
   },
   "dependencies": {
-    "prop-types": "^15.6.2",
-    "classnames": "^2.2.6"
+    "classnames": "^2.2.6",
+    "prop-types": "^15.6.2"
   }
 }

src/Toast/Toast.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const colors = ['primary', 'secondary', 'success', 'warning', 'error']
+
+const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: PropTypes.oneOf(colors),
+  renderAs: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+}
+
+const defaultProps = {
+  renderAs: 'div'
+}
+
+const Toast = ({ children, ...props }) => {
+  const { color, className, renderAs: Element, ...attributes } = props
+
+  const classNames = classnames(
+    {
+      [`toast-${color}`]: color,
+      toast: 'toast'
+    },
+    className
+  )
+
+  return (
+    <Element {...attributes} className={classNames}>
+      {children}
+    </Element>
+  )
+}
+
+Toast.propTypes = propTypes
+Toast.defaultProps = defaultProps
+
+export default Toast

src/Toast/index.js

@@ -0,0 +1 @@
+export default from './Toast'

src/__test__/Toast/Toast.test.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { Toast } from '../..'
+
+describe('Toasts', () => {
+  it('Should render a div tag by default', () => {
+    const wrapper = shallow(<Toast />)
+
+    expect(wrapper.type()).toBe('div')
+  })
+
+  it('Should render children', () => {
+    const wrapper = shallow(<Toast>My toast</Toast>)
+
+    expect(wrapper.text()).toBe('My toast')
+  })
+
+  it('Should pass additional classNames', () => {
+    const wrapper = shallow(<Toast className="extra">My Toasts</Toast>)
+
+    expect(wrapper.hasClass('extra')).toBe(true)
+  })
+
+  it('Should render with "Toasts" class by default', () => {
+    const wrapper = shallow(<Toast>Toasts</Toast>)
+
+    expect(wrapper.hasClass('toast')).toBe(true)
+  })
+
+  it('Should render with "toast-{color}" class when a color is provided', () => {
+    const wrapper = shallow(<Toast color="primary">Primary</Toast>)
+
+    expect(wrapper.hasClass('toast-primary')).toBe(true)
+  })
+
+  it('Should render custom tag', () => {
+    const wrapper = shallow(<Toast renderAs="main">custom</Toast>)
+
+    expect(wrapper.type()).toBe('main')
+  })
+
+  it('Should match the snapshot', () => {
+    const wrapper = shallow(<Toast />)
+
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  // it('Should have toast classname', () => {
+  //   const wrapper = renderer.create(<Toast>Test</Toast>)
+
+  //   expect(wrapper.toJSON()).toMatchSnapshot()
+  // })
+
+  // it('Should concat classnames in props with Spectre classnames', () => {
+  //   const wrapper = renderer.create(
+  //     <Toast className='other-class this-is-a-test'>classes</Toast>
+  //   )
+
+  //   expect(wrapper.toJSON()).toMatchSnapshot()
+  // })
+
+  // it('Should use inline styles', () => {
+  //   const wrapper = renderer.create(
+  //     <Toast style={{ width: 250 }}>Inline styles</Toast>)
+
+  //   expect(wrapper.toJSON()).toMatchSnapshot()
+  // })
+})

src/__test__/Toast/__snapshots__/Toast.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toasts Should match the snapshot 1`] = `
+<div
+  className="toast"
+/>
+`;

src/index.js

@@ -8,6 +8,7 @@ export Icon from './Icon'
 export Label from './Label'
 export Code from './Code'
 export Chip from './Chip'
+export Toast from './Toast'
 
 // -------------------
 // GROUPED COMPONENTS

stories/toast.stories.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Container, Col, Row, Toast } from '../src'
+
+storiesOf('Toasts', module)
+  .add('Default', () => (
+    <Container>
+      <Row>
+        <Col all={3}>
+          <Toast className="m-2">
+            <button className="btn btn-clear float-right" />
+            <h5>Toast Title</h5>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </Toast>
+
+          <Toast className="m-2">
+            <button className="btn btn-clear float-right" />
+            Default Toast
+          </Toast>
+        </Col>
+      </Row>
+    </Container>
+  ))
+  .add('Colors', () => (
+    <Container>
+      <Row>
+        <Col all={3}>
+          <Toast className="m-2" color="primary">
+            <button className="btn btn-clear float-right" />
+            Toast - primary
+          </Toast>
+          <Toast className="m-2" color="secondary">
+            <button className="btn btn-clear float-right" />
+            Toast - secondary
+          </Toast>
+          <Toast className="m-2" color="error">
+            <button className="btn btn-clear float-right" />
+            Toast - error
+          </Toast>
+          <Toast className="m-2" color="warning">
+            <button className="btn btn-clear float-right" />
+            Toast - warning
+          </Toast>
+          <Toast className="m-2" color="success">
+            <button className="btn btn-clear float-right" />
+            Toast - success
+          </Toast>
+        </Col>
+      </Row>
+    </Container>
+  ))