refactor: remove toast.scss (#1623)

apps/console/src/main.tsx

@@ -1,4 +1,5 @@
 import { Auth0Provider } from '@auth0/auth0-react'
+import { type IconName } from '@fortawesome/fontawesome-common-types'
 import { Provider as TooltipProvider } from '@radix-ui/react-tooltip'
 import {
   type Mutation,
@@ -37,7 +38,7 @@ type ToastArgs = {
   title: string
   description?: string
   callback?: () => void
-  iconAction?: string
+  iconAction?: IconName
   labelAction?: string
   externalLink?: string
 }

libs/shared/toast/src/lib/toast.tsx

@@ -1,3 +1,4 @@
+import { type IconName } from '@fortawesome/fontawesome-common-types'
 import { type Toast, toast as toastAction } from 'react-hot-toast'
 import { ToastContent } from '@qovery/shared/ui'
 
@@ -12,7 +13,7 @@ export const toast = (
   title: string,
   description?: string,
   callback?: () => void,
-  iconAction?: string,
+  iconAction?: IconName,
   labelAction?: string,
   externalLink?: string
 ) => {

libs/shared/ui/src/lib/components/toast/toast.spec.tsx

@@ -1,4 +1,4 @@
-import { act, render, screen } from '__tests__/utils/setup-jest'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { ToastEnum } from '../../utils/toast'
 import ToastBehavior, { ToastContent, type ToastProps } from './toast'
 
@@ -8,29 +8,29 @@ const props: ToastProps = {
 
 describe('Toast', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<ToastBehavior />)
+    const { baseElement } = renderWithProviders(<ToastBehavior />)
     expect(baseElement).toBeTruthy()
   })
 
   it('should render a toast content', () => {
     props.status = ToastEnum.SUCCESS
-    const { baseElement } = render(ToastContent(props.status))
+    const { baseElement } = renderWithProviders(ToastContent(props.status))
     expect(baseElement).toBeTruthy()
   })
 
   it('should have a error icon', () => {
     props.status = ToastEnum.ERROR
-    render(ToastContent(props.status))
+    renderWithProviders(ToastContent(props.status))
 
     const toast = screen.queryByTestId('toast') as HTMLDivElement
 
-    expect(toast.querySelector('.toast__icon span')?.classList).toContain('icon-solid-circle-exclamation')
+    expect(toast.querySelector('span')?.classList).toContain('icon-solid-circle-exclamation')
   })
 
   it('should have a title', () => {
     props.title = 'my-title'
 
-    render(ToastContent(props.status, undefined, props.title))
+    renderWithProviders(ToastContent(props.status, undefined, props.title))
 
     const toastTitle = screen.queryByTestId('toast-title') as HTMLParagraphElement
 
@@ -40,22 +40,22 @@ describe('Toast', () => {
   it('should have a description', () => {
     props.description = 'my-description'
 
-    render(ToastContent(props.status, undefined, '', props.description))
+    renderWithProviders(ToastContent(props.status, undefined, '', props.description))
 
     const toastTitle = screen.queryByTestId('toast-description') as HTMLParagraphElement
 
     expect(toastTitle?.textContent).toBe('my-description')
   })
 
-  it('should render with a label and no icon', () => {
+  it('should render with a label and no icon', async () => {
     props.description = 'my-description'
     props.externalLink = 'https://my-link.com'
     props.actionLabel = 'my-label'
 
     const spy = jest.fn()
     window.open = jest.fn((url: string, target: string) => ({}))
 
-    render(
+    const { userEvent } = renderWithProviders(
       ToastContent(
         props.status,
         undefined,
@@ -72,9 +72,7 @@ describe('Toast', () => {
 
     expect(labelActionButton).toHaveTextContent('my-label')
 
-    act(() => {
-      labelActionButton.click()
-    })
+    await userEvent.click(labelActionButton)
 
     expect(spy).toHaveBeenCalled()
     expect(window.open).toHaveBeenCalledWith('https://my-link.com', '_blank')

libs/shared/ui/src/lib/components/toast/toast.stories.tsx

@@ -8,7 +8,7 @@ export default {
   title: 'Toaster',
   argTypes: {
     actionIcon: {
-      options: ['icon-solid-wheel', 'icon-solid-circle-plus', 'icon-solid-book', 'icon-solid-key'],
+      options: ['gear', 'plus', 'book', 'key'],
       control: { type: 'select' },
     },
   },
@@ -55,7 +55,7 @@ WithActionIcon.args = {
   title: 'Cluster installed',
   description: '3 applications has been deployed',
   callback: () => console.log('my-callback'),
-  actionIcon: 'icon-solid-pen',
+  actionIcon: 'pen',
 }
 export const WithActionLabel = Template.bind({})
 

libs/shared/ui/src/lib/components/toast/toast.tsx

@@ -1,3 +1,4 @@
+import { type IconName } from '@fortawesome/fontawesome-common-types'
 import { type MouseEvent } from 'react'
 import { type Toast, Toaster, toast as toastAction } from 'react-hot-toast'
 import { ToastEnum } from '../../utils/toast'
@@ -20,7 +21,7 @@ export const ToastContent = (
   title?: string,
   description?: string,
   callback?: () => void,
-  iconAction?: string,
+  iconAction?: IconName,
   labelAction?: string,
   externalLink?: string
 ) => {
@@ -37,14 +38,18 @@ export const ToastContent = (
   }
 
   return (
-    <div data-testid="toast" className="toast" onClick={() => options && toastAction.dismiss(options.id)}>
-      <div className="toast__wrapper">
-        <div className="toast__icon">
+    <div
+      data-testid="toast"
+      className="group relative cursor-pointer rounded bg-neutral-900 shadow-[0_16px_24px_rgba(0,0,0,0.12)]"
+      onClick={() => options && toastAction.dismiss(options.id)}
+    >
+      <div className="flex">
+        <div className="mt-[1px] flex h-full justify-center pl-4 pt-2">
           {status === ToastEnum.SUCCESS && <Icon name="icon-solid-check" className="text-green-500" />}
           {status === ToastEnum.ERROR && <Icon name="icon-solid-circle-exclamation" className="text-red-500" />}
           {status === ToastEnum.WARNING && <Icon name="icon-solid-circle-exclamation" className="text-yellow-500" />}
         </div>
-        <div className="toast__content">
+        <div className="max-w-[256px] break-words py-2 pl-3 pr-4">
           {title && (
             <p data-testid="toast-title" className="font-medium text-white">
               {title}
@@ -78,16 +83,19 @@ export const ToastContent = (
             }}
           >
             {iconAction ? (
-              <Icon name={iconAction} className="text-sm text-white" />
+              <Icon iconName={iconAction} className="text-sm text-white" />
             ) : (
-              <Icon name="icon-solid-wheel" className="text-sm text-white" />
+              <Icon iconName="gear" className="text-sm text-white" />
             )}
           </div>
         )}
 
         {options && (
-          <button className="toast__close" onClick={() => toastAction.dismiss(options.id)}>
-            <Icon name="icon-solid-xmark" className="text-sm" />
+          <button
+            className="absolute left-[-8px] top-[-8px] flex h-6 w-6 items-center justify-center rounded-full border border-neutral-400 bg-neutral-600 text-white opacity-0 duration-150 ease-out hover:bg-neutral-700 group-hover:opacity-100"
+            onClick={() => toastAction.dismiss(options.id)}
+          >
+            <Icon iconName="xmark" className="text-sm" />
           </button>
         )}
       </div>

libs/shared/ui/src/lib/styles/main.scss

@@ -20,7 +20,6 @@ $fa-font-path: '/assets/fonts/font-awesome';
 @import 'components/input';
 @import 'components/menu';
 @import 'components/modal';
-@import 'components/toast';
 @import 'components/select';
 @import 'components/date-picker';
 

libs/shared/ui/src/lib/utils/toast.tsx

@@ -1,3 +1,4 @@
+import { type IconName } from '@fortawesome/fontawesome-common-types'
 import { type Toast, toast as toastAction } from 'react-hot-toast'
 import { ToastContent } from '../components/toast/toast'
 
@@ -12,7 +13,7 @@ export const toast = (
   title: string,
   description?: string,
   callback?: () => void,
-  iconAction?: string,
+  iconAction?: IconName,
   labelAction?: string,
   externalLink?: string
 ) => {