Warning and Info toasts (#195)

* warning and info add

* types component warning and info add

* add flex-wrap buttons

src/assets.tsx

@@ -7,6 +7,12 @@ export const getAsset = (type: ToastTypes): JSX.Element | null => {
     case 'success':
       return SuccessIcon;
 
+    case 'info':
+      return InfoIcon;
+
+    case 'warning':
+      return WarningIcon;
+
     case 'error':
       return ErrorIcon;
 
@@ -39,6 +45,13 @@ const SuccessIcon = (
   </svg>
 );
 
+const WarningIcon = (
+  <svg viewBox="0 0 64 64" fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M32.427,7.987c2.183,0.124 4,1.165 5.096,3.281l17.936,36.208c1.739,3.66 -0.954,8.585 -5.373,8.656l-36.119,0c-4.022,-0.064 -7.322,-4.631 -5.352,-8.696l18.271,-36.207c0.342,-0.65 0.498,-0.838 0.793,-1.179c1.186,-1.375 2.483,-2.111 4.748,-2.063Zm-0.295,3.997c-0.687,0.034 -1.316,0.419 -1.659,1.017c-6.312,11.979 -12.397,24.081 -18.301,36.267c-0.546,1.225 0.391,2.797 1.762,2.863c12.06,0.195 24.125,0.195 36.185,0c1.325,-0.064 2.321,-1.584 1.769,-2.85c-5.793,-12.184 -11.765,-24.286 -17.966,-36.267c-0.366,-0.651 -0.903,-1.042 -1.79,-1.03Z" />
+    <path d="M33.631,40.581l-3.348,0l-0.368,-16.449l4.1,0l-0.384,16.449Zm-3.828,5.03c0,-0.609 0.197,-1.113 0.592,-1.514c0.396,-0.4 0.935,-0.601 1.618,-0.601c0.684,0 1.223,0.201 1.618,0.601c0.395,0.401 0.593,0.905 0.593,1.514c0,0.587 -0.193,1.078 -0.577,1.473c-0.385,0.395 -0.929,0.593 -1.634,0.593c-0.705,0 -1.249,-0.198 -1.634,-0.593c-0.384,-0.395 -0.576,-0.886 -0.576,-1.473Z"/>
+  </svg>
+);
+
 const InfoIcon = (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20">
     <path

src/state.ts

@@ -90,6 +90,14 @@ class Observer {
     return this.create({ ...data, type: 'success', message });
   };
 
+  info = (message: string | React.ReactNode, data?: ExternalToast) => {
+    return this.create({ ...data, type: 'info', message });
+  };
+
+  warning = (message: string | React.ReactNode, data?: ExternalToast) => {
+    return this.create({ ...data, type: 'warning', message });
+  };
+
   loading = (message: string | React.ReactNode, data?: ExternalToast) => {
     return this.create({ ...data, type: 'loading', message });
   };
@@ -167,10 +175,12 @@ const basicToast = toastFunction;
 // We use `Object.assign` to maintain the correct types as we would lose them otherwise
 export const toast = Object.assign(basicToast, {
   success: ToastState.success,
+  info: ToastState.info,
+  warning: ToastState.warning,
   error: ToastState.error,
   custom: ToastState.custom,
   message: ToastState.message,
   promise: ToastState.promise,
   dismiss: ToastState.dismiss,
   loading: ToastState.loading,
-});
+});

src/styles.css

@@ -419,6 +419,14 @@ html[dir='rtl'],
   --success-border: hsl(145, 92%, 91%);
   --success-text: hsl(140, 100%, 27%);
 
+  --info-bg: hsl(208, 100%, 97%);
+  --info-border: hsl(221, 91%, 91%);
+  --info-text: hsl(210, 92%, 45%);
+
+  --warning-bg: hsl(49, 100%, 97%);
+  --warning-border: hsl(49, 91%, 91%);
+  --warning-text: hsl(31, 92%, 45%);
+
   --error-bg: hsl(359, 100%, 97%);
   --error-border: hsl(359, 100%, 94%);
   --error-text: hsl(360, 100%, 45%);
@@ -447,6 +455,14 @@ html[dir='rtl'],
   --success-border: hsl(147, 100%, 12%);
   --success-text: hsl(150, 86%, 65%);
 
+  --info-bg: hsl(215, 100%, 6%);
+  --info-border: hsl(223, 100%, 12%);
+  --info-text: hsl(216, 87%, 65%);
+
+  --warning-bg: hsl(64, 100%, 6%);
+  --warning-border: hsl(60, 100%, 12%);
+  --warning-text: hsl(46, 87%, 65%);
+
   --error-bg: hsl(358, 76%, 10%);
   --error-border: hsl(357, 89%, 16%);
   --error-text: hsl(358, 100%, 81%);
@@ -467,6 +483,36 @@ html[dir='rtl'],
   color: var(--success-text);
 }
 
