Merge pull request #44 from primer/avatars

Add Avatar component

Author: shawnbot

README.md

@@ -8,17 +8,23 @@
 
 Currently we link to the latest built Primer CSS so that we may use current Primer styles to start to build components. This does not include `primer-base` so as to avoid unwanted base overrides.
 
-## Getting started
+## Installation
 
-`npm install`
+Install primer-react in your project with:
 
-Run app with:
+`npm install primer-react`
 
-`npm run start`
+## Local Development
 
-Build with:
+Run `primer-react` locally when adding or updating components.
 
-`npm run build`
+Clone this repo: `$ git clone https://github.com/primer/primer-react.git`
+
+Install dependencies: `npm install`
+
+Run app with: `npm run start`
+
+Build docs before publishing: `npm run build`
 
 
 ## Principles

docs/bundle.js

@@ -5,7 +5,7 @@ import {
   Detail
 } from '@compositor/kit'
 import {
-  Page,
+  Avatar,
   Box,
   Button,
   ButtonDanger,
@@ -14,12 +14,13 @@ import {
   ButtonLink,
   BranchName,
   CounterLabel,
+  Flash,
   Heading,
   Label,
   Link,
-  Text,
-  Flash,
+  Page,
   StateLabel,
+  Text,
   Tooltip,
   theme
 } from '../src'
@@ -37,6 +38,14 @@ const Swatch = ({name, index, color, ...rest}) => (
   </div>
 )
 
+const GitHubAvatar = ({username, size = 20, ...rest}) => (
+  <Avatar
+    src={`https://avatars.githubusercontent.com/${username}?v=3&s=${size * 2}`}
+    size={size}
+    {...rest}
+  />
+)
+
 const Index = props => (
   <Page>
     <Library title='Primer-react'>
@@ -48,6 +57,19 @@ const Index = props => (
           ))}
         </Detail>
       </Example>
+      <Example name='Avatar'>
+        <Box mb={2}>
+          <GitHubAvatar username='primer' size={128} />
+        </Box>
+        <Box mb={2}>
+          <GitHubAvatar username='github' size={64} />
+        </Box>
+        <Box mb={2}>
+          <GitHubAvatar username='reactjs' size={32} />
+          {' '}
+          <GitHubAvatar username='npm' />
+        </Box>
+      </Example>
       <Example name='Label'>
         <Box mb={3}>
           <Label>Default label</Label>

docs/index.html

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const Avatar = props => {
+  const {
+    alt,
+    isChild,
+    size = 20,
+    src,
+    ...rest
+  } = props
+
+  const className = classnames(
+    'avatar',
+    {
+      'avatar-small': size <= 24,
+      'avatar-child': isChild,
+    }
+  )
+
+  return (
+    <img
+      className={className}
+      alt={alt}
+      src={src}
+      width={size}
+      height={size}
+    />
+  )
+}
+
+Avatar.propTypes = {
+  alt: PropTypes.string,
+  isChild: PropTypes.bool,
+  size: PropTypes.number,
+  src: PropTypes.string,
+}
+
+export default Avatar

examples/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import Avatar from '../Avatar'
+import {render} from '../utils/testing'
+
+describe('Avatar', () => {
+  it('renders small by default', () => {
+    expect(render(<Avatar />))
+      .toEqual(render(<img className='avatar avatar-small' width={20} height={20} />))
+  })
+
+  it('respects the size prop', () => {
+    expect(render(<Avatar size={40} />))
+      .toEqual(render(<img className='avatar' width={40} height={40} />))
+  })
+
+  it('respects isChild', () => {
+    expect(render(<Avatar isChild />))
+      .toEqual(render(<img className='avatar avatar-small avatar-child' width={20} height={20} />))
+  })
+
+  it('passes through the src prop', () => {
+    expect(render(<Avatar src='primer.png' />))
+      .toEqual(render(<img className='avatar avatar-small' src='primer.png' width={20} height={20} />))
+  })
+})

src/Avatar.js

@@ -9,6 +9,8 @@ export { default as Page } from './Page'
 export { default as Box } from './Box'
 
 // Components
+export { default as Avatar } from './Avatar'
+
 export { default as Button } from './Button'
 export { default as ButtonDanger } from './ButtonDanger'
 export { default as ButtonPrimary } from './ButtonPrimary'