fix(notification-message): add lifecycle method for slots (#793)

* fix: text slot problems

* refactor: updating visual snapshots

* fix: adding needed lifecycle method for slots

* refactor: lifecycle touchpoint

* refactor: updating visual snapshots

packages/components/src/components/notification-banner/notification-banner.tsx

@@ -9,15 +9,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import {
-  Component,
-  h,
-  Host,
-  Prop,
-  Element,
-  Method,
-  State,
-} from '@stencil/core';
+import { Component, h, Host, Prop, Element, Method } from '@stencil/core';
 import classNames from 'classnames';
 import statusNote from '../../utils/status-note';
 
@@ -37,16 +29,17 @@ export class NotificationBanner {
   @Prop() autoHideDuration?: number = 3000;
   @Prop() href: string;
 
-  @State() hasText?: boolean;
-  @State() hasLink?: boolean;
+  hasSlotText?: boolean;
+  hasSlotLink?: boolean;
 
   componentWillLoad() {
-    if (this.hostElement.querySelectorAll('[slot=text]').length !== 0) {
-      this.hasText = true;
-    }
-    if (this.hostElement.querySelectorAll('[slot=link]').length !== 0) {
-      this.hasLink = true;
-    }
+    this.hasSlotText = !!this.hostElement.querySelector('[slot=text]');
+    this.hasSlotLink = !!this.hostElement.querySelector('[slot=link]');
+  }
+
+  componentDidUpdate() {
+    this.hasSlotText = !!this.hostElement.querySelector('[slot=text]');
+    this.hasSlotLink = !!this.hostElement.querySelector('[slot=link]');
   }
 
   connectedCallback() {
@@ -133,17 +126,17 @@ export class NotificationBanner {
                   <scale-icon-action-circle-close accessibility-title="close" />
                 </button>
               )}
-              {this.hasText ? (
+              {this.hasSlotText && (
                 <div part="text" class="notification-banner__text">
                   <slot name="text" />
                 </div>
-              ) : null}
+              )}
 
-              {this.hasLink ? (
+              {this.hasSlotLink && (
                 <scale-link href={this.href} class="notification-banner__link">
                   <slot name="link" />
                 </scale-link>
-              ) : null}
+              )}
             </div>
           </div>
         </div>
@@ -166,8 +159,8 @@ export class NotificationBanner {
     return classNames(
       name,
       this.variant && `${prefix}variant-${this.variant}`,
-      this.hasText && `${prefix}has-text`,
-      !this.hasText && `${prefix}has-no-text`
+      this.hasSlotText && `${prefix}has-text`,
+      !this.hasSlotText && `${prefix}has-no-text`
     );
   }
 }

packages/components/src/components/notification-message/notification-message.tsx

@@ -30,8 +30,8 @@ export class NotificationMessage {
 
   hasSlotText: boolean;
 
-  componentDidLoad() {
-    this.hasSlotText = !!this.hostElement.querySelector("p[slot='text']");
+  componentWillLoad() {
+    this.hasSlotText = !!this.hostElement.querySelector('[slot=text]');
   }
 
   componentDidRender() {
@@ -40,6 +40,10 @@ export class NotificationMessage {
     }
   }
 
+  componentDidUpdate() {
+    this.hasSlotText = !!this.hostElement.querySelector('[slot=text]');
+  }
+
   connectedCallback() {
     statusNote({ source: this.hostElement, type: 'warn' });
   }