@magicgol/polyjuice 0.14.0 → 0.14.1

package/.storybook/main.js

@@ -9,12 +9,4 @@ module.exports = {
     '@storybook/preset-scss',
   ],
   'framework': '@storybook/vue',
-  "previewHead": (head) => (`
-    ${head}
-    <style>
-      html, body {
-        background: #eee;
-      }
-    </style>
-  `),
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/components/image/profile-image/ProfileImage.stories.js

@@ -8,7 +8,7 @@ export default {
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['large', 'normal', 'small', 'x-small'],
+      options: ['huge', 'large', 'normal', 'small', 'x-small'],
       defaultValue: 'normal'
     },
     liveBadge: {
@@ -48,12 +48,13 @@ export const Large = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Large.args = {
   name: 'VdF',
-  size: 'large',
+  size: 'large'
 };
 
 export const Online = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Online.args = {
   online: true,
-  name: 'VdF'
+  name: 'VdF',
+  liveBadge: true
 };

package/src/components/image/profile-image/ProfileImage.vue

@@ -46,7 +46,7 @@ export default {
       type: String,
       default: 'normal',
       validator: function (value) {
-        return ['large', 'normal', 'small', 'x-small'].indexOf(value) !== -1;
+        return ['huge', 'large', 'normal', 'small', 'x-small'].indexOf(value) !== -1;
       },
     },
     liveBadge: {
@@ -67,6 +67,7 @@ export default {
         'mg-profile-image--small': this.size === 'small',
         'mg-profile-image--normal': this.size === 'normal',
         'mg-profile-image--large': this.size === 'large',
+        'mg-profile-image--huge': this.size === 'huge',
         'mg-profile-image--online': this.online === true,
         'mg-profile-image--offline': this.online === false,
       };
@@ -80,6 +81,7 @@ export default {
 
   .mg-profile-image {
     border-radius: 50%;
+    display: inline-flex;
     font-family: 'Ubuntu', sans-serif;
     font-weight: 600;
 
@@ -111,6 +113,13 @@ export default {
       width: 5rem;
     }
 
+    &--huge {
+      height: 6.25rem;
+      min-width: 6.25rem;
+      font-size: 2.5rem;
+      width: 6.25rem;
+    }
+
     .mg-acronym {
       background-color: #5770bc;
       border-radius: 50%;