diff --git a/lib/notification.js b/lib/notification.js
index 3a95dd9..dbd16c7 100644
--- a/lib/notification.js
+++ b/lib/notification.js
@@ -55,7 +55,7 @@ export const NotificationBase = styled.aside`
animation-timing-function: ease-out;
${({ variant }) => variants[variant]}
- ${({ closing, timeout }) => {
+ ${({ closing, timeout, persistent }) => {
if (closing) {
return css`
animation-name: ${closingAnimation};
@@ -66,7 +66,7 @@ export const NotificationBase = styled.aside`
}
`;
}
- if (timeout > 0) {
+ if (!persistent) {
return css`
animation-name: ${closingAnimation};
animation-delay: ${timeout}ms;
@@ -88,7 +88,7 @@ const NotificationContent = styled.div`
margin-right: var(--space-1);
`;
-export const Notification = ({ message, live, children, variant, timeout, onClose, ...props }) => {
+export const Notification = ({ message, live, children, variant, timeout, onClose, persistent, ...props }) => {
const ref = React.useRef();
const [closing, setClosing] = React.useState(false);
@@ -105,6 +105,7 @@ export const Notification = ({ message, live, children, variant, timeout, onClos
closing={closing}
timeout={timeout}
onAnimationEnd={handleAnimationEnd}
+ persistent={persistent}
{...props}
>
{children || message}
@@ -124,12 +125,13 @@ Notification.propTypes = {
variant: PropTypes.oneOf(Object.keys(variants)),
timeout: PropTypes.number,
onClose: PropTypes.func,
+ persistent: PropTypes.bool,
};
Notification.defaultProps = {
variant: 'notice',
live: 'polite',
- timeout: 0,
+ timeout: 2500,
};
export const StoryNotification = () => (
@@ -145,12 +147,16 @@ export const StoryNotification = () => (
The style of notification: "notice", "success", "error", "onboarding" (default "notice").
The time in milliseconds before the notification automatically fades out and calls its "onClose" prop. If no value is provided, the
- notification will not automatically close.
+ notification will close after the default period specified in the default props.
A callback function, called when the close button is clicked or the notification times out. This props is provided by the{' '}
createNotification callback. If no value is provided, the notification will not render a close button.
+
+ A boolean value. If true, any timeout value is ignored and the Notification will remain until removed either programmatically or by a
+ user action. If no value is provided, the Notification will be removed after the timeout period.
+