From b3bde1aa2a844fd68514ae6984587f00bd685b89 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 15 Mar 2019 11:24:37 +0100
Subject: [PATCH] Added fixed size to avatar component

---
 .../components/data-display/Avatar/Avatar.vue | 13 +++++-
 .../components/data-display/Avatar/demo.md    | 17 +++++---
 .../components/data-display/Avatar/style.scss | 43 +++++++++++++++----
 src/system/tokens/size.yml                    | 10 +++++
 4 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/src/system/components/data-display/Avatar/Avatar.vue b/src/system/components/data-display/Avatar/Avatar.vue
index 308e6efd4..994780f50 100644
--- a/src/system/components/data-display/Avatar/Avatar.vue
+++ b/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 }
   },
diff --git a/src/system/components/data-display/Avatar/demo.md b/src/system/components/data-display/Avatar/demo.md
index 384d2e09f..11b89bb01 100644
--- a/src/system/components/data-display/Avatar/demo.md
+++ b/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 
diff --git a/src/system/components/data-display/Avatar/style.scss b/src/system/components/data-display/Avatar/style.scss
index 61ca5420e..3e5ef0163 100644
--- a/src/system/components/data-display/Avatar/style.scss
+++ b/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;
+    }
   }
 }
diff --git a/src/system/tokens/size.yml b/src/system/tokens/size.yml
index 933b70e6f..c7a1e7a0d 100644
--- a/src/system/tokens/size.yml
+++ b/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