Add ability to toggle countdown bar in Toast component (#78)

* Only show countdown bars if showCountdownBar is true * Tweak padding based on showCountdownBar * Add section to website * Test * Added theme to docs for showCountdownBar
jxom · Apr 28, 2019 · a4644a1 · a4644a1
1 parent 3c7a0ea
commit a4644a1
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 5 deletions.
diff --git 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<LocalToastProps> & ToastComponents =
   hasIcon,
   hideCloseButton,
   onClickClose,
+  showCountdownBar,
   title,
   type,
   ...props
 }) => (
   <_Toast type={type} {...props}>
-    <CountdownBar isHorizontal={hasHorizontalBar} isBackground type={type} />
-    <CountdownBar autoDismissTimeout={autoDismissTimeout} isHorizontal={hasHorizontalBar} type={type} />
-    <Content>
+    {showCountdownBar && (
+      <React.Fragment>
+        <CountdownBar isHorizontal={hasHorizontalBar} type={type} isBackground />
+        <CountdownBar isHorizontal={hasHorizontalBar} type={type} autoDismissTimeout={autoDismissTimeout} />
+      </React.Fragment>
+    )}
+    <Content showCountdownBar={showCountdownBar}>
       {hasIcon && type && <ToastIcon type={type} size={children ? '300' : undefined} />}
       <Box>
         {title && <ToastTitle marginBottom={children ? 'minor-2' : undefined}>{title}</ToastTitle>}
@@ -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
@@ -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(
+    <Toast showCountdownBar={false}>
+      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
+      keffiyeh helvetica.
+    </Toast>
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
diff --git a/packages/fannypack/src/Toast/styled.ts b/packages/fannypack/src/Toast/styled.ts
@@ -60,11 +60,21 @@ export const ToastIcon = styled(Icon)<LocalIconProps>`
   }
 `;
 
-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
@@ -178,6 +178,42 @@ const App = () => (
 );
 ```
 
+### Disable the countdown bar
+
+Use the `showCountdownBar` prop to toggle the visibility of the countdown bar.
+
+```.jsx
+<Toast.Container>
+  {toast => (
+    <Button onClick={() => toast.info({
+      showCountdownBar: false,
+      message: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.',
+      title: 'Enim eiusmod'
+    })}>Add toast</Button>
+  )}
+</Toast.Container>
+```
+
+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 = () => (
+  <ThemeProvider theme={theme}>
+    // ... your app
+  </ThemeProvider>
+);
+```
+
 ### 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 `<Toast>` component](https://github.com/fannypackui/fannypack/tree/master/src/Toast/Toast.tsx).