Toast code updates & feedback applied

Author: GomezIvann

packages/lib/src/toast/Toast.accessibility.test.tsx

@@ -25,6 +25,7 @@ const ToastPage = () => {
     />
   );
 };
+
 const TestExample = () => (
   <DxcToastsQueue>
     <ToastPage />

packages/lib/src/toast/Toast.tsx

@@ -7,7 +7,7 @@ import ToastPropsType from "./types";
 import useTimeout from "../utils/useTimeout";
 import { HalstackLanguageContext } from "../HalstackContext";
 import { responsiveSizes } from "../common/variables";
-import { getSemantic } from "./utils";
+import getSemantic from "./utils";
 import ToastIcon from "./ToastIcon";
 
 const fadeInUp = keyframes`
@@ -104,12 +104,12 @@ const DxcToast = ({
   );
 
   return (
-    <Toast semantic={semantic} isClosing={isClosing} role="status">
+    <Toast isClosing={isClosing} role="status" semantic={semantic}>
       <ContentContainer loading={loading} semantic={semantic}>
         <ToastIcon hideSemanticIcon={hideSemanticIcon} icon={icon} loading={loading} semantic={semantic} />
         <Message>{message}</Message>
       </ContentContainer>
-      <DxcFlex alignItems="center" gap="0.25rem">
+      <DxcFlex alignItems="center" gap="var(--spacing-gap-s)">
         {action && (
           <DxcButton
             icon={action.icon}

packages/lib/src/toast/ToastIcon.tsx

@@ -2,7 +2,7 @@ import { memo } from "react";
 import { DxcSpinner } from "..";
 import DxcIcon from "../icon/Icon";
 import ToastPropsType from "./types";
-import { getSemantic } from "./utils";
+import getSemantic from "./utils";
 
 const ToastIcon = memo(
   ({

packages/lib/src/toast/ToastsQueue.tsx

@@ -6,6 +6,7 @@ import DxcToast from "./Toast";
 import { QueuedToast, Semantic, ToastsQueuePropsType, ToastType } from "./types";
 import { responsiveSizes } from "../common/variables";
 import ToastContext from "./ToastContext";
+import { generateUniqueToastId } from "./utils";
 
 const ToastsQueue = styled.section`
   box-sizing: border-box;
@@ -25,17 +26,7 @@ const ToastsQueue = styled.section`
   }
 `;
 
-const generateUniqueToastId = (toasts: QueuedToast[]) => {
-  let id = "";
-  let exists = true;
-  while (exists) {
-    id = `${performance.now()}-${Math.random().toString(36).slice(2, 9)}`;
-    exists = toasts.some((toast) => toast.id === id);
-  }
-  return id;
-};
-
-const DxcToastsQueue = ({ children, duration = 3000 }: ToastsQueuePropsType) => {
+export default function DxcToastsQueue({ children, duration = 3000 }: ToastsQueuePropsType) {
   const [toasts, setToasts] = useState<QueuedToast[]>([]);
   const [isMounted, setIsMounted] = useState(false); // Next.js SSR mounting issue
   const adjustedDuration = useMemo(() => (duration > 5000 ? 5000 : duration < 3000 ? 3000 : duration), [duration]);
@@ -78,6 +69,4 @@ const DxcToastsQueue = ({ children, duration = 3000 }: ToastsQueuePropsType) =>
       {children}
     </ToastContext.Provider>
   );
-};
-
-export default DxcToastsQueue;
+}

packages/lib/src/toast/types.ts

@@ -65,16 +65,16 @@ type ToastPropsType = {
   hideSemanticIcon?: boolean;
 };
 
-type ToastsQueuePropsType = { 
+type ToastsQueuePropsType = {
+  /**
+   * Tree of components from which the useToast hook can be triggered.
+   */
+  children: ReactNode;
   /**
    * Duration in milliseconds before a toast automatically hides itself. 
    * The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.
    */
   duration?: number;
-  /**
-   * Tree of components from which the useToast hook can be triggered.
-   */
-  children: ReactNode;
 };
 
 export default ToastPropsType;

packages/lib/src/toast/useToast.tsx

@@ -2,7 +2,7 @@ import { useContext, useMemo } from "react";
 import ToastContext from "./ToastContext";
 import { DefaultToast, SemanticToast, LoadingToast } from "./types";
 
-const useToast = () => {
+export default function useToast() {
   const add = useContext(ToastContext);
 
   const toast = useMemo(
@@ -15,8 +15,6 @@ const useToast = () => {
     }),
     [add]
   );
-
+  
   return toast;
-};
-
-export default useToast;
+}

packages/lib/src/toast/utils.ts

@@ -1,6 +1,6 @@
-import ToastPropsType from "./types";
+import ToastPropsType, { QueuedToast } from "./types";
 
-export const getSemantic = (semantic: ToastPropsType["semantic"]) => {
+export default function getSemantic(semantic: ToastPropsType["semantic"]) {
   switch (semantic) {
     case "default":
       return {
@@ -27,4 +27,14 @@ export const getSemantic = (semantic: ToastPropsType["semantic"]) => {
         icon: "filled_warning",
       };
   }
+}
+
+export function generateUniqueToastId(toasts: QueuedToast[]) {
+  let id = "";
+  let exists = true;
+  while (exists) {
+    id = `${performance.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    exists = toasts.some((toast) => toast.id === id);
+  }
+  return id;
 };