fix(toast): enable for runtime updates of the hidden prop (#367)

* fix(toast): enable for runtime updates of the hidden prop * docs(toast): added hidden control to storybook
scania-digital-design-system · Oct 24, 2023 · e457e74 · e457e74
1 parent 32586a7
commit e457e74
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/core/src/components/toast/toast.stories.tsx b/packages/core/src/components/toast/toast.stories.tsx
@@ -55,6 +55,13 @@ export default {
         type: 'text',
       },
     },
+    hidden: {
+      name: 'Hidden',
+      description: 'Hides the Toast.',
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   args: {
     variant: 'Information',
@@ -63,15 +70,17 @@ export default {
     actions: `<tds-link slot="actions">
           <a href="https://tegel.scania.com/home" target="_blank">Tegel</a>
       </tds-link>`,
+    hidden: false,
   },
 };
 
-const Template = ({ variant, header, subheader, actions }) =>
+const Template = ({ variant, header, subheader, actions, hidden }) =>
   formatHtmlPreview(
     `<tds-toast
         variant="${variant.toLowerCase()}"
         header="${header}"
         ${subheader ? `subheader="${subheader}"` : ''}
+        ${hidden ? 'hidden' : ''}
     >
     ${actions || ''}
     </tds-toast>

diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx
@@ -97,7 +97,10 @@ export class TdsToast {
       <Host
         toastRole={this.toastRole}
         aria-describedby={this.host.getAttribute('aria-describedby')}
-        class={`${this.hidden ? 'hide' : 'show'}`}
+        class={{
+          hide: this.hidden,
+          show: !this.hidden,
+        }}
       >
         <div
           class={`