.storybook/preview.js

@@ -48,7 +48,7 @@ addParameters({
     { name: 'white', value: '#fff' },
     { name: 'dark-blue', value: '#184f90' },
     { name: 'dark mode', value: '#151a29'},
-    { name: 'light-green', value: '#cdf4ee'}
+    { name: 'light-green', value: '#f5fdfb'}
   ],
   docs: {
     inlineStories: true,

package.json

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

src/components/AddressSelect/AddressSelect.vue

@@ -34,22 +34,11 @@
 
       <template v-slot:append>
         <div class="icon-container d-flex align-center">
-          <v-tooltip
-            content-class="tooltip-inner"
-            color="titlePrimary--text"
-            top
-          >
-            <template v-slot:activator="{ on }">
-              <v-icon
-                class="copy-icon mr-3 basic--text"
-                v-on="on"
-                @click="copyToClipboard"
-              >
-                mdi-content-copy
-              </v-icon> 
-            </template>
-            <span>{{ copyTooltip }}</span>
-          </v-tooltip>
+          <copy
+            :tooltip="copyTooltip"
+            :copy-id="getRef()"
+            :is-ref="true"
+          />
           <v-tooltip
             content-class="tooltip-inner"
             color="titlePrimary--text"
@@ -111,6 +100,8 @@
 <script>
 import Blockie from '@/components/Blockie/Blockie.vue';
 import Toast from '@/components/Toast/Toast.vue';
+import CopyIcon from '@/components/Copy/Copy.vue';
+import copy from '@/helpers/copy.js';
 
 export default {
   name: 'AddressSelect',
@@ -190,7 +181,8 @@ export default {
   },
   components: {
     blockie: Blockie,
-    toast: Toast
+    toast: Toast,
+    copy: CopyIcon
   },
   data() {
     return {
@@ -205,17 +197,17 @@ export default {
     }
   },
   methods: {
+    getRef() {
+      if (this.$refs.addressInput) {
+        return this.$refs.addressInput.$el.querySelector('input')
+      }
+    },
     saveAddress() {
       this.$emit('saveAddress');
     },
     toggle() {
       this.autoSelectMenu = !this.autoSelectMenu;
     },
-    copyToClipboard() {
-      this.$refs.addressInput.$el.querySelector('input').select();
-      document.execCommand('copy');
-      this.$refs.toast.showToast();
-    },
     selectAddress(data) {
       this.autoSelectMenu = false;
       this.addressValue = data.address;

src/components/Badge/Badge.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <span :class="[getBadgeType(), 'text-center', 'white--text', 'px-3', 'py-1', 'badge-type', 'mew-caption']">{{ badgeTitle }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      badgeTypes: {
+        warning: 'warning'
+      }
+    }
+  },
+  props: {
+    /**
+     * Badge types: 'txIn', 'txOut', 'swap, 'error', 'warning'
+     */
+    badgeType: {
+      type: String,
+      default: ''
+    },    
+    /**
+     * Badge title
+     */
+    badgeTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    getBadgeType() {
+      if (this.badgeType.toLowerCase() === this.badgeTypes.warning ) {
+        return 'warning darken-2';
+      }
+      return this.badgeType;
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.badge-type {
+  border-radius: 4px;
+}
+</style>

src/components/Copy/Copy.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <v-tooltip
+      content-class="tooltip-inner"
+      color="titlePrimary--text"
+      top
+    >
+      <template v-slot:activator="{ on }">
+        <v-icon
+          class="copy-icon mr-3 basic--text"
+          v-on="on"
+          @click="copyToClipboard"
+        >
+          mdi-content-copy
+        </v-icon> 
+      </template>
+      <span>{{ tooltip }}</span>
+    </v-tooltip>
+    <toast
+      ref="toast"
+      :duration="2000"
+      toast-type="success"
+      :text="successToast"
+    />
+  </div>
+</template>
+
+<script>
+import copy from '@/helpers/copy.js';
+import Toast from '@/components/Toast/Toast.vue';
+
+export default {
+  components: {
+    'toast': Toast
+  },
+  props: {
+    /**
+     * Pass true if you are using $ref to select the element
+     */
+    isRef: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The ref or id of the element to copy
+     */
+    copyId: {
+      type: [String, HTMLInputElement],
+      default: ''
+    },
+    /**
+     * The tooltip text
+     */
+    tooltip: {
+      type: String,
+      default: 'Copy'
+    },
+    /**
+     * The toast text after successfully copying
+     */
+    successToast: {
+      type: String,
+      default: 'Copied!'
+    }
+  },
+  methods: {
+   copyToClipboard() {
+      copy(this.copyId, this.isRef)
+      this.$refs.toast.showToast();
+    }
+  }
+}
+</script>

src/components/MewBanner/MewBanner.vue

@@ -68,7 +68,8 @@ export default {
   background-size: cover;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
-  min-height: 190px;
+  min-height: 150px;
+  height: 100%;
 
   .exit-container {
     text-align: right;

src/components/MewExpandPanel/MewExpandPanel.vue

@@ -12,7 +12,7 @@
       <v-divider v-if="hasDividers" />
       <v-expansion-panel-header
         :class="['titlePrimary--text', 'mew-heading-3', isToggle ? 'pa-3' : 'pa-5']"
-        :color="colorTheme"
+        :color="item.colorTheme"
       > 
         <div class="header-container">
           <span :class="['ml-2','mew-heading-3', item.tooltip? 'd-flex align-center' :'']"> 
@@ -24,9 +24,9 @@
             />
           </span>
           <span
-            v-if="!item.tooltip"
-            :class="[warningBadge.color, 'ml-2', 'text-center', 'white--text', 'px-2', 'py-1', 'badge-type', 'mew-caption']"
-          >{{ warningBadge.text }}</span>
+            v-if="!item.tooltip && item.warningBadge"
+            :class="[item.warningBadge.color, 'ml-2', 'text-center', 'white--text', 'px-2', 'py-1', 'badge-type', 'mew-caption']"
+          >{{ item.warningBadge.text }}</span>
         </div>
 
         <div
@@ -76,22 +76,6 @@ export default {
   },   
 
   props: {
-  /**
-   * Applies a warning badge next to the header.
-   */
-  warningBadge: {
-    type: Object,
-    default: function() {
-      return {color: '' , text: ''}
-    }
-  },
-  /**
-   * Applies a background color.
-   */
-  colorTheme: {
-    type: String,
-    default: 'white'
-  },
   /**
    * Applies dividers to the expand panel.
    */

src/components/MewInput/MewInput.vue

@@ -5,7 +5,8 @@
       :disabled="disabled"
       :label="label === '' || isSearch ? '' : label"
       :placeholder="placeholder"
-      outlined
+      :outlined="!hasNoBorder"
+      :solo="hasNoBorder"
       color="titlePrimary"
       v-model="inputValue"
       :hint="hint"
@@ -21,6 +22,13 @@
 export default {
   name: 'MewInput',
   props: {
+    /**
+     * Disables the input.
+     */
+    hasNoBorder: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Disables the input.
      */

src/components/MewNotification/MewNotification.vue

@@ -90,14 +90,14 @@
 </template>
 
 <script>
-import TxBadge from '@/components/TxBadge/TxBadge.vue';
+import Badge from '@/components/Badge/Badge.vue';
 import Blockie from '@/components/Blockie/Blockie.vue';
 import TransformHash from '@/components/TransformHash/TransformHash.vue';
 
 export default {
   name: 'MewNotification',
   components: {
-    'tx-badge': TxBadge,
+    'tx-badge': Badge,
     'blockie': Blockie,
     'transform-hash': TransformHash
   },