diff --git a/packages/fannypack/src/Toast/Toast.tsx b/packages/fannypack/src/Toast/Toast.tsx index 86a609753..3618f98eb 100644 --- a/packages/fannypack/src/Toast/Toast.tsx +++ b/packages/fannypack/src/Toast/Toast.tsx @@ -23,6 +23,7 @@ export type LocalToastProps = LocalPaneProps & { hasTint?: boolean; hideCloseButton?: boolean; onClickClose?: ToastCloseProps['onClickClose']; + showCountdownBar?: boolean; title?: string; type?: string; }; @@ -39,14 +40,19 @@ export const Toast: React.FunctionComponent & ToastComponents = hasIcon, hideCloseButton, onClickClose, + showCountdownBar, title, type, ...props }) => ( <_Toast type={type} {...props}> - - - + {showCountdownBar && ( + + + + + )} + {hasIcon && type && } {title && {title}} @@ -70,6 +76,7 @@ export const toastPropTypes = { hasTint: PropTypes.bool, hideCloseButton: PropTypes.bool, onClickClose: PropTypes.func, + showCountdownBar: PropTypes.bool, type: PropTypes.string, title: PropTypes.string, ...panePropTypes @@ -87,6 +94,7 @@ export const toastDefaultProps = { hasTint: false, hideCloseButton: false, onClickClose: undefined, + showCountdownBar: true, title: undefined, type: 'info' }; diff --git a/packages/fannypack/src/Toast/__tests__/Toast.test.tsx b/packages/fannypack/src/Toast/__tests__/Toast.test.tsx index 0d0861e8e..6fb5991bc 100644 --- a/packages/fannypack/src/Toast/__tests__/Toast.test.tsx +++ b/packages/fannypack/src/Toast/__tests__/Toast.test.tsx @@ -65,3 +65,13 @@ it('renders correctly for a Toast with a horizontal bar', () => { expect(container.firstChild).toMatchSnapshot(); }); }); + +it('renders correctly for a Toast without a countdown bar', () => { + const { container } = render( + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim + keffiyeh helvetica. + + ); + expect(container.firstChild).toMatchSnapshot(); +}); diff --git a/packages/fannypack/src/Toast/styled.ts b/packages/fannypack/src/Toast/styled.ts index 21417099e..72d948dbd 100644 --- a/packages/fannypack/src/Toast/styled.ts +++ b/packages/fannypack/src/Toast/styled.ts @@ -60,11 +60,21 @@ export const ToastIcon = styled(Icon)` } `; -export const Content = styled(Flex)` +export const Content = styled(Flex)<{ // eslint-disable-line + showCountdownBar?: boolean; +}>` padding: ${space(4)}rem; - padding-left: calc(${space(4)}rem + 5px); padding-right: ${space(8)}rem; + ${props => + props.showCountdownBar + ? css` + padding-left: calc(${space(4)}rem + 5px); + ` + : css` + padding-left: ${space(4)}rem; + `}; + & { ${theme('fannypack.Toast.Content.base')}; } diff --git a/packages/website/pages/components/toast.mdx b/packages/website/pages/components/toast.mdx index 51aa1d70c..1695cce63 100644 --- a/packages/website/pages/components/toast.mdx +++ b/packages/website/pages/components/toast.mdx @@ -178,6 +178,42 @@ const App = () => ( ); ``` +### Disable the countdown bar + +Use the `showCountdownBar` prop to toggle the visibility of the countdown bar. + +```.jsx + + {toast => ( + + )} + +``` + +By default the prop `showCountdownBar` is set to `true`. You can change this globally by updating the `Toast.defaultProps.showCountdownBar` theme variable. + +``` +import { ThemeProvider } from 'fannypack'; + +const theme = { + Toast: { + defaultProps: { + showCountdownBar: false + } + } +} + +const App = () => ( + + // ... your app + +); +``` + ### Custom Toast component By default, Fannypack uses a [default Toast component](#defaulttoastcomponent). You can change the default toast with the `Toast.component` theme variable. [Click here to see an example implementation of the `` component](https://github.com/fannypackui/fannypack/tree/master/src/Toast/Toast.tsx).