diff --git a/src/assets.tsx b/src/assets.tsx index bea35cf..009ff0f 100644 --- a/src/assets.tsx +++ b/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 = ( ); +const WarningIcon = ( + + + + +); + const InfoIcon = ( { + 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, -}); +}); \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index b2f169e..a2014d0 100644 --- a/src/styles.css +++ b/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); diff --git a/src/types.ts b/src/types.ts index 3fd30ab..3d26c7c 100644 --- a/src/types.ts +++ b/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 = Promise | (() => Promise); diff --git a/website/src/components/Other/Other.tsx b/website/src/components/Other/Other.tsx index 6b8b296..f940767 100644 --- a/website/src/components/Other/Other.tsx +++ b/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', { diff --git a/website/src/components/Types/Types.tsx b/website/src/components/Types/Types.tsx index 7cd7236..a3fef38 100644 --- a/website/src/components/Types/Types.tsx +++ b/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')`, diff --git a/website/src/globals.css b/website/src/globals.css index c8d0641..7f88be4 100644 --- a/website/src/globals.css +++ b/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));