From 1c9ab9b101980146d50a83be4784d0a3c3c9ec98 Mon Sep 17 00:00:00 2001
From: Bram Vanhoutte <bram.vanhoutte.x@gmail.com>
Date: Thu, 12 Nov 2020 20:42:57 +0100
Subject: [PATCH] feat(Alert): add succes intent

---
 src/components/Alert/Alert.module.css | 18 ++++++++++++++++--
 src/components/Alert/Alert.tsx        | 17 ++++++++++++++---
 src/components/Toaster/Toaster.mdx    |  9 ++++++---
 src/theme.css                         |  4 ++++
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/Alert/Alert.module.css b/src/components/Alert/Alert.module.css
index 0e01e132..7089ed6d 100644
--- a/src/components/Alert/Alert.module.css
+++ b/src/components/Alert/Alert.module.css
@@ -1,18 +1,32 @@
 .alert {
   padding: 14.5px 18px;
-  background-color: var(--color-error-light);
   display: flex;
   align-items: center;
   border-radius: var(--border-radius-small);
 }
 
+.alert.alertError {
+  background-color: var(--color-error-light);
+}
+
+.alert.alertSuccess {
+  background-color: var(--color-success-light);
+}
+
 .message {
   display: inline-block;
 }
 
 svg.icon {
   margin-right: 10px;
-  color: var(--color-error);
   height: 16px;
   width: 16px;
 }
+
+svg.icon.iconSuccess {
+  color: var(--color-success);
+}
+
+svg.icon.iconError {
+  color: var(--color-error);
+}
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 838fa3bc..3d570b51 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AlertCircle } from 'react-feather';
+import { AlertCircle, CheckCircle } from 'react-feather';
 import classNames from 'classnames';
 
 import cssReset from '../../css-reset.module.css';
@@ -14,11 +14,22 @@ interface Props {
 }
 
 const Alert: React.FC<Props> = ({ intent = 'error', message, className }: Props) => {
-  const mergedClassNames = classNames(cssReset.ventura, styles.alert, className);
+  const mergedClassNames = classNames(
+    cssReset.ventura,
+    styles.alert,
+    {
+      [styles.alertError]: intent === 'error',
+      [styles.alertSuccess]: intent === 'success',
+    },
+    className,
+  );
 
   return (
     <div className={mergedClassNames}>
-      {intent === 'error' && <AlertCircle className={styles.icon} />}
+      {intent === 'error' && <AlertCircle className={classNames(styles.icon, styles.iconError)} />}
+      {intent === 'success' && (
+        <CheckCircle className={classNames(styles.icon, styles.iconSuccess)} />
+      )}
       <span className={styles.message}>{message}</span>
     </div>
   );
diff --git a/src/components/Toaster/Toaster.mdx b/src/components/Toaster/Toaster.mdx
index 003aaa50..476c3905 100644
--- a/src/components/Toaster/Toaster.mdx
+++ b/src/components/Toaster/Toaster.mdx
@@ -16,7 +16,10 @@ Toaster allow you to display status messages.
 ### Basic usage
 
 <Playground>
-   <Button onClick={(event) => {
-     toaster.error('Error toaster')}
-     }>Click me</Button>
+  <Button onClick={(event) => {
+    toaster.error('Error toaster')}
+    }>Click me</Button>
+  <Button onClick={(event) => {
+    toaster.success('Success toaster')}
+    }>Click me</Button>
 </Playground>
diff --git a/src/theme.css b/src/theme.css
index e06cdb1b..a072680c 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -13,6 +13,8 @@
   --color-neutral-8: #2e2e2e;
   --color-neutral-9: #000000;
 
+  --color-success-1: #e1f5e3;
+  --color-success-2:#5cc767;
   --color-error-1: #ffe2e2;
   --color-error-2: #eb3737;
 }
@@ -31,6 +33,8 @@
   --color-secondary-font: var(--color-neutral-8);
   --color-secondary-hover: var(--color-neutral-2);
 
+  --color-success: var(--color-success-2);
+  --color-success-light: var(--color-success-1);
   --color-error: var(--color-error-2);
   --color-error-light: var(--color-error-1);