Add Alert component

export Alert component

src/Alert/Alert.js

@@ -0,0 +1,24 @@
+// @flow
+import React, { type Node } from 'react';
+
+import type { Palette } from '../types';
+import _Alert from './styled';
+
+type Props = {
+  className?: string,
+  children: Node,
+  palette?: Palette
+};
+
+const Alert = ({ className, children, palette, ...props }: Props) => (
+  <_Alert className={className} palette={palette} {...props}>
+    {children}
+  </_Alert>
+);
+
+Alert.defaultProps = {
+  className: null,
+  palette: 'default'
+};
+
+export default Alert;

src/Alert/Alert.mdx

@@ -0,0 +1,46 @@
+---
+name: Alert
+route: /components/alert
+menu: Components
+---
+
+import { Playground, PropsTable } from 'docz';
+import Alert from '../Alert';
+import Spinner from './index';
+
+# Alerts
+
+## Import
+
+`import { Alert } from 'fannypack'`
+
+## Basic Usage
+
+<Playground>
+  <Alert>Alert message</Alert>
+</Playground>
+
+## Colors
+
+<Playground>
+  <Alert>Default</Alert>
+  <Alert palette="primary" marginTop="xsmall">Primary</Alert>
+  <Alert palette="secondary" marginTop="xsmall">Secondary</Alert>
+  <Alert palette="success" marginTop="xsmall">Success</Alert>
+  <Alert palette="warning" marginTop="xsmall">Warning</Alert>
+  <Alert palette="danger" marginTop="xsmall">Danger</Alert>
+</Playground>
+
+## Props
+
+<PropsTable of={Alert} />
+
+## Theming
+
+### Schema
+
+```jsx
+{
+  base: string | Object
+}
+```

src/Alert/__tests__/Alert.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import render from '../../_utils/tests/render';
+import Alert from '../Alert';
+import 'jest-styled-components';
+
+it('renders correctly', () => {
+  const { container } = render(<Alert>Alert</Alert>);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly with a custom element', () => {
+  const { container } = render(
+    <Alert>
+      <label>Alert</label>
+    </Alert>
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly when a palette prop is set', () => {
+  const { container } = render(<Alert palette="primary">Alert</Alert>);
+  expect(container.firstChild).toMatchSnapshot();
+});

src/Alert/__tests__/__snapshots__/Alert.test.js.snap

@@ -0,0 +1,216 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: #fcfcfc;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #586ccf;
+  outline-offset: 2px;
+}
+
+.c2 {
+  background-color: #fcfcfc;
+  border: 1px solid #435a6f;
+  border-radius: 4px;
+  color: #435a6f;
+  padding: 1rem;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c3"
+  >
+    Alert
+  </div>
+</div>
+`;
+
+exports[`renders correctly when a palette prop is set 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: #112ebb;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #586ccf;
+  outline-offset: 2px;
+}
+
+.c2 {
+  background-color: #112ebb;
+  border: 1px solid #112ebb;
+  border-radius: 4px;
+  color: white;
+  padding: 1rem;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c3"
+  >
+    Alert
+  </div>
+</div>
+`;
+
+exports[`renders correctly with a custom element 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: #fcfcfc;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #586ccf;
+  outline-offset: 2px;
+}
+
+.c2 {
+  background-color: #fcfcfc;
+  border: 1px solid #435a6f;
+  border-radius: 4px;
+  color: #435a6f;
+  padding: 1rem;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c3"
+  >
+    <label>
+      Alert
+    </label>
+  </div>
+</div>
+`;

src/Alert/index.js

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert';
+export { default } from './Alert';

src/Alert/styled.js

@@ -0,0 +1,15 @@
+import styled from 'reakit/styled';
+import { palette, theme } from 'styled-tools';
+import { Box } from '../primitives';
+
+export default styled(Box)`
+  background-color: ${props => palette(props.palette)(props)};
+  border: 1px solid ${props => (props.palette === 'default' ? palette('text')(props) : palette(props.palette)(props))};
+  border-radius: 4px;
+  color: ${props => palette(`${props.palette}Inverted`)(props)};
+  padding: 1rem;
+
+  & {
+    ${theme('Alert.base')};
+  }
+`;