Add Alert component (#9)

add textTint Add AlertTitle update docs
jxom · Oct 31, 2018 · b9a46cd · b9a46cd
1 parent 68fc534
commit b9a46cd
Show file tree

Hide file tree

Showing 10 changed files with 245 additions and 26 deletions.
diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js
@@ -3,22 +3,26 @@ import React, { type Node } from 'react';
 
 import type { Palette } from '../types';
 import _Alert from './styled';
+import _AlertTitle from './AlertTitle';
 
 type Props = {
   className?: string,
   children: Node,
-  palette?: Palette
+  palette?: Palette,
+  title?: string
 };
 
-const Alert = ({ className, children, palette, ...props }: Props) => (
+const Alert = ({ className, children, palette, title, ...props }: Props) => (
   <_Alert role="alert" className={className} palette={palette} {...props}>
+    {title && <_AlertTitle>{title}</_AlertTitle>}
     {children}
   </_Alert>
 );
 
 Alert.defaultProps = {
   className: null,
-  palette: 'default'
+  palette: 'default',
+  title: undefined
 };
 
 export default Alert;
diff --git a/src/Alert/Alert.mdx b/src/Alert/Alert.mdx
@@ -6,7 +6,6 @@ menu: Components
 
 import { Playground, PropsTable } from 'docz';
 import Alert from '../Alert';
-import Spinner from './index';
 
 # Alerts
 
@@ -17,18 +16,18 @@ import Spinner from './index';
 ## Basic Usage
 
 <Playground>
-  <Alert>Alert message</Alert>
+  <Alert title="Alert Title">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>
+  <Alert title="Alert Title">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</Alert>
+  <Alert title="Alert Title" palette="primary" marginTop="xsmall">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</Alert>
+  <Alert title="Alert Title" palette="secondary" marginTop="xsmall">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</Alert>
+  <Alert title="Alert Title" palette="success" marginTop="xsmall">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</Alert>
+  <Alert title="Alert Title" palette="warning" marginTop="xsmall">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</Alert>
+  <Alert title="Alert Title" palette="danger" marginTop="xsmall">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</Alert>
 </Playground>
 
 ## Props
@@ -41,6 +40,9 @@ import Spinner from './index';
 
 ```jsx
 {
-  base: string | Object
+  base: string | Object,
+  title: {
+    base: string | Object
+  }
 }
 ```
diff --git a/src/Alert/AlertTitle.js b/src/Alert/AlertTitle.js
@@ -0,0 +1,11 @@
+// @flow
+import React, { type Node } from 'react';
+import { AlertTitle as _AlertTitle } from './styled';
+
+type Props = {
+  children: Node
+};
+
+const AlertTitle = ({ children, ...props }: Props) => <_AlertTitle {...props}>{children}</_AlertTitle>;
+
+export default AlertTitle;
diff --git a/src/Alert/__tests__/Alert.test.js b/src/Alert/__tests__/Alert.test.js
@@ -21,3 +21,8 @@ it('renders correctly when a palette prop is set', () => {
   const { container } = render(<Alert palette="primary">Alert</Alert>);
   expect(container.firstChild).toMatchSnapshot();
 });
+
+it('renders correctly when a title prop is set', () => {
+  const { container } = render(<Alert title="Title">Alert</Alert>);
+  expect(container.firstChild).toMatchSnapshot();
+});
diff --git a/src/Alert/__tests__/AlertTitle.test.js b/src/Alert/__tests__/AlertTitle.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import render from '../../_utils/tests/render';
+import AlertTitle from '../AlertTitle';
+import 'jest-styled-components';
+
+it('renders correctly', () => {
+  const { container } = render(<AlertTitle>AlertTitle</AlertTitle>);
+  expect(container.firstChild).toMatchSnapshot();
+});
diff --git a/src/Alert/__tests__/__snapshots__/Alert.test.js.snap b/src/Alert/__tests__/__snapshots__/Alert.test.js.snap
@@ -53,10 +53,10 @@ exports[`renders correctly 1`] = `
 }
 
 .c2 {
-  background-color: #fcfcfc;
-  border: 1px solid #435a6f;
+  background-color: #eceef0;
+  border-left: 4px solid #435a6f;
   border-radius: 4px;
-  color: #435a6f;
+  color: #131a1f;
   padding: 1rem;
 }
 
@@ -125,10 +125,10 @@ exports[`renders correctly when a palette prop is set 1`] = `
 }
 
 .c2 {
-  background-color: #112ebb;
-  border: 1px solid #112ebb;
+  background-color: #e7eaf8;
+  border-left: 4px solid #112ebb;
   border-radius: 4px;
-  color: white;
+  color: #061146;
   padding: 1rem;
 }
 
@@ -144,7 +144,7 @@ exports[`renders correctly when a palette prop is set 1`] = `
 </div>
 `;
 
-exports[`renders correctly with a custom element 1`] = `
+exports[`renders correctly when a title prop is set 1`] = `
 .c1 {
   margin: unset;
   padding: unset;
@@ -171,6 +171,20 @@ exports[`renders correctly with a custom element 1`] = `
   color: #fcfcfc;
 }
 
+.c6 {
+  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;
+  margin-bottom: 0.25rem !important;
+}
+
 .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;
@@ -196,11 +210,98 @@ exports[`renders correctly with a custom element 1`] = `
   outline-offset: 2px;
 }
 
+.c5 {
+  display: inline-block;
+}
+
+.c4 {
+  display: block;
+}
+
 .c2 {
-  background-color: #fcfcfc;
-  border: 1px solid #435a6f;
+  background-color: #eceef0;
+  border-left: 4px solid #435a6f;
   border-radius: 4px;
+  color: #131a1f;
+  padding: 1rem;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c3"
+    role="alert"
+  >
+    <label
+      class="c4 c5 c6"
+      font-weight="600"
+      style="font-weight: 600;"
+    >
+      Title
+    </label>
+    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: #eceef0;
+  border-left: 4px solid #435a6f;
+  border-radius: 4px;
+  color: #131a1f;
   padding: 1rem;
 }
 

diff --git a/src/Alert/__tests__/__snapshots__/AlertTitle.test.js.snap b/src/Alert/__tests__/__snapshots__/AlertTitle.test.js.snap
@@ -0,0 +1,75 @@
+// 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;
+}
+
+.c4 {
+  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;
+  margin-bottom: 0.25rem !important;
+}
+
+.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;
+}
+
+.c3 {
+  display: inline-block;
+}
+
+.c2 {
+  display: block;
+}
+
+<div
+  class="c0 c1"
+>
+  <label
+    class="c2 c3 c4"
+    font-weight="600"
+    style="font-weight: 600;"
+  >
+    AlertTitle
+  </label>
+</div>
+`;
diff --git a/src/Alert/styled.js b/src/Alert/styled.js
@@ -1,12 +1,23 @@
 import styled from 'reakit/styled';
 import { palette, theme } from 'styled-tools';
+import { darken } from 'polished';
 import { Box } from '../primitives';
+import Label from '../Label';
+
+export const AlertTitle = styled(Label)`
+  & {
+    ${theme('Alert.title.base')};
+  }
+`;
 
 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))};
+  background-color: ${props =>
+    props.palette === 'default' ? palette('textTint')(props) : palette(`${props.palette}Tint`)(props)};
+  border-left: 4px solid
+    ${props => (props.palette === 'default' ? palette('text')(props) : palette(props.palette)(props))};
   border-radius: 4px;
-  color: ${props => palette(`${props.palette}Inverted`)(props)};
+  color: ${props =>
+    props.palette === 'default' ? darken(0.25, palette('text')(props)) : darken(0.25, palette(props.palette)(props))};
   padding: 1rem;
 
   & {

diff --git a/src/Label/Label.js b/src/Label/Label.js
@@ -10,8 +10,8 @@ type Props = {
   htmlFor?: string
 };
 
-const Label = ({ children, ...props }: Props) => (
-  <_Label fontWeight="600" marginBottom="xxxsmall" {...props}>
+const Label = ({ children, className, ...props }: Props) => (
+  <_Label className={className} fontWeight="600" marginBottom="xxxsmall" {...props}>
     {children}
   </_Label>
 );

diff --git a/src/themes/default.js b/src/themes/default.js
@@ -10,6 +10,7 @@ export default (overrides: ThemeConfig = {}): ThemeConfig => ({
     textLight: lighten(0.05, '#435a6f'),
     textLighter: lighten(0.1, '#435a6f'),
     textLightest: lighten(0.2, '#435a6f'),
+    textTint: tint(0.9, '#435a6f'),
 
     black: 'black',