From c2eac420f1b93fe3c38a0d3704abc779c18c82a1 Mon Sep 17 00:00:00 2001
From: Diana Dean <ddean@bellese.io>
Date: Fri, 1 Apr 2022 13:56:19 -0600
Subject: [PATCH] fix(app-modal-shell): update modal header

-Change header title to h2; move to be inline with close button
-Ensure there is no underline (that
may appear as a result of ds utility classes)
---
 .../modal-shell/modal-shell.component.html    | 105 ++++++++++--------
 ...mponent.css => modal-shell.component.scss} |  23 +++-
 .../modal-shell/modal-shell.component.ts      |   4 +-
 3 files changed, 80 insertions(+), 52 deletions(-)
 rename src/app/modules/modal-shell/{modal-shell.component.css => modal-shell.component.scss} (60%)

diff --git a/src/app/modules/modal-shell/modal-shell.component.html b/src/app/modules/modal-shell/modal-shell.component.html
index d93e5b74..5d07e62a 100644
--- a/src/app/modules/modal-shell/modal-shell.component.html
+++ b/src/app/modules/modal-shell/modal-shell.component.html
@@ -1,54 +1,61 @@
-<div id="{{'modalImplementation' + modalCount}}" class="ds-c-dialog-wrap" [attr.aria-modal]="true" [attr.aria-labelledby]="'dialog-title-' + modalCount" [attr.aria-describedby]="'dialog-body-' + modalCount" role="dialog" id="modalDialog" id="modal" (keyDown.esc)="onClose()" attr.data-auto-id="{{dataAutoId}}">
-    <div tabindex="0" class="focus-trap-hidden" id="firstModalTab" (focus)="findTab($event)" aria-hidden="true"></div>
-        <div class="tableClass">
-            <div class="cellClass">
-                <div class="ds-c-dialog {{modalClass}}" role="document">
-                    <app-button
-                        class="floatRight"
-                        (callBack)="onClose()" 
-                        [ariaLabel]="'Close modal dialog'" 
-                        [buttonType]="'modalTabIndex ds-c-button--transparent ds-c-dialog__close'" 
-                        [buttonID]="'closeButton'+modalCount">
-                        Close
-                    </app-button>
-                    
-                    <ng-template #defaultHeader let-modalHeader="modalHeader">
-                        <h1 class="ds-h1" id="{{'dialog-title-' + modalHeader.modalCount}}">
-                            {{modalHeader.modalTitle}}
-                        </h1>
-                    </ng-template>
-                    
-                    <ng-container *ngTemplateOutlet="headerTemplate ? headerTemplate : defaultHeader; context: getTitle">
-                    </ng-container>
+<div id="{{'modalImplementation' + modalCount}}" class="ds-c-dialog-wrap" [attr.aria-modal]="true"
+     [attr.aria-labelledby]="'dialog-title-' + modalCount" [attr.aria-describedby]="'dialog-body-' + modalCount"
+     role="dialog" id="modalDialog" id="modal" (keyDown.esc)="onClose()" attr.data-auto-id="{{dataAutoId}}">
+  <div tabindex="0" class="focus-trap-hidden" id="firstModalTab" (focus)="findTab($event)" aria-hidden="true"></div>
+  <div class="tableClass">
+    <div class="cellClass">
+      <div class="ds-c-dialog {{modalClass}}" role="document">
+        <div class="modal-header-wrapper ds-u-display--flex ds-u-margin-bottom--2">
+          <div class="modal-header-content">
+            <ng-container
+              *ngTemplateOutlet="headerTemplate ? headerTemplate : defaultHeader; context: getTitle">
+            </ng-container>
 
-                    <main [id]="jawsBody ? 'dialog-body-' + modalCount : ''">
+            <ng-template #defaultHeader let-modalHeader="modalHeader">
+              <h2 class="ds-h2"
+                  id="{{'dialog-title-' + modalHeader.modalCount}}">
+                {{modalHeader.modalTitle}}
+              </h2>
+            </ng-template>
+          </div>
+          <app-button
+            class="modal-header-close-button ds-u-margin-left--1"
+            (callBack)="onClose()"
+            [ariaLabel]="'Close modal dialog'"
+            [buttonType]="'modalTabIndex ds-c-button--transparent ds-c-dialog__close'"
+            [buttonID]="'closeButton'+modalCount">
+            Close
+          </app-button>
+        </div>
 