+[data-rich-colors='true']
+  [data-sonner-toast][data-type='info'] {
+  background: var(--info-bg);
+  border-color: var(--info-border);
+  color: var(--info-text);
+}
+
+[data-rich-colors='true']
+  [data-sonner-toast][data-type='info']
+  [data-close-button] {
+  background: var(--info-bg);
+  border-color: var(--info-border);
+  color: var(--info-text);
+}
+
+[data-rich-colors='true']
+  [data-sonner-toast][data-type='warning'] {
+  background: var(--warning-bg);
+  border-color: var(--warning-border);
+  color: var(--warning-text);
+}
+
+[data-rich-colors='true']
+  [data-sonner-toast][data-type='warning']
+  [data-close-button] {
+  background: var(--warning-bg);
+  border-color: var(--warning-border);
+  color: var(--warning-text);
+}
+
 [data-rich-colors='true']
   [data-sonner-toast][data-type='error'] {
   background: var(--error-bg);

src/types.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export type ToastTypes = 'normal' | 'action' | 'success' | 'error' | 'loading';
+export type ToastTypes = 'normal' | 'action' | 'success' | 'info' | 'warning' | 'error' | 'loading';
 
 export type PromiseT<Data = any> = Promise<Data> | (() => Promise<Data>);
 

website/src/components/Other/Other.tsx

@@ -29,6 +29,22 @@ export const Other = ({
           setRichColors(true);
         },
       },
+      {
+        name: 'Rich Colors Info',
+        snippet: `toast.info('Be at the area 10 minutes before the event time')`,
+        action: () => {
+          toast.info('Be at the area 10 minutes before the event time');
+          setRichColors(true);
+        },
+      },
+      {
+        name: 'Rich Colors Warning',
+        snippet: `toast.warning('Event start time cannot be earlier than 8am')`,
+        action: () => {
+          toast.warning('Event start time cannot be earlier than 8am');
+          setRichColors(true);
+        },
+      },
       {
         name: 'Close Button',
         snippet: `toast('Event has been created', {

website/src/components/Types/Types.tsx

@@ -52,6 +52,16 @@ const allTypes = [
     snippet: `toast.success('Event has been created')`,
     action: () => toast.success('Event has been created'),
   },
+  {
+    name: 'Info',
+    snippet: `toast.info('Be at the area 10 minutes before the event time')`,
+    action: () => toast.info('Be at the area 10 minutes before the event time'),
+  },
+  {
+    name: 'Warning',
+    snippet: `toast.warning('Event start time cannot be earlier than 8am')`,
+    action: () => toast.warning('Event start time cannot be earlier than 8am'),
+  },
   {
     name: 'Error',
     snippet: `toast.error('Event has not been created')`,

website/src/globals.css

@@ -104,6 +104,7 @@ code {
 
 .buttons {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   overflow: auto;
   margin: 0 calc(-1 * var(--side-padding));