From 61732c4c44e88635bbbb6f3e4b5b6beaf11b490f Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Fri, 8 May 2020 21:57:32 -0400
Subject: [PATCH 01/18] extend Card to make an Alert component

---
 .gitignore                |   1 +
 src/Alert/Alert.story.mdx |  89 ++++++++++++++++++++++++++++++++
 src/Alert/Alert.tsx       | 106 ++++++++++++++++++++++++++++++++++++++
 src/Alert/index.ts        |   1 +
 src/Card/Card.tsx         |   7 ++-
 5 files changed, 202 insertions(+), 2 deletions(-)
 create mode 100644 src/Alert/Alert.story.mdx
 create mode 100644 src/Alert/Alert.tsx
 create mode 100644 src/Alert/index.ts

diff --git a/.gitignore b/.gitignore
index 2bd81678..d26a2c97 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@ tsconfig.tsbuildinfo
 # Other modules
 /*-????????.js*
 /AbstractTooltip
+/Alert
 /Button
 /colors
 /ConfirmationTooltip
diff --git a/src/Alert/Alert.story.mdx b/src/Alert/Alert.story.mdx
new file mode 100644
index 00000000..7739f2f8
--- /dev/null
+++ b/src/Alert/Alert.story.mdx
@@ -0,0 +1,89 @@
+import { colors } from "../colors";
+import { Alert } from "../Alert";
+import { Button } from "../Button";
+import {
+  Description,
+  Meta,
+  Story,
+  Props,
+  Preview,
+} from "@storybook/addon-docs/blocks";
+
+<Meta title="Components|Alert" />
+
+# Alert
+
+<Description
+  of={Alert}
+  markdown="**Alerts** provide a way to display short, important message in a way that attracts the user's attention without interrupting the user's task."
+/>
+
+## Info Alert
+
+Informational alerts present general info about something you are doing or working with. It is neutral and conveys no implications of success or failure.
+
+<Preview>
+  <Story name="info">
+    <Alert onClose={() => undefined} level="info" heading="Informational alert">
+      This is a general informational message telling you about something. Learn
+      more
+    </Alert>
+  </Story>
+</Preview>
+
+## Warning Alert
+
+Warning alerts present information about the action that is about to be taken that alerts the user to consequences of the action and asks for confirmation that the action still be taken in light of the consequences.
+
+<Preview>
+  <Story name="warning">
+    <Alert
+      onClose={() => undefined}
+      level="warn"
+      heading="Warning alert"
+      actions={
+        <Button size="small" color={colors.silver.light}>
+          Confirm
+        </Button>
+      }
+    >
+      exceededSubLimitAt is a deprecated field. You can use it but it may not
+      work as expected.
+    </Alert>
+  </Story>
+</Preview>
+
+## Error Alert
+
+Error alerts let the user know that something has gone wrong or is blocked in the given workflow they are trying to complete. When possible, error alerts should contain helpful information about what has happened to help unblock the user (such as steps to resolve or a link to a docs article).
+
+<Preview>
+  <Story name="error">
+    <Alert
+      onClose={() => undefined}
+      level="error"
+      heading="Error alert"
+      style={{ marginBottom: 20 }}
+    >
+      Something is broken. You cannot perform this action at this time.
+    </Alert>
+  </Story>
+</Preview>
+
+## Success Alert
+
+Success alerts are confirmation that the action the user was trying to take has succeeded.
+
+<Preview>
+  <Story name="success">
+    <Alert onClose={() => undefined} level="success" heading="Success alert">
+      A new schema registry has been created by timbotnik.
+    </Alert>
+  </Story>
+</Preview>
+
+## Props
+
+### `Alert`
+
+<Props of={Alert} />
diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
new file mode 100644
index 00000000..b9dcd69b
--- /dev/null
+++ b/src/Alert/Alert.tsx
@@ -0,0 +1,106 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core";
+import React, { useMemo } from "react";
+import PropTypes from "prop-types";
+
+import { Card, CardSeperator, CardProps } from "../Card";
+import { IconErrorSolid } from "../icons/IconErrorSolid";
+import { IconInfoSolid } from "../icons/IconInfoSolid";
+import { IconWarningSolid } from "../icons/IconWarningSolid";
+import { IconSuccessSolid } from "../icons/IconSuccessSolid";
+import { IconClose } from "../icons/IconClose";
+import { colors } from "../colors";
+
+type AlertLevel = "info" | "warn" | "error" | "success";
+
+interface AlertProps extends Omit<CardProps, "size" | "description"> {
+  level: AlertLevel;
+  /**
+   * callback for handling the clicks on the close button.
+   */
+  onClose: () => void;
+}
+
+export const Alert: React.FC<AlertProps> = ({
+  level,
+  heading,
+  onClose,
+  children,
+  actions,
+  ...cardProps
+}) => {
+  const { Icon, color } = useMemo(() => {
+    switch (level) {
+      case "info":
+        return { color: colors.blue, Icon: IconInfoSolid };
+      case "warn":
+        return { color: colors.yellow, Icon: IconWarningSolid };
+      case "error":
+        return { color: colors.red, Icon: IconErrorSolid };
+      case "success":
+        return { color: colors.green, Icon: IconSuccessSolid };
+      default:
+        return {};
+    }
+  }, [level]);
+
+  return (
+    <Card
+      {...cardProps}
+      heading={
+        <div css={{ display: "flex", width: "100%" }}>
+          {Icon && (
+            <Icon
+              css={{
+                width: 20,
+                height: 20,
+                color: color?.base,
+                marginRight: 13,
+              }}
+            />
+          )}
+          <div css={{ width: "100%", fontSize: 15, color: color?.darker }}>
+            {heading}
+          </div>
+          <IconClose
+            onClick={onClose}
+            css={{
+              color: colors.grey.lighter,
+              cursor: "pointer",
+              width: 10,
+              height: 10,
+            }}
+          />
+        </div>
+      }
+      css={{
+        borderRadius: 4,
+        padding: 15,
+        "& > div:first-child": { marginBottom: 14 },
+      }}
+    >
+      <CardSeperator
+        css={css`
+          margin-bottom: 14px;
+          margin-top: 14px;
+        `}
+      />
+      <div
+        css={{
+          fontSize: 13,
+          lineHeight: "1.5",
+          marginBottom: actions ? 13 : 0,
+        }}
+      >
+        {children}
+      </div>
+      {actions}
+    </Card>
+  );
+};
+
+Alert.propTypes = {
+  level: PropTypes.oneOf(["info", "warn", "error", "success"] as AlertLevel[])
+    .isRequired,
+  onClose: PropTypes.func.isRequired,
+};
diff --git a/src/Alert/index.ts b/src/Alert/index.ts
new file mode 100644
index 00000000..b8e17a03
--- /dev/null
+++ b/src/Alert/index.ts
@@ -0,0 +1 @@
+export * from "./Alert";
diff --git a/src/Card/Card.tsx b/src/Card/Card.tsx
index 248c2194..b1799abd 100644
--- a/src/Card/Card.tsx
+++ b/src/Card/Card.tsx
@@ -8,7 +8,7 @@ import classnames from "classnames";
 
 const descriptionMaxWidth = 760;
 
-interface CardProps
+export interface CardProps
   extends React.DetailedHTMLProps<
       React.HTMLAttributes<HTMLDivElement>,
       HTMLDivElement
