From ac21728e7a20294b69a7698bcbe2f95e0c2d55d9 Mon Sep 17 00:00:00 2001
From: geethag-tw <geethag@thoughtworks.com>
Date: Wed, 10 Jul 2024 17:22:19 +0530
Subject: [PATCH] feat(Modal): [BLA-803] Add slot for icons in modal header

---
 .../src/components/modal/modal.scss           | 14 ++++++--
 .../src/components/modal/modal.tsx            | 36 ++++++++++---------
 packages/core-components/src/html/status.html |  1 +
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/packages/core-components/src/components/modal/modal.scss b/packages/core-components/src/components/modal/modal.scss
index 5ec819fe..8ed71015 100644
--- a/packages/core-components/src/components/modal/modal.scss
+++ b/packages/core-components/src/components/modal/modal.scss
@@ -53,8 +53,18 @@
       align-items: center;
       margin-bottom: var(--b2b-size-space-75);
 
-      b2b-icon {
-        padding-left: 8px;
+      &-left {
+        display: flex;
+        justify-content: flex-start;
+
+        b2b-headline {
+          padding-right: 8px;
+        }
+      }
+
+      &-right {
+        display: flex;
+        justify-content: flex-end;
       }
     }
 
diff --git a/packages/core-components/src/components/modal/modal.tsx b/packages/core-components/src/components/modal/modal.tsx
index adbb2a26..db753d20 100644
--- a/packages/core-components/src/components/modal/modal.tsx
+++ b/packages/core-components/src/components/modal/modal.tsx
@@ -161,22 +161,26 @@ export class ModalComponent {
               [`b2b-modal__dialog--${this.variant}`]: true,
             }}>
             <div class="b2b-modal__dialog__header">
-              <b2b-headline align="center" size="200" noMargin={true}>
-                {this.heading}
-              </b2b-headline>
-              <slot name="header-icon"></slot>
-              <button
-                type="button"
-                class="b2b-modal__dialog__close"
-                onMouseEnter={this.toggleIconHover}
-                onMouseLeave={this.toggleIconHover}
-                onClick={this.handleClickDismiss}
-                ref={el => (this.closeButton = el)}>
-                <b2b-icon
-                  clickable
-                  icon="b2b_icon-close"
-                  color={this.iconHover ? 'primary' : 'secondary'}></b2b-icon>
-              </button>
+              <div class="b2b-modal__dialog__header-left">
+                <b2b-headline align="center" size="200" noMargin={true}>
+                  {this.heading}
+                </b2b-headline>
+                <slot name="header-icon"></slot>
+              </div>
+              <div class="b2b-modal__dialog__header-right">
+                <button
+                  type="button"
+                  class="b2b-modal__dialog__close"
+                  onMouseEnter={this.toggleIconHover}
+                  onMouseLeave={this.toggleIconHover}
+                  onClick={this.handleClickDismiss}
+                  ref={el => (this.closeButton = el)}>
+                  <b2b-icon
+                    clickable
+                    icon="b2b_icon-close"
+                    color={this.iconHover ? 'primary' : 'secondary'}></b2b-icon>
+                </button>
+              </div>
             </div>
             <div class="b2b-modal__dialog__body">
               <slot></slot>
diff --git a/packages/core-components/src/html/status.html b/packages/core-components/src/html/status.html
index 553c0c5e..8a305d54 100644
--- a/packages/core-components/src/html/status.html
+++ b/packages/core-components/src/html/status.html
@@ -92,6 +92,7 @@
           backdrop-dismiss
           esc-dismiss="false">
           <div>This is a test modal</div>
+          <b2b-icon slot="header-icon" icon="b2b_icon-info"></b2b-icon>
           <b2b-paragraph slot="footer-left">* Mandatory</b2b-paragraph>
           <b2b-button id="modal-close-button" slot="footer-right"
             >Close</b2b-button