Fixed avatar and added online status

src/system/components/data-display/Avatar/Avatar.vue

@@ -1,15 +1,15 @@
 <template>
   <div
     class="ds-avatar"
-    :style="styles">
-    <img
-      v-if="!error"
-      :src="image"
-      @error="onError">
+    :class="[
+      isOnline && 'is-online'
+    ]"
+    :style="styles"
+  >
     <ds-flex
       v-if="!hasImage || error"
       style="height: 100%">
-      <ds-flex-item center>
+      <ds-flex-item centered>
         <template v-if="isAnonymus">
           <ds-icon name="eye-slash" />
         </template>
@@ -18,6 +18,11 @@
         </template>
       </ds-flex-item>
     </ds-flex>
+    <img
+      v-if="image && !error"
+      :src="image"
+      @error="onError"
+    >
   </div>
 </template>
 
@@ -30,7 +35,8 @@ export default {
     backgroundColor: { type: String, default: null },
     name: { type: String, default: 'Anonymus' },
     size: { type: [Number, String], default: '32px' },
-    image: { type: String, default: null }
+    image: { type: String, default: null },
+    isOnline: { type: Boolean, default: false }
   },
   data() {
     return {

src/system/components/data-display/Avatar/demo.md

@@ -12,28 +12,33 @@
 <ds-avatar 
   name="Hans"
   image="https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg"
-  size="60px" />
-```
-
-## Without Image
-
-```html
-<ds-avatar 
-  name="Peter Sommerfield"
-  :image="null" />
+  size="60px" 
+/>
 ```
 
 ## Broken Image
 
 ```html
 <ds-avatar 
-  name="Tim Hollofield"
-  image="http://not-valid-image-link##.org/image-does-not-exist.jpg" />
+  name="Peter Sommerfield"
+  image="http://not-valid-image-link.org/image-does-not-exist.jpg" 
+/>
 ```
 
-## Anonymus
+## Anonymous
 
 ```html
 <ds-avatar 
-  image="http://not-valid-image-link##.org/image-does-not-exist.jpg" />
+  image="http://not-valid-image-link##.org/image-does-not-exist.jpg" 
+/>
+```
+
+## Online Status
+
+```html
+<ds-avatar 
+  name="Hans Alba"
+  image="https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg"
+  :is-online="true" 
+/>
 ```

src/system/components/data-display/Avatar/style.scss

@@ -13,7 +13,7 @@
   }
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     width: 100%;
     height: 100%;
@@ -23,6 +23,22 @@
     border-radius: 50%;
   }
 
+  &.is-online::before {
+    content: "";
+    position: absolute;
+    width: 33%;
+    height: 33%;
+    max-width: 15px;
+    max-height: 15px;
+    min-width: 10px;
+    min-height: 10px;
+    bottom: 0;
+    right: 0;
+    border: 2px solid $background-color-base;
+    border-radius: 100%;
+    background-color: $color-success;
+  }
+
   img {
     width: 100%;
     height: 100%;