From c614d5dccefc14483de07187afaa1b450e965a7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Thu, 22 May 2025 19:48:04 -0300
Subject: [PATCH] feat: add icon to `Toast` component

---
 src/Toast/README.md      | 22 ++++++++++++++++++++++
 src/Toast/Toast.test.tsx | 16 ++++++++++++++++
 src/Toast/index.scss     |  8 ++++++--
 src/Toast/index.tsx      | 22 +++++++++++++---------
 4 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/src/Toast/README.md b/src/Toast/README.md
index cbf867b713..e4f1624549 100644
--- a/src/Toast/README.md
+++ b/src/Toast/README.md
@@ -45,6 +45,28 @@ notes: ''
 }
 ```
 
+## With Icon
+
+```jsx live
+() => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <Toast
+        icon={Settings}
+        onClose={() => setShow(false)}
+        show={show}
+      >
+        Processing.. Example of a Toast with an icon.
+      </Toast>
+
+      <Button onClick={() => setShow(true)}>Show Toast</Button>
+    </>
+  );
+}
+```
+
 ## With Button
 
 ```jsx live
diff --git a/src/Toast/Toast.test.tsx b/src/Toast/Toast.test.tsx
index 04bd71977c..1231fb6368 100644
--- a/src/Toast/Toast.test.tsx
+++ b/src/Toast/Toast.test.tsx
@@ -1,7 +1,9 @@
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import userEvent from '@testing-library/user-event';
 
+import { Info } from '../../icons';
 import Toast from '.';
 
 function ToastWrapper({ children, ...props }: React.ComponentProps<typeof Toast>) {
@@ -51,6 +53,20 @@ describe('<Toast />', () => {
     const toastButton = screen.getByRole('button', { name: 'Optional action' });
     expect(toastButton.className).toContain('btn');
   });
+  it('renders optional icon', () => {
+    const { container } = render(
+      <ToastWrapper
+        {...props}
+        icon={Info}
+        iconClassName="icon-class"
+      >
+        Success message.
+      </ToastWrapper>,
+    );
+
+    const toastIcon = container.querySelector('.__pgn__icon');
+    expect(toastIcon).toBeInTheDocument();
+  });
   it('autohide is set to false on onMouseOver and true on onMouseLeave', async () => {
     render(
       <ToastWrapper {...props}>
diff --git a/src/Toast/index.scss b/src/Toast/index.scss
index 4e11de3573..94c9d28bca 100644
--- a/src/Toast/index.scss
+++ b/src/Toast/index.scss
@@ -39,12 +39,16 @@
   .toast-header {
     align-items: center;
     border-bottom: 0;
-    justify-content: space-between;
     padding: 0;
 
+    .toast-header-icon {
+      margin-right: .75rem;
+    }
+
     p {
       font-size: var(--pgn-typography-font-size-sm);
-      margin: 0;
+      font-weight: var(--pgn-typography-weight-normal);
+      margin: 0 auto 0 0;
       padding-right: .75rem;
     }
 
diff --git a/src/Toast/index.tsx b/src/Toast/index.tsx
index 3780f2d0fd..d9e69c7012 100644
--- a/src/Toast/index.tsx
+++ b/src/Toast/index.tsx
@@ -7,7 +7,7 @@ import { useIntl } from 'react-intl';
 import { Close } from '../../icons';
 import ToastContainer from './ToastContainer';
 import Button from '../Button';
-import Icon from '../Icon';
+import Icon, { type IconProps } from '../Icon';
 import IconButton from '../IconButton';
 
 export const TOAST_CLOSE_LABEL_TEXT = 'Close';
@@ -21,6 +21,8 @@ interface ToastAction {
 
 interface ToastProps {
   children: string;
+  icon?: React.ComponentType<IconProps>;
+  iconClassName?: string;
   onClose: () => void;
   show: boolean;
   action?: ToastAction;
@@ -36,6 +38,9 @@ function Toast({
   closeLabel,
   onClose,
   show,
+  icon,
+  iconClassName,
+  delay = TOAST_DELAY,
   ...rest
 }: ToastProps) {
   const intl = useIntl();
@@ -58,10 +63,12 @@ function Toast({
         onMouseOut={() => setAutoHide(true)}
         onMouseOver={() => setAutoHide(false)}
         show={show}
+        delay={delay}
         {...rest}
       >
         <div className="toast-header">
-          <p className="small">{children}</p>
+          {icon && <Icon className={classNames('toast-header-icon', iconClassName)} src={icon} />}
+          <p>{children}</p>
           <div className="toast-header-btn-container">
             <IconButton
               iconAs={Icon}
@@ -90,13 +97,6 @@ function Toast({
   );
 }
 
-Toast.defaultProps = {
-  action: null,
-  closeLabel: undefined,
-  delay: TOAST_DELAY,
-  className: undefined,
-};
-
 Toast.propTypes = {
   /** A string or an element that is rendered inside the main body of the `Toast`. */
   children: PropTypes.string.isRequired,
@@ -127,6 +127,10 @@ Toast.propTypes = {
   delay: PropTypes.number,
   /** Class names for the `BaseToast` component */
   className: PropTypes.string,
+  /** Icon that will be shown in the  toast */
+  icon: PropTypes.func,
+  /** Class names for the `Icon` component */
+  iconClassName: PropTypes.string,
 };
 
 export default Toast;