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. +

@@ -190,7 +196,7 @@ export const NotificationsProvider = ({ children, ...props }) => { }; const createErrorNotification = (message = 'Something went wrong. Try refreshing?') => { - return createNotification((props) => ); + return createNotification((props) => ); }; return { createNotification, createErrorNotification, removeNotification }; @@ -251,7 +257,7 @@ const UploadNotification = ({ onClose }) => { } return ( - + {value}% @@ -278,7 +284,7 @@ const Content = () => {