VHX-1429: Bugfix/missing avatar styles (#100)

* VHX-1429 : Fixing missing default avatar styles

* And adding some generated code

* Bumping version and changelog

* Forgot the package.json version number

* Updating package.lock version

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.6.13
+**2018-03-05**
+* Fixed default avatar styles that did not carry over
+
 ### 1.6.12
 **2018-02-27**
 * Added new default avatar look to Quartz avatars

VERSION

@@ -1 +1 @@
-1.6.12
+1.6.13

app/public/components.css

@@ -120,7 +120,12 @@
   .avatar .default-avatar,
   .new-avatar .avatar-img,
   .new-avatar .default-avatar {
-    line-height: 36px; }
+    line-height: 36px;
+    font-size: 12px; }
+  .avatar .default-avatar,
+  .new-avatar .default-avatar {
+    padding-left: 1px;
+    padding-top: 0px; }
   .avatar.color-blue,
   .new-avatar.color-blue {
     background-color: #0F4E7B; }
@@ -167,7 +172,11 @@
     .avatar.avatar--xsmall .default-avatar,
     .new-avatar.avatar--xsmall .avatar-img,
     .new-avatar.avatar--xsmall .default-avatar {
-      line-height: 24px; }
+      line-height: 24px;
+      font-size: 8px; }
+    .new-avatar.avatar.avatar--xsmall .default-avatar {
+      padding-left: 0px;
+      padding-top: 0px; }
   .avatar.avatar--small,
   .new-avatar.avatar--small {
     width: 36px;
@@ -176,7 +185,11 @@
     .avatar.avatar--small .default-avatar,
     .new-avatar.avatar--small .avatar-img,
     .new-avatar.avatar--small .default-avatar {
-      line-height: 36px; }
+      line-height: 36px;
+      font-size: 12px; }
+    .new-avatar.avatar--small .default-avatar {
+      padding-left: 1px;
+      padding-top: 0px; }
   .avatar.avatar--medium,
   .new-avatar.avatar--medium {
     width: 46px;
@@ -185,7 +198,11 @@
     .avatar.avatar--medium .default-avatar,
     .new-avatar.avatar--medium .avatar-img,
     .new-avatar.avatar--medium .default-avatar {
-      line-height: 46px; }
+      line-height: 46px;
+      font-size: 15px; }
+    .new-avatar.avatar--medium .default-avatar {
+      padding-left: 1px;
+      padding-top: 0px; }
   .avatar.avatar--large,
   .new-avatar.avatar--large {
     width: 60px;
@@ -194,7 +211,11 @@
     .avatar.avatar--large .default-avatar,
     .new-avatar.avatar--large .avatar-img,
     .new-avatar.avatar--large .default-avatar {
-      line-height: 60px; }
+      line-height: 60px;
+      font-size: 20px; }
+    .new-avatar.avatar--large .default-avatar {
+      padding-left: 2px;
+      padding-top: 1px; }
   .avatar.avatar--xlarge,
   .new-avatar.avatar--xlarge {
     width: 80px;
@@ -203,7 +224,11 @@
     .avatar.avatar--xlarge .default-avatar,
     .new-avatar.avatar--xlarge .avatar-img,
     .new-avatar.avatar--xlarge .default-avatar {
-      line-height: 80px; }
+      line-height: 80px;
+      font-size: 26px; }
+    .new-avatar.avatar--xlarge .default-avatar {
+      padding-left: 2px;
+      padding-top: 1px; }
   .avatar.avatar--xxlarge,
   .new-avatar.avatar--xxlarge {
     width: 100px;
@@ -212,13 +237,17 @@
     .avatar.avatar--xxlarge .default-avatar,
     .new-avatar.avatar--xxlarge .avatar-img,
     .new-avatar.avatar--xxlarge .default-avatar {
-      line-height: 100px; }
-
+      line-height: 100px;
+      font-size: 33px; }
+    .new-avatar.avatar--xxlarge .default-avatar {
+      padding-left: 3px;
+      padding-top: 1px; }
 .new-avatar {
   text-align: center; }
   .new-avatar .default-avatar {
     color: #fff;
-    font-weight: bold; }
+    font-weight: bold;
+    display: block; }
 
 .avatar:before {
   color: red;

app/public/quartz.js

@@ -240,13 +240,19 @@ vhxm.components.shared.autosuggest.ui.container = {
 };
 vhxm.components.shared.avatar.ui = {
   view: function view(ctrl, opts) {
-    return m('span.new-avatar.color-teal.avatar--' + (opts.size ? opts.size : 'medium'), [m('span.default-avatar', opts.initial), m('span.avatar-user.user-avatar', {
-      style: {
-        backgroundImage: 'url(' + opts.image + ')'
-      }
-    })]);
+    return m('span.new-avatar.color-teal.avatar--' + (opts.size ? opts.size : 'medium'), [
+      m('span.avatar-user.user-avatar', [
+        m('span.default-avatar', opts.initial), 
+        m('span.avatar-user.user-avatar', {
+          style: {
+            backgroundImage: 'url(' + opts.image + ')'
+          }
+       })
+      ])
+    ]);
   }
-};vhxm.components.shared.checkbox.ui.container = {
+};
+vhxm.components.shared.checkbox.ui.container = {
   view: function view(ctrl, opts) {
     return m('fieldset.checkbox.' + (opts.size ? opts.size : 'medium') + (opts.type === 'toggle' ? '.alt' : ''), [m('input[type=checkbox]', {
       checked: opts.checked,

dist/component-avatar.css

@@ -45,11 +45,14 @@
   border-radius: 50%;
   overflow: hidden;
   z-index: 1; }
-  .avatar .avatar-img,
   .avatar .default-avatar,
-  .new-avatar .avatar-img,
   .new-avatar .default-avatar {
-    line-height: 36px; }
+    line-height: 36px;
+    font-size: 12px; }
+  .avatar .default-avatar,
+  .new-avatar .default-avatar {
+    padding-left: 1px;
+    padding-top: 0px; }
   .avatar.color-blue,
   .new-avatar.color-blue {
     background-color: #0F4E7B; }
@@ -92,62 +95,81 @@
   .new-avatar.avatar--xsmall {
     width: 24px;
     height: 24px; }
-    .avatar.avatar--xsmall .avatar-img,
     .avatar.avatar--xsmall .default-avatar,
-    .new-avatar.avatar--xsmall .avatar-img,
     .new-avatar.avatar--xsmall .default-avatar {
-      line-height: 24px; }
+      line-height: 24px;
+      font-size: 8px; }
+    .avatar.avatar--xsmall .default-avatar,
+    .new-avatar.avatar--xsmall .default-avatar {
+      padding-left: 0px;
+      padding-top: 0px; }
   .avatar.avatar--small,
   .new-avatar.avatar--small {
     width: 36px;
     height: 36px; }
-    .avatar.avatar--small .avatar-img,
     .avatar.avatar--small .default-avatar,
-    .new-avatar.avatar--small .avatar-img,
     .new-avatar.avatar--small .default-avatar {
-      line-height: 36px; }
+      line-height: 36px;
+      font-size: 12px; }
+    .avatar.avatar--small .default-avatar,
+    .new-avatar.avatar--small .default-avatar {
+      padding-left: 1px;
+      padding-top: 0px; }
   .avatar.avatar--medium,
   .new-avatar.avatar--medium {
     width: 46px;
     height: 46px; }
-    .avatar.avatar--medium .avatar-img,
     .avatar.avatar--medium .default-avatar,
-    .new-avatar.avatar--medium .avatar-img,
     .new-avatar.avatar--medium .default-avatar {
-      line-height: 46px; }
+      line-height: 46px;
+      font-size: 15px; }
+    .avatar.avatar--medium .default-avatar,
+    .new-avatar.avatar--medium .default-avatar {
+      padding-left: 1px;
+      padding-top: 0px; }
   .avatar.avatar--large,
   .new-avatar.avatar--large {
     width: 60px;
     height: 60px; }
-    .avatar.avatar--large .avatar-img,
     .avatar.avatar--large .default-avatar,
-    .new-avatar.avatar--large .avatar-img,
     .new-avatar.avatar--large .default-avatar {
-      line-height: 60px; }
+      line-height: 60px;
+      font-size: 20px; }
+    .avatar.avatar--large .default-avatar,
+    .new-avatar.avatar--large .default-avatar {
+      padding-left: 2px;
+      padding-top: 1px; }
   .avatar.avatar--xlarge,
   .new-avatar.avatar--xlarge {
     width: 80px;
     height: 80px; }
-    .avatar.avatar--xlarge .avatar-img,
     .avatar.avatar--xlarge .default-avatar,
-    .new-avatar.avatar--xlarge .avatar-img,
     .new-avatar.avatar--xlarge .default-avatar {
-      line-height: 80px; }
+      line-height: 80px;
+      font-size: 27px; }
+    .avatar.avatar--xlarge .default-avatar,
+    .new-avatar.avatar--xlarge .default-avatar {
+      padding-left: 2px;
+      padding-top: 1px; }
   .avatar.avatar--xxlarge,
   .new-avatar.avatar--xxlarge {
     width: 100px;
     height: 100px; }
-    .avatar.avatar--xxlarge .avatar-img,
     .avatar.avatar--xxlarge .default-avatar,
-    .new-avatar.avatar--xxlarge .avatar-img,
     .new-avatar.avatar--xxlarge .default-avatar {
-      line-height: 100px; }
+      line-height: 100px;
+      font-size: 33px; }
+    .avatar.avatar--xxlarge .default-avatar,
+    .new-avatar.avatar--xxlarge .default-avatar {
+      padding-left: 3px;
+      padding-top: 1px; }
 
 .new-avatar {
   text-align: center; }
   .new-avatar .default-avatar {
     color: #fff;
-    font-weight: bold; }
+    font-weight: bold;
+    display: block; }
 
 .avatar:before {
   color: red;

dist/component-avatar.js

@@ -2,10 +2,10 @@
 
 vhxm.components.shared.avatar.ui = {
   view: function view(ctrl, opts) {
-    return m('span.new-avatar.color-teal.avatar--' + (opts.size ? opts.size : 'medium'), [m('span.default-avatar', opts.initial), m('span.avatar-user.user-avatar', {
+    return m('span.new-avatar.color-teal.avatar--' + (opts.size ? opts.size : 'medium'), [m('span.avatar-user.user-avatar', [m('span.default-avatar', opts.initial), m('span.avatar-user.user-avatar', {
       style: {
         backgroundImage: 'url(' + opts.image + ')'
       }
-    })]);
+    })])]);
   }
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vhx/quartz",
-  "version": "1.6.12",
+  "version": "1.6.13",
   "description": "VHX Style Guide and JS Components.",
   "homepage": "https://github.com/vhx/quartz",
   "author": "VHX",

quartz-js/components/avatar/avatar.ui.js

@@ -1,12 +1,14 @@
 vhxm.components.shared.avatar.ui = {
   view: function(ctrl, opts) {
     return m('span.new-avatar.color-teal.avatar--' + (opts.size ? opts.size : 'medium' ), [
-      m('span.default-avatar', opts.initial),
-      m('span.avatar-user.user-avatar', {
-        style: {
-          backgroundImage: 'url(' + opts.image + ')'
-        }
-      })
+      m('span.avatar-user.user-avatar', [
+        m('span.default-avatar', opts.initial), 
+        m('span.avatar-user.user-avatar', {
+          style: {
+            backgroundImage: 'url(' + opts.image + ')'
+          }
+       })
+      ])
     ]);
   }
 };