refactor(banner): Banner component cleanups (#1940)

* Added slot controller to support updates for dynamic content
* Dropped the obsolete 'toggleAnimation' method

Author: rkaraivanov

src/components/banner/banner.ts

@@ -1,12 +1,12 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { createRef, type Ref, ref } from 'lit/directives/ref.js';
-
+import { createRef, ref } from 'lit/directives/ref.js';
 import { addAnimationController } from '../../animations/player.js';
 import { growVerIn, growVerOut } from '../../animations/presets/grow/index.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
 import { addInternalsController } from '../common/controllers/internals.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
@@ -50,11 +50,8 @@ export default class IgcBannerComponent extends EventEmitterMixin<
     registerComponent(IgcBannerComponent, IgcButtonComponent);
   }
 
-  private readonly _bannerRef: Ref<HTMLElement> = createRef();
-  private readonly _animationPlayer = addAnimationController(
-    this,
-    this._bannerRef
-  );
+  private readonly _bannerRef = createRef<HTMLElement>();
+  private readonly _player = addAnimationController(this, this._bannerRef);
 
   /**
    * Determines whether the banner is being shown/hidden.
@@ -67,7 +64,7 @@ export default class IgcBannerComponent extends EventEmitterMixin<
     super();
 
     addThemingController(this, all);
-
+    addSlotController(this, { slots: setSlots('prefix', 'actions') });
     addInternalsController(this, {
       initialARIA: {
         role: 'status',
@@ -76,14 +73,21 @@ export default class IgcBannerComponent extends EventEmitterMixin<
     });
   }
 
+  private async _handleClick(): Promise<void> {
+    if (this.emitEvent('igcClosing', { cancelable: true })) {
+      await this.hide();
+      this.emitEvent('igcClosed');
+    }
+  }
+
   /** Shows the banner if not already shown. Returns `true` when the animation has completed. */
   public async show(): Promise<boolean> {
     if (this.open) {
       return false;
     }
 
     this.open = true;
-    return await this.toggleAnimation('open');
+    return this._player.playExclusive(growVerIn());
   }
 
   /** Hides the banner if not already hidden. Returns `true` when the animation has completed. */
@@ -92,26 +96,14 @@ export default class IgcBannerComponent extends EventEmitterMixin<
       return false;
     }
 
-    await this.toggleAnimation('close');
+    await this._player.playExclusive(growVerOut());
     this.open = false;
     return true;
   }
 
   /** Toggles between shown/hidden state. Returns `true` when the animation has completed. */
   public async toggle(): Promise<boolean> {
-    return this.open ? await this.hide() : await this.show();
-  }
-
-  private async toggleAnimation(dir: 'open' | 'close') {
-    const animation = dir === 'open' ? growVerIn : growVerOut;
-    return this._animationPlayer.playExclusive(animation());
-  }
-
-  private async handleClick() {
-    if (this.emitEvent('igcClosing', { cancelable: true })) {
-      await this.hide();
-      this.emitEvent('igcClosed');
-    }
+    return this.open ? this.hide() : this.show();
   }
 
   protected override render() {
@@ -131,7 +123,7 @@ export default class IgcBannerComponent extends EventEmitterMixin<
               <igc-button
                 type="button"
                 variant="flat"
-                @click=${this.handleClick}
+                @click=${this._handleClick}
                 >OK</igc-button
               >
             </slot>

stories/banner.stories.ts

@@ -56,8 +56,8 @@ const checkIcon =
 
 registerIconFromText('success', checkIcon, 'material');
 
-const BasicTemplate = ({ open }: IgcBannerArgs) => {
-  return html`
+export const Basic: Story = {
+  render: (args) => html`
     <style>
       igc-button {
         margin-block-start: 12px;
@@ -66,21 +66,21 @@ const BasicTemplate = ({ open }: IgcBannerArgs) => {
     <igc-navbar style="height:30px">
       <h2>Title</h2>
     </igc-navbar>
-    <igc-banner id="banner" .open=${open}>
+    <igc-banner id="banner" ?open=${args.open}>
       You are currently not logged in! Please, log into your account first.
     </igc-banner>
     <igc-button onclick="banner.toggle()">Toggle Banner</igc-button>
-  `;
+  `,
 };
 
-const SlottedContentTemplate = ({ open }: IgcBannerArgs) => {
-  return html`
+export const SlottedContent: Story = {
+  render: (args) => html`
     <style>
       igc-banner[open] + igc-button {
         margin-block-start: 12px;
       }
     </style>
-    <igc-banner id="banner" .open=${open}>
+    <igc-banner id="banner" ?open=${args.open}>
       <igc-icon name="success" collection="material" slot="prefix"></igc-icon>
 
       Build f58a1815-c069-429d-ab20-860849e96a59 completed!
@@ -91,8 +91,5 @@ const SlottedContentTemplate = ({ open }: IgcBannerArgs) => {
       </div>
     </igc-banner>
     <igc-button onclick="banner.toggle()">Toggle Banner</igc-button>
-  `;
+  `,
 };
-
-export const Basic: Story = BasicTemplate.bind({});
-export const SlottedContent: Story = SlottedContentTemplate.bind({});