Feat/Avatar - support multiple Badge positions (#511)

* Added 2 remaning badge positionings

* Refactored badge positioning logic to cater multiple positions

* Added example for all Badge positions

Author: ArnonZ

demo/src/screens/componentScreens/AvatarsScreen.js

@@ -26,15 +26,18 @@ const examples = [
         'https://lh3.googleusercontent.com/-cw77lUnOvmI/AAAAAAAAAAI/AAAAAAAAAAA/WMNck32dKbc/s181-c/104220521160525129167.jpg',
     },
     badgeProps: {size: 'pimpleBig', backgroundColor: Colors.yellow30},
+    badgePosition: 'BOTTOM_RIGHT',
   },
 
   {
-    title: 'Smaller size',
+    title: 'Smaller size, Badge ("offline")',
     size: 40,
     imageSource: {
       uri:
         'https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg',
     },
+    badgeProps: {size: 'pimpleBig', backgroundColor: Colors.dark50},
+    badgePosition: 'BOTTOM_LEFT',
   },
   {
     title: 'Image with fade in animation',
@@ -44,14 +47,14 @@ const examples = [
     imageSource: {uri: 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'},
   },
   {
-    title: 'Big pimple, bottom right',
+    title: 'Big pimple',
     size: 70,
     backgroundColor: 'red',
     imageSource: {
       uri: 'https://randomuser.me/api/portraits/women/24.jpg',
     },
     badgeProps: {size: 'pimpleHuge', borderWidth: 0, backgroundColor: onlineColor},
-    badgePosition: 'BOTTOM_RIGHT',
+    badgePosition: 'TOP_LEFT',
   },
   {
     title: 'Icon badge',

src/components/avatar/index.js

@@ -24,7 +24,9 @@ export const STATUS_MODES = {
 
 export const BADGE_POSITIONS = {
   TOP_RIGHT: 'TOP_RIGHT',
+  TOP_LEFT: 'TOP_LEFT',
   BOTTOM_RIGHT: 'BOTTOM_RIGHT',
+  BOTTOM_LEFT: 'BOTTOM_LEFT'
 };
 
 const DEFAULT_BADGE_SIZE = 'pimpleBig';
@@ -59,7 +61,7 @@ export default class Avatar extends PureBaseComponent {
     animate: PropTypes.bool,
     /**
      * Background color for Avatar
-     */
+     */ 
     backgroundColor: PropTypes.string,
     /**
      * Badge location on Avatar
@@ -220,18 +222,10 @@ export default class Avatar extends PureBaseComponent {
     const x = Math.sqrt(radius ** 2 * 2);
     const y = x - radius;
     const shift = Math.sqrt(y ** 2 / 2) - (BADGE_SIZES[this.getBadgeSize()] + this.getBadgeBorderWidth() * 2) / 2;
+    const badgeLocation = _.split(_.toLower(badgePosition), '_', 2)
+    const badgeAlignment = {position: 'absolute', [badgeLocation[0]]: shift, [badgeLocation[1]]: shift}
 
-    let badgeAlignment = {};
-    switch (badgePosition) {
-      case BADGE_POSITIONS.BOTTOM_RIGHT:
-        badgeAlignment = {bottom: shift, right: shift};
-        break;
-      case BADGE_POSITIONS.TOP_RIGHT:
-      default:
-        badgeAlignment = {top: shift, right: shift};
-        break;
-    }
-    return {position: 'absolute', ...badgeAlignment};
+    return badgeAlignment;
   }
 
   renderBadge() {