feat(toast): add toast to oxygen

Author: Seagyn Davis

.storybook/addons.js

@@ -1,3 +1,2 @@
-import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-knobs/register';

src/toast/index.js

@@ -1,8 +1,22 @@
+import React from 'react';
 import { PropTypes } from 'prop-types';
-import Toast from './style';
+import { CheckIcon, ToastContainer, WarningIcon } from './style';
+
+const Toast = ({ children, type }) => (
+  <ToastContainer>
+    {type === 'warning' && <WarningIcon />}
+    {type === 'success' && <CheckIcon />}
+    {children}
+  </ToastContainer>
+);
 
 Toast.propTypes = {
-  children: PropTypes.string.isRequired
+  children: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['success', 'warning'])
+};
+
+Toast.defaultProps = {
+  type: 'success'
 };
 
 export default Toast;

src/toast/style.js

@@ -1,16 +1,50 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import colors from '../colors';
+import breakpoints from '../breakpoints';
+import { CheckCircle } from 'styled-icons/material/CheckCircle';
+import { Warning } from 'styled-icons/material/Warning';
 
-export default styled.div`
+const Icon = css`
+  margin-right: 7px;
+  width: 19px;
+
+  @media (min-width: ${breakpoints.small}) {
+    width: 22px;
+  }
+`;
+
+export const CheckIcon = styled(CheckCircle)`
+  ${Icon}
+  color: ${colors.ocean};
+`;
+
+export const WarningIcon = styled(Warning)`
+  ${Icon}
+  color: ${colors.warning};
+`;
+
+export const ToastContainer = styled.div`
   align-items: center;
-  background-color: ${colors.lightGallery};
+  background-color: ${colors.white};
   border-radius: 4px;
   box-shadow: 0 9px 12px 0 rgba(7, 0, 37, 0.07),
     0 2px 4px 0 rgba(7, 0, 37, 0.06);
   color: ${colors.lightStorm};
-  display: block;
-  font-weight: bold;
-  font-size: 11px;
-  padding: 7px 12px;
-  text-transform: uppercase;
+  display: flex;
+  flex-direction: row;
+  font: 600 14px/18px 'Source Sans Pro';
+  height: auto;
+  left: 0;
+  margin: 20px;
+  padding: 5px 10px;
+  position: fixed;
+  right: 0;
+  top: 0;
+
+  @media (min-width: ${breakpoints.small}) {
+    bottom: 0;
+    font-size: 16px;
+    left: auto;
+    top: auto;
+  }
 `;

stories/toast.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text, select } from '@storybook/addon-knobs';
+import Toast from '../src/toast';
+
+const toastVariants = {
+  Success: 'success',
+  Warning: 'warning'
+};
+
+storiesOf('Toast', module).add('Toast', () => {
+  return (
+    <Toast type={select('Type', toastVariants, 'success')}>
+      {text('Message', 'This is a message!')}
+    </Toast>
+  );
+});