devop: add has title to mew popup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myetherwallet/mew-components",
-  "version": "0.7.18-beta",
+  "version": "0.7.19-beta",
   "description": "MEW Components",
   "main": "dist/mew-components.umd.js",
   "module": "dist/mew-components.esm.js",

src/components/MewPopup/MewPopup.vue

@@ -12,32 +12,23 @@
     :scrollable="scrollable"
     @click:outside="handleClickOutside"
   >
-    <v-card
-      color="white"
-      class="pa-0"
-    >
+    <v-card color="white" class="pa-0">
       <!--
       =====================================================================================
         Dialog Header
         =====================================================================================
       -->
       <v-card-title
         :class="[
-          'justify-center px-5 px-md-7',
+          'justify-center',
+          hasTitle ? 'px-5 px-md-7' : '',
           hasBodyContent ? 'py-5 py-md-8' : 'pb-0 pt-5 pt-md-8',
         ]"
       >
-        <div
-          v-if="title"
-          class="mew-heading-2 break-word text-center"
-        >
+        <div v-if="title" class="mew-heading-2 break-word text-center">
           {{ title }}
         </div>
-        <v-btn
-          v-if="!hideCloseBtn"
-          icon
-          class="header-close-icon"
-        >
+        <v-btn v-if="!hideCloseBtn" icon class="header-close-icon">
           <v-icon
             size="x-large"
             color="grey cursor--pointer"
@@ -63,15 +54,8 @@
         Dialog action
       =====================================================================================
       -->
-      <v-card-actions
-        v-if="hasButtons"
-        class="py-5 py-md-8"
-      >
-        <v-row
-          class="pa-0"
-          justify="space-around"
-          dense
-        >
+      <v-card-actions v-if="hasButtons" class="py-5 py-md-8">
+        <v-row class="pa-0" justify="space-around" dense>
           <v-col
             cols="12"
             :sm="!rightBtn ? '12' : '6'"
@@ -112,7 +96,7 @@
 </template>
 
 <script>
-import MewButton from '@/components/MewButton/MewButton.vue';
+import MewButton from "@/components/MewButton/MewButton.vue";
 
 export default {
   components: { MewButton },
@@ -122,7 +106,7 @@ export default {
      */
     title: {
       type: String,
-      default: '',
+      default: "",
     },
     /**
      * Hide top right close button
@@ -146,7 +130,7 @@ export default {
     leftBtn: {
       type: Object,
       default: () => {
-        return { text: 'Cancel', color: 'primary', method: () => {} };
+        return { text: "Cancel", color: "primary", method: () => {} };
       },
     },
     /**
@@ -157,8 +141,8 @@ export default {
       type: Object,
       default: () => {
         return {
-          text: 'Confirm',
-          color: 'primary',
+          text: "Confirm",
+          color: "primary",
           enabled: true,
           method: () => {},
         };
@@ -176,7 +160,7 @@ export default {
      */
     maxWidth: {
       type: String,
-      default: '600',
+      default: "600",
     },
     /**
      * Displays v-card-text if there is popup body content
@@ -200,6 +184,13 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * Will display popup top part content padding if true
+     */
+    hasTitle: {
+      type: Boolean,
+      default: true,
+    },
   },
   methods: {
     /**

stories/MewPopup/MewPopup.stories.js

@@ -71,6 +71,9 @@ export const MEWPopup = () => ({
     hasButtons: {
       default: boolean("has-buttons", true),
     },
+    hasTitle: {
+      default: boolean("has-title", true),
+    },
   },
   watch: {
     enableDarkMode(newVal) {
@@ -91,6 +94,7 @@ export const MEWPopup = () => ({
       :has-body-content="hasBodyContent"
       :has-padding="hasPadding"
       :has-buttons="hasButtons"
+      :has-title="hasTitle"
     > 
       <div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
     </mew-popup>