feat(Toast): added loading toast

ApryseSDK · May 5, 2020 · 95364f5 · 95364f5
1 parent 3dfb8f5
commit 95364f5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -5,6 +5,7 @@ import { getStringId } from '../../utils';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
+import { Spinner } from '../Spinner';
 
 export interface ToastProps extends CommonToastProps, HTMLAttributes<HTMLDivElement> {
   /**
@@ -50,6 +51,8 @@ export const Toast: FC<ToastProps> = ({
         return 'Warning';
       case 'error':
         return 'Error';
+      case 'loading':
+        return undefined;
     }
   }, [message]);
 
@@ -66,7 +69,7 @@ export const Toast: FC<ToastProps> = ({
       aria-atomic={ariaAtomic}
     >
       <div className="ui__toast__border" />
-      <Icon icon={icon} className="ui__toast__icon" />
+      {icon ? <Icon icon={icon} className="ui__toast__icon" /> : <Spinner className="ui__toast__spinner" />}
       <div className="ui__toast__copy">
         {heading ? (
           <div className="ui__toast__copy__heading" id={headingId}>

diff --git a/src/components/Toast/_Toast.scss b/src/components/Toast/_Toast.scss
@@ -16,7 +16,8 @@
   }
 
   &--message {
-    &-info {
+    &-info,
+    &-loading {
       .ui__toast__border {
         background-color: $color-message-info;
       }
@@ -64,6 +65,18 @@
     flex-shrink: 0;
   }
 
+  &__spinner {
+    margin: 0 $padding-medium;
+    @include flex-center;
+    flex-shrink: 0;
+    height: 100%;
+
+    > * {
+      height: 20px;
+      width: 20px;
+    }
+  }
+
   &__copy {
     padding: $padding-small $padding $padding-small 0;
     display: flex;