feat(Alert): Adding Alert Component

package.json

@@ -120,6 +120,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "downshift": "^1.28.0",
+    "npm": "^5.7.1",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {

src/components/Alert/Alert.js

@@ -1,18 +1,36 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { FitzyAlert, FitzyClose } from './Alert.styled';
 
-function Alert({ onCancel, type, className, children }) {
+function Alert({ onCancel, type, className, children, title }) {
   return (
     <FitzyAlert role="alert" type={type} className={className}>
-      {onCancel ? <FitzyClose onClick={onCancel}>×</FitzyClose> : null}
-      {children}
+      <Fragment>
+        <h2>{title}</h2>
+        <div>{children}</div>
+      </Fragment>
+      {onCancel ? (
+        <FitzyClose onClick={onCancel}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212.982 212.982">
+            <path
+              d="M131.804 106.491l75.936-75.936c6.99-6.99 6.99-18.323 0-25.312-6.99-6.99-18.322-6.99-25.312 0L106.491 81.18 30.554 5.242c-6.99-6.99-18.322-6.99-25.312 0-6.989 6.99-6.989 18.323 0 25.312l75.937 75.936-75.937 75.937c-6.989 6.99-6.989 18.323 0 25.312 6.99 6.99 18.322 6.99 25.312 0l75.937-75.937 75.937 75.937c6.989 6.99 18.322 6.99 25.312 0 6.99-6.99 6.99-18.322 0-25.312l-75.936-75.936z"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+            />
+          </svg>
+          <span />
+        </FitzyClose>
+      ) : null}
     </FitzyAlert>
   );
 }
 
 Alert.propTypes = {
+  /**
+   * Title for the error message
+   */
+  title: PropTypes.string.isRequired,
   /**
    * Handler to close the Alert Banner
    */

src/components/Alert/Alert.styled.js

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import { CloseButton } from '../../styles/helpers.styled';
+
 const sizes = {
   Error: 'red',
   Warning: 'yellow',
@@ -10,15 +12,42 @@ const sizes = {
 const FitzyAlert = styled.div`
   position: relative;
   color: white;
-  padding: 8px;
+  padding: 1rem;
   background-color: ${({ type }) => sizes[type]};
+
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  width: 100%;
+  padding-right: 25px;
+  border: 1px solid #d05353;
+  background-color: #d97575;
+
+  h2 {
+    line-height: normal;
+    font-weight: bold;
+    margin-right: 1.5rem;
+    margin-bottom: 0.25rem;
+  }
+
+  div {
+    margin-top: 0.25rem;
+  }
 `;
 
-const FitzyClose = styled.button`
+const FitzyClose = CloseButton.extend`
   position: absolute;
-  right: 0;
-  top: 0;
-  color: white;
+  right: 1.5rem;
+  top: 1.5rem;
+  height: 0.75rem;
+  width: 0.75rem;
+
+  > svg {
+    fill: currentColor;
+  }
+
+  > span {
+  }
 `;
 
 /** @component */

src/components/Alert/README.md

@@ -3,13 +3,7 @@ Basic Alert :
 ```jsx
 initialState = { value: '' };
 
-<Alert>Oops, looks like an issue has occured.</Alert>;
-```
-
-Alert with close button :
-
-```jsx
-initialState = { value: '' };
-
-<Alert onCancel={() => {}}>Oops, looks like an issue has occured.</Alert>;
+<Alert title="Authentication Error" onCancel={() => {}}>
+  Oops, looks like an issue has occured.
+</Alert>;
 ```

src/components/Alert/__tests__/__snapshots__/AlertTest.js.snap

@@ -4,32 +4,90 @@ exports[`Alert snapshots should match for basic 1`] = `
 .c0 {
   position: relative;
   color: white;
-  padding: 8px;
+  padding: 1rem;
   background-color: red;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  width: 100%;
+  padding-right: 25px;
+  border: 1px solid #d05353;
+  background-color: #d97575;
+}
+
+.c0 h2 {
+  line-height: normal;
+  font-weight: bold;
+  margin-right: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.c0 div {
+  margin-top: 0.25rem;
 }
 
 <div
   className="c0"
   role="alert"
   type="Error"
 >
-  This is an error
+  <h2 />
+  <div>
+    This is an error
+  </div>
 </div>
 `;
 
 exports[`Alert snapshots should match with button 1`] = `
 .c0 {
   position: relative;
   color: white;
-  padding: 8px;
+  padding: 1rem;
   background-color: red;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  width: 100%;
+  padding-right: 25px;
+  border: 1px solid #d05353;
+  background-color: #d97575;
+}
+
+.c0 h2 {
+  line-height: normal;
+  font-weight: bold;
+  margin-right: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.c0 div {
+  margin-top: 0.25rem;
 }
 
 <div
   className="c0"
   role="alert"
   type="Error"
 >
-  This is an error
+  <h2 />
+  <div>
+    This is an error
+  </div>
 </div>
 `;

src/components/Input/Input.js

@@ -185,7 +185,7 @@ Input.propTypes = {
   /**
    * Pass down a ref for the Input
    */
-  innerRef: PropTypes.node
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
 };
 
 Input.defaultProps = {

src/styles/helpers.styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+const CloseButton = styled.button`
+  -webkit-appearance: none;
+  background: transparent;
+  padding: 0;
+  border: 0;
+  outline: none;
+  color: inherit;
+  cursor: pointer;
+  line-height: 1;
+`;
+
+export { CloseButton };

styleguide-config/reset.css

@@ -3,4 +3,50 @@
 */
 *:before, *:after,* {
   box-sizing: border-box
+}
+
+html {
+  box-sizing: border-box;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  width: 100%;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+p,
+blockquote,
+figure,
+ol,
+ul {
+  margin: 0;
+  padding: 0;
 }

styleguide.config.js

@@ -21,7 +21,7 @@ module.exports = {
   styles: {
     StyleGuide: {
       '@global body': {
-        fontFamily: 'Source Sans Pro'
+        fontFamily: ['-apple-system', 'BlinkMacSystemFont']
       }
     }
   },