feat(notification-toast): add auto-hide prop, closes #948 (#979)

telekom · Apr 13, 2022 · aa1c3be · aa1c3be
1 parent a073dfb
commit aa1c3be
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 0 deletions.
diff --git a/packages/components/src/components/notification-toast/notification-toast.tsx b/packages/components/src/components/notification-toast/notification-toast.tsx
@@ -44,6 +44,10 @@ export class NotificationToast {
   @Prop() positionVertical?: number = 12;
   /** (optional) Toast position right */
   @Prop() positionHorizontal?: number = 12;
+  /** (optional) Toast auto hide */
+  @Prop() autoHide?: boolean = false;
+  /** (optional) Toast auto hide duration */
+  @Prop() autoHideDuration?: number = 3000;
   /** (optional) Toast fade duration */
   @Prop() fadeDuration?: number = 500;
   /** (optional) Injected CSS styles */
@@ -69,6 +73,12 @@ export class NotificationToast {
     this.alignmentHorizontal = alignmentParts[1];
   }
 
+  componentDidRender() {
+    if (this.autoHide === true) {
+      setTimeout(this.close, this.autoHideDuration);
+    }
+  }
+
   close = () => {
     this.hideToast = true;
     setTimeout(() => {

diff --git a/packages/components/src/components/notification-toast/readme.md b/packages/components/src/components/notification-toast/readme.md
@@ -11,6 +11,8 @@
 | -------------------- | --------------------- | ---------------------------------------------- | -------------------------------------------------------------- | ----------------- |
 | `alignment`          | `alignment`           | (optional) Alignment choose for top and bottom | `"bottom-left" \| "bottom-right" \| "top-left" \| "top-right"` | `'top-right'`     |
 | `animated`           | `animated`            | (optional) Animated toast                      | `boolean`                                                      | `true`            |
+| `autoHide`           | `auto-hide`           | (optional) Toast auto hide                     | `boolean`                                                      | `false`           |
+| `autoHideDuration`   | `auto-hide-duration`  | (optional) Toast auto hide duration            | `number`                                                       | `3000`            |
 | `fadeDuration`       | `fade-duration`       | (optional) Toast fade duration                 | `number`                                                       | `500`             |
 | `opened`             | `opened`              | (optional) Toast opened                        | `boolean`                                                      | `undefined`       |
 | `positionHorizontal` | `position-horizontal` | (optional) Toast position right                | `number`                                                       | `12`              |

diff --git a/...orybook-vue/stories/components/notification-toast/NotificationToast.stories.mdx b/...orybook-vue/stories/components/notification-toast/NotificationToast.stories.mdx
@@ -40,6 +40,8 @@ export const Template = (args, { argTypes }) => ({
       :variant="variant" 
       :alignment="alignment"
       :opened="opened"
+      :auto-hide-duration="autoHideDuration"
+      :auto-hide="autoHide"
       ><p slot="header">Informational toast headline</p>
     </scale-notification-toast>
     </div>
@@ -191,6 +193,29 @@ export const TemplateLink = (args, { argTypes }) => ({
 </scale-notification-toast>
 ```
 
+## Timeout
+
+<Canvas withSource="none">
+  <Story
+    name="Timeout"
+    args={{
+      opened: true,
+      autoHide: true,
+      autHideDuration: '4000',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+```html
+<scale-notification-toast opened>
+  <p slot="header" auto-hide auto-hide-duration="4000">
+    Informational toast headline
+  </p>
+</scale-notification-toast>
+```
+
 ## With Text
 
 <Canvas withSource="none">

diff --git a/packages/storybook-vue/stories/components/notification-toast/ScaleNotificationToast.vue b/packages/storybook-vue/stories/components/notification-toast/ScaleNotificationToast.vue
@@ -22,6 +22,8 @@ export default {
     positionVertical: { type: Number, default: 12 },
     positionHorizontal: { type: Number, default: 12 },
     fadeDuration: { type: Number, default: 500 },
+    autoHideDuration: { type: Number, default: 3000 },
+    autoHide: { type: Boolean, default: false },
     styles: { type: String },
   },
 };