Avatar Component

- Creating Avatar component and adding to showcase
- Creating a composer file and adding class to vertically align content centrally

ui/src/components/avatar/index.js

@@ -0,0 +1,50 @@
+// TODO: use a checkbox
+
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Avatar = ({
+  image,
+  name,
+  className,
+  style
+}) => {
+
+  const cn = classNames(
+    className,
+    styles.avatar
+  );
+
+  const fill = () => {
+    if ( image ) {
+      return (
+        <img
+          alt={name}
+          className={styles.picture}
+          src={image}
+          />
+      );
+    } else {
+      const letter = name.split('')[0];
+      return (
+          <p className={styles.letter}>{letter}</p>
+      );
+    }
+  }
+
+  return (
+    <div className={cn}>
+      {fill()}
+    </div>
+  );
+};
+
+Avatar.propTypes = {
+  className: React.PropTypes.string,
+  image: React.PropTypes.string,
+  name: React.PropTypes.string,
+  style: React.PropTypes.object
+};
+
+module.exports = Avatar;

ui/src/components/avatar/readme.md

@@ -0,0 +1,41 @@
+# `<Avatar>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Avatar = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Avatar name='Alex' />
+      </Column>
+      <Column>
+        <Avatar name='Alex' image='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Avatar = require('ui/avatar');
+
+module.exports = () => {
+  return (
+    <Avatar name='Alex' />
+    <Avatar name='Alex' image='path/to/image.png' />
+  );
+}
+```

ui/src/components/avatar/style.css

@@ -0,0 +1,19 @@
+.avatar {
+  background: red;
+  border-radius: 50%;
+  height: remCalc(50);
+  overflow: hidden;
+  text-align: center;
+  width: remCalc(50);
+  position: relative;
+}
+
+.letter {
+  font-size: 2rem;
+}
+
+.picture {
+  max-width: 60%;
+
+  composes: verticle_align_center from '../../util/composers.css';
+}

ui/src/docs.js

@@ -5,6 +5,7 @@ module.exports = {
     Layout: require('./guidelines/layout.md')
   },
   Components: {
+    Avatar: require('./components/avatar/readme.md'),
     Base: require('./components/base/readme.md'),
     Container: require('./components/container/readme.md'),
     Row: require('./components/row/readme.md'),

ui/src/index.js

@@ -1,4 +1,5 @@
 module.exports = {
+  Avatar: require('./components/avatar'),
   Base: require('./components/base'),
   Button: require('./components/button'),
   Checkbox: require('./components/checkbox'),

ui/src/util/composers.css

@@ -0,0 +1,8 @@
+.verticle_align_center {
+  /* Need to palce position:relative on parent*/
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}