add slot for mew menu item, remove line heights, add logo

Author: gesseekur

.storybook/manager.js

@@ -1,6 +1,6 @@
 import { addons } from '@storybook/addons';
 import mewTheme from './mewTheme';
 
-// addons.setConfig({
-//   theme: mewTheme,
-// });
+addons.setConfig({
+  theme: mewTheme,
+});

.storybook/mewTheme.js

@@ -2,6 +2,10 @@ import { create } from '@storybook/theming/create';
 
 export default create({
   base: 'light',
+  title: 'default',
+  brandTitle: 'MEW Components',
+  brandUrl: 'www.myetherwallet.com',
+  brandImage: 'https://www.ledger.com/wp-content/uploads/2019/05/mew-logo.jpg'
 
 //   colorPrimary: '#f0f0f0',
 //   colorSecondary: 'deepskyblue',

package-lock.json

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

package.json

@@ -9,49 +9,42 @@
 .mew-title {
   /* size - 50px,  height - 52px */
   font-size: 3.571rem;
-  line-height: 3.714rem;
   font-weight: 700;
 }
 
 .mew-subtitle {
 /* size - 30px,  height - 40px */
   font-size: 2.143rem;
   font-weight: 700;
-  line-height: 2.857rem;
 }
 
 .mew-heading-1 {
   /* size - 24px,  height - 32px */
   font-size: 1.714rem;
   font-weight: 700;
-  line-height: 2.286rem;
   }
 
   .mew-heading-2 {
   /* size - 20px,  height - 28px */
   font-size: 1.429rem; 
-  line-height: 2rem;
   font-weight: 700;
   }
 
   .mew-heading-3 {
   /* size - 16px,  height - 24px */
   font-size: 1.143rem; 
   font-weight: 700;
-  line-height: 1.714rem;
   }
 
   .mew-body {
   /* size - 14px ,  height - 20px */
   font-size: 1rem !important; 
   font-weight: 400;
-  line-height: 1.429rem !important;
   }
 
   .mew-caption {
   /* size - 12px,  height - 20px */
   font-size: 0.8571rem;
-  line-height: 1.429rem;
   font-weight: 700; 
   text-transform: uppercase;
   }
@@ -75,13 +68,11 @@
   /* size - 12px,  height - 16px */
   font-size: 0.8571rem;
   font-weight: 400;
-  line-height: 1.143rem;
 } 
 
 .mew-heading-4 {
   /* size - 16px,  height - 24px */
   font-size: 1.143rem; 
-  line-height: 1.714rem;
   font-weight: 400;
 }
 

src/assets/styles/basics/_typography.scss

@@ -21,25 +21,26 @@
         v-on="on"
       >
         {{ listObj.name }}
-        <v-icon
-          v-if="!isMenuOpen"
-          :class="['title', activatorTextColor]"
-        >mdi-chevron-down</v-icon>
-        <v-icon
-          v-if="isMenuOpen"
-          :class="['title', activatorTextColor]"
-        >mdi-chevron-up</v-icon>
+        <v-icon v-if="!isMenuOpen" :class="['title', activatorTextColor]"
+          >mdi-chevron-down</v-icon
+        >
+        <v-icon v-if="isMenuOpen" :class="['title', activatorTextColor]"
+          >mdi-chevron-up</v-icon
+        >
       </span>
     </template>
     <!--
   =====================================================================================
     Menu List Content
   =====================================================================================
   -->
-    <v-list
-      v-for="(item, index) in listObj.items"
-      :key="index"
-    >
+    <v-list v-for="(item, index) in listObj.items" :key="index">
+      <!--
+  =====================================================================================
+   slot: 'mewMenuItem' + number of menu item 
+  =====================================================================================
+  -->
+      <slot :name="'mewMenuItem' + (i + 1)" />
       <v-list-item v-if="item.title">
         <v-list-item-title class="basic--text mew-heading-3 titleItem">
           {{ item.title }}
@@ -51,14 +52,13 @@
         @click="goTo(subItem.to)"
         class="cursor-pointer"
       >
-        <v-list-item-title class="mew-body basic--text subItem d-flex align-center">
-          <v-icon
-            v-if="subItem.iconName"
-            class="mr-1 basic--text"
-            size="14px"
-          >
+        <v-list-item-title
+          class="mew-body basic--text subItem d-flex align-center"
+        >
+          <v-icon v-if="subItem.iconName" class="mr-1 basic--text" size="14px">
             {{ subItem.iconName }}
-          </v-icon> {{ subItem.title }}
+          </v-icon>
+          {{ subItem.title }}
         </v-list-item-title>
       </v-list-item>
     </v-list>
@@ -67,10 +67,10 @@
 
 <script>
 export default {
-  name: 'MewMenu',
+  name: "MewMenu",
   data() {
     return {
-      isMenuOpen: false
+      isMenuOpen: false,
     };
   },
   props: {
@@ -89,17 +89,17 @@ export default {
      */
     activatorTextColor: {
       type: String,
-      default: 'basic--text',
-    }
+      default: "basic--text",
+    },
   },
   computed: {
     contentClasses() {
-      return 'mew-menu-content elevation-2 '
-    }
+      return "mew-menu-content elevation-2 ";
+    },
   },
   methods: {
     goTo(link) {
-      this.$emit('goToPage', link);
+      this.$emit("goToPage", link);
     },
   },
 };