-                        <ng-template #defaultBody let-modalBody="modalBody">
-                            <p>
-                                {{modalBody.modalData}}
-                            </p>
-                        </ng-template>
+        <main [id]="jawsBody ? 'dialog-body-' + modalCount : ''">
 
-                        <ng-container *ngTemplateOutlet="bodyTemplate ? bodyTemplate : defaultBody; context: getBody">
-                        </ng-container>
+          <ng-template #defaultBody let-modalBody="modalBody">
+            <p>
+              {{modalBody.modalData}}
+            </p>
+          </ng-template>
 
-                        <aside class="ds-c-dialog__actions">
-                            <ng-template #defaultFooter>
-                                <app-button
-                                    (callBack)="onClose()" 
-                                    [ariaLabel]="'Cancel modal'" 
-                                    [buttonType]="'modalTabIndex'" 
-                                    [buttonID]="'cancelButton'+modalCount">
-                                    Cancel
-                                </app-button>
-                            </ng-template>
+          <ng-container *ngTemplateOutlet="bodyTemplate ? bodyTemplate : defaultBody; context: getBody">
+          </ng-container>
 
-                            <ng-container *ngTemplateOutlet="footerTemplate ? footerTemplate : defaultFooter">
-                            </ng-container>
-                        </aside>
-                    </main>
-                </div>
-            </div>
-        </div>
-    <div tabindex="0" class="focus-trap-hidden" id="lastModalTab" (focus)="findTab($event)" aria-hidden="true"></div>
-</div>
\ No newline at end of file
+          <aside class="ds-c-dialog__actions">
+            <ng-template #defaultFooter>
+              <app-button
+                (callBack)="onClose()"
+                [ariaLabel]="'Cancel modal'"
+                [buttonType]="'modalTabIndex'"
+                [buttonID]="'cancelButton'+modalCount">
+                Cancel
+              </app-button>
+            </ng-template>
+
+            <ng-container *ngTemplateOutlet="footerTemplate ? footerTemplate : defaultFooter">
+            </ng-container>
+          </aside>
+        </main>
+      </div>
+    </div>
+  </div>
+  <div tabindex="0" class="focus-trap-hidden" id="lastModalTab" (focus)="findTab($event)" aria-hidden="true"></div>
+</div>
diff --git a/src/app/modules/modal-shell/modal-shell.component.css b/src/app/modules/modal-shell/modal-shell.component.scss
similarity index 60%
rename from src/app/modules/modal-shell/modal-shell.component.css
rename to src/app/modules/modal-shell/modal-shell.component.scss
index ac1da129..595f07a1 100644
--- a/src/app/modules/modal-shell/modal-shell.component.css
+++ b/src/app/modules/modal-shell/modal-shell.component.scss
@@ -44,4 +44,25 @@ h1 {
 .ds-c-dialog {
     max-height: 100vh;
     overflow-y:auto;
-}
\ No newline at end of file
+}
+
+.modal-header-content {
+  flex: 1;
+
+  ::ng-deep {
+    // Override to ensure the first element (which will likely be a header element) doesn't have the default space
+    // at the top, so that it aligns with the close button
+    :first-child {
+      margin-top: 0;
+      padding-top: 0;
+    }
+  }
+}
+
+.modal-header-close-button {
+  ::ng-deep {
+    button {
+      text-decoration: none;
+    }
+  }
+}
diff --git a/src/app/modules/modal-shell/modal-shell.component.ts b/src/app/modules/modal-shell/modal-shell.component.ts
index 8064872c..fa1e5d37 100644
--- a/src/app/modules/modal-shell/modal-shell.component.ts
+++ b/src/app/modules/modal-shell/modal-shell.component.ts
@@ -9,7 +9,7 @@ import {
 @Component({
   selector: 'app-modal-shell',
   templateUrl: './modal-shell.component.html',
-  styleUrls: ['./modal-shell.component.css']
+  styleUrls: ['./modal-shell.component.scss']
 })
 export class AppModalShellComponent {
 
@@ -56,4 +56,4 @@ export class AppModalShellComponent {
             }
         };
     }
-}
\ No newline at end of file
+}