feat: add iconsColors object to customize icon colors in Toast co…

…mponent
pheralb · Jul 16, 2024 · 36cb691 · 36cb691
1 parent e7fbf9e
commit 36cb691
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 16 deletions.
diff --git a/library/src/components/toast.tsx b/library/src/components/toast.tsx
@@ -17,6 +17,13 @@ const icons: Record<Variant, FC<React.SVGProps<SVGSVGElement>>> = {
   info: Info,
 };
 
+const iconsColors: Record<Variant, string> = {
+  success: '#22c55e',
+  error: '#ef4444',
+  warning: '#eab308',
+  info: '#3b82f6',
+};
+
 interface ToastComponentProps extends ToastPropsWithVariant {
   toastPosition: Position;
   onClose: () => void;
@@ -85,16 +92,16 @@ const Toast = (props: ToastComponentProps) => {
       onMouseLeave={handleMouseLeave}
     >
       <div className="t_container">
-        {props.variant &&
-          (props.icon ? (
-            <div className="t_icon">{props.icon}</div>
-          ) : (
-            <IconComponent
-              width={props.iconSize || 18}
-              height={props.iconSize || 18}
-              className="t_icon"
-            />
-          ))}
+        {props.variant && !props.icon ? (
+          <IconComponent
+            width={props.iconSize || 18}
+            height={props.iconSize || 18}
+            style={{ fill: iconsColors[props.variant] }}
+            className="t_icon"
+          />
+        ) : (
+          props.icon && <div className="t_icon">{props.icon}</div>
+        )}
         <div className="t_content">
           <p>{props.text}</p>
           {props.description && <p>{props.description}</p>}

diff --git a/library/src/icons/index.tsx b/library/src/icons/index.tsx
@@ -1,24 +1,24 @@
-import type { ComponentProps, FC } from "react";
+import type { ComponentProps, FC } from 'react';
 
-const Success: FC<ComponentProps<"svg">> = (props) => (
+const Success: FC<ComponentProps<'svg'>> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
     <path d="M128 24a104 104 0 10104 104A104.11 104.11 0 00128 24zm45.66 85.66l-56 56a8 8 0 01-11.32 0l-24-24a8 8 0 0111.32-11.32L112 148.69l50.34-50.35a8 8 0 0111.32 11.32z"></path>
   </svg>
 );
 
-const Warning: FC<ComponentProps<"svg">> = (props) => (
+const Warning: FC<ComponentProps<'svg'>> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
     <path d="M236.8 188.09L149.35 36.22a24.76 24.76 0 00-42.7 0L19.2 188.09a23.51 23.51 0 000 23.72A24.35 24.35 0 0040.55 224h174.9a24.35 24.35 0 0021.33-12.19 23.51 23.51 0 00.02-23.72zM120 104a8 8 0 0116 0v40a8 8 0 01-16 0zm8 88a12 12 0 1112-12 12 12 0 01-12 12z"></path>
   </svg>
 );
 
-const Error: FC<ComponentProps<"svg">> = (props) => (
+const Error: FC<ComponentProps<'svg'>> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
     <path d="M128 24a104 104 0 10104 104A104.11 104.11 0 00128 24zm-8 56a8 8 0 0116 0v56a8 8 0 01-16 0zm8 104a12 12 0 1112-12 12 12 0 01-12 12z"></path>
   </svg>
 );
 
-const Info: FC<ComponentProps<"svg">> = (props) => (
+const Info: FC<ComponentProps<'svg'>> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
     <path d="M128 24a104 104 0 10104 104A104.11 104.11 0 00128 24zm-4 48a12 12 0 11-12 12 12 12 0 0112-12zm12 112a16 16 0 01-16-16v-40a8 8 0 010-16 16 16 0 0116 16v40a8 8 0 010 16z"></path>
   </svg>

diff --git a/library/src/main.tsx b/library/src/main.tsx
@@ -1,3 +1,3 @@
 export { ToastProvider } from './providers/toast-provider';
 export { useToast } from './hooks/toast-context';
-export * from './types/toast.types';
+export type { ToastProps, ToastProviderProperties } from './types/toast.types';
diff --git a/library/src/styles/toast-component.css b/library/src/styles/toast-component.css
@@ -79,6 +79,7 @@
 
 .t_icon {
   fill: var(--text-color);
+  margin-top: 0.1rem;
 }
 
 .t_content {