Merge branch 'master' into BTS-167

.storybook/stories.js

@@ -7,13 +7,15 @@
 export default [
   'Introduction',
 
-  // 1. Foundations
+  // Foundations
   'Colors',
   'Grid',
   'Typography',
   'Icon',
 
-  // 2. Buttons
+  'Alert',
+
+  // Buttons
   'Button',
 
   // Forms
@@ -26,18 +28,24 @@ export default [
   'Slider',
   'TextArea',
 
-  // 8. Tooltip
+  // Tooltip
   'Tooltip',
 
-  // 15. Badge
+  // Badge
   'Badge',
 
-  // 16. Tags
+  // Tags
   'Tag',
 
-  // 17. Cards
+  // TabbedView
+  'TabbedView',
+
+  // Card
   'Card',
 
-  // 18. SnackBar
+  // Modal
+  'Modal',
+
+  // SnackBar
   'SnackBar',
 ].map(s => `./${s}/${s}.story.jsx`);

components/Alert/Alert.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Button from '../Button';
+import Colors from '../Colors';
+import Icon from '../Icon';
+
+const BORDER_SIZE = '1.5px';
+const DEFAULT_SPACING = '16px';
+const WRAPPER_SPACING = '11px';
+
+const Content = styled.div`
+  align-items: start;
+  display: flex;
+`;
+
+const AlertIcon = styled(Icon)``;
+
+const CloseButton = styled(Button.Icon).attrs({
+  icon: 'close',
+})`
+  height: auto;
+  width: auto;
+  margin: 0 0 0 ${DEFAULT_SPACING};
+  padding: 0;
+  opacity: 0.8;
+  transition: opacity 0.4s ease;
+
+  :hover {
+    background: none;
+    opacity: 1;
+  }
+`;
+
+CloseButton.displayName = 'CloseButton';
+
+const getStylesBySkin = skin => {
+  const colorName = skin.toUpperCase();
+  const colorSchema = Colors[colorName];
+
+  return `
+    color: ${colorSchema[900] ? colorSchema[900] : 'inherit'};
+    background-color: ${colorSchema[200]};
+    border: ${BORDER_SIZE} solid ${colorSchema[500]};
+
+    ${Content} ${AlertIcon} {
+      color: ${colorSchema[500]};
+      margin-right: ${DEFAULT_SPACING};
+    }
+
+    ${Content} ${CloseButton} {
+      color: ${colorSchema[500]};
+    }
+  `;
+};
+
+const Wrapper = styled.div`
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: ${WRAPPER_SPACING} ${DEFAULT_SPACING};
+
+  ${({ skin }) => getStylesBySkin(skin)}
+`;
+
+const Alert = ({ icon, children, onClose, ...rest }) => (
+  <Wrapper {...rest} role="alert">
+    <Content onClose={onClose}>
+      {icon && <AlertIcon name={icon} />}
+      {children && <span>{children}</span>}
+      {onClose && <CloseButton onClick={onClose} />}
+    </Content>
+  </Wrapper>
+);
+
+Alert.defaultProps = {
+  icon: null,
+  skin: 'blue',
+};
+
+Alert.propTypes = {
+  /** At least one children is required for Alert component properly works */
+  children: PropTypes.node.isRequired,
+  /** Icon name. The full catalogue can be found
+   * [here](/?selectedKind=1.%20Foundation&selectedStory=Icons) */
+  icon: PropTypes.string,
+  /** You must pass a callback that is called when close button is clicked */
+  onClose: PropTypes.func.isRequired,
+  skin: PropTypes.oneOf(['blue', 'success', 'warning', 'error']),
+};
+
+export default Alert;

components/Alert/Alert.unit.test.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Alert from './Alert';
+
+describe('Alert component', () => {
+  it('Should match the snapshot of a simple alert', () => {
+    const simpleAlert = <Alert onClose={() => {}}>Sample alert</Alert>;
+    expect(renderer.create(simpleAlert).toJSON()).toMatchSnapshot();
+  });
+
+  describe('When you set a alert custom icon', () => {
+    it('Should match the snapshot with an icon', () => {
+      const simpleAlert = (
+        <Alert onClose={() => {}} icon="info">
+          Sample alert
+        </Alert>
+      );
+      expect(renderer.create(simpleAlert).toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('When you set a different skin', () => {
+    it('Should match a skin snapshot', () => {
+      const blue = (
+        <Alert onClose={() => {}} skin="blue">
+          blue
+        </Alert>
+      );
+      const success = (
+        <Alert onClose={() => {}} skin="success">
+          success
+        </Alert>
+      );
+      const warning = (
+        <Alert onClose={() => {}} skin="warning">
+          warning
+        </Alert>
+      );
+      const error = (
+        <Alert onClose={() => {}} skin="error">
+          error
+        </Alert>
+      );
+
+      expect(renderer.create(blue).toJSON()).toMatchSnapshot();
+      expect(renderer.create(success).toJSON()).toMatchSnapshot();
+      expect(renderer.create(warning).toJSON()).toMatchSnapshot();
+      expect(renderer.create(error).toJSON()).toMatchSnapshot();
+    });
+  });
+});