Migrate Avatar to themr

components/avatar/Avatar.js

@@ -1,24 +1,27 @@
 import React, {PropTypes} from 'react';
+import { themr } from 'react-css-themr';
 import FontIcon from '../font_icon';
-import style from './style';
 
-const Avatar = ({children, className, icon, image, title, ...other}) => {
-  return (
-    <div data-react-toolbox='avatar' className={`${style.avatar} ${className}`} {...other}>
-      {children}
-      {typeof image === 'string' ? <img className={style.image} src={image} title={title} /> : image}
-      {typeof icon === 'string' ? <FontIcon className={style.letter} value={icon} /> : icon}
-      {title ? <span className={style.letter}>{title[0]}</span> : null}
-    </div>
-  );
-};
+const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
+  <div data-react-toolbox='avatar' className={`${theme.avatar} ${className}`} {...other}>
+    {children}
+    {typeof image === 'string' ? <img className={theme.image} src={image} title={title} /> : image}
+    {typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
+    {title ? <span className={theme.letter}>{title[0]}</span> : null}
+  </div>
+);
 
 Avatar.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  theme: React.PropTypes.shape({
+    avatar: React.PropTypes.string.isRequired,
+    image: React.PropTypes.string.isRequired,
+    letter: React.PropTypes.string.isRequired
+  }),
   title: PropTypes.string
 };
 
-export default Avatar;
+export default themr('ToolboxAvatar')(Avatar);

components/avatar/readme.md

@@ -5,6 +5,7 @@ Avatars can be used to represent people. This offer users the ability to persona
 <!-- example -->
 ```jsx
 import Avatar from 'react-toolbox/lib/avatar';
+import theme from 'react-toolbox/lib/avatar/theme';
 
 const GithubIcon = () => (
   <svg viewBox="0 0 284 277">
@@ -14,11 +15,11 @@ const GithubIcon = () => (
 
 const AvatarTest = () => (
   <div>
-    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
-    <Avatar icon={<GithubIcon />}/>
-    <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
-    <Avatar title="Javier" image="https://placeimg.com/80/80/animals"/>
-    <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
+    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" theme={theme} />
+    <Avatar icon={<GithubIcon />} theme={theme} />
+    <Avatar theme={theme}><img src="https://placeimg.com/80/80/animals"/></Avatar>
+    <Avatar title="Javier" image="https://placeimg.com/80/80/animals" theme={theme} />
+    <Avatar style={{backgroundColor: 'yellowgreen'}} theme={theme}><GithubIcon /></Avatar>
   </div>
 );
 ```
@@ -32,3 +33,14 @@ const AvatarTest = () => (
 | `icon`        | `String` or `Element`   |             | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
 | `image`       | `String` or `Element`   |             | An image source or an image element. |
 | `title`       | `String`                | `''`        | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |
+| `theme`       | `Object`  | `null`   | Classnames object defining the component style.|
+
+## Theming
+
+You can take a look to the `_config.scss` variables. The theme should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `avatar` | Root class.|
+| `image`  | Used for the image if the avatar has image.|
+| `letter` | Used for the letter in case the avatar has no image.|

components/avatar/theme.scss

@@ -10,6 +10,7 @@
   font-size: $avatar-font-size;
   color: $avatar-color;
   text-align: center;
+  vertical-align: middle;
   background-color: $avatar-background;
   border-radius: 50%;
   > svg {

spec/theme.js

@@ -1,3 +1,7 @@
 import ToolboxAppBar from '../components/app_bar/theme.scss';
+import ToolboxAvatar from '../components/avatar/theme.scss';
 
-export default { ToolboxAppBar };
+export default {
+  ToolboxAppBar,
+  ToolboxAvatar
+};