Merge pull request #91 from jamesplease/avatars

adding Avatar component and docs

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### v0.4.0 (2018/5/24)
+
+* Introduces the Avatar component
+
 ### v0.3.1 (2018/5/23)
 
 * Update the way that the Switch focus state is rendered

docs/components.js

@@ -1,4 +1,12 @@
 export default [
+  {
+    name: 'Avatar',
+    url: 'avatar',
+    componentKey: 'avatar',
+    description:
+      'An Avatar is an image that repesents the user. If no image is present it will show the initials.',
+    component: 'src/components/component-doc',
+  },
   {
     name: 'Button',
     url: 'button',

docs/examples/avatar.js

@@ -0,0 +1,7 @@
+class AvatarExample extends Component {
+  render() {
+    return <Avatar image="https://randomuser.me/api/portraits/women/50.jpg" />;
+  }
+}
+
+return <AvatarExample />;

docs/package.json

@@ -20,7 +20,7 @@
     "codemirror": "^5.36.0",
     "fetch-dedupe": "^3.0.0",
     "highlight.js": "^9.12.0",
-    "materialish": "0.3.1",
+    "materialish": "0.4.0",
     "no-scroll": "^2.1.1",
     "prop-types": "^15.6.1",
     "react": "^16.0.0",

docs/readmes/avatar.md

@@ -0,0 +1,24 @@
+## Usage
+
+```jsx
+import { Avatar } from 'materialish';
+import 'materialish/avatar.css';
+```
+
+## Props
+
+| Prop Name | Default Value | Required | Description                                              |
+| --------- | ------------- | -------- | -------------------------------------------------------- |
+| className |               | No       | Additional class name(s) to add to the Avatar            |
+| image     |               | No       | The URL for the user's picture                           |
+| initials  |               | No       | The user's initials                                      |
+| ...rest   |               | No       | Other props are placed on the root element of the Avatar |
+
+## CSS Variables
+
+| Variable                    | Default Value | Description                                                            |
+| --------------------------- | ------------- | ---------------------------------------------------------------------- |
+| --mt-baseFontSize           | 1rem          | The text size and dimensions of the avatar are based off of this value |
+| --mt-fontFamily             | 'Roboto'      | The font family to use for text                                        |
+| --mt-avatar-backgroundColor | #ccc          | The background color of the avatar                                     |
+| --mt-avatar-color           | #333          | The text color of the avatar                                           |

docs/src/common/utils/load-materialish-styles.js

@@ -1,3 +1,4 @@
+import '../../styles/npm-package-styles/avatar.css';
 import '../../styles/npm-package-styles/button.css';
 import '../../styles/npm-package-styles/ripple.css';
 import '../../styles/npm-package-styles/checkbox.css';

docs/static.config.js

@@ -8,12 +8,14 @@ const homeMarkdown = fs.readFileSync('./src/home/index.md', {
 });
 
 const readmes = {
+  avatar: fs.readFileSync('./readmes/avatar.md', { encoding: 'utf-8' }),
   button: fs.readFileSync('./readmes/button.md', { encoding: 'utf-8' }),
   checkbox: fs.readFileSync('./readmes/checkbox.md', { encoding: 'utf-8' }),
   switch: fs.readFileSync('./readmes/switch.md', { encoding: 'utf-8' }),
 };
 
 const examples = {
+  avatar: fs.readFileSync('./examples/avatar.js', { encoding: 'utf-8' }),
   button: fs.readFileSync('./examples/button.js', { encoding: 'utf-8' }),
   checkbox: fs.readFileSync('./examples/checkbox.js', { encoding: 'utf-8' }),
   switch: fs.readFileSync('./examples/switch.js', { encoding: 'utf-8' }),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "materialish",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "React components that loosely follow Material Design",
   "main": "lib/index.js",
   "module": "es/index.js",

src/avatar/avatar.css

@@ -0,0 +1,34 @@
+.mt-avatar {
+  /*
+    This (ugly) set of variables defines the variable fallback implementation.
+
+    1. If `mt-avatar-backgroundColor` is set, then that will be applied
+    2. Otherwise, `#ccc` will be applied
+  */
+  --_mt-avatar-backgroundColor: var(--mt-avatar-backgroundColor, #ccc);
+  --_mt-avatar-color: var(--mt-avatar-color, #333);
+
+  font-size: var(--mt-baseFontSize, 1rem);
+  font-family: var(--mt-fontFamily, 'Roboto');
+  width: 5em;
+  height: 5em;
+  overflow: hidden;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--_mt-avatar-backgroundColor);
+  color: var(--_mt-avatar-color);
+  vertical-align: middle;
+}
+
+.mt-avatar_image {
+  width: 100%;
+  height: 100%;
+}
+
+.mt-avatar_initials {
+  font-size: 3em;
+  width: 100%;
+  text-align: center;
+}

src/avatar/avatar.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+class Avatar extends Component {
+  render() {
+    const { className = '', image, initials = '', ...props } = this.props;
+
+    return (
+      <div className={`mt-avatar ${className}`} {...props}>
+        {image ? (
+          <img className="mt-avatar_image" src={image} alt="" />
+        ) : (
+          <div className="mt-avatar_initials">{initials}</div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default Avatar;

src/index.js

@@ -2,5 +2,6 @@ import Ripple from './ripple/ripple';
 import Button from './button/button';
 import Checkbox from './checkbox/checkbox';
 import Switch from './switch/switch';
+import Avatar from './avatar/avatar';
 
-export { Button, Checkbox, Ripple, Switch };
+export { Avatar, Button, Checkbox, Ripple, Switch };

stories/avatar.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { setOptions } from '@storybook/addon-options';
+import '../src/avatar/avatar.css';
+import { Avatar } from '../src/index';
+
+setOptions({
+  name: 'Materialish',
+  addonPanelInRight: true,
+});
+
+storiesOf('Avatar', module)
+  .add('Regular', () => (
+    <Avatar
+      image="https://randomuser.me/api/portraits/women/50.jpg"
+      onClick={action('clicked')}
+    />
+  ))
+  .add('With Initials', () => (
+    <Avatar initials="JP" onClick={action('clicked')} />
+  ));