From 815a722b1335c8ebc733672130b2a4bbd39812f7 Mon Sep 17 00:00:00 2001 From: Jostein Kringlen Date: Tue, 12 Apr 2022 16:05:39 +0200 Subject: [PATCH 1/6] feat: add warn to types --- src/core/types.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/core/types.ts b/src/core/types.ts index 1e538ab..2985135 100644 --- a/src/core/types.ts +++ b/src/core/types.ts @@ -1,6 +1,12 @@ import { CSSProperties } from 'react'; -export type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom'; +export type ToastType = + | 'success' + | 'error' + | 'loading' + | 'blank' + | 'custom' + | 'warn'; export type ToastPosition = | 'top-left' | 'top-center' From ffe1d482f58a1b06577a21eb60140e02f4c50041 Mon Sep 17 00:00:00 2001 From: Jostein Kringlen Date: Tue, 12 Apr 2022 16:09:46 +0200 Subject: [PATCH 2/6] feat: add warning icon --- src/components/warn.tsx | 82 +++++++++++++++++++++++++++++++++++++++++ src/index.ts | 1 + 2 files changed, 83 insertions(+) create mode 100644 src/components/warn.tsx diff --git a/src/components/warn.tsx b/src/components/warn.tsx new file mode 100644 index 0000000..9113d44 --- /dev/null +++ b/src/components/warn.tsx @@ -0,0 +1,82 @@ +import { styled, keyframes } from 'goober'; + +const circleAnimation = keyframes` +from { + transform: scale(0); + opacity: 0; +} +to { + transform: scale(1); + opacity: 1; +}`; + +const lineAnimation = keyframes` +from { + transform: translateX(-50%) scale(0); + opacity: 0; + height: 0; +} +to { + transform: translateX(-50%) scale(1); + opacity: 1; + height: 8px; +}`; + +const dotAnimation = keyframes` +from { + transform: translateX(-50%) scale(0); + opacity: 0; + height: 0; +} +to { + transform: translateX(-50%) scale(1); + opacity: 1; + height: 2px; +}`; + +export interface WarnTheme { + primary?: string; + secondary?: string; +} + +export const WarnIcon = styled('div')` + width: 20px; + opacity: 0; + height: 20px; + border-radius: 50%; + background: ${(p) => p.primary || '#ffd00e'}; + position: relative; + + animation: ${circleAnimation} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) + forwards; + animation-delay: 100ms; + + &:before, + &:after { + content: ''; + box-sizing: border-box; + animation-delay: 200ms; + position: absolute; + display: block; + transform: translateX(-50%); + left: 50%; + border: solid ${(p) => p.secondary || '#000'}; + border-width: 0 2px 0 0; + width: 2px; + opacity: 0; + } + + &:before { + top: 4px; + animation: ${lineAnimation} 0.2s ease-out forwards; + animation-delay: 150ms; + border-radius: 3px; + } + + &:after { + bottom: 4px; + animation: ${dotAnimation} 0.2s ease-out forwards; + animation-delay: 180ms; + border-radius: 50%; + } +`; diff --git a/src/index.ts b/src/index.ts index 1968353..41b4495 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,6 +8,7 @@ export { Toaster } from './components/toaster'; export { CheckmarkIcon } from './components/checkmark'; export { ErrorIcon } from './components/error'; export { LoaderIcon } from './components/loader'; +export { WarnIcon } from './components/warn'; export { toast }; export default toast; From be24632475d57d0bfa8267416dd8a01cf16c2e72 Mon Sep 17 00:00:00 2001 From: Jostein Kringlen Date: Tue, 12 Apr 2022 16:10:38 +0200 Subject: [PATCH 3/6] feat: add default warn duration --- src/core/store.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/store.ts b/src/core/store.ts index 274daf8..b238c07 100644 --- a/src/core/store.ts +++ b/src/core/store.ts @@ -174,6 +174,7 @@ const defaultTimeouts: { success: 2000, loading: Infinity, custom: 4000, + warn: 3000, }; export const useStore = (toastOptions: DefaultToastOptions = {}): State => { From ff7c91ba4fc1d85a3ba7ff2fd5d6d6e27793da11 Mon Sep 17 00:00:00 2001 From: Jostein Kringlen Date: Tue, 12 Apr 2022 16:11:53 +0200 Subject: [PATCH 4/6] feat: add toast.warn() fn --- src/core/toast.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/toast.ts b/src/core/toast.ts index 8a71eb0..26025d8 100644 --- a/src/core/toast.ts +++ b/src/core/toast.ts @@ -47,6 +47,7 @@ toast.error = createHandler('error'); toast.success = createHandler('success'); toast.loading = createHandler('loading'); toast.custom = createHandler('custom'); +toast.warn = createHandler('warn'); toast.dismiss = (toastId?: string) => { dispatch({ From 10da76b7bcaea997b1c323cbc19a0eb2d1c95f49 Mon Sep 17 00:00:00 2001 From: Jostein Kringlen Date: Tue, 12 Apr 2022 16:17:15 +0200 Subject: [PATCH 5/6] feat: render warn icon when type is "warn" --- src/components/toast-icon.tsx | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/toast-icon.tsx b/src/components/toast-icon.tsx index d7e3677..1cf4bf4 100644 --- a/src/components/toast-icon.tsx +++ b/src/components/toast-icon.tsx @@ -5,6 +5,7 @@ import { Toast } from '../core/types'; import { ErrorIcon, ErrorTheme } from './error'; import { LoaderIcon, LoaderTheme } from './loader'; import { CheckmarkIcon, CheckmarkTheme } from './checkmark'; +import { WarnIcon, WarnTheme } from './warn'; const StatusWrapper = styled('div')` position: absolute; @@ -42,6 +43,7 @@ export type IconThemes = Partial<{ success: CheckmarkTheme; error: ErrorTheme; loading: LoaderTheme; + warn: WarnTheme; }>; export const ToastIcon: React.FC<{ @@ -60,18 +62,21 @@ export const ToastIcon: React.FC<{ return null; } + const renderIcon = (type: Toast['type']) => { + switch (type) { + case 'error': + return ; + case 'warn': + return ; + default: + return ; + } + }; + return ( - {type !== 'loading' && ( - - {type === 'error' ? ( - - ) : ( - - )} - - )} + {type !== 'loading' && {renderIcon(type)}} ); }; From f9b48964c6465f04000c138bfc71db092e94e414 Mon Sep 17 00:00:00 2001 From: Jostein Kringlen Date: Tue, 12 Apr 2022 16:29:05 +0200 Subject: [PATCH 6/6] docs: add warn to documentation site --- site/components/sections/toast-example.tsx | 8 ++++++++ site/pages/docs/styling.mdx | 5 +++++ site/pages/docs/toast.mdx | 9 +++++++++ site/pages/docs/toaster.mdx | 2 +- 4 files changed, 23 insertions(+), 1 deletion(-) diff --git a/site/components/sections/toast-example.tsx b/site/components/sections/toast-example.tsx index a1a52ea..e884a35 100644 --- a/site/components/sections/toast-example.tsx +++ b/site/components/sections/toast-example.tsx @@ -27,6 +27,14 @@ const examples: Array<{ toast.error("This didn't work."); }, }, + { + title: 'Warning', + emoji: '⚠️', + snippet: "toast.warn('Roadblocks ahead')", + action: () => { + toast.warn('Roadblocks ahead'); + }, + }, { title: 'Promise', emoji: '⏳', diff --git a/site/pages/docs/styling.mdx b/site/pages/docs/styling.mdx index f72b094..5165025 100644 --- a/site/pages/docs/styling.mdx +++ b/site/pages/docs/styling.mdx @@ -41,6 +41,11 @@ You can style your notifications globally with the `toastOptions` inside the Toa background: 'red', }, }, + warn: { + style: { + background: 'yellow', + }, + }, }} /> ``` diff --git a/site/pages/docs/toast.mdx b/site/pages/docs/toast.mdx index 75910ea..b47287b 100644 --- a/site/pages/docs/toast.mdx +++ b/site/pages/docs/toast.mdx @@ -65,6 +65,14 @@ toast.error('This is an error!'); Creates a notification with an animated error icon. It can be themed with the `iconTheme` option. +### Warning + +```js +toast.warn("I'm warning you!"); +``` + +Creates a notification with an animated warning icon. It can be themed with the `iconTheme` option. + ### Custom (JSX) ```js @@ -132,6 +140,7 @@ Every type has its own duration. You can overwrite them `duration` with the toas | `blank` | 4000 | | `error` | 4000 | | `success` | 2000 | +| `warn` | 3000 | | `custom` | 4000 | | `loading` | Infinity | diff --git a/site/pages/docs/toaster.mdx b/site/pages/docs/toaster.mdx index fb90689..fd8e369 100644 --- a/site/pages/docs/toaster.mdx +++ b/site/pages/docs/toaster.mdx @@ -72,7 +72,7 @@ These will act as default options for all toasts. See [`toast()`](/docs/toast) f #### Type specific options -You can change the defaults for a specific type by adding, `success: {}`, `error: {}`, `loading: {}` or `custom: {}`. +You can change the defaults for a specific type by adding, `success: {}`, `error: {}`, `loading: {}`, `warn: {}` or `custom: {}`. ## Using a custom render function