diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index f50f9e1..d1ac5ed 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -1,4 +1,4 @@ -# Pull Request Template +# add-Toast ## Types of changes diff --git a/docs/package.json b/docs/package.json index 845742d..7c4755a 100644 --- a/docs/package.json +++ b/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", diff --git a/docs/src/index.js b/docs/src/index.js index 0a53c4c..d3c058d 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -6,5 +6,6 @@ import App from './components/App' render(
-
- , document.getElementById('root')) + , + document.getElementById('root') +) diff --git a/package.json b/package.json index 24ed69f..6de4d5b 100644 --- a/package.json +++ b/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" } } diff --git a/src/Toast/Toast.js b/src/Toast/Toast.js new file mode 100644 index 0000000..bc8e4ca --- /dev/null +++ b/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 ( + + {children} + + ) +} + +Toast.propTypes = propTypes +Toast.defaultProps = defaultProps + +export default Toast diff --git a/src/Toast/index.js b/src/Toast/index.js new file mode 100644 index 0000000..3363f44 --- /dev/null +++ b/src/Toast/index.js @@ -0,0 +1 @@ +export default from './Toast' diff --git a/src/__test__/Toast/Toast.test.js b/src/__test__/Toast/Toast.test.js new file mode 100644 index 0000000..9d822d7 --- /dev/null +++ b/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() + + expect(wrapper.type()).toBe('div') + }) + + it('Should render children', () => { + const wrapper = shallow(My toast) + + expect(wrapper.text()).toBe('My toast') + }) + + it('Should pass additional classNames', () => { + const wrapper = shallow(My Toasts) + + expect(wrapper.hasClass('extra')).toBe(true) + }) + + it('Should render with "Toasts" class by default', () => { + const wrapper = shallow(Toasts) + + expect(wrapper.hasClass('toast')).toBe(true) + }) + + it('Should render with "toast-{color}" class when a color is provided', () => { + const wrapper = shallow(Primary) + + expect(wrapper.hasClass('toast-primary')).toBe(true) + }) + + it('Should render custom tag', () => { + const wrapper = shallow(custom) + + expect(wrapper.type()).toBe('main') + }) + + it('Should match the snapshot', () => { + const wrapper = shallow() + + expect(wrapper).toMatchSnapshot() + }) + + // it('Should have toast classname', () => { + // const wrapper = renderer.create(Test) + + // expect(wrapper.toJSON()).toMatchSnapshot() + // }) + + // it('Should concat classnames in props with Spectre classnames', () => { + // const wrapper = renderer.create( + // classes + // ) + + // expect(wrapper.toJSON()).toMatchSnapshot() + // }) + + // it('Should use inline styles', () => { + // const wrapper = renderer.create( + // Inline styles) + + // expect(wrapper.toJSON()).toMatchSnapshot() + // }) +}) diff --git a/src/__test__/Toast/__snapshots__/Toast.test.js.snap b/src/__test__/Toast/__snapshots__/Toast.test.js.snap new file mode 100644 index 0000000..fc0eb95 --- /dev/null +++ b/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`] = ` +
+`; diff --git a/src/index.js b/src/index.js index 128681d..3a4329e 100644 --- a/src/index.js +++ b/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 diff --git a/stories/toast.stories.js b/stories/toast.stories.js new file mode 100644 index 0000000..8e0047d --- /dev/null +++ b/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', () => ( + + + + +