@@ -204,8 +204,11 @@ CardSection.propTypes = {
 /**
  * A border line that can go between two card sections, with appropriate margin applied
  */
-export const CardSeperator: React.FC = () => (
+export const CardSeperator: React.FC<{ className?: string }> = ({
+  className,
+}) => (
   <hr
+    className={className}
     css={{
       height: 1,
       borderWidth: 0,

From b9b82c654ac8c58b8ef9c1621505b2754186f2a8 Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Wed, 20 May 2020 21:11:50 -0400
Subject: [PATCH 02/18] use orange instead of yellow

---
 src/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index b9dcd69b..a15b3665 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -34,7 +34,7 @@ export const Alert: React.FC<AlertProps> = ({
       case "info":
         return { color: colors.blue, Icon: IconInfoSolid };
       case "warn":
-        return { color: colors.yellow, Icon: IconWarningSolid };
+        return { color: colors.orange, Icon: IconWarningSolid };
       case "error":
         return { color: colors.red, Icon: IconErrorSolid };
       case "success":

From 049ebc2d0084b352c6631482e8cef215285fd46d Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Wed, 20 May 2020 21:40:15 -0400
Subject: [PATCH 03/18] copy card code

---
 src/Alert/Alert.tsx | 148 ++++++++++++++++++++++++++++++++------------
 1 file changed, 107 insertions(+), 41 deletions(-)

diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index a15b3665..d9c46ac1 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -1,9 +1,10 @@
 /** @jsx jsx */
-import { jsx, css } from "@emotion/core";
-import React, { useMemo } from "react";
+import { jsx, ClassNames } from "@emotion/core";
+import React, { useMemo, CSSProperties, Fragment } from "react";
 import PropTypes from "prop-types";
+import classnames from "classnames";
 
-import { Card, CardSeperator, CardProps } from "../Card";
+import { base } from "../typography";
 import { IconErrorSolid } from "../icons/IconErrorSolid";
 import { IconInfoSolid } from "../icons/IconInfoSolid";
 import { IconWarningSolid } from "../icons/IconWarningSolid";
@@ -13,21 +14,49 @@ import { colors } from "../colors";
 
 type AlertLevel = "info" | "warn" | "error" | "success";
 
-interface AlertProps extends Omit<CardProps, "size" | "description"> {
+interface AlertProps {
+  heading?: React.ReactNode;
+
+  /**
+   * actions could be a button
+   * or a tooltip or anything the card should display
+   * aligned with the title on the right
+   */
+  actions?: React.ReactNode;
+
+  /**
+   * The content of the card,
+   * appears below the title and description
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Override how the `header` is rendered. You can pass either an intrinisic
+   * jsx element as a string (like "h1") or a react element (`<h1 />`)
+   *
+   * If you pass a react element, props that we add are spread onto the input.
+   *
+   * @default "h2"
+   */
+  headingAs?: React.ReactElement | keyof JSX.IntrinsicElements;
+
   level: AlertLevel;
   /**
    * callback for handling the clicks on the close button.
    */
   onClose: () => void;
+  className?: string;
+  style?: CSSProperties;
 }
 
 export const Alert: React.FC<AlertProps> = ({
   level,
   heading,
   onClose,
-  children,
   actions,
-  ...cardProps
+  headingAs = "h2",
+  children,
+  ...otherProps
 }) => {
   const { Icon, color } = useMemo(() => {
     switch (level) {
@@ -45,46 +74,83 @@ export const Alert: React.FC<AlertProps> = ({
   }, [level]);
 
   return (
-    <Card
-      {...cardProps}
-      heading={
-        <div css={{ display: "flex", width: "100%" }}>
-          {Icon && (
-            <Icon
-              css={{
-                width: 20,
-                height: 20,
-                color: color?.base,
-                marginRight: 13,
-              }}
-            />
-          )}
-          <div css={{ width: "100%", fontSize: 15, color: color?.darker }}>
-            {heading}
-          </div>
-          <IconClose
-            onClick={onClose}
-            css={{
-              color: colors.grey.lighter,
-              cursor: "pointer",
-              width: 10,
-              height: 10,
-            }}
-          />
-        </div>
-      }
+    <section
+      {...otherProps}
       css={{
+        backgroundColor: colors.white,
+        color: colors.black.base,
+        boxShadow: `0 4px 8px 0 rgba(0, 0, 0, .04)`,
+        borderStyle: "solid",
         borderRadius: 4,
+        borderWidth: 1,
+        borderColor: colors.silver.dark,
         padding: 15,
-        "& > div:first-child": { marginBottom: 14 },
       }}
     >
-      <CardSeperator
-        css={css`
-          margin-bottom: 14px;
-          margin-top: 14px;
-        `}
+      <div css={{ marginBottom: 14, overflow: "hidden", display: "flex" }}>
+        <ClassNames>
+          {({ css, cx }) => {
+            const headingProps = {
+              className: cx(
+                css({
+                  fontWeight: 600,
+                  marginBottom: 0,
+                  marginTop: 0,
+                  width: "100%",
+                  display: "flex",
+                  color: color?.darker,
+                  ...base.base,
+                })
+              ),
+              children: (
+                <Fragment>
+                  {Icon && (
+                    <Icon
+                      css={{
+                        width: 20,
+                        height: 20,
+                        color: color?.base,
+                        marginRight: 13,
+                      }}
+                    />
+                  )}
+                  {heading}
+                </Fragment>
+              ),
+            };
+
+            return React.isValidElement(headingAs)
+              ? React.cloneElement(headingAs, {
+                  ...headingProps,
+                  className: classnames(
+                    headingProps.className,
+                    headingAs.props.className
+                  ),
+                })
+              : React.createElement(headingAs, headingProps);
+          }}
+        </ClassNames>
+        <IconClose
+          onClick={onClose}
+          css={{
+            color: colors.grey.lighter,
+            cursor: "pointer",
+            width: 10,
+            height: 10,
+          }}
+        />
+      </div>
+
+      <hr
+        css={{
+          height: 1,
+          borderWidth: 0,
+          backgroundColor: colors.silver.dark,
+          marginTop: 14,
+          marginBottom: 14,
+        }}
       />
+
       <div
         css={{
           fontSize: 13,
@@ -95,7 +161,7 @@ export const Alert: React.FC<AlertProps> = ({
         {children}
       </div>
       {actions}
-    </Card>
+    </section>
   );
 };
 

From 195bb0ea77e9cbd49c5d4ebb38f501efd5787ea5 Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Wed, 20 May 2020 21:58:49 -0400
Subject: [PATCH 04/18] accept color and icon instead of level

---
 src/Alert/Alert.story.mdx | 24 ++++++++++--
 src/Alert/Alert.tsx       | 77 ++++++++++++++++++++-------------------
 2 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/src/Alert/Alert.story.mdx b/src/Alert/Alert.story.mdx
index 7739f2f8..460f4237 100644
--- a/src/Alert/Alert.story.mdx
+++ b/src/Alert/Alert.story.mdx
@@ -1,6 +1,10 @@
 import { colors } from "../colors";
 import { Alert } from "../Alert";
 import { Button } from "../Button";
+import { IconInfoSolid } from "../icons/IconInfoSolid";
+import { IconErrorSolid } from "../icons/IconErrorSolid";
+import { IconWarningSolid } from "../icons/IconWarningSolid";
+import { IconSuccessSolid } from "../icons/IconSuccessSolid";
 import {
   Description,
   Meta,
@@ -24,7 +28,12 @@ Informational alerts present general info about something you are doing or worki
 
 <Preview>
   <Story name="info">
-    <Alert onClose={() => undefined} level="info" heading="Informational alert">
+    <Alert
+      onClose={() => undefined}
+      color={colors.blue.base}
+      Icon={IconInfoSolid}
+      heading="Informational alert"
+    >
       This is a general informational message telling you about something. Learn
       more
     </Alert>
@@ -39,7 +48,8 @@ Warning alerts present information about the action that is about to be taken th
   <Story name="warning">
     <Alert
       onClose={() => undefined}
-      level="warn"
+      color={colors.orange.base}
+      Icon={IconWarningSolid}
       heading="Warning alert"
       actions={
         <Button size="small" color={colors.silver.light}>
@@ -61,7 +71,8 @@ Error alerts let the user know that something has gone wrong or is blocked in th
   <Story name="error">
     <Alert
       onClose={() => undefined}
-      level="error"
+      color={colors.red.base}
+      Icon={IconErrorSolid}
       heading="Error alert"
       style={{ marginBottom: 20 }}
     >
@@ -76,7 +87,12 @@ Success alerts are confirmation that the action the user was trying to take has
 
 <Preview>
   <Story name="success">
-    <Alert onClose={() => undefined} level="success" heading="Success alert">
+    <Alert
+      onClose={() => undefined}
+      color={colors.green.base}
+      Icon={IconSuccessSolid}
+      heading="Success alert"
+    >
       A new schema registry has been created by timbotnik.
     </Alert>
   </Story>
diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index d9c46ac1..f245ebab 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -1,21 +1,26 @@
 /** @jsx jsx */
 import { jsx, ClassNames } from "@emotion/core";
-import React, { useMemo, CSSProperties, Fragment } from "react";
+import React, { CSSProperties, Fragment } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
 import { base } from "../typography";
-import { IconErrorSolid } from "../icons/IconErrorSolid";
-import { IconInfoSolid } from "../icons/IconInfoSolid";
-import { IconWarningSolid } from "../icons/IconWarningSolid";
-import { IconSuccessSolid } from "../icons/IconSuccessSolid";
 import { IconClose } from "../icons/IconClose";
-import { colors } from "../colors";
-
-type AlertLevel = "info" | "warn" | "error" | "success";
+import { colors, PaletteColor } from "../colors";
+import { getOffsetInPalette } from "../colors/utils/getOffsetInPalette";
 
 interface AlertProps {
-  heading?: React.ReactNode;
+  /**
+   * The color used for the heading and icon, the heading text will be 2 shades darker
+   */
+  color: PaletteColor;
+
+  /**
+   * The icon displayed to the left of the heading
+   */
+  Icon: React.ComponentType<{ className?: string }>;
+
+  heading: React.ReactNode;
 
   /**
    * actions could be a button
@@ -40,7 +45,6 @@ interface AlertProps {
    */
   headingAs?: React.ReactElement | keyof JSX.IntrinsicElements;
 
-  level: AlertLevel;
   /**
    * callback for handling the clicks on the close button.
    */
@@ -50,28 +54,29 @@ interface AlertProps {
 }
 
 export const Alert: React.FC<AlertProps> = ({
-  level,
   heading,
   onClose,
   actions,
   headingAs = "h2",
   children,
+  color,
+  Icon,
   ...otherProps
 }) => {
-  const { Icon, color } = useMemo(() => {
-    switch (level) {
-      case "info":
-        return { color: colors.blue, Icon: IconInfoSolid };
-      case "warn":
-        return { color: colors.orange, Icon: IconWarningSolid };
-      case "error":
-        return { color: colors.red, Icon: IconErrorSolid };
-      case "success":
-        return { color: colors.green, Icon: IconSuccessSolid };
-      default:
-        return {};
-    }
-  }, [level]);
+  // const { Icon, color } = useMemo(() => {
+  //   switch (level) {
+  //     case "info":
+  //       return { color: colors.blue, Icon: IconInfoSolid };
+  //     case "warn":
+  //       return { color: colors.orange, Icon: IconWarningSolid };
+  //     case "error":
+  //       return { color: colors.red, Icon: IconErrorSolid };
+  //     case "success":
+  //       return { color: colors.green, Icon: IconSuccessSolid };
+  //     default:
+  //       return {};
+  //   }
+  // }, []);
 
   return (
     <section
@@ -98,22 +103,20 @@ export const Alert: React.FC<AlertProps> = ({
                   marginTop: 0,
                   width: "100%",
                   display: "flex",
-                  color: color?.darker,
+                  color: getOffsetInPalette(2, "darker", color),
                   ...base.base,
                 })
               ),
               children: (
                 <Fragment>
-                  {Icon && (
-                    <Icon
-                      css={{
-                        width: 20,
-                        height: 20,
-                        color: color?.base,
-                        marginRight: 13,
-                      }}
-                    />
-                  )}
+                  <Icon
+                    css={{
+                      width: 20,
+                      height: 20,
+                      color,
+                      marginRight: 13,
+                    }}
+                  />
                   {heading}
                 </Fragment>
               ),
@@ -166,7 +169,5 @@ export const Alert: React.FC<AlertProps> = ({
 };
 
 Alert.propTypes = {
-  level: PropTypes.oneOf(["info", "warn", "error", "success"] as AlertLevel[])
-    .isRequired,
   onClose: PropTypes.func.isRequired,
 };

From 53cfae67738c03d34d8b10ea6d0965b767cb935b Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Wed, 20 May 2020 22:28:30 -0400
Subject: [PATCH 05/18] add dark theme

---
 src/Alert/Alert.story.mdx | 60 ++++++++++++++++++++++++++++++++++++---
 src/Alert/Alert.tsx       | 44 +++++++++++++++-------------
 2 files changed, 81 insertions(+), 23 deletions(-)

diff --git a/src/Alert/Alert.story.mdx b/src/Alert/Alert.story.mdx
index 460f4237..0a5db51f 100644
--- a/src/Alert/Alert.story.mdx
+++ b/src/Alert/Alert.story.mdx
@@ -27,7 +27,7 @@ import {
 Informational alerts present general info about something you are doing or working with. It is neutral and conveys no implications of success or failure.
 
 <Preview>
-  <Story name="info">
+  <Story name="info light">
     <Alert
       onClose={() => undefined}
       color={colors.blue.base}
@@ -38,6 +38,18 @@ Informational alerts present general info about something you are doing or worki
       more
     </Alert>
   </Story>
+  <Story name="info dark">
+    <Alert
+      onClose={() => undefined}
+      color={colors.blue.base}
+      Icon={IconInfoSolid}
+      theme="dark"
+      heading="Informational alert"
+    >
+      This is a general informational message telling you about something. Learn
+      more
+    </Alert>
+  </Story>
 </Preview>
 
 ## Warning Alert
@@ -45,12 +57,29 @@ Informational alerts present general info about something you are doing or worki
 Warning alerts present information about the action that is about to be taken that alerts the user to consequences of the action and asks for confirmation that the action still be taken in light of the consequences.
 
 <Preview>
-  <Story name="warning">
+  <Story name="warning light">
+    <Alert
+      onClose={() => undefined}
+      color={colors.orange.base}
+      Icon={IconWarningSolid}
+      heading="Warning alert"
+      actions={
+        <Button size="small" color={colors.silver.light}>
+          Confirm
+        </Button>
+      }
+    >
+      exceededSubLimitAt is a deprecated field. You can use it but it may not
+      work as expected.
+    </Alert>
+  </Story>
+  <Story name="warning dark">
     <Alert
       onClose={() => undefined}
       color={colors.orange.base}
       Icon={IconWarningSolid}
       heading="Warning alert"
+      theme="dark"
       actions={
         <Button size="small" color={colors.silver.light}>
           Confirm
@@ -68,12 +97,24 @@ Warning alerts present information about the action that is about to be taken th
 Error alerts let the user know that something has gone wrong or is blocked in the given workflow they are trying to complete. When possible, error alerts should contain helpful information about what has happened to help unblock the user (such as steps to resolve or a link to a docs article).
 
 <Preview>
-  <Story name="error">
+  <Story name="error light">
+    <Alert
+      onClose={() => undefined}
+      color={colors.red.base}
+      Icon={IconErrorSolid}
+      heading="Error alert"
+      style={{ marginBottom: 20 }}
+    >
+      Something is broken. You cannot perform this action at this time.
+    </Alert>
+  </Story>
+  <Story name="error dark">
     <Alert
       onClose={() => undefined}
       color={colors.red.base}
       Icon={IconErrorSolid}
       heading="Error alert"
+      theme="dark"
       style={{ marginBottom: 20 }}
     >
       Something is broken. You cannot perform this action at this time.
@@ -86,11 +127,22 @@ Error alerts let the user know that something has gone wrong or is blocked in th
 Success alerts are confirmation that the action the user was trying to take has succeeded.
 
 <Preview>
-  <Story name="success">
+  <Story name="success light">
+    <Alert
+      onClose={() => undefined}
+      color={colors.green.base}
+      Icon={IconSuccessSolid}
+      heading="Success alert"
+    >
+      A new schema registry has been created by timbotnik.
+    </Alert>
+  </Story>
+  <Story name="success dark">
     <Alert
       onClose={() => undefined}
       color={colors.green.base}
       Icon={IconSuccessSolid}
+      theme="dark"
       heading="Success alert"
     >
       A new schema registry has been created by timbotnik.
diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index f245ebab..f90434a7 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -10,6 +10,12 @@ import { colors, PaletteColor } from "../colors";
 import { getOffsetInPalette } from "../colors/utils/getOffsetInPalette";
 
 interface AlertProps {
+  /**
+   * color theme for alert
+   * @default "light"
+   */
+  theme?: "light" | "dark";
+
   /**
    * The color used for the heading and icon, the heading text will be 2 shades darker
    */
@@ -61,33 +67,20 @@ export const Alert: React.FC<AlertProps> = ({
   children,
   color,
   Icon,
+  theme = "light",
   ...otherProps
 }) => {
-  // const { Icon, color } = useMemo(() => {
-  //   switch (level) {
-  //     case "info":
-  //       return { color: colors.blue, Icon: IconInfoSolid };
-  //     case "warn":
-  //       return { color: colors.orange, Icon: IconWarningSolid };
-  //     case "error":
-  //       return { color: colors.red, Icon: IconErrorSolid };
-  //     case "success":
-  //       return { color: colors.green, Icon: IconSuccessSolid };
-  //     default:
-  //       return {};
-  //   }
-  // }, []);
-
   return (
     <section
       {...otherProps}
       css={{
-        backgroundColor: colors.white,
-        color: colors.black.base,
+        backgroundColor:
+          theme === "light" ? colors.white : colors.black.lighter,
+        color: theme === "light" ? colors.black.base : colors.white,
         boxShadow: `0 4px 8px 0 rgba(0, 0, 0, .04)`,
         borderStyle: "solid",
         borderRadius: 4,
-        borderWidth: 1,
+        borderWidth: theme === "light" ? 1 : 0,
         borderColor: colors.silver.dark,
         padding: 15,
       }}
@@ -103,7 +96,11 @@ export const Alert: React.FC<AlertProps> = ({
                   marginTop: 0,
                   width: "100%",
                   display: "flex",
-                  color: getOffsetInPalette(2, "darker", color),
+                  color: getOffsetInPalette(
+                    2,
+                    theme === "light" ? "darker" : "lighter",
+                    color
+                  ),
                   ...base.base,
                 })
               ),
@@ -170,4 +167,13 @@ export const Alert: React.FC<AlertProps> = ({
 
 Alert.propTypes = {
   onClose: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  heading: PropTypes.node.isRequired,
+  actions: PropTypes.node,
+  color: PropTypes.oneOf(
+    (Object.values(colors)
+      .map((color) => Object.values(color))
+      .reduce((a, b) => a.concat(b)) as any) as PaletteColor[]
+  ).isRequired,
+  Icon: PropTypes.func.isRequired,
 };

From 3f33d1ed9b67ce4d97412d10313f64d69b8d1625 Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Wed, 20 May 2020 22:36:13 -0400
Subject: [PATCH 06/18]  update comments

---
 src/Alert/Alert.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index f90434a7..d13ce49c 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -17,12 +17,13 @@ interface AlertProps {
   theme?: "light" | "dark";
 
   /**
-   * The color used for the heading and icon, the heading text will be 2 shades darker
+   * The color used for the heading icon, the heading text will be 2 shades
+   * darker if light theme and 2 shaders lighter if a dark theme
    */
   color: PaletteColor;
 
   /**
-   * The icon displayed to the left of the heading
+   * The icon displayed to the left of the heading text
    */
   Icon: React.ComponentType<{ className?: string }>;
 
@@ -30,14 +31,12 @@ interface AlertProps {
 
   /**
    * actions could be a button
-   * or a tooltip or anything the card should display
-   * aligned with the title on the right
+   * or a tooltip or anything the Alert should display after the children
    */
   actions?: React.ReactNode;
 
   /**
-   * The content of the card,
-   * appears below the title and description
+   * The content of the card, appears below the title
    */
   children?: React.ReactNode;
 
@@ -55,6 +54,7 @@ interface AlertProps {
    * callback for handling the clicks on the close button.
    */
   onClose: () => void;
+
   className?: string;
   style?: CSSProperties;
 }
@@ -107,12 +107,7 @@ export const Alert: React.FC<AlertProps> = ({
               children: (
                 <Fragment>
                   <Icon
-                    css={{
-                      width: 20,
-                      height: 20,
-                      color,
-                      marginRight: 13,
-                    }}
+                    css={{ width: 20, height: 20, color, marginRight: 13 }}
                   />
                   {heading}
                 </Fragment>

From bc47dd90b26dd10f21da48af23b48754f1ddf8f5 Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Wed, 20 May 2020 22:43:40 -0400
Subject: [PATCH 07/18] revert changes to Card

---
 src/Card/Card.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/Card/Card.tsx b/src/Card/Card.tsx
index b1799abd..248c2194 100644
--- a/src/Card/Card.tsx
+++ b/src/Card/Card.tsx
@@ -8,7 +8,7 @@ import classnames from "classnames";
 
 const descriptionMaxWidth = 760;
 
-export interface CardProps
+interface CardProps
   extends React.DetailedHTMLProps<
       React.HTMLAttributes<HTMLDivElement>,
       HTMLDivElement
@@ -204,11 +204,8 @@ CardSection.propTypes = {
 /**
  * A border line that can go between two card sections, with appropriate margin applied
  */
-export const CardSeperator: React.FC<{ className?: string }> = ({
-  className,
-}) => (
+export const CardSeperator: React.FC = () => (
   <hr
-    className={className}
     css={{
       height: 1,
       borderWidth: 0,

From c1bd2c0e3c196eb0741e0204de2c103a5375dcde Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Wed, 20 May 2020 22:44:13 -0400
Subject: [PATCH 08/18] remove any type

---
 src/Alert/Alert.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index d13ce49c..07184b04 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -166,9 +166,9 @@ Alert.propTypes = {
   heading: PropTypes.node.isRequired,
   actions: PropTypes.node,
   color: PropTypes.oneOf(
-    (Object.values(colors)
+    Object.values(colors)
       .map((color) => Object.values(color))
-      .reduce((a, b) => a.concat(b)) as any) as PaletteColor[]
+      .reduce((a, b) => a.concat(b)) as PaletteColor[]
   ).isRequired,
   Icon: PropTypes.func.isRequired,
 };

From 8012ecd3e692886133d040b56155c47602f56c3c Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Tue, 26 May 2020 13:22:03 -0400
Subject: [PATCH 09/18] add extended variant

---
 src/Alert/Alert.story.mdx | 38 +++++++++++++++++++++----
 src/Alert/Alert.tsx       | 58 ++++++++++++++++++++++++++-------------
 2 files changed, 71 insertions(+), 25 deletions(-)

diff --git a/src/Alert/Alert.story.mdx b/src/Alert/Alert.story.mdx
index 0a5db51f..13cc113b 100644
--- a/src/Alert/Alert.story.mdx
+++ b/src/Alert/Alert.story.mdx
@@ -52,6 +52,36 @@ Informational alerts present general info about something you are doing or worki
   </Story>
 </Preview>
 
+### Extended
+
+<Preview>
+  <Story name="info light extended">
+    <Alert
+      onClose={() => undefined}
+      color={colors.blue.base}
+      Icon={IconInfoSolid}
+      heading="Informational alert"
+      extended={true}
+    >
+      This is a general informational message telling you about something. Learn
+      more
+    </Alert>
+  </Story>
+  <Story name="info dark extended">
+    <Alert
+      onClose={() => undefined}
+      color={colors.blue.base}
+      Icon={IconInfoSolid}
+      theme="dark"
+      heading="Informational alert"
+      extended={true}
+    >
+      This is a general informational message telling you about something. Learn
+      more
+    </Alert>
+  </Story>
+</Preview>
+
 ## Warning Alert
 
 Warning alerts present information about the action that is about to be taken that alerts the user to consequences of the action and asks for confirmation that the action still be taken in light of the consequences.
@@ -63,11 +93,7 @@ Warning alerts present information about the action that is about to be taken th
       color={colors.orange.base}
       Icon={IconWarningSolid}
       heading="Warning alert"
-      actions={
-        <Button size="small" color={colors.silver.light}>
-          Confirm
-        </Button>
-      }
+      actions={<Button size="small">Confirm</Button>}
     >
       exceededSubLimitAt is a deprecated field. You can use it but it may not
       work as expected.
@@ -81,7 +107,7 @@ Warning alerts present information about the action that is about to be taken th
       heading="Warning alert"
       theme="dark"
       actions={
-        <Button size="small" color={colors.silver.light}>
+        <Button theme="dark" size="small">
           Confirm
         </Button>
       }
diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index 07184b04..d22dd526 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -55,6 +55,13 @@ interface AlertProps {
    */
   onClose: () => void;
 
+  /**
+   * layout for longer content
+   *
+   * @default false
+   */
+  extended?: boolean;
+
   className?: string;
   style?: CSSProperties;
 }
@@ -68,6 +75,7 @@ export const Alert: React.FC<AlertProps> = ({
   color,
   Icon,
   theme = "light",
+  extended = false,
   ...otherProps
 }) => {
   return (
@@ -85,7 +93,13 @@ export const Alert: React.FC<AlertProps> = ({
         padding: 15,
       }}
     >
-      <div css={{ marginBottom: 14, overflow: "hidden", display: "flex" }}>
+      <div
+        css={{
+          marginBottom: extended ? 14 : 6,
+          overflow: "hidden",
+          display: "flex",
+        }}
+      >
         <ClassNames>
           {({ css, cx }) => {
             const headingProps = {
@@ -136,31 +150,37 @@ export const Alert: React.FC<AlertProps> = ({
         />
       </div>
 
-      <hr
-        css={{
-          height: 1,
-          borderWidth: 0,
-          backgroundColor: colors.silver.dark,
-          marginTop: 14,
-          marginBottom: 14,
-        }}
-      />
+      {extended && (
+        <hr
+          css={{
+            height: 1,
+            borderWidth: 0,
+            backgroundColor:
+              theme === "dark" ? colors.grey.dark : colors.silver.dark,
+            marginTop: 14,
+            marginBottom: 14,
+          }}
+        />
+      )}
+      <div css={{ marginLeft: extended ? 0 : 33 }}>
+        <div
+          css={{
+            fontSize: 13,
+            lineHeight: "1.5",
+            marginBottom: actions ? 13 : 0,
+          }}
+        >
+          {children}
+        </div>
 
-      <div
-        css={{
-          fontSize: 13,
-          lineHeight: "1.5",
-          marginBottom: actions ? 13 : 0,
-        }}
-      >
-        {children}
+        {actions}
       </div>
-      {actions}
     </section>
   );
 };
 
 Alert.propTypes = {
+  extended: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
   children: PropTypes.node,
   heading: PropTypes.node.isRequired,

From 1dff30a0be5703b5432202cbf0ac7ad4bd2f082f Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Tue, 26 May 2020 22:19:18 -0400
Subject: [PATCH 10/18] switch Icon to element instead of component

---
 src/Alert/Alert.story.mdx | 20 ++++++++++----------
 src/Alert/Alert.tsx       | 26 ++++++++++++++++++++------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/Alert/Alert.story.mdx b/src/Alert/Alert.story.mdx
index 13cc113b..f9714d94 100644
--- a/src/Alert/Alert.story.mdx
+++ b/src/Alert/Alert.story.mdx
@@ -31,7 +31,7 @@ Informational alerts present general info about something you are doing or worki
     <Alert
       onClose={() => undefined}
       color={colors.blue.base}
-      Icon={IconInfoSolid}
+      icon={<IconInfoSolid />}
       heading="Informational alert"
     >
       This is a general informational message telling you about something. Learn
@@ -42,7 +42,7 @@ Informational alerts present general info about something you are doing or worki
     <Alert
       onClose={() => undefined}
       color={colors.blue.base}
-      Icon={IconInfoSolid}
+      icon={<IconInfoSolid />}
       theme="dark"
       heading="Informational alert"
     >
@@ -59,7 +59,7 @@ Informational alerts present general info about something you are doing or worki
     <Alert
       onClose={() => undefined}
       color={colors.blue.base}
-      Icon={IconInfoSolid}
+      icon={<IconInfoSolid />}
       heading="Informational alert"
       extended={true}
     >
@@ -71,7 +71,7 @@ Informational alerts present general info about something you are doing or worki
     <Alert
       onClose={() => undefined}
       color={colors.blue.base}
-      Icon={IconInfoSolid}
+      icon={<IconInfoSolid />}
       theme="dark"
       heading="Informational alert"
       extended={true}
@@ -91,7 +91,7 @@ Warning alerts present information about the action that is about to be taken th
     <Alert
       onClose={() => undefined}
       color={colors.orange.base}
-      Icon={IconWarningSolid}
+      icon={<IconWarningSolid />}
       heading="Warning alert"
       actions={<Button size="small">Confirm</Button>}
     >
@@ -103,7 +103,7 @@ Warning alerts present information about the action that is about to be taken th
     <Alert
       onClose={() => undefined}
       color={colors.orange.base}
-      Icon={IconWarningSolid}
+      icon={<IconWarningSolid />}
       heading="Warning alert"
       theme="dark"
       actions={
@@ -127,7 +127,7 @@ Error alerts let the user know that something has gone wrong or is blocked in th
     <Alert
       onClose={() => undefined}
       color={colors.red.base}
-      Icon={IconErrorSolid}
+      icon={<IconErrorSolid />}
       heading="Error alert"
       style={{ marginBottom: 20 }}
     >
@@ -138,7 +138,7 @@ Error alerts let the user know that something has gone wrong or is blocked in th
     <Alert
       onClose={() => undefined}
       color={colors.red.base}
-      Icon={IconErrorSolid}
+      icon={<IconErrorSolid />}
       heading="Error alert"
       theme="dark"
       style={{ marginBottom: 20 }}
@@ -157,7 +157,7 @@ Success alerts are confirmation that the action the user was trying to take has
     <Alert
       onClose={() => undefined}
       color={colors.green.base}
-      Icon={IconSuccessSolid}
+      icon={<IconSuccessSolid />}
       heading="Success alert"
     >
       A new schema registry has been created by timbotnik.
@@ -167,7 +167,7 @@ Success alerts are confirmation that the action the user was trying to take has
     <Alert
       onClose={() => undefined}
       color={colors.green.base}
-      Icon={IconSuccessSolid}
+      icon={<IconSuccessSolid />}
       theme="dark"
       heading="Success alert"
     >
diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index d22dd526..ab5c1d19 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -25,7 +25,7 @@ interface AlertProps {
   /**
    * The icon displayed to the left of the heading text
    */
-  Icon: React.ComponentType<{ className?: string }>;
+  icon: React.ReactElement<{ className?: string }>;
 
   heading: React.ReactNode;
 
@@ -73,7 +73,7 @@ export const Alert: React.FC<AlertProps> = ({
   headingAs = "h2",
   children,
   color,
-  Icon,
+  icon,
   theme = "light",
   extended = false,
   ...otherProps
@@ -120,9 +120,23 @@ export const Alert: React.FC<AlertProps> = ({
               ),
               children: (
                 <Fragment>
-                  <Icon
-                    css={{ width: 20, height: 20, color, marginRight: 13 }}
-                  />
+                  <ClassNames>
+                    {({ css, cx }) =>
+                      React.cloneElement(icon, {
+                        className: classnames(
+                          icon.props.className,
+                          cx(
+                            css({
+                              width: 20,
+                              height: 20,
+                              color,
+                              marginRight: 13,
+                            })
+                          )
+                        ),
+                      })
+                    }
+                  </ClassNames>
                   {heading}
                 </Fragment>
               ),
@@ -190,5 +204,5 @@ Alert.propTypes = {
       .map((color) => Object.values(color))
       .reduce((a, b) => a.concat(b)) as PaletteColor[]
   ).isRequired,
-  Icon: PropTypes.func.isRequired,
+  icon: PropTypes.element.isRequired,
 };

From d3a7d75bf9dd34adcf4b762a4db2580d085621b0 Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Tue, 26 May 2020 22:26:45 -0400
Subject: [PATCH 11/18] assert unexpected theme values are unreachable and make
 common assertUnreachable

---
 src/Alert/Alert.tsx             | 14 ++++++++++++--
 src/Button/Button.tsx           |  6 +-----
 src/MenuItem/index.tsx          |  6 +-----
 src/Modal/Modal.tsx             |  6 +-----
 src/shared/assertUnreachable.ts |  5 +++++
 5 files changed, 20 insertions(+), 17 deletions(-)
 create mode 100644 src/shared/assertUnreachable.ts

diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index ab5c1d19..fe3150ba 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -8,6 +8,7 @@ import { base } from "../typography";
 import { IconClose } from "../icons/IconClose";
 import { colors, PaletteColor } from "../colors";
 import { getOffsetInPalette } from "../colors/utils/getOffsetInPalette";
+import { assertUnreachable } from "../shared/assertUnreachable";
 
 interface AlertProps {
   /**
@@ -83,8 +84,17 @@ export const Alert: React.FC<AlertProps> = ({
       {...otherProps}
       css={{
         backgroundColor:
-          theme === "light" ? colors.white : colors.black.lighter,
-        color: theme === "light" ? colors.black.base : colors.white,
+          theme === "light"
+            ? colors.white
+            : theme === "dark"
+            ? colors.black.lighter
+            : assertUnreachable(theme),
+        color:
+          theme === "light"
+            ? colors.black.base
+            : theme === "dark"
+            ? colors.white
+            : assertUnreachable(theme),
         boxShadow: `0 4px 8px 0 rgba(0, 0, 0, .04)`,
         borderStyle: "solid",
         borderRadius: 4,
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index 99b1b51e..df0a2541 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -7,14 +7,10 @@ import tinycolor from "tinycolor2";
 import React from "react";
 import classnames from "classnames";
 import { LoadingSpinner } from "../Loaders";
+import { assertUnreachable } from "../shared/assertUnreachable";
 
 type TLength = string | 0 | number;
 
-/* istanbul ignore next */
-function assertUnreachable(value: never): never {
-  throw new TypeError(`Unreachable value reached ${value}`);
-}
-
 /**
  * Save a default color so we can check if we used the default or not. The
  * default color has a few special properties.
diff --git a/src/MenuItem/index.tsx b/src/MenuItem/index.tsx
index da2cdfb7..dc3ac3ad 100644
--- a/src/MenuItem/index.tsx
+++ b/src/MenuItem/index.tsx
@@ -6,11 +6,7 @@ import { css, jsx } from "@emotion/core";
 import { colors } from "../colors";
 import { useMenuIconSize } from "../MenuConfig";
 import { useMenuItemClickListener } from "../MenuItemClickListener";
-
-/* istanbul ignore next */
-function assertUnreachable(value: never): never {
-  throw new TypeError(`Unreachable value reached ${value}`);
-}
+import { assertUnreachable } from "../shared/assertUnreachable";
 
 function getIconHorizontalPadding(
   iconSize: ReturnType<typeof useMenuIconSize>
diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
index f0b4dc5e..5ee5199c 100644
--- a/src/Modal/Modal.tsx
+++ b/src/Modal/Modal.tsx
@@ -8,6 +8,7 @@ import { colors } from "../colors";
 import * as CSS from "csstype";
 import classnames from "classnames";
 import { useSpaceKitProvider } from "../SpaceKitProvider";
+import { assertUnreachable } from "../shared/assertUnreachable";
 
 interface Props {
   /**
@@ -103,11 +104,6 @@ const modalBackdrop = css`
   }
 `;
 
-/* istanbul ignore next */
-function assertUnreachable(value: never): never {
-  throw new TypeError(`Unreachable value reached ${value}`);
-}
-
 type TLength = string | 0 | number;
 
 function getModalWidth(size: Props["size"]): CSS.WidthProperty<TLength> {
diff --git a/src/shared/assertUnreachable.ts b/src/shared/assertUnreachable.ts
new file mode 100644
index 00000000..245b0eb3
--- /dev/null
+++ b/src/shared/assertUnreachable.ts
@@ -0,0 +1,5 @@
+// @see https://www.typescriptlang.org/docs/handbook/advanced-types.html#exhaustiveness-checking
+/* istanbul ignore next */
+export function assertUnreachable(value: never): never {
+  throw new TypeError(`Unreachable value reached ${value}`);
+}

From c47b8db2a609aa33314ff24e6c683e4346ddb03b Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Tue, 26 May 2020 22:53:20 -0400
Subject: [PATCH 12/18] add proptype for headingAs

---
 src/Alert/Alert.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index fe3150ba..200946b4 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -215,4 +215,8 @@ Alert.propTypes = {
       .reduce((a, b) => a.concat(b)) as PaletteColor[]
   ).isRequired,
   icon: PropTypes.element.isRequired,
+  headingAs: PropTypes.oneOfType([
+    PropTypes.element.isRequired,
+    PropTypes.string.isRequired as any, // Using PropTypes.string to match keyof JSX.IntrinsicElements
+  ]),
 };

From d84a8333e3c1928ed3faaf79b7609771e066ad67 Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Thu, 28 May 2020 11:15:08 -0400
Subject: [PATCH 13/18] style inner svg shape

---
 src/Alert/Alert.story.mdx                       | 8 ++++----
 src/icons/svgs/solids/icon-error-solid.svg      | 8 +++-----
 src/icons/svgs/solids/icon-info-solid-sl.svg    | 5 ++++-
 src/icons/svgs/solids/icon-success-solid-sl.svg | 5 ++++-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/Alert/Alert.story.mdx b/src/Alert/Alert.story.mdx
index f9714d94..62b6910d 100644
--- a/src/Alert/Alert.story.mdx
+++ b/src/Alert/Alert.story.mdx
@@ -42,7 +42,7 @@ Informational alerts present general info about something you are doing or worki
     <Alert
       onClose={() => undefined}
       color={colors.blue.base}
-      icon={<IconInfoSolid />}
+      icon={<IconInfoSolid css={{ "& .inner": { fill: colors.white } }} />}
       theme="dark"
       heading="Informational alert"
     >
@@ -71,7 +71,7 @@ Informational alerts present general info about something you are doing or worki
     <Alert
       onClose={() => undefined}
       color={colors.blue.base}
-      icon={<IconInfoSolid />}
+      icon={<IconInfoSolid css={{ "& .inner": { fill: colors.white } }} />}
       theme="dark"
       heading="Informational alert"
       extended={true}
@@ -138,7 +138,7 @@ Error alerts let the user know that something has gone wrong or is blocked in th
     <Alert
       onClose={() => undefined}
       color={colors.red.base}
-      icon={<IconErrorSolid />}
+      icon={<IconErrorSolid css={{ "& .inner": { fill: colors.white } }} />}
       heading="Error alert"
       theme="dark"
       style={{ marginBottom: 20 }}
@@ -167,7 +167,7 @@ Success alerts are confirmation that the action the user was trying to take has
     <Alert
       onClose={() => undefined}
       color={colors.green.base}
-      icon={<IconSuccessSolid />}
+      icon={<IconSuccessSolid css={{ "& .inner": { fill: colors.white } }} />}
       theme="dark"
       heading="Success alert"
     >
diff --git a/src/icons/svgs/solids/icon-error-solid.svg b/src/icons/svgs/solids/icon-error-solid.svg
index 3393324a..43e02947 100644
--- a/src/icons/svgs/solids/icon-error-solid.svg
+++ b/src/icons/svgs/solids/icon-error-solid.svg
@@ -1,6 +1,4 @@
-<svg className="mr-3" width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-        <path d="M10,0 C15.5233333,0 20,4.47666667 20,10 C20,15.5233333 15.5233333,20 10,20 C4.47666667,20 0,15.5233333 0,10 C0,4.47666667 4.47666667,0 10,0 Z" fill="#000" />
-        <path d="M13.922589,6.07741102 C14.2229923,6.37781432 14.2461002,6.85050686 13.9919128,7.1774162 L13.922589,7.25592232 L11.1783333,9.99933333 L13.922589,12.7440777 C14.2480259,13.0695146 14.2480259,13.5971521 13.922589,13.922589 C13.6221857,14.2229923 13.1494931,14.2461002 12.8225838,13.9919128 L12.7440777,13.922589 L9.99933333,11.1783333 L7.25592232,13.922589 C6.93048541,14.2480259 6.40284793,14.2480259 6.07741102,13.922589 C5.77700771,13.6221857 5.75389977,13.1494931 6.00808718,12.8225838 L6.07741102,12.7440777 L8.82133333,9.99933333 L6.07741102,7.25592232 C5.75197411,6.93048541 5.75197411,6.40284793 6.07741102,6.07741102 C6.37781432,5.77700771 6.85050686,5.75389977 7.1774162,6.00808718 L7.25592232,6.07741102 L9.99933333,8.82133333 L12.7440777,6.07741102 C13.0695146,5.75197411 13.5971521,5.75197411 13.922589,6.07741102 Z" fill="#FFFFFF" fillRule="nonzero" />
-    </g>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
+    <path fill="#000000" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M13.9,13.9c-0.3,0.3-0.8,0.3-1.1,0.1l-0.1-0.1L10,11.2 l-2.7,2.7c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.8-0.1-1.1l0.1-0.1L8.8,10L6.1,7.3c-0.3-0.3-0.3-0.9,0-1.2C6.4,5.8,6.9,5.8,7.2,6 l0.1,0.1L10,8.8l2.7-2.7c0.3-0.3,0.9-0.3,1.2,0c0.3,0.3,0.3,0.8,0.1,1.1l-0.1,0.1L11.2,10l2.7,2.7C14.2,13.1,14.2,13.6,13.9,13.9z" />
+    <path class="inner" fill="transparent" d="M13.9,6.1c0.3,0.3,0.3,0.8,0.1,1.1l-0.1,0.1L11.2,10l2.7,2.7c0.3,0.3,0.3,0.9,0,1.2c-0.3,0.3-0.8,0.3-1.1,0.1 l-0.1-0.1L10,11.2l-2.7,2.7c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.8-0.1-1.1l0.1-0.1L8.8,10L6.1,7.3c-0.3-0.3-0.3-0.9,0-1.2 C6.4,5.8,6.9,5.8,7.2,6l0.1,0.1L10,8.8l2.7-2.7C13.1,5.8,13.6,5.8,13.9,6.1z" />
 </svg>
\ No newline at end of file
diff --git a/src/icons/svgs/solids/icon-info-solid-sl.svg b/src/icons/svgs/solids/icon-info-solid-sl.svg
index 171cee31..496e1d0c 100644
--- a/src/icons/svgs/solids/icon-info-solid-sl.svg
+++ b/src/icons/svgs/solids/icon-info-solid-sl.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 24 24" height="24" width="24"><title>Exported from Streamline App (https://app.streamlineicons.com)</title><g transform="matrix(1,0,0,1,0,0)"><path d="M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12s12-5.373,12-12C23.993,5.376,18.624,0.007,12,0z M12.25,5 c0.828,0,1.5,0.672,1.5,1.5S13.078,8,12.25,8s-1.5-0.672-1.5-1.5S11.422,5,12.25,5z M14.5,18.5h-4c-0.552,0-1-0.448-1-1 s0.448-1,1-1h0.75c0.138,0,0.25-0.112,0.25-0.25v-4.5c0-0.138-0.112-0.25-0.25-0.25H10.5c-0.552,0-1-0.448-1-1s0.448-1,1-1h1 c1.105,0,2,0.895,2,2v4.75c0,0.138,0.112,0.25,0.25,0.25h0.75c0.552,0,1,0.448,1,1S15.052,18.5,14.5,18.5z" stroke="none" fill="#000000" stroke-width="0" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
\ No newline at end of file
+<svg version="1.1" xmlns:svgjs="http://svgjs.com/svgjs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24">
+	<path fill="#000000" d="M12,0c6.6,0,12,5.4,12,12c0,6.6-5.4,12-12,12S0,18.6,0,12S5.4,0,12,0z M12.2,5c-0.8,0-1.5,0.7-1.5,1.5S11.4,8,12.2,8 s1.5-0.7,1.5-1.5S13.1,5,12.2,5z M14.5,18.5c0.6,0,1-0.4,1-1s-0.4-1-1-1h-0.8c-0.1,0-0.2-0.1-0.2-0.2v-4.8c0-1.1-0.9-2-2-2h-1 c-0.6,0-1,0.4-1,1s0.4,1,1,1h0.8c0.1,0,0.2,0.1,0.2,0.2v4.5c0,0.1-0.1,0.2-0.2,0.2h-0.8c-0.6,0-1,0.4-1,1s0.4,1,1,1H14.5z"/>
+    <path class="inner" fill="transparent" d="M12.2,5c-0.8,0-1.5,0.7-1.5,1.5S11.4,8,12.2,8s1.5-0.7,1.5-1.5S13.1,5,12.2,5z M14.5,18.5c0.6,0,1-0.4,1-1s-0.4-1-1-1h-0.8 c-0.1,0-0.2-0.1-0.2-0.2v-4.8c0-1.1-0.9-2-2-2h-1c-0.6,0-1,0.4-1,1s0.4,1,1,1h0.8c0.1,0,0.2,0.1,0.2,0.2v4.5c0,0.1-0.1,0.2-0.2,0.2 h-0.8c-0.6,0-1,0.4-1,1s0.4,1,1,1H14.5z"/>
+</svg>
\ No newline at end of file
diff --git a/src/icons/svgs/solids/icon-success-solid-sl.svg b/src/icons/svgs/solids/icon-success-solid-sl.svg
index c75d01cb..d24e0b80 100644
--- a/src/icons/svgs/solids/icon-success-solid-sl.svg
+++ b/src/icons/svgs/solids/icon-success-solid-sl.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 140 140" width="140" height="140"><g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)"><path d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z" fill="#000000" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path></g></svg>
\ No newline at end of file
+<svg version="1.1" xmlns:svgjs="http://svgjs.com/svgjs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24">
+	<path fill="#000000" d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M18.9,8.2l-6.8,9.3c-0.3,0.4-1,0.5-1.4,0.2 c0,0,0,0,0,0l-4.9-3.9c-0.4-0.3-0.5-1-0.2-1.4s1-0.5,1.4-0.2l4.1,3.3L17.3,7c0.3-0.5,0.9-0.6,1.4-0.3C19.2,7,19.3,7.7,18.9,8.2 C19,8.2,18.9,8.2,18.9,8.2z"/>
+	<path fill="transparent" class="inner" d="M18.9,8.2l-6.8,9.3c-0.3,0.4-1,0.5-1.4,0.2c0,0,0,0,0,0l-4.9-3.9c-0.4-0.3-0.5-1-0.2-1.4s1-0.5,1.4-0.2l4.1,3.3L17.3,7 c0.3-0.5,0.9-0.6,1.4-0.3C19.2,7,19.3,7.7,18.9,8.2C19,8.2,18.9,8.2,18.9,8.2z"/>
+</svg>
\ No newline at end of file

From 11716d3d7fe17b445e6698d6009a289868b76d29 Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Thu, 28 May 2020 14:22:37 -0400
Subject: [PATCH 14/18] guard all theme usages

---
 src/Alert/Alert.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index 200946b4..91233632 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -98,7 +98,12 @@ export const Alert: React.FC<AlertProps> = ({
         boxShadow: `0 4px 8px 0 rgba(0, 0, 0, .04)`,
         borderStyle: "solid",
         borderRadius: 4,
-        borderWidth: theme === "light" ? 1 : 0,
+        borderWidth:
+          theme === "light"
+            ? 1
+            : theme === "dark"
+            ? 0
+            : assertUnreachable(theme),
         borderColor: colors.silver.dark,
         padding: 15,
       }}
@@ -122,7 +127,11 @@ export const Alert: React.FC<AlertProps> = ({
                   display: "flex",
                   color: getOffsetInPalette(
                     2,
-                    theme === "light" ? "darker" : "lighter",
+                    theme === "light"
+                      ? "darker"
+                      : theme === "dark"
+                      ? "lighter"
+                      : assertUnreachable(theme),
                     color
                   ),
                   ...base.base,
@@ -180,7 +189,11 @@ export const Alert: React.FC<AlertProps> = ({
             height: 1,
             borderWidth: 0,
             backgroundColor:
-              theme === "dark" ? colors.grey.dark : colors.silver.dark,
+              theme === "light"
+                ? colors.silver.dark
+                : theme === "dark"
+                ? colors.grey.dark
+                : assertUnreachable(theme),
             marginTop: 14,
             marginBottom: 14,
           }}

From 34622f4fccfc424912cf3edab752df66fbb96c51 Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Mon, 1 Jun 2020 13:07:13 -0400
Subject: [PATCH 15/18] use font helper

---
 src/Alert/Alert.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index 91233632..2891002d 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -202,8 +202,7 @@ export const Alert: React.FC<AlertProps> = ({
       <div css={{ marginLeft: extended ? 0 : 33 }}>
         <div
           css={{
-            fontSize: 13,
-            lineHeight: "1.5",
+            ...base.small,
             marginBottom: actions ? 13 : 0,
           }}
         >

From 0ede668e31bf2b381d78c405443fd988f5e3a522 Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Mon, 1 Jun 2020 23:31:13 -0400
Subject: [PATCH 16/18] update copy in alert story

---
 src/Alert/Alert.story.mdx | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/Alert/Alert.story.mdx b/src/Alert/Alert.story.mdx
index 62b6910d..e500b508 100644
--- a/src/Alert/Alert.story.mdx
+++ b/src/Alert/Alert.story.mdx
@@ -54,6 +54,8 @@ Informational alerts present general info about something you are doing or worki
 
 ### Extended
 
+The extended card variant is for rare use cases where an alert is the most appropriate format for explaining longer instructions.
+
 <Preview>
   <Story name="info light extended">
     <Alert
@@ -63,8 +65,19 @@ Informational alerts present general info about something you are doing or worki
       heading="Informational alert"
       extended={true}
     >
-      This is a general informational message telling you about something. Learn
-      more
+      In some cases it may be appropriate for the toast card to give a longer
+      message, or a set of instructions helping users navigate complicated
+      situations in the workflow.
+      <br />
+      <br />
+      It is typically preferrable to link out to a docs article in situations like
+      this, but there are cases where you may also need to include a lengthy amount
+      of content with the card because it will be immediately useful to the user
+      in their workflow.
+      <br />
+      <br />
+      If a toast card’s content requires more than one paragraph, use the
+      expanded content toast variant.
     </Alert>
   </Story>
   <Story name="info dark extended">
@@ -76,8 +89,19 @@ Informational alerts present general info about something you are doing or worki
       heading="Informational alert"
       extended={true}
     >
-      This is a general informational message telling you about something. Learn
-      more
+      In some cases it may be appropriate for the toast card to give a longer
+      message, or a set of instructions helping users navigate complicated
+      situations in the workflow.
+      <br />
+      <br />
+      It is typically preferrable to link out to a docs article in situations like
+      this, but there are cases where you may also need to include a lengthy amount
+      of content with the card because it will be immediately useful to the user
+      in their workflow.
+      <br />
+      <br />
+      If a toast card’s content requires more than one paragraph, use the
+      expanded content toast variant.
     </Alert>
   </Story>
 </Preview>

From 8c31c3c60f470fb8e761d2411822df0c5f4dcad8 Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Mon, 1 Jun 2020 23:47:07 -0400
Subject: [PATCH 17/18] rename Alert to AlertCard

---
 src/Alert/index.ts                            |  1 -
 .../AlertCard.story.mdx}                      | 52 +++++++++----------
 .../Alert.tsx => AlertCard/AlertCard.tsx}     |  6 +--
 src/AlertCard/index.ts                        |  1 +
 4 files changed, 30 insertions(+), 30 deletions(-)
 delete mode 100644 src/Alert/index.ts
 rename src/{Alert/Alert.story.mdx => AlertCard/AlertCard.story.mdx} (90%)
 rename src/{Alert/Alert.tsx => AlertCard/AlertCard.tsx} (98%)
 create mode 100644 src/AlertCard/index.ts

diff --git a/src/Alert/index.ts b/src/Alert/index.ts
deleted file mode 100644
index b8e17a03..00000000
--- a/src/Alert/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Alert";
diff --git a/src/Alert/Alert.story.mdx b/src/AlertCard/AlertCard.story.mdx
similarity index 90%
rename from src/Alert/Alert.story.mdx
rename to src/AlertCard/AlertCard.story.mdx
index e500b508..0e4ad487 100644
--- a/src/Alert/Alert.story.mdx
+++ b/src/AlertCard/AlertCard.story.mdx
@@ -1,5 +1,5 @@
 import { colors } from "../colors";
-import { Alert } from "../Alert";
+import { AlertCard } from "../AlertCard";
 import { Button } from "../Button";
 import { IconInfoSolid } from "../icons/IconInfoSolid";
 import { IconErrorSolid } from "../icons/IconErrorSolid";
@@ -13,13 +13,13 @@ import {
   Preview,
 } from "@storybook/addon-docs/blocks";
 
-<Meta title="Components|Alert" />
+<Meta title="Components|AlertCard" />
 
-# Alert
+# AlertCard
 
 <Description
-  of={Alert}
-  markdown="**Alerts** provide a way to display short, important message in a way that attracts the user's attention without interrupting the user's task."
+  of={AlertCard}
+  markdown="**AlertCards** provide a way to display short, important message in a way that attracts the user's attention without interrupting the user's task."
 />
 
 ## Info Alert
@@ -28,7 +28,7 @@ Informational alerts present general info about something you are doing or worki
 
 <Preview>
   <Story name="info light">
-    <Alert
+    <AlertCard
       onClose={() => undefined}
       color={colors.blue.base}
       icon={<IconInfoSolid />}
@@ -36,10 +36,10 @@ Informational alerts present general info about something you are doing or worki
     >
       This is a general informational message telling you about something. Learn
       more
-    </Alert>
+    </AlertCard>
   </Story>
   <Story name="info dark">
-    <Alert
+    <AlertCard
       onClose={() => undefined}
       color={colors.blue.base}
       icon={<IconInfoSolid css={{ "& .inner": { fill: colors.white } }} />}
@@ -48,7 +48,7 @@ Informational alerts present general info about something you are doing or worki
     >
       This is a general informational message telling you about something. Learn
       more
-    </Alert>
+    </AlertCard>
   </Story>
 </Preview>
 
@@ -58,7 +58,7 @@ The extended card variant is for rare use cases where an alert is the most appro
 
 <Preview>
   <Story name="info light extended">
-    <Alert
+    <AlertCard
       onClose={() => undefined}
       color={colors.blue.base}
       icon={<IconInfoSolid />}
@@ -78,10 +78,10 @@ The extended card variant is for rare use cases where an alert is the most appro
       <br />
       If a toast card’s content requires more than one paragraph, use the
       expanded content toast variant.
-    </Alert>
+    </AlertCard>
   </Story>
   <Story name="info dark extended">
-    <Alert
+    <AlertCard
       onClose={() => undefined}
       color={colors.blue.base}
       icon={<IconInfoSolid css={{ "& .inner": { fill: colors.white } }} />}
@@ -102,7 +102,7 @@ The extended card variant is for rare use cases where an alert is the most appro
       <br />
       If a toast card’s content requires more than one paragraph, use the
       expanded content toast variant.
-    </Alert>
+    </AlertCard>
   </Story>
 </Preview>
 
@@ -112,7 +112,7 @@ Warning alerts present information about the action that is about to be taken th
 
 <Preview>
   <Story name="warning light">
-    <Alert
+    <AlertCard
       onClose={() => undefined}
       color={colors.orange.base}
       icon={<IconWarningSolid />}
@@ -121,10 +121,10 @@ Warning alerts present information about the action that is about to be taken th
     >
       exceededSubLimitAt is a deprecated field. You can use it but it may not
       work as expected.
-    </Alert>
+    </AlertCard>
   </Story>
   <Story name="warning dark">
-    <Alert
+    <AlertCard
       onClose={() => undefined}
       color={colors.orange.base}
       icon={<IconWarningSolid />}
@@ -138,7 +138,7 @@ Warning alerts present information about the action that is about to be taken th
     >
       exceededSubLimitAt is a deprecated field. You can use it but it may not
       work as expected.
-    </Alert>
+    </AlertCard>
   </Story>
 </Preview>
 
@@ -148,7 +148,7 @@ Error alerts let the user know that something has gone wrong or is blocked in th
 
 <Preview>
   <Story name="error light">
-    <Alert
+    <AlertCard
       onClose={() => undefined}
       color={colors.red.base}
       icon={<IconErrorSolid />}
@@ -156,10 +156,10 @@ Error alerts let the user know that something has gone wrong or is blocked in th
       style={{ marginBottom: 20 }}
     >
       Something is broken. You cannot perform this action at this time.
-    </Alert>
+    </AlertCard>
   </Story>
   <Story name="error dark">
-    <Alert
+    <AlertCard
       onClose={() => undefined}
       color={colors.red.base}
       icon={<IconErrorSolid css={{ "& .inner": { fill: colors.white } }} />}
@@ -168,7 +168,7 @@ Error alerts let the user know that something has gone wrong or is blocked in th
       style={{ marginBottom: 20 }}
     >
       Something is broken. You cannot perform this action at this time.
-    </Alert>
+    </AlertCard>
   </Story>
 </Preview>
 
@@ -178,17 +178,17 @@ Success alerts are confirmation that the action the user was trying to take has
 
 <Preview>
   <Story name="success light">
-    <Alert
+    <AlertCard
       onClose={() => undefined}
       color={colors.green.base}
       icon={<IconSuccessSolid />}
       heading="Success alert"
     >
       A new schema registry has been created by timbotnik.
-    </Alert>
+    </AlertCard>
   </Story>
   <Story name="success dark">
-    <Alert
+    <AlertCard
       onClose={() => undefined}
       color={colors.green.base}
       icon={<IconSuccessSolid css={{ "& .inner": { fill: colors.white } }} />}
@@ -196,7 +196,7 @@ Success alerts are confirmation that the action the user was trying to take has
       heading="Success alert"
     >
       A new schema registry has been created by timbotnik.
-    </Alert>
+    </AlertCard>
   </Story>
 </Preview>
 
@@ -204,4 +204,4 @@ Success alerts are confirmation that the action the user was trying to take has
 
 ### `Alert`
 
-<Props of={Alert} />
+<Props of={AlertCard} />
diff --git a/src/Alert/Alert.tsx b/src/AlertCard/AlertCard.tsx
similarity index 98%
rename from src/Alert/Alert.tsx
rename to src/AlertCard/AlertCard.tsx
index 2891002d..358ac8cf 100644
--- a/src/Alert/Alert.tsx
+++ b/src/AlertCard/AlertCard.tsx
@@ -10,7 +10,7 @@ import { colors, PaletteColor } from "../colors";
 import { getOffsetInPalette } from "../colors/utils/getOffsetInPalette";
 import { assertUnreachable } from "../shared/assertUnreachable";
 
-interface AlertProps {
+interface AlertCardProps {
   /**
    * color theme for alert
    * @default "light"
@@ -67,7 +67,7 @@ interface AlertProps {
   style?: CSSProperties;
 }
 
-export const Alert: React.FC<AlertProps> = ({
+export const AlertCard: React.FC<AlertCardProps> = ({
   heading,
   onClose,
   actions,
@@ -215,7 +215,7 @@ export const Alert: React.FC<AlertProps> = ({
   );
 };
 
-Alert.propTypes = {
+AlertCard.propTypes = {
   extended: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
   children: PropTypes.node,
diff --git a/src/AlertCard/index.ts b/src/AlertCard/index.ts
new file mode 100644
index 00000000..2029fbb9
--- /dev/null
+++ b/src/AlertCard/index.ts
@@ -0,0 +1 @@
+export * from "./AlertCard";

From 2b26b8677febc626e6a1f867d0ec09c68a1da87e Mon Sep 17 00:00:00 2001
From: Jeffrey Burt <jeffrey.m.burt@gmail.com>
Date: Thu, 11 Jun 2020 16:59:32 -0400
Subject: [PATCH 18/18] switch back to type of alert prop

---
 src/AlertCard/AlertCard.story.mdx | 39 ++++----------
 src/AlertCard/AlertCard.tsx       | 86 +++++++++++++++----------------
 2 files changed, 51 insertions(+), 74 deletions(-)

diff --git a/src/AlertCard/AlertCard.story.mdx b/src/AlertCard/AlertCard.story.mdx
index 0e4ad487..7c06628a 100644
--- a/src/AlertCard/AlertCard.story.mdx
+++ b/src/AlertCard/AlertCard.story.mdx
@@ -1,10 +1,5 @@
-import { colors } from "../colors";
 import { AlertCard } from "../AlertCard";
 import { Button } from "../Button";
-import { IconInfoSolid } from "../icons/IconInfoSolid";
-import { IconErrorSolid } from "../icons/IconErrorSolid";
-import { IconWarningSolid } from "../icons/IconWarningSolid";
-import { IconSuccessSolid } from "../icons/IconSuccessSolid";
 import {
   Description,
   Meta,
@@ -30,8 +25,7 @@ Informational alerts present general info about something you are doing or worki
   <Story name="info light">
     <AlertCard
       onClose={() => undefined}
-      color={colors.blue.base}
-      icon={<IconInfoSolid />}
+      type="info"
       heading="Informational alert"
     >
       This is a general informational message telling you about something. Learn
@@ -41,8 +35,7 @@ Informational alerts present general info about something you are doing or worki
   <Story name="info dark">
     <AlertCard
       onClose={() => undefined}
-      color={colors.blue.base}
-      icon={<IconInfoSolid css={{ "& .inner": { fill: colors.white } }} />}
+      type="info"
       theme="dark"
       heading="Informational alert"
     >
@@ -60,8 +53,7 @@ The extended card variant is for rare use cases where an alert is the most appro
   <Story name="info light extended">
     <AlertCard
       onClose={() => undefined}
-      color={colors.blue.base}
-      icon={<IconInfoSolid />}
+      type="info"
       heading="Informational alert"
       extended={true}
     >
@@ -83,8 +75,7 @@ The extended card variant is for rare use cases where an alert is the most appro
   <Story name="info dark extended">
     <AlertCard
       onClose={() => undefined}
-      color={colors.blue.base}
-      icon={<IconInfoSolid css={{ "& .inner": { fill: colors.white } }} />}
+      type="info"
       theme="dark"
       heading="Informational alert"
       extended={true}
@@ -114,8 +105,7 @@ Warning alerts present information about the action that is about to be taken th
   <Story name="warning light">
     <AlertCard
       onClose={() => undefined}
-      color={colors.orange.base}
-      icon={<IconWarningSolid />}
+      type="warn"
       heading="Warning alert"
       actions={<Button size="small">Confirm</Button>}
     >
@@ -126,8 +116,7 @@ Warning alerts present information about the action that is about to be taken th
   <Story name="warning dark">
     <AlertCard
       onClose={() => undefined}
-      color={colors.orange.base}
-      icon={<IconWarningSolid />}
+      type="warn"
       heading="Warning alert"
       theme="dark"
       actions={
@@ -150,8 +139,7 @@ Error alerts let the user know that something has gone wrong or is blocked in th
   <Story name="error light">
     <AlertCard
       onClose={() => undefined}
-      color={colors.red.base}
-      icon={<IconErrorSolid />}
+      type="error"
       heading="Error alert"
       style={{ marginBottom: 20 }}
     >
@@ -161,8 +149,7 @@ Error alerts let the user know that something has gone wrong or is blocked in th
   <Story name="error dark">
     <AlertCard
       onClose={() => undefined}
-      color={colors.red.base}
-      icon={<IconErrorSolid css={{ "& .inner": { fill: colors.white } }} />}
+      type="error"
       heading="Error alert"
       theme="dark"
       style={{ marginBottom: 20 }}
@@ -178,20 +165,14 @@ Success alerts are confirmation that the action the user was trying to take has
 
 <Preview>
   <Story name="success light">
-    <AlertCard
-      onClose={() => undefined}
-      color={colors.green.base}
-      icon={<IconSuccessSolid />}
-      heading="Success alert"
-    >
+    <AlertCard onClose={() => undefined} type="success" heading="Success alert">
       A new schema registry has been created by timbotnik.
     </AlertCard>
   </Story>
   <Story name="success dark">
     <AlertCard
       onClose={() => undefined}
-      color={colors.green.base}
-      icon={<IconSuccessSolid css={{ "& .inner": { fill: colors.white } }} />}
+      type="success"
       theme="dark"
       heading="Success alert"
     >
diff --git a/src/AlertCard/AlertCard.tsx b/src/AlertCard/AlertCard.tsx
index 358ac8cf..cc999f5d 100644
--- a/src/AlertCard/AlertCard.tsx
+++ b/src/AlertCard/AlertCard.tsx
@@ -1,14 +1,17 @@
 /** @jsx jsx */
 import { jsx, ClassNames } from "@emotion/core";
-import React, { CSSProperties, Fragment } from "react";
+import React, { CSSProperties, Fragment, useMemo } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
 import { base } from "../typography";
 import { IconClose } from "../icons/IconClose";
-import { colors, PaletteColor } from "../colors";
-import { getOffsetInPalette } from "../colors/utils/getOffsetInPalette";
+import { colors } from "../colors";
 import { assertUnreachable } from "../shared/assertUnreachable";
+import { IconInfoSolid } from "../icons/IconInfoSolid";
+import { IconWarningSolid } from "../icons/IconWarningSolid";
+import { IconErrorSolid } from "../icons/IconErrorSolid";
+import { IconSuccessSolid } from "../icons/IconSuccessSolid";
 
 interface AlertCardProps {
   /**
@@ -17,17 +20,6 @@ interface AlertCardProps {
    */
   theme?: "light" | "dark";
 
-  /**
-   * The color used for the heading icon, the heading text will be 2 shades
-   * darker if light theme and 2 shaders lighter if a dark theme
-   */
-  color: PaletteColor;
-
-  /**
-   * The icon displayed to the left of the heading text
-   */
-  icon: React.ReactElement<{ className?: string }>;
-
   heading: React.ReactNode;
 
   /**
@@ -65,6 +57,11 @@ interface AlertCardProps {
 
   className?: string;
   style?: CSSProperties;
+
+  /**
+   * Type of alert, this is used to determine the color and icon in the title
+   */
+  type: "info" | "warn" | "error" | "success";
 }
 
 export const AlertCard: React.FC<AlertCardProps> = ({
@@ -73,12 +70,25 @@ export const AlertCard: React.FC<AlertCardProps> = ({
   actions,
   headingAs = "h2",
   children,
-  color,
-  icon,
   theme = "light",
   extended = false,
+  type,
   ...otherProps
 }) => {
+  const { Icon, color: colorTemp } = useMemo(() => {
+    switch (type) {
+      case "info":
+        return { color: colors.blue, Icon: IconInfoSolid };
+      case "warn":
+        return { color: colors.orange, Icon: IconWarningSolid };
+      case "error":
+        return { color: colors.red, Icon: IconErrorSolid };
+      case "success":
+        return { color: colors.green, Icon: IconSuccessSolid };
+      default:
+        assertUnreachable(type);
+    }
+  }, [type]);
   return (
     <section
       {...otherProps}
@@ -125,37 +135,27 @@ export const AlertCard: React.FC<AlertCardProps> = ({
                   marginTop: 0,
                   width: "100%",
                   display: "flex",
-                  color: getOffsetInPalette(
-                    2,
+                  color:
                     theme === "light"
-                      ? "darker"
+                      ? colorTemp.darker
                       : theme === "dark"
-                      ? "lighter"
+                      ? colorTemp.lighter
                       : assertUnreachable(theme),
-                    color
-                  ),
                   ...base.base,
                 })
               ),
               children: (
                 <Fragment>
-                  <ClassNames>
-                    {({ css, cx }) =>
-                      React.cloneElement(icon, {
-                        className: classnames(
-                          icon.props.className,
-                          cx(
-                            css({
-                              width: 20,
-                              height: 20,
-                              color,
-                              marginRight: 13,
-                            })
-                          )
-                        ),
-                      })
-                    }
-                  </ClassNames>
+                  <Icon
+                    css={{
+                      width: 20,
+                      height: 20,
+                      color: colorTemp.base,
+                      marginRight: 13,
+                      "& .inner": theme === "dark" &&
+                        type !== "warn" && { fill: colors.white },
+                    }}
+                  />
                   {heading}
                 </Fragment>
               ),
@@ -221,12 +221,8 @@ AlertCard.propTypes = {
   children: PropTypes.node,
   heading: PropTypes.node.isRequired,
   actions: PropTypes.node,
-  color: PropTypes.oneOf(
-    Object.values(colors)
-      .map((color) => Object.values(color))
-      .reduce((a, b) => a.concat(b)) as PaletteColor[]
-  ).isRequired,
-  icon: PropTypes.element.isRequired,
+  type: PropTypes.oneOf(["info", "warn", "error", "success"] as const)
+    .isRequired,
   headingAs: PropTypes.oneOfType([
     PropTypes.element.isRequired,
     PropTypes.string.isRequired as any, // Using PropTypes.string to match keyof JSX.IntrinsicElements