Merge pull request #90 from SwitchDreams/bug/adding-rest-to-all-compo…

…nents Propriedade rest para todos componente e Ajustes no Toast
SwitchDreams · Jan 4, 2024 · 6940af5 · 6940af5
2 parents ee5c7ee + bfa0d8e
commit 6940af5
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 30 deletions.
diff --git a/src/components/AccordionMenu/index.tsx b/src/components/AccordionMenu/index.tsx
@@ -39,10 +39,16 @@ export interface AccordionMenuProps
   extends Omit<AccordionMenuVariantProps, "size">,
     AccordionMenuType {}
 
-const AccordionMenu = ({ title, size = "md", children, className }: AccordionMenuProps) => {
+const AccordionMenu = ({
+  title,
+  size = "md",
+  children,
+  className,
+  ...rest
+}: AccordionMenuProps) => {
   const accordionMenuClasses = twMerge(accordionMenuVariants({ size }), className);
   return (
-    <Disclosure as="div" className="border border-x-0 border-t-0 border-gray-100">
+    <Disclosure as="div" className="border border-x-0 border-t-0 border-gray-100" {...rest}>
       {({ open }) => (
         <>
           <Disclosure.Button

diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
@@ -55,6 +55,7 @@ const Avatar = ({
   avatarUrl,
   size = "md",
   className,
+  ...rest
 }: AvatarProps) => {
   const avatarClass = twMerge(avatarVariants({ color, size }), className);
   const avatarOnlineClass = twMerge(avatarOnlineVariants({ size }), className);
@@ -73,7 +74,7 @@ const Avatar = ({
 
   return (
     <>
-      <div className={avatarUrl ? `overflow-hidden ${avatarClass}` : avatarClass}>
+      <div className={avatarUrl ? `overflow-hidden ${avatarClass}` : avatarClass} {...rest}>
         {avatarUrl ? (
           <div
             style={{

diff --git a/src/components/FloatingButton/index.tsx b/src/components/FloatingButton/index.tsx
@@ -39,10 +39,11 @@ const FloatingButton = ({
   icon: Icon,
   className,
   onClick,
+  ...rest
 }: FloatingButtonProps) => {
   const buttonClasses = twMerge(buttonVariants({ variant, size }), className);
   return (
-    <button className={buttonClasses} onClick={onClick}>
+    <button className={buttonClasses} onClick={onClick} {...rest}>
       {<Icon className="h-4 w-4 stroke-2" />}
       {label && label}
     </button>

diff --git a/src/components/Toast/__test__/index.test.tsx b/src/components/Toast/__test__/index.test.tsx
@@ -26,22 +26,22 @@ describe("Toast Component", () => {
       const { container } = render(compontent("tonal", "primary"));
       const toastElement = container.querySelector(".toast-component");
       expect(toastElement).toHaveClass("bg-primary-300 text-white");
-    }),
-      it("test the primary color with filled variant", () => {
-        const { container } = render(compontent("filled", "primary"));
-        const toastElement = container.querySelector(".toast-component");
-        expect(toastElement).toHaveClass("bg-primary-25 border-primary-100 text-primary-400");
-      });
+    });
+    it("test the primary color with filled variant", () => {
+      const { container } = render(compontent("filled", "primary"));
+      const toastElement = container.querySelector(".toast-component");
+      expect(toastElement).toHaveClass("bg-primary-25 border-primary-100 text-primary-400");
+    });
     it("test the success color with tonal variant", () => {
       const { container } = render(compontent("tonal", "success"));
       const toastElement = container.querySelector(".toast-component");
-      expect(toastElement).toHaveClass("bg-success-500 text-gray-950");
-    }),
-      it("test the success color with filled variant", () => {
-        const { container } = render(compontent("filled", "success"));
-        const toastElement = container.querySelector(".toast-component");
-        expect(toastElement).toHaveClass("bg-success-50 border-success-200 text-success-700");
-      });
+      expect(toastElement).toHaveClass("bg-success-400 text-gray-950");
+    });
+    it("test the success color with filled variant", () => {
+      const { container } = render(compontent("filled", "success"));
+      const toastElement = container.querySelector(".toast-component");
+      expect(toastElement).toHaveClass("bg-success-50 border-success-200 text-success-700");
+    });
     it("test the warning color with tonal variant", () => {
       const { container } = render(compontent("tonal", "warning"));
       const toastElement = container.querySelector(".toast-component");
@@ -99,6 +99,7 @@ describe("Toast Component", () => {
         });
       }
 
+      expect(onClickMock).toHaveBeenCalled();
       expect(toastComponent).toHaveClass("hidden");
     });
   });

diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
@@ -8,6 +8,8 @@ import { cva, type VariantProps } from "class-variance-authority";
 import React, { HTMLAttributes, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
+import { Text } from "../Text";
+
 interface ToastType extends HTMLAttributes<any> {
   variant?: "tonal" | "filled";
   title: string;
@@ -42,7 +44,7 @@ export const toastVariants = cva(
       {
         variant: "tonal",
         color: "success",
-        class: "bg-success-500 text-gray-950",
+        class: "bg-success-400 text-gray-950",
       },
       {
         variant: "tonal",
@@ -57,6 +59,7 @@ export const toastVariants = cva(
     ],
   },
 );
+
 export interface ToastProps extends Omit<ToastVariantProps, "color" | "variant">, ToastType {}
 
 const Toast = ({
@@ -66,13 +69,14 @@ const Toast = ({
   message,
   onClose,
   className,
+  ...rest
 }: ToastProps) => {
   const [isClose, setIsClose] = useState(false);
   const toastClass = twMerge(toastVariants({ color, variant }), className);
 
-  const closeToast = () => {
+  const closeToast = (e: any) => {
     setIsClose(true);
-    if (onClose) onClose;
+    if (onClose) onClose(e);
   };
 
   const defineIcon = (color: string) => {
@@ -88,20 +92,17 @@ const Toast = ({
   };
 
   return (
-    <div className={isClose ? "toast-component hidden" : toastClass}>
+    <div className={isClose ? "toast-component hidden" : toastClass} {...rest}>
       {defineIcon(color)}
       <div className="w-11/12">
-        <h1 className="font-semibold">{title}</h1>
-        <p>{message}</p>
+        <Text as="h6" className="font-semibold">
+          {title}
+        </Text>
+        <Text size="sm">{message}</Text>
       </div>
-      <div
-        onClick={() => {
-          closeToast();
-        }}
-        className="close-toast h-5 cursor-pointer"
-      >
+      <button onClick={closeToast} className="close-toast h-5 cursor-pointer">
         <XMarkIcon className="h-5 w-5" />
-      </div>
+      </button>
     </div>
   );
 };

diff --git a/src/components/ToggleSwitch/index.tsx b/src/components/ToggleSwitch/index.tsx
@@ -90,13 +90,15 @@ export const ToggleSwitch = ({
   disabled = false,
   withIcon = true,
   size = "md",
+  ...rest
 }: ToggleSwitchProps) => {
   return (
     <Switch
       checked={externalChecked}
       onChange={onChange}
       as={Fragment}
       defaultChecked={externalChecked}
+      {...rest}
     >
       {({ checked }) => (
         <button