Merge pull request #55 from UnicornGlobal/dev

v1.1.1 Prep
UnicornGlobal · Dec 17, 2018 · 8a24d82 · 8a24d82
2 parents 6d0b23d + 37ccf0f
commit 8a24d82
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # @unicorn/avatars
 
+[![Build Status](https://travis-ci.com/UnicornGlobal/avatars.svg?branch=dev)](https://travis-ci.com/UnicornGlobal/avatars)
+
 ## Avatar or Initials
 
 Displays either the initials or the image for an avatar.
@@ -58,6 +60,36 @@ You can override the default random colours yourself
 </avatar>
 ```
 
+## Custom Palette
+
+You can add a custom palette on the `palette` prop.
+
+This is the default configuration array.
+
+```
+[
+  '#f44336',
+  '#e91e63',
+  '#9c27b0',
+  '#673ab7',
+  '#3f51b5',
+  '#2196f3',
+  '#03a9f4',
+  '#00bcd4',
+  '#009688',
+  '#4caf50',
+  '#8bc34a',
+  '#cddc39',
+  '#ffeb3b',
+  '#ffc107',
+  '#ff9800',
+  '#ff5722',
+  '#795548',
+  '#9e9e9e',
+  '#607d8b'
+]
+```
+
 ## Details
 
 It uses the hash of the title to derive a number that it uses to select
@@ -68,5 +100,5 @@ the initial in light or dark font.
 
 # Roadmap
 
-- [ ] - Configuree own font
+- [ ] - Configure own font
 - [ ] - More efficient selection algo (needs md5.js atm, would be nice to not have that dependency)
diff --git a/src/AvatarOrInitials.vue b/src/AvatarOrInitials.vue
@@ -27,39 +27,40 @@
 </style>
 
 <script>
-  const md5 = require('md5')
+import md5 from 'md5'
 
-  export default {
-    props: {
-      image: {
-        required: false,
-        default: false
-      },
-      title: {
-        type: String,
-        required: true
-      },
-      size: {
-        required: false,
-        default: 40
-      },
-      round: {
-        type: Boolean,
-        required: false,
-        default: false
-      },
-      backgroundColour: {
-        type: String,
-        required: false
-      },
-      colour: {
-        type: String,
-        required: false
-      }
+export default {
+  props: {
+    image: {
+      required: false,
+      default: false
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    size: {
+      required: false,
+      default: 40
+    },
+    round: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    backgroundColour: {
+      type: String,
+      required: false
     },
-    data() {
-      return {
-        colours: [
+    colour: {
+      type: String,
+      required: false
+    },
+    palette: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
           '#f44336',
           '#e91e63',
           '#9c27b0',
@@ -81,57 +82,58 @@
           '#607d8b'
         ]
       }
-    },
-    methods: {
-      defaultColour() {
-        if (this.colour) {
-          return this.colour
-        }
-
-        const length = this.colours.length
-        const seed = md5(this.title)
-        const selected = seed.replace(/[A-Za-z]/g, '') % length
-        return this.colours[selected]
-      },
-      textColour() {
-        if (this.colour) {
-          return this.colour
-        }
+    }
+  },
+  methods: {
+    defaultColour() {
+      if (this.colour) {
+        return this.colour
+      }
 
-        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.defaultColour())
-        const red = parseInt(result[1], 16)
-        const green = parseInt(result[2], 16)
-        const blue = parseInt(result[3], 16)
-        const luminosity = ((0.299 * red) + (0.587 * green) + (0.114 * blue))
+      const length = this.palette.length
+      const seed = md5(this.title)
+      const selected = seed.replace(/[A-Za-z]/g, '') % length
+      return this.palette[selected]
+    },
+    textColour() {
+      if (this.colour) {
+        return this.colour
+      }
 
-        if (luminosity > 186) {
-          return '#000000'
-        }
+      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.defaultColour())
+      const red = parseInt(result[1], 16)
+      const green = parseInt(result[2], 16)
+      const blue = parseInt(result[3], 16)
+      const luminosity = ((0.299 * red) + (0.587 * green) + (0.114 * blue))
 
-        return '#FFFFFF'
-      },
-      bgColour() {
-        return this.backgroundColour ? this.backgroundColour : this.defaultColour()
+      if (luminosity > 186) {
+        return '#000000'
       }
+
+      return '#FFFFFF'
+    },
+    bgColour() {
+      return this.backgroundColour ? this.backgroundColour : this.defaultColour()
+    }
+  },
+  computed: {
+    width() {
+      return `${this.size}px`
+    },
+    height() {
+      return `${this.size}px`
+    },
+    initials() {
+      return this.title.charAt(0)
+    },
+    initialsStyle() {
+      return `width: ${this.size}px; height: ${this.size}px; border-radius: ${this.size }px; background-color: ${this.bgColour()}; text-transform: uppercase; color: ${this.textColour()}; display: flex; justify-content: center; align-items: center;`
     },
-    computed: {
-      width() {
-        return this.size + 'px'
-      },
-      height() {
-        return this.size + 'px'
-      },
-      initials() {
-        return this.title.charAt(0)
-      },
-      initialsStyle() {
-        return 'width: ' + this.size + 'px; height: ' + this.size + 'px; border-radius: ' + this.size + 'px; background-color: ' + this.bgColour() + '; text-transform: uppercase; color: ' + this.textColour() + '; display: flex; justify-content: center; align-items: center;'
-      },
-      radius() {
-        if (this.round) {
-          return 'border-radius: ' + this.size + 'px'
-        }
+    radius() {
+      if (this.round) {
+        return `border-radius: ${this.size}px`
       }
     }
   }
+}
 </script>