@@ -120,7 +120,7 @@ export default {
   }
   .v-list {
     border-radius: 0;
-    
+
     .v-list-item {
       min-height: 30px;
     }
@@ -132,14 +132,12 @@ export default {
       }
     }
   }
-    .v-list:first-of-type > .v-list-item:first-of-type {
-      margin-top: 10px;
-    }
-
-    .v-list:last-of-type > .v-list-item:last-of-type {
-      margin-bottom: 10px;
-    }
-
+  .v-list:first-of-type > .v-list-item:first-of-type {
+    margin-top: 10px;
+  }
 
+  .v-list:last-of-type > .v-list-item:last-of-type {
+    margin-bottom: 10px;
+  }
 }
 </style>

src/components/MewMenu/MewMenu.vue

@@ -9,12 +9,10 @@ export const All = () => ({
         /* size - 12px,  height - 16px */
         fontSize: '0.8571rem',
         fontWeight: 400,
-        lineHeight: '1.143rem'
       },
       mewHeading4: {
         /* size - 16px,  height - 24px */
         fontSize: '1.143rem',
-        lineHeight: '1.714rem',
         fontWeight: '400'
       },
       mewAddress: {
@@ -23,43 +21,36 @@ export const All = () => ({
       mewTitle: {
         /* size - 50px,  height - 52px */
         fontSize: '3.571rem',
-        lineHeight: '3.714rem',
         fontWeight: 700
       },
       mewSubtitle: {
         /* size - 30px,  height - 40px */
         fontSize: '2.143rem',
         fontWeight: 700,
-        lineHeight: '2.857rem'
       },
       mewHeading1: {
         /* size - 24px,  height - 32px */
         fontSize:  '1.714rem',
         fontWeight: 700,
-        lineHeight: '2.286rem'
       },
       mewHeading2: {
         /* size - 20px,  height - 28px */
         fontSize: '1.429rem', 
-        lineHeight: '2rem',
         fontWeight: 700
       },
       mewHeading3: {
         /* size - 16px,  height - 24px */
         fontSize: '1.143rem',
         fontWeight: 700,
-        lineHeight: '1.714rem'
       },
       mewBody: {
         /* size - 14px ,  height - 20px */
         fontSize: '1rem',
         fontWeight: 400,
-        lineHeight: '1.429rem'
       },
       mewCaption: {
         /* size - 12px,  height - 20px */
         fontSize: '0.8571rem',
-        lineHeight: '1.429rem',
         fontWeight: 700,
         textTransform: 'uppercase'
       },