Add a slot for modal banner (#1208)

* add temp gradient banner to whats new

* Set up rounded corners on banner

* Test of modal banner slot

* Change test of banner slot to get testing to not complain about img 404

* Use variables in modal css

Author: ktuite

src/assets/scss/_variables.scss

@@ -115,6 +115,8 @@ $padding-file-drop-zone: 15px;
 $padding-modal-body: 40px;
 $padding-modal-header: 40px;
 $padding-modal-actions: 15px;
+$border-radius-modal: 6px;
+$padding-modal-top-actions-close: 16px;
 
 // PageBody
 $margin-top-page-body: 20px;

src/components/modal.vue

@@ -25,6 +25,7 @@ may add the `in` class to the element, and the checkScroll() method may add the
             :aria-label="$t('action.close')" @click="hideIfCan">
             <span aria-hidden="true">&times;</span>
           </button>
+          <div class="modal-banner"><slot name="banner"></slot></div>
         </div>
         <div class="modal-header">
           <h4 :id="titleId" class="modal-title"><slot name="title"></slot></h4>
@@ -250,12 +251,24 @@ const titleId = `modal-title${id}`;
     box-shadow: $box-shadow-panel-main;
 
     .modal-top-actions {
-      text-align: right;
-      padding-right: 16px;
-      padding-top: 16px;
+
+      .modal-banner {
+        display: contents;
+        width: 100%;
+        padding: 0px;
+        margin: 0px;
+
+        // Force child of banner (e.g. image) to have rounded corners
+        &>* {
+          border-top-left-radius: $border-radius-modal;
+          border-top-right-radius: $border-radius-modal;
+        }
+      }
 
       .close {
-        float: none;
+        position: absolute;
+        top: $padding-modal-top-actions-close;
+        right: $padding-modal-top-actions-close;
         color: $color-input;
         font-weight: normal;
         opacity: 1;
@@ -269,7 +282,7 @@ const titleId = `modal-title${id}`;
     .modal-header {
       border-bottom: 0px;
       color: $color-text;
-      padding: 0px $padding-modal-header 20px $padding-modal-header;
+      padding: $padding-modal-header $padding-modal-header 20px $padding-modal-header;
 
       h4 {
         @include text-overflow-ellipsis;

src/components/whats-new.vue

@@ -11,6 +11,17 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <modal :state="isVisible" backdrop :hideable="true" @hide="hideModal">
+    <template #banner>
+      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="150px">
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" style="stop-color:#8d0050;stop-opacity:1"/>
+            <stop offset="100%" style="stop-color:#f7f7f7;stop-opacity:1"/>
+          </linearGradient>
+        </defs>
+        <rect width="100%" height="150" fill="url(#gradient)"/>
+      </svg>
+    </template>
     <template #title>{{ $t('title') }}</template>
     <template #body>
       <p class="modal-introduction">

test/components/modal.spec.js

@@ -34,6 +34,15 @@ describe('Modal', () => {
     modal.get('.modal-body pre').text().should.equal('foo');
   });
 
+  it('uses the banner slot', () => {
+    const modal = mountComponent({
+      slots: {
+        banner: { template: '<div class="test-banner">foo</div>' }
+      }
+    });
+    modal.get('.modal-banner .test-banner').text().should.equal('foo');
+  });
+
   it('shows any alert', () => {
     mountComponent().findComponent(Alert).exists().should.be.true;
   });