Adds Avatar component

Author: birdofpreyru

README.md

@@ -48,6 +48,7 @@ configurations for [ESLint](https://eslint.org/);
 - [**Webpack Configurations**](docs/webpack-config.md) — Standard configurations for [Webpack](https://webpack.js.org/).
 
 ### <a name="components">Components</a>
+- [**`Avatar`**](docs/avatar.md) &mdash; The standard component for user avatars;
 - [**`Button`**](docs/button.md) &mdash; Handles buttons and button-like links
   (components that look like regular buttons, but behave as links) in the same
   uniform manner;

docs/avatar.md

@@ -0,0 +1,85 @@
+# Avatar
+The standard component for user avatars.
+
+[Example](#example)
+
+**`Why?`** — User avatars are usual elements in the applications we
+create. The component provided by this package separates avatar styling from
+its logic, and ensures that it works the same across our projects.
+
+**Accepted Props:**
+- **`DefaultAvatar`** — *ReactJS Node* — ReactJS component to render
+  as a default avatar image;
+- **`theme`** — *Object* — `react-css-super-themr` map to apply to
+  the `Avatar`. At the moment, only one field is accepted:
+  - **`avatar`** — *String* — CSS class to apply to the rendered
+    avatar;
+- **`url`** — *String* — Optional. URL of the image to render as
+  the user's avatar. When not provided, the `DefaultAvatar` will be rendered
+  instead. Defaults to *null*.
+
+### Example
+First of all, you should wrap the `Avatar` into your own theme and provide
+the default avatar image, e.g.:
+```scss
+// theme.scss
+
+.avatar {
+  border-radius: 16px;
+  height: 32px;
+  width: 32px;
+}
+```
+```jsx
+// MyThemedAvatar.jsx
+
+import React from 'react';
+import { Avatar } from 'topcoder-react-utils';
+import { themr } from 'react-css-super-themr';
+
+import DefaultAvatarImage from './default-avatar-image.svg';
+import theme from './theme.scss';
+
+/* Note that injection of "props" after "DefaultAvatar" props will allow
+ * to override the default image for specific instances, should you need to. */
+export themr('MyThemedAvatar', theme)(props =>
+  <Avatar DefaultAvatar={DefaultAvatarImage} {...props} />);
+```
+
+Now, in your code you can render your themed avatar as:
+```scss
+// style.scss
+
+/* To demonstrate ad-hoc styling, say you need larger size of the avatar
+ * in some specific place. */
+.largeAvatar {
+  border-radius: 128px;
+  height: 256px;
+  width: 256px;
+}
+```
+
+```jsx
+// Example.jsx
+
+import React from 'react';
+import Avatar from './MyThemedAvatar';
+
+/* To demonstrate ad-hoc styling. */
+import style from './style.scss';
+
+export default function Example() {
+  return (
+    <div>
+      {/* Renders default avatar. */}
+      <Avatar />
+
+      {/* Renders the specified avatar image. */}
+      <Avatar url="url/of/the/user/avatar/image.jpg" />
+
+      {/* A large avatar. */}
+      <Avatar theme={{ avatar: style.largeAvatar }} />
+    </div>
+  );
+}
+```

src/index.js

@@ -1,3 +1,4 @@
+import Avatar from 'components/Avatar';
 import Button from 'components/Button';
 import Link from 'components/Link';
 import NavLink from 'components/NavLink';
@@ -6,6 +7,7 @@ import ScalableRect from 'components/ScalableRect';
 import 'styles/global.scss';
 
 export {
+  Avatar,
   Button,
   Link,
   NavLink,

src/shared/components/Avatar.jsx

@@ -0,0 +1,27 @@
+/**
+ * The standard Avatar component.
+ * To use it you will have to properly wrap it with react-css-super-themr,
+ * the component provided here takes care about the code interface and logic
+ * only.
+ */
+
+import PT from 'prop-types';
+import React from 'react';
+
+function Avatar({ DefaultAvatar, theme, url }) {
+  return url
+    ? <img alt="Avatar" src={url} className={theme.avatar} />
+    : <DefaultAvatar className={theme.avatar} />;
+}
+
+Avatar.defaultProps = {
+  url: null,
+};
+
+Avatar.propTypes = {
+  DefaultAvatar: PT.node.isRequired,
+  theme: PT.shape({
+    avatar: PT.string.isRequired,
+  }).isRequired,
+  url: PT.string,
+};