add updates for token container

CHANGELOG.md

@@ -0,0 +1,11 @@
+### Release 0.7.19-beta
+* added mew input hover state and added slot prependInnerIcon which prepends content at the beginning of the input [233](https://github.com/MyEtherWallet/mew-components/pull/233)
+
+### Release 0.7.18-beta
+
+### feature
+
+* added mew menu item slot, removed line heights from typography, added branding [#232]https://github.com/MyEtherWallet/mew-components/pull/232)
+* added stakewise icons [#229]https://github.com/MyEtherWallet/mew-components/pull/229
+
+

src/components/MewTokenContainer/MewTokenContainer.vue

@@ -4,61 +4,151 @@
   Mew Token Container 
 =====================================================================================
 -->
-  <img
-    :height="getSize()"
-    :src="icon ? icon : placeholder"
-    alt="icon"
+  <div
+    :style="'height:' + getSize + ';width:' + getSize"
+    class="mew-token-container"
   >
+    <!--
+=====================================================================================
+ Loading State
+=====================================================================================
+-->
+    <v-skeleton-loader
+      class="token-skeleton"
+      v-if="loading"
+      :height="getSize"
+      :width="getSize"
+      type="avatar"
+    />
+    <!--
+=====================================================================================
+  Img
+=====================================================================================
+-->
+    <img
+      v-if="!loading && img"
+      :height="getSize"
+      :src="img"
+      alt="mew-token"
+      loading="lazy"
+    />
+    <!--
+=====================================================================================
+  Img Placeholder
+=====================================================================================
+-->
+    <span :class="['d-flex align-center justify-center full-height textLight--text text-uppercase font-weight-medium', getFontClass]" v-if="!loading && !img">
+      {{ getPlaceholderText }}
+    </span>
+  </div>
 </template>
 
 
 
 <script>
-import placeholder from '@/assets/images/icons/footer/eth.png';
+import placeholder from "@/assets/images/icons/eth-dark-navy.svg";
 
 export default {
-  name: 'MewTokenContainer',
+  name: "MewTokenContainer",
   data() {
     return {
       placeholder: placeholder,
       sizeOptions: {
-        small: 'small',
-        medium: 'medium',
-        large: 'large'
-      }
-    }
+        small: "small",
+        medium: "medium",
+        large: "large",
+      },
+    };
   },
   props: {
     /**
-     * Accepts small, medium or large sizes. 
+     * Turns on loading state if true.
+     */
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Accepts small, medium or large sizes.
      */
     size: {
       type: String,
-      default: 'small'
+      default: "small",
     },
     /**
-     * Icon url
+     * Token name. Used for placeholder if there is no icon img.
      */
-    icon: {
-      type: [ String, Array],
-      default: ''
-    }
+    name: {
+      type: String,
+      default: "MEW",
+    },
+    /**
+     * Token Icon img src
+     */
+    img: {
+      type: [String, Array],
+      default: "",
+    },
   },
-  methods: {
-    getSize() {
+  computed: {
+    /**
+     * @returns mew typography font class.
+     * based on prop size.
+     */
+    getFontClass() {
       if (this.size.toLowerCase() === this.sizeOptions.small) {
-        return 30;
+        return 'mew-label';
       }
 
       if (this.size.toLowerCase() === this.sizeOptions.medium) {
-        return 40; 
+        return "mew-body";
+      }
+
+      return "mew-heading-1";
+    },
+    /**
+     * @returns placeholder text
+     * which is the first two chars of the token name.
+     */
+    getPlaceholderText() {
+      return this.name.slice(0, 2);
+    },
+    /**
+     * @returns size in pxs.
+     * returns large as default.
+     */
+    getSize() {
+      if (this.size.toLowerCase() === this.sizeOptions.small) {
+        return "24px";
       }
 
       if (this.size.toLowerCase() === this.sizeOptions.medium) {
-        return 50; 
+        return "32px";
       }
+
+      return "52px";
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.mew-token-container {
+  background-color: var(--v-white-base);
+  border-radius: 50%;
+  box-shadow: inset 0px 0px 2px rgba(25, 33, 51, 0.16);
+}
+</style>
+<style lang="scss">
+/**
+  * has to be global styles to override vuetify
+  */
+.mew-token-container {
+  .token-skeleton {
+    .v-skeleton-loader__avatar {
+      background-color: var(--v-greyLight-base);
+      max-height: 100%;
+      max-width: 100%;
     }
   }
 }
-
-</script>
+</style>

stories/MewTokenContainer/MewTokenContainer.stories.js

@@ -2,6 +2,7 @@ import {
   withKnobs,
   boolean,
   optionsKnob,
+  text,
   files
 } from '@storybook/addon-knobs';
 import MewTokenContainer from '@/components/MewTokenContainer/MewTokenContainer.vue';
@@ -34,8 +35,14 @@ export const mewTokenContainer = () => ({
     size: {
       default: optionsKnob('size', sizeOptions, sizeOptions.small, { display: 'inline-radio' })
     },
-    icon: {
-      default: files('icon', '.png, .svg', '')
+    img: {
+      default: files('img', '.png, .svg', '')
+    },
+    loading: {
+      default: boolean('loading', false)
+    },
+    name: {
+      default: text('name', 'MEW')
     }
   },
   watch: {
@@ -48,7 +55,9 @@ export const mewTokenContainer = () => ({
     <br />
     <mew-token-container
       :size="size"
-      :icon="icon"
+      :img="img"
+      :name="name"
+      :loading="loading"
     />
   </div>`
 });