feature: add toast component

src/Views/Components/AdminUI/Toast/index.tsx

@@ -0,0 +1,74 @@
+import {MouseEventHandler, useEffect} from 'react';
+import cx from 'classnames';
+import {__} from '@wordpress/i18n';
+import {ExitIcon, CheckCircle, AlertTriangle} from '@givewp/components/AdminUI/Icons';
+import styles from './style.module.scss';
+
+export interface ToastProps {
+    children: string | JSX.Element | JSX.Element[];
+    handleClose: MouseEventHandler;
+    type?: 'info' | 'error' | 'warning' | 'success';
+    show?: boolean;
+    position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';
+    autoClose?: number;
+    showCloseIcon?: boolean;
+}
+
+export default function Toast({children, type, handleClose, position = 'top-right', show = true, autoClose = 0, showCloseIcon = true}: ToastProps) {
+    const getIcon = type => {
+        switch (type) {
+            case 'info':
+                return <></>
+            case 'error':
+                return <></>
+            case 'warning':
+                return <AlertTriangle />
+            case 'success':
+                return <CheckCircle />
+        }
+
+        return null;
+    }
+
+    useEffect(() => {
+        if(autoClose) {
+            setTimeout(handleClose, autoClose)
+        }
+    }, []);
+
+    if (!show) return null;
+
+    return (
+        <div className={cx(styles.toastContainer, {
+            [styles.topLeft]: position === 'top-left',
+            [styles.topRight]: position === 'top-right',
+            [styles.bottomLeft]: position === 'bottom-left',
+            [styles.bottomRight]: position === 'bottom-right',
+            [styles.success]: type === 'success',
+            [styles.warning]: type === 'warning',
+            [styles.error]: type === 'error',
+            [styles.info]: type === 'info',
+        })}>
+            {type && (
+                <div className={styles.icon}>
+                    {getIcon(type)}
+                </div>
+            )}
+            <div className={styles.content}>
+                {children}
+            </div>
+            {showCloseIcon && handleClose && (
+                <div>
+                    <button
+                        aria-label={__('Close', 'give')}
+                        className={styles.close}
+                        onClick={handleClose}
+                    >
+                        <ExitIcon aria-label={__('Close icon', 'give')} className={styles.closeIconSize} />
+                    </button>
+                </div>
+            )}
+        </div>
+    )
+}
+

src/Views/Components/AdminUI/Toast/style.module.scss

@@ -0,0 +1,99 @@
+.toastContainer {
+    display: flex;
+    position: fixed;
+    font-family: 'Open Sans', sans-serif;
+    max-width: 42rem;
+    border-radius: var(--givewp-rounded-4);
+    box-shadow: 0 0.25rem 0.5rem 0 rgba(14, 14, 14, 0.15);
+    background-color: #fff;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--grey-900, #0E0E0E);
+    z-index: 999;
+
+    > div {
+        padding: var(--givewp-spacing-3);
+    }
+
+    .icon {
+        > * {
+            margin-bottom: -3px;
+        }
+    }
+
+    &.success {
+        border: 1px solid #08A657;
+        background: linear-gradient(0deg, #F2FFF9, #F2FFF9),
+        linear-gradient(0deg, #08A657, #08A657);
+    }
+
+    &.error {
+
+    }
+
+    &.warning {
+
+    }
+
+    &.info {
+
+    }
+
+    &.topLeft {
+        top: var(--givewp-spacing-15);
+        left: var(--givewp-spacing-10);
+        animation: slideRight 300ms ease-in;
+    }
+
+    &.topRight {
+        top: var(--givewp-spacing-15);
+        right: var(--givewp-spacing-10);
+        animation: slideLeft 300ms ease-in;
+    }
+
+    &.bottomLeft {
+        bottom: var(--givewp-spacing-15);
+        left: var(--givewp-spacing-10);
+        animation: slideRight 300ms ease-in;
+    }
+
+    &.bottomRight {
+        bottom: var(--givewp-spacing-15);
+        right: var(--givewp-spacing-10);
+        animation: slideLeft 300ms ease-in;
+    }
+
+
+    .content {
+        flex-grow: 4;
+    }
+
+    .closeIconSize {
+        width: 16px !important;
+        height: 16px !important;
+    }
+
+    .close {
+        all: unset;
+        cursor: pointer;
+        padding-top: 4px;
+    }
+}
+
+@keyframes slideRight {
+    0% {
+        left: -500px;
+    }
+    100% {
+        left: var(--givewp-spacing-10);
+    }
+}
+
+@keyframes slideLeft {
+    0% {
+        right: -500px;
+    }
+    100% {
+        right: var(--givewp-spacing-10);
+    }
+}