Avatar component (#41)

* Avatar component

* reference images

* readme

* WW

* updated props, accessible text via ScreanreaderText component

* cleanup

* story cleanup

* test cleanup

* CSS cleanup

* story cleanup

* reference images without the extra margins

* Updating Avatar asset and link to Zeplin

* Adding a rule to cover small badges also for small avatars

* ref images for small badge size

README.md

@@ -40,3 +40,7 @@ UI Component Framework for Yammer.com. This is built with React on top of [Fabri
 4. Finalize a Docker container to be used for all nodejs builds + travis
 5. Auto-deploy storybook-static to github pages on merge-to-master. Look into [Storybook Deployer](https://github.com/storybooks/storybook-deployer)
 6. Build a storybook addon or some other way to auto-document each component's props interface. [Fabric's docs](https://dev.office.com/fabric#/components) are a good example, but their solution is hardcoded into their package :(
+
+
+## Other notes
+* Some example images are being used from [Pexels.com](https://www.pexels.com). They are made available under the [CC0 License](https://www.pexels.com/photo-license/) license and no attribution is required.

assets/README.md

@@ -13,11 +13,7 @@ If a component needs to be modified, Yammer UX will update the graphic and indic
 
 ## Components
 
-+ [Avatar User](https://app.zeplin.io/project/5907d6451d2b06c6b36b2852/screen/5914ae1eceaa9af29a484d74)
-
-+ [Avatar Group](https://app.zeplin.io/project/5907d6451d2b06c6b36b2852/screen/5914ae1eceaa9af29a484d2b)
-
-+ [Avatar Connector](https://app.zeplin.io/project/5907d6451d2b06c6b36b2852/screen/5914ae1e3def3b002032ab0e)
++ [Avatar](https://zpl.io/Z2hSoji)
 
 + [Text](https://app.zeplin.io/project/5907d6451d2b06c6b36b2852/screen/5914b0049fdbc6c59b7fd0ea)
 

src/components/Avatar/__snapshots__/avatar.test.tsx.snap

@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Avatar /> accessible text with badge description matches its snapshot 1`] = `
+<div
+  className="y-avatar"
+>
+  <Persona
+    hidePersonaDetails={true}
+    imageUrl="test.jpg"
+    presence={0}
+    primaryText=""
+    size={3}
+  />
+  <ScreenreaderText>
+    NAME - BADGE
+  </ScreenreaderText>
+</div>
+`;
+
+exports[`<Avatar /> accessible text without badge description matches its snapshot 1`] = `
+<div
+  className="y-avatar"
+>
+  <Persona
+    hidePersonaDetails={true}
+    imageUrl="test.jpg"
+    presence={0}
+    primaryText=""
+    size={3}
+  />
+  <ScreenreaderText>
+    NAME
+  </ScreenreaderText>
+</div>
+`;
+
+exports[`<Avatar /> with abbreviated text matches its snapshot 1`] = `
+<div
+  className="y-avatar"
+>
+  <Persona
+    hidePersonaDetails={true}
+    imageInitials="AB"
+    presence={0}
+    primaryText=""
+    size={3}
+  />
+  <ScreenreaderText>
+    NAME
+  </ScreenreaderText>
+</div>
+`;
+
+exports[`<Avatar /> with additional className matches its snapshot 1`] = `
+<div
+  className="y-avatar TEST_CLASSNAME"
+>
+  <Persona
+    hidePersonaDetails={true}
+    imageUrl="test.jpg"
+    presence={0}
+    primaryText=""
+    size={3}
+  />
+  <ScreenreaderText>
+    NAME
+  </ScreenreaderText>
+</div>
+`;
+
+exports[`<Avatar /> with badge content matches its snapshot 1`] = `
+<div
+  className="y-avatar"
+>
+  <Persona
+    hidePersonaDetails={true}
+    imageUrl="test.jpg"
+    presence={0}
+    primaryText=""
+    size={1}
+  />
+  <div
+    className="y-avatar--badge y-avatar__size-xSmall--badge"
+  >
+    <Text>
+      badge
+    </Text>
+  </div>
+  <ScreenreaderText>
+    NAME
+  </ScreenreaderText>
+</div>
+`;
+
+exports[`<Avatar /> with image url matches its snapshot 1`] = `
+<div
+  className="y-avatar"
+>
+  <Persona
+    hidePersonaDetails={true}
+    imageUrl="test.jpg"
+    presence={0}
+    primaryText=""
+    size={3}
+  />
+  <ScreenreaderText>
+    NAME
+  </ScreenreaderText>
+</div>
+`;
+
+exports[`<Avatar /> with long abbreviated text and size XSMALL matches its snapshot 1`] = `
+<div
+  className="y-avatar"
+>
+  <Persona
+    hidePersonaDetails={true}
+    imageInitials="A"
+    presence={0}
+    primaryText=""
+    size={1}
+  />
+  <ScreenreaderText>
+    NAME
+  </ScreenreaderText>
+</div>
+`;
+
+exports[`<Avatar /> with long abbreviated text matches its snapshot 1`] = `
+<div
+  className="y-avatar"
+>
+  <Persona
+    hidePersonaDetails={true}
+    imageInitials="AB"
+    presence={0}
+    primaryText=""
+    size={3}
+  />
+  <ScreenreaderText>
+    NAME
+  </ScreenreaderText>
+</div>
+`;
+
+exports[`<Avatar /> with size matches its snapshot 1`] = `
+<div
+  className="y-avatar"
+>
+  <Persona
+    hidePersonaDetails={true}
+    imageUrl="test.jpg"
+    presence={0}
+    primaryText=""
+    size={5}
+  />
+  <ScreenreaderText>
+    NAME
+  </ScreenreaderText>
+</div>
+`;
+
+exports[`<Avatar /> with soft border type matches its snapshot 1`] = `
+<div
+  className="y-avatar y-avatar__borderType-soft"
+>
+  <Persona
+    hidePersonaDetails={true}
+    imageUrl="test.jpg"
+    presence={0}
+    primaryText=""
+    size={3}
+  />
+  <ScreenreaderText>
+    NAME
+  </ScreenreaderText>
+</div>
+`;

src/components/Avatar/avatar.css

@@ -0,0 +1,29 @@
+.y-avatar {
+  display: inline-block;
+  position: relative;
+}
+
+.y-avatar--badge {
+  position: absolute;
+  height: 20px;
+  width: 20px;
+  bottom: -2px;
+  right: -2px;
+  overflow: hidden;
+  border-radius: 50%;
+  border: solid 2px #fff;
+}
+.y-avatar__size-small--badge,
+.y-avatar__size-xSmall--badge {
+  height: 16px;
+  width: 16px;
+}
+
+/* Fabric CSS overrides */
+ .y-avatar > .ms-Persona {
+   margin: 0;
+ }
+.y-avatar__borderType-soft .ms-Persona-imageArea,
+.y-avatar__borderType-soft .ms-Image {
+  border-radius: 2px;
+}