Tweak box component heading

The heading attribute is changed to header, to standardise with the
attribute naming used in panels.

The header now supports markdown parsing, making it consistent
with MarkBind’s rich formatting for headers.

The old box component’s header style can be improved to support
Markdown headers.

src/TipBox.vue

@@ -1,4 +1,5 @@
 <template>
+<<<<<<< HEAD
     <div class="alert container" :class="[boxStyle, addClass, lightStyle, seamlessStyle]" :style="customStyle">
         <div v-if="!isDefault" class="icon-wrapper" :class="[iconStyle]">
             <slot name="_icon">
@@ -9,16 +10,44 @@
         <div class="contents" :class="[fontBlack, seamlessStyle]">
             <h6 v-if="headerContent" class="heading">{{ headerContent }}</h6>
             <button v-if="dismissible" type="button" class="close dismiss-button" data-dismiss="alert" aria-label="Close">
+=======
+    <div class="alert box-container" :class="[boxStyle, addClass]" :style="customStyle" ref="boxContainer">
+        <div v-show="hasHeaderBool" :class="['header-wrapper', 'transparent-header', { 'alert-dismissible': dismissible }]">
+            <div v-show="!isDefault" class="icon-wrapper">
+                <span v-html="iconType"></span>
+            </div>
+            <div ref="headerContainer">
+                <slot name="header">
+                    <div class="box-heading" v-html="headerContent"></div>
+                </slot>
+            </div>
+            <button v-show="dismissible" type="button" class="close close-with-heading" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+        <div :class="['content-wrapper', { 'alert-dismissible': dismissible && !hasHeaderBool, 'content-wrapper-with-heading': hasHeaderBool }]">
+            <div v-show="!isDefault && !hasHeaderBool" class="icon-wrapper">
+                <span v-html="iconType"></span>
+            </div>
+            <div class="contents">
+                <slot></slot>
+            </div>
+            <button v-show="dismissible && !hasHeaderBool" type="button" class="close" data-dismiss="alert" aria-label="Close">
+>>>>>>> Tweak box component heading
                 <span aria-hidden="true">&times;</span>
             </button>
-            <slot></slot>
         </div>
     </div>
 </template>
 
 <script>
+<<<<<<< HEAD
 
   import { toBoolean } from './utils/utils';
+=======
+  import md from './utils/markdown.js'
+  const slugify = require('@sindresorhus/slugify');
+>>>>>>> Tweak box component heading
 
   export default {
     props: {
@@ -58,8 +87,9 @@
         type: String,
         default: ''
       },
-      heading: {
+      header: {
         type: String,
+<<<<<<< HEAD
         default: null,
       },
       light: {
@@ -74,8 +104,15 @@
         type: Boolean,
         default: false,
       },
+=======
+        default: '',
+      }
+>>>>>>> Tweak box component heading
     },
     computed: {
+      hasHeaderBool() {
+        return this.header || this.$slots.header;
+      },
       isDefault() {
         return this.type === 'none'
       },
@@ -171,24 +208,70 @@
             return '<i class="fas fa-exclamation"></i>';
         }
       },
+<<<<<<< HEAD
       iconStyle() {
         if (this.iconSize) {
           return `fa-${this.iconSize}`;
         }
         return '';
+=======
+      headerContent() {
+        return md.render(this.header);
+>>>>>>> Tweak box component heading
       }
-    }
+    },
+    mounted() {
+      let id = undefined;
+
+      if (!id && this.headerContent) {
+        const boxHeaderText = jQuery(this.headerContent).wrap('<div></div>').parent().find(':header').text();
+        if (boxHeaderText) {
+            id = slugify(boxHeaderText, { decamelize: false });
+        }
+      }
+
+      if (this.$slots.header) {
+        const header = jQuery(this.$refs.headerContainer.innerHTML).wrap('<div></div>').parent().find(':header');
+        if (header.length > 0) {
+          id = header[0].id;
+        }
+      }
+
+      if (id) {
+        this.$refs.boxContainer.setAttribute('id', id);
+      }
+    },
   }
 </script>
 
 <style scoped>
-    .container {
+    .box-container {
+        width: 100%;
+        padding: 0;
+        border-radius: 6px;
+    }
+
+    .header-wrapper {
         display: flex;
         flex-direction: row;
+        align-items: center;
         width: 100%;
-        border-radius: 6px;
+        padding: 0.28em 1.25rem;
+        border-radius: 6px 6px 0 0;
+    }
+
+    .content-wrapper {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        padding: 0.75rem 1.25rem;
     }
 
+    .content-wrapper-with-heading {
+        padding-top: 0.5rem
+    }
+
+<<<<<<< HEAD
     .container.seamless {
         background-color: transparent;
         border-color: transparent;
@@ -205,30 +288,46 @@
         border-width: 0;
         border-radius: 0 6px 0 6px;
         margin: -13px -27px 0 15px;
+=======
+    .alert-dismissible {
+        padding-right: 4rem;
+>>>>>>> Tweak box component heading
     }
 
-    .dismiss-button {
-        position: relative;
-        top: -2px;
-        clear: right;
-        color: inherit;
-        height: 100%;
-        margin-right: -6px;
-        margin-left: 21px;
+    .box-heading {
+        font-weight: 500;
     }
 
     .icon-wrapper {
         display: flex;
         margin-right: .5em;
     }
 
+    .close-with-heading {
+        top: auto;
+        padding: 0 1.25rem;
+    }
+
+    .close-with-heading > span {
+        vertical-align: text-top;
+    }
+
     .contents {
         padding: 0 6px;
         width: 100%;
     }
 
+<<<<<<< HEAD
     .contents.seamless {
         padding-left: 12px;
+=======
+    .transparent-header {
+        background-color: inherit;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: inherit;
+        filter: saturate(150%) grayscale(8%);
+>>>>>>> Tweak box component heading
     }
 
     .alert-default {
@@ -251,3 +350,9 @@
         width: 4px;
     }
 </style>
+
+<style>
+    div.box-heading > * {
+        margin-bottom: 0;
+    }
+</style>