Add variants to Alert & make default Alert have a white background

jxom · Nov 12, 2018 · aa13573 · aa13573
1 parent a0030a5
commit aa13573
Show file tree

Hide file tree

Showing 13 changed files with 433 additions and 94 deletions.
diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js
@@ -3,24 +3,26 @@ import React, { type Node } from 'react';
 
 import type { Palette } from '../types';
 import _Alert from './styled';
-import _AlertTitle from './AlertTitle';
+import AlertTitle from './AlertTitle';
+import Text from '../Text';
 
 type Props = {
   className?: string,
-  children: Node,
+  children?: Node,
   palette?: Palette,
   title?: string
 };
 
 const Alert = ({ className, children, palette, title, ...props }: Props) => (
   <_Alert role="alert" className={className} palette={palette} {...props}>
-    {title && <_AlertTitle>{title}</_AlertTitle>}
-    {children}
+    {title && <AlertTitle>{title}</AlertTitle>}
+    {typeof children === 'string' ? <Text>{children}</Text> : children}
   </_Alert>
 );
 
 Alert.defaultProps = {
-  className: null,
+  className: undefined,
+  children: undefined,
   palette: 'default',
   title: undefined
 };

diff --git a/src/Alert/Alert.mdx b/src/Alert/Alert.mdx
@@ -16,11 +16,22 @@ import Alert from '../Alert';
 ## Basic Usage
 
 <Playground>
-  <Alert title="Alert Title">Alert message</Alert>
+  <Alert>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>
+
+## Titles
+
+You can set a title with the `title` prop.
+
+<Playground>
+  <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" marginTop="xsmall" />
 </Playground>
 
 ## Colors
 
+An alert can take a color from the palette.
+
 <Playground>
   <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>
@@ -30,6 +41,25 @@ import Alert from '../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>
 
+## Inline alerts
+
+To inline an alert, set the `display` prop to `inline-block`.
+
+<Playground>
+  <Alert display="inline-block">This is an inline alert.</Alert>
+</Playground>
+
+## Tints
+
+<Playground>
+  <Alert title="Alert Title" hasTint>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" hasTint 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" hasTint 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" hasTint 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" hasTint 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" hasTint 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
 
 <PropsTable of={Alert} />

diff --git a/src/Alert/AlertTitle.js b/src/Alert/AlertTitle.js
@@ -6,6 +6,10 @@ type Props = {
   children: Node
 };
 
-const AlertTitle = ({ children, ...props }: Props) => <_AlertTitle {...props}>{children}</_AlertTitle>;
+const AlertTitle = ({ children, ...props }: Props) => (
+  <_AlertTitle as="h6" isSemiBold {...props}>
+    {children}
+  </_AlertTitle>
+);
 
 export default AlertTitle;