extended avatar component

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

@@ -2,26 +2,91 @@
   <div
     class="ds-avatar"
     :style="styles">
-    <img :src="image">
+    <img
+      v-if="!error"
+      :src="image"
+      @error="onError">
+    <ds-flex
+      v-if="!hasImage || error"
+      style="height: 100%">
+      <ds-flex-item center>
+        <template v-if="isAnonymus">
+          <ds-icon name="eye-slash" />
+        </template>
+        <template v-else>
+          {{ userInitials }}
+        </template>
+      </ds-flex-item>
+    </ds-flex>
   </div>
 </template>
 
 <script>
+import helpers from './lib/helpers.js'
+
 export default {
   name: 'DsAvatar',
   props: {
+    backgroundColor: { type: String, default: null },
+    name: { type: String, default: 'Anonymus' },
     size: { type: [Number, String], default: '32px' },
-    image: { type: String, required: true }
+    image: { type: String, default: null }
+  },
+  data() {
+    return {
+      error: false
+    }
   },
   computed: {
+    isAnonymus() {
+      return !this.name || this.name.toLowerCase() === 'anonymus'
+    },
     styles() {
       let size = this.size
       if (Number.isInteger(Number(size))) {
         size = `${size}px`
       }
+      const nummericSize = Number.parseInt(size)
       return {
         width: size,
-        height: size
+        height: size,
+        backgroundColor: this.hasImage ? 'white' : this.background,
+        fontSize: Math.floor(nummericSize / 2.5) + 'px',
+        fontWeight: 'bold',
+        color: this.fontColor
+      }
+    },
+    hasImage() {
+      return Boolean(this.image) && !this.error
+    },
+    userInitials() {
+      return helpers.initials(this.name)
+    },
+    background() {
+      return (
+        this.backgroundColor ||
+        helpers.randomBackgroundColor(
+          this.name.length,
+          helpers.backgroundColors
+        )
+      )
+    },
+    fontColor() {
+      return this.color || helpers.lightenColor(this.background, 200)
+    }
+  },
+  methods: {
+    onError() {
+      this.error = true
+    },
+    updateSize() {
+      if (this.hasImage) {
+        return
+      }
+      try {
+        this.size = this.$refs.avatar.getBoundingClientRect().width
+      } catch (err) {
+        // nothing
       }
     }
   }

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

@@ -1,13 +1,39 @@
 ## Basic usage
 
 ```html
-<ds-avatar image="https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg" />
+<ds-avatar 
+  name="Hans Alba"
+  image="https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg" />
 ```
 
 ## Size
 
 ```html
 <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" />
+```
+
+## Broken Image
+
+```html
+<ds-avatar 
+  name="Tim Hollofield"
+  image="http://not-valid-image-link##.org/image-does-not-exist.jpg" />
+```
+
+## Anonymus
+
+```html
+<ds-avatar 
+  image="http://not-valid-image-link##.org/image-does-not-exist.jpg" />
+```

styleguide/src/system/components/data-display/Avatar/lib/helpers.js

@@ -0,0 +1,65 @@
+export default {
+  backgroundColors: [
+    '#295E87',
+    '#007D93',
+    '#933D86',
+    '#005093',
+    '#4A5580',
+    '#0067A5',
+    '#007D93',
+    '#007A70',
+    '#008F6D',
+    '#008255',
+    '#43913A',
+    '#C61A6A',
+    '#15A748',
+    '#007FBA',
+    '#008AC4',
+    '#E1B424',
+    '#00753C',
+    '#B42554',
+    '#4F3B68',
+    '#EB8B2D',
+    '#DC3E2A',
+    '#A7BE33',
+    '#DF542A',
+    '#00A3DA',
+    '#84BF41'
+  ],
+
+  initials(name) {
+    let un = name || 'Anonymus'
+    let parts = un.split(/[ -]/)
+    let initials = ''
+    for (var i = 0; i < parts.length; i++) {
+      initials += parts[i].charAt(0)
+    }
+    if (initials.length > 3 && initials.search(/[A-Z]/) !== -1) {
+      initials = initials.replace(/[a-z]+/g, '')
+    }
+    initials = initials.substr(0, 3).toUpperCase()
+    return initials
+  },
+  randomBackgroundColor(seed, colors) {
+    return colors[seed % colors.length]
+  },
+  lightenColor(hex, amt) {
+    // From https://css-tricks.com/snippets/javascript/lighten-darken-color/
+    var usePound = false
+    if (hex[0] === '#') {
+      hex = hex.slice(1)
+      usePound = true
+    }
+    var num = parseInt(hex, 16)
+    var r = (num >> 16) + amt
+    if (r > 255) r = 255
+    else if (r < 0) r = 0
+    var b = ((num >> 8) & 0x00ff) + amt
+    if (b > 255) b = 255
+    else if (b < 0) b = 0
+    var g = (num & 0x0000ff) + amt
+    if (g > 255) g = 255
+    else if (g < 0) g = 0
+    return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
+  }
+}

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

@@ -3,9 +3,11 @@
   border-radius: 50%;
   display: inline-block;
   position: relative;
+  padding-top: 0.1em;
   margin-right: $space-xx-small;
   min-height: 22px;
   min-width: 22px;
+  text-align: center;
 
   &::after {
     content: '';
@@ -26,4 +28,8 @@
     object-fit: cover;
     object-position: center;
   }
+
+  .ds-icon {
+    margin-top: -0.2em;
+  }
 }