Avatar.styled.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 }) => {
  console.log('user', user);
  console.log('props', props);

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

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;

Avatar.withTheme.js

import R from 'ramda';
import React, { PropTypes } from 'react';
import styled, { withTheme } 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 = styled(Image)`
  border-radius: 50%;
  border-color: ${R.prop('borderColour')};
  border-width: 2px;
  box-sizing: border-box;
`;

const Avatar = ({ user, theme, ...props }) => {
  console.log('user', user);
  console.log('theme', theme.palette.role);

  return (
    <Wrapper
      bordered
      data-role="avatar"
      alt="avatar"
      src={user.avatar}
      borderColour={getUserRoleColour(user, theme)}
      theme={theme}
      {...props}
    />
  );
};

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 withTheme(Avatar);

Image.js

import { PropTypes } from 'react';
import styled, { css } from 'styled-components';
import { ifProp } from 'styled-tools';
import { sizes } from '../constants/';
import colours from '../colours';

const getBorder = (colour) => `border: 1px solid ${colour}`;
const getCircularBorder = () => 'border-radius: 50%';

const addBorder = css`
  ${ifProp('bordered', getBorder(colours.gainsboro))}
`;

const addCircularBorder = css`
  ${ifProp('circular', getCircularBorder())}
`;

const getHeight = ({ size }) => sizes.values[size];

const Image = styled.img`
  ${addBorder};
  ${addCircularBorder};
  display: inline-block;
  height: ${getHeight};
  width: auto;
`;

Image.propTypes = {
  /** An image may include a border to emphasize the edges of white or
  *   transparent content. */
  bordered: PropTypes.bool,

  /** An image may appear circular. */
  circular: PropTypes.bool,

  /** An image may appear at different sizes. */
  size: PropTypes.oneOf(sizes.labels),

  /** Specifies the URL of the image. */
  src: PropTypes.string.isRequired
};

// TODO: Decide if a broken image be rendered if src isn't provided?
Image.defaultProps = {
  size: 'medium'
};

export default Image;