Avatar.js

import React, { PropTypes } from 'react';
import styled from 'styled-components';
import { base as baseTheme } from '../../../cl-themes/src';
import { sizes, userRoles } from '../constants';
import Image from '../Image';

const getUserRoleColour = ({ user, theme }) => {
  if (user.role === 'staff') {
    return theme.palette.role.staff;
  }

  return theme.palette.role.participant;
};

const Wrapper = ({ user, ...props }) => (
  <Image
    bordered
    src={user.avatar}
    {...props}
    data-role="avatar"
    alt="avatar"
  />
);

const Avatar = styled(Wrapper)`
  border-radius: 50%;
  border-color: ${getUserRoleColour};
  border-width: 2px;
  box-sizing: border-box;
`;

Avatar.propTypes = {
  /** An avatar may appear at different sizes. */
  size: PropTypes.oneOf(sizes.labels),

  /** Specifies the user. */
  user: PropTypes.shape({
    /** Specifies the URL of the avatar. */
    avatar: PropTypes.string.isRequired,
    /** Specifies the user role */
    role: PropTypes.oneOf(userRoles),
  }),

  /** Specifies the theme. */
  theme: PropTypes.shape({
    palette: PropTypes.object.isRequired,
  }).isRequired,
};

Avatar.defaultProps = {
  size: 'tiny',
  theme: baseTheme,
};

export default Avatar;