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 (
+ <>
+ setShow(false)}
+ show={show}
+ >
+ Processing.. Example of a Toast with an icon.
+
+
+
+ >
+ );
+}
+```
+
## 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) {
@@ -51,6 +53,20 @@ describe('', () => {
const toastButton = screen.getByRole('button', { name: 'Optional action' });
expect(toastButton.className).toContain('btn');
});
+ it('renders optional icon', () => {
+ const { container } = render(
+
+ Success message.
+ ,
+ );
+
+ const toastIcon = container.querySelector('.__pgn__icon');
+ expect(toastIcon).toBeInTheDocument();
+ });
it('autohide is set to false on onMouseOver and true on onMouseLeave', async () => {
render(
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;
+ 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}
>
-
{children}
+ {icon &&
}
+
{children}