feat: Add Success Variant Toast (#3639)

Author: nsdeschenes

src/services/toast/ErrorToast/ErrorToast.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 
-import ErrorToast from './ErrorToast'
+import { ErrorToast } from './ErrorToast'
 
 describe('ErrorToast', () => {
   it('renders the title', () => {

src/services/toast/ErrorToast/ErrorToast.tsx

@@ -1,10 +1,8 @@
 import type { ToastProps } from '../renderToast'
 
-const ErrorToast: React.FC<ToastProps> = ({ title, content }) => (
+export const ErrorToast: React.FC<ToastProps> = ({ title, content }) => (
   <div className="min-w-[300px] bg-ds-gray-secondary p-4">
     <h3 className="text-base font-semibold">&#9940; {title}</h3>
     <p className="whitespace-pre-line text-sm">{content}</p>
   </div>
 )
-
-export default ErrorToast

src/services/toast/ErrorToast/index.ts

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 
-import GenericToast from './GenericToast'
+import { GenericToast } from './GenericToast'
 
 describe('GenericToast', () => {
   it('renders the title', () => {

src/services/toast/GenericToast/GenericToast.test.tsx

@@ -1,10 +1,8 @@
 import type { ToastProps } from '../renderToast'
 
-const GenericToast: React.FC<ToastProps> = ({ title, content }) => (
+export const GenericToast: React.FC<ToastProps> = ({ title, content }) => (
   <div className="min-w-[300px] bg-ds-gray-secondary p-4">
     <h3 className="text-base font-semibold">&#127881; {title}</h3>
     <p className="whitespace-pre-line text-sm">{content}</p>
   </div>
 )
-
-export default GenericToast

src/services/toast/GenericToast/GenericToast.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+
+import { SuccessToast } from './SuccessToast'
+
+describe('SuccessToast', () => {
+  it('renders the title', () => {
+    render(<SuccessToast title="Success Title" content="Success Content" />)
+
+    const title = screen.getByRole('heading', { name: /Success Title/ })
+    expect(title).toBeInTheDocument()
+    expect(title).toHaveClass('font-semibold')
+  })
+
+  it('renders the content', () => {
+    render(<SuccessToast title="Success Title" content="Success Content" />)
+
+    const content = screen.getByText(/Success Content/)
+    expect(content).toBeInTheDocument()
+  })
+})

src/services/toast/GenericToast/index.ts

@@ -0,0 +1,8 @@
+import type { ToastProps } from '../renderToast'
+
+export const SuccessToast: React.FC<ToastProps> = ({ title, content }) => (
+  <div className="min-w-[300px] bg-ds-gray-secondary p-4">
+    <h3 className="text-base font-semibold">&#x2705; {title}</h3>
+    <p className="whitespace-pre-line text-sm">{content}</p>
+  </div>
+)

src/services/toast/SuccessToast/SuccessToast.test.tsx

@@ -152,4 +152,44 @@ describe('renderToast', () => {
       })
     })
   })
+
+  describe('triggering success toast', () => {
+    describe('with options and type passed', () => {
+      it('renders toast', async () => {
+        const { user } = setup()
+
+        render(<TestComponent type="success" options={{ duration: 5000 }} />)
+
+        const button = screen.getByRole('button', { name: 'click me' })
+        expect(button).toBeInTheDocument()
+        await user.click(button)
+
+        const title = screen.getByRole('heading', { name: /Cool title/ })
+        expect(title).toBeInTheDocument()
+
+        const clearToasts = screen.getByRole('button', { name: 'clear toasts' })
+        expect(clearToasts).toBeInTheDocument()
+        await user.click(clearToasts)
+      })
+    })
+
+    describe('no options are passed', () => {
+      it('renders toast', async () => {
+        const { user } = setup()
+
+        render(<TestComponent type="success" />)
+
+        const button = screen.getByRole('button', { name: 'click me' })
+        expect(button).toBeInTheDocument()
+        await user.click(button)
+
+        const title = screen.getByRole('heading', { name: /Cool title/ })
+        expect(title).toBeInTheDocument()
+
+        const clearToasts = screen.getByRole('button', { name: 'clear toasts' })
+        expect(clearToasts).toBeInTheDocument()
+        await user.click(clearToasts)
+      })
+    })
+  })
 })

src/services/toast/SuccessToast/SuccessToast.tsx

@@ -1,7 +1,8 @@
 import { toast, type ToastOptions } from 'react-hot-toast'
 
-import ErrorToast from './ErrorToast'
-import GenericToast from './GenericToast'
+import { ErrorToast } from './ErrorToast/ErrorToast'
+import { GenericToast } from './GenericToast/GenericToast'
+import { SuccessToast } from './SuccessToast/SuccessToast'
 
 const TOAST_DURATION = 4000
 
@@ -10,7 +11,7 @@ export interface ToastProps {
   content: string
 }
 
-export type ToastTypes = 'generic' | 'error'
+export type ToastTypes = 'generic' | 'error' | 'success'
 
 export interface ToastArgs {
   title: string
@@ -31,6 +32,9 @@ export const renderToast = ({
     case 'error':
       component = <ErrorToast title={title} content={content} />
       break
+    case 'success':
+      component = <SuccessToast title={title} content={content} />
+      break
     default:
       component = <GenericToast title={title} content={content} />
   }