Added fixed size to avatar component

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

@@ -2,6 +2,7 @@
   <div
     class="ds-avatar"
     :class="[
+      `ds-size-${this.size}`,
       isOnline && 'is-online'
     ]"
     :style="styles"
@@ -34,7 +35,17 @@ export default {
   props: {
     backgroundColor: { type: String, default: null },
     name: { type: String, default: 'Anonymus' },
-    size: { type: [Number, String], default: '32px' },
+    /**
+     * The size used for the avatar.
+     * @options small|base|large
+     */
+    size: {
+      type: String,
+      default: 'base',
+      validator: value => {
+        return value.match(/(small|base|large|x-large)/)
+      }
+    },
     image: { type: String, default: null },
     isOnline: { type: Boolean, default: false }
   },

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

@@ -6,14 +6,17 @@
   image="https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg" />
 ```
 
-## Size
+## Sizes
 
 ```html
-<ds-avatar 
-  name="Hans"
-  image="https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg"
-  size="60px" 
-/>
+<ds-avatar :is-online="true" size="small" name="Hans Peter"></ds-avatar>
+<ds-avatar :is-online="true" size="base" name="Hans Peter"></ds-avatar>
+<ds-avatar :is-online="true" size="large" name="Hans Peter"></ds-avatar>
+<ds-avatar :is-online="true" size="x-large" name="Hans Peter"></ds-avatar>
+<ds-avatar :is-online="true" size="x-large"></ds-avatar>
+<ds-avatar :is-online="true" size="large"></ds-avatar>
+<ds-avatar :is-online="true" size="base"></ds-avatar>
+<ds-avatar :is-online="true" size="small"></ds-avatar>
 ```
 
 ## Broken Image
@@ -25,7 +28,7 @@
 />
 ```
 
-## Anonymous
+## Anonymus
 
 ```html
 <ds-avatar 

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

@@ -8,10 +8,6 @@
   min-width: 22px;
   text-align: center;
 
-  .ds-flex-item {
-    padding-top: 0.1em;
-  }
-
   &::after {
     content: "";
     position: absolute;
@@ -28,15 +24,12 @@
     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;
+    z-index: 1;
   }
 
   img {
@@ -49,6 +42,38 @@
   }
 
   .ds-icon {
-    margin-top: -0.2em;
+    margin-top: -0.1em;
+  }
+
+  &.ds-size-small {
+    width: $size-avatar-small;
+    height: $size-avatar-small;
+    font-size: 0.8em;
+
+    &.is-online::before {
+      border-width: 1px;
+    }
+  }
+  &.ds-size-base {
+    border-width: 1px;
+    width: $size-avatar-base;
+    height: $size-avatar-base;
+
+  }
+  &.ds-size-large {
+    width: $size-avatar-large;
+    height: $size-avatar-large;
+    font-size: 1.5em;
+  }
+  &.ds-size-x-large {
+    width: $size-avatar-x-large;
+    height: $size-avatar-x-large;
+    font-size: 3em;
+
+    &.is-online::before {
+      height: $space-large;
+      width: $space-large;
+      border-width: 3px;
+    }
   }
 }

src/system/tokens/size.yml

@@ -15,6 +15,16 @@ props:
     value: "44px"
   - name: size-height-footer
     value: "64px"
+
+  - name: size-avatar-small
+    value: "34px"
+  - name: size-avatar-base
+    value: "44px"
+  - name: size-avatar-large
+    value: "64px"
+  - name: size-avatar-x-large
+    value: "114px"
+
 global:
   type: number
   category: size