Update mew-banner docs

Author: gesseekur

.storybook/main.js

@@ -1,4 +1,4 @@
 module.exports = {
   stories: ['../stories/**/*.stories.(js|mdx)'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-backgrounds/register', '@storybook/addon-docs', '@storybook/addon-knobs/register', '@storybook/addon-viewport/register'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-backgrounds/register', '@storybook/addon-docs', '@storybook/addon-knobs/register', '@storybook/addon-viewport/register', '@storybook/addon-links/register'],
 };

package-lock.json

@@ -53,7 +53,7 @@
     "@storybook/addon-backgrounds": "^5.3.17",
     "@storybook/addon-docs": "^5.3.18",
     "@storybook/addon-knobs": "^5.3.18",
-    "@storybook/addon-links": "^5.3.17",
+    "@storybook/addon-links": "^5.3.19",
     "@storybook/addon-viewport": "^5.3.17",
     "@storybook/addons": "^5.3.17",
     "@storybook/source-loader": "^5.3.17",

package.json

@@ -1,25 +1,31 @@
 <template>
-  <div
-    class="mew-banner full-width font-weight-medium d-flex flex-column align-center justify-center"
+  <v-container
+    class="mew-banner full-width font-weight-medium"
     :style="{backgroundImage: `url(${banner})` }"
   >
-    <div
+    <v-row
       @click="closeBanner"
-      class="cursor-pointer error--text exit-container"
+      class="cursor-pointer error--text exit-container mr-3"
     >
-      <v-icon
-        class="mr-2"
-        color="error"
-      >
-        mdi-close-circle-outline
-      </v-icon>
-      <span>{{ textObj.exit }}</span>
-    </div>
-    <div class="d-flex text-center align-center justify-center white--text flex-column">
-      <span class="mew-subtitle">{{ textObj.title }}</span>
-      <span class="mew-body">{{ textObj.subtext }} </span>
-    </div>
-  </div>
+      <v-col offset-md="6">
+        <v-icon
+          class="mr-2"
+          color="error"
+        >
+          mdi-close-circle-outline
+        </v-icon>
+        <span>{{ textObj.exit }}</span>
+      </v-col>
+    </v-row>
+    <v-row class="banner-content d-flex text-center align-center justify-center white--text flex-column">
+      <v-col class="pa-0">
+        <span class="mew-subtitle">{{ textObj.title }}</span>
+      </v-col>
+      <v-col class="pa-0">
+        <span class="mew-body">{{ textObj.subtext }} </span>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
@@ -59,15 +65,13 @@ export default {
 
 <style lang="scss" scoped>
 .mew-banner {
-  background-size: contain;
+  background-size: cover;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   min-height: 190px;
 
   .exit-container {
-    position: absolute;
-    right: 80px;
-    top: 60px;
+    text-align: right;
   }
 }
 </style>

src/components/MewBanner/MewBanner.vue

@@ -0,0 +1,5 @@
+#story--mewbanner--mew-banner {
+  .v-application {
+    height: 250px;
+  }
+}

stories/MewBanner/MewBanner.scss

@@ -5,11 +5,15 @@ import {
   files
 } from '@storybook/addon-knobs';
 import MewBanner from '@/components/MewBanner/MewBanner.vue';
+import MewBannerDoc from './MewBannerDoc.mdx';
 
 export default {
   title: 'MewBanner',
   parameters: {
-    component: MewBanner
+    component: MewBanner,
+    docs: {
+      page: MewBannerDoc
+    }
   },
   decorators: [withKnobs]
 };

stories/MewBanner/MewBanner.stories.js

@@ -0,0 +1,21 @@
+
+import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import MewBanner from '@/components/MewBanner/MewBanner.vue';
+import './MewBanner.scss'
+
+# MEW Banner
+MEW Banner is used in the dapps module. It acts as a dapp’s screen header. It has one action, close dapp, which will return the user to the Dapps Center screen. The bannerImg prop is used to show the dapp image, with the Image aspect ratios = []. If the image is not passed, the default MEW picture will be displayed. Please refer to the example below.
+<p>*Need: Infographic*</p>
+
+It contains a text object with:
+title: this value is used to display the Dapp’s Name.
+subtext: this value is used to display a short one sentence description about the dapp. 
+exit: this value is used to replace the action button text. The default value is ‘Exit Dapp’.
+
+<br />
+
+## Props
+<Props of={MewBanner} />
+<Preview><Story id="mewbanner--mew-banner" /></Preview>
+Codepen: <a href="https://codepen.io/gesseekur/pen/jOWGeeL?editors=1111" id="Bar">Click here</a>
+

stories/MewBanner/MewBannerDoc.mdx

@@ -2,7 +2,7 @@ import { Props } from '@storybook/addon-docs/blocks'
 import MewButton from '@/components/MewButton/MewButton.vue';
 import defaultBtn from './screenshots/default-btn.png';
 
-# MEW Button Docs
+# MEW Button 
 
 The mew-button component replaces Vuetify v-btn button with MEW theme options and additional props. This is a flex component with minimum width 64px, centered text and font Size: 14px.