[WIP] Image Components

src/components/image/Image/index.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import PropTypes from 'prop-types'
+
+import borderRadius from 'mixins/borderRadius'
+
+function applyImageStyles ({ radius }) {
+	return css`
+		border-radius: ${radius};
+	`
+}
+
+const StyledImage = styled.img`
+	${applyImageStyles};
+`
+
+const Image = ({ src, alt, radius, width, height }) => (
+	<StyledImage
+		src={src}
+		alt={alt}
+		radius={radius}
+		height={height}
+		width={width}
+	/>
+)
+
+Image.defaultProps = {
+	radius: borderRadius.image,
+	height: 142,
+	width: 142,
+}
+
+Image.propTypes = {
+	src: PropTypes.string.isRequired,
+	alt: PropTypes.string,
+	width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	radius: PropTypes.string,
+}
+
+export default Image

src/index.js

@@ -3,3 +3,5 @@ export { default as CoreStyle } from 'core'
 export { default as Button } from 'components/button/Button'
 
 export { default as FacebookButton } from 'components/button/FacebookButton'
+
+export { default as Image } from 'components/image/Image'

src/mixins/borderRadius/index.js

@@ -0,0 +1,3 @@
+export default {
+	image: '16px',
+}

stories/Image/NormalImage.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import Image from 'components/image/Image'
+
+const testImage = require('assets/images/test-image.jpg')
+
+const NormalImage = () => <Image src={testImage} />
+
+export default NormalImage

stories/Image/index.js

@@ -0,0 +1,6 @@
+import baseStory from 'stories/utils/baseStory'
+
+baseStory('Image', module).addWithJSX(
+	'Normal Image',
+	require('./NormalImage').default,
+)

stories/index.js

@@ -1,3 +1,4 @@
 require('./Typography')
 require('./Color')
 require('./Button')
+require('./Image')

webpack.config.js

@@ -17,7 +17,7 @@ module.exports = {
 				use: 'babel-loader',
 			},
 			{
-				test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
+				test: /\.(eot|svg|ttf|woff|woff2|otf|jpg|png)$/,
 				loader: 'file-loader',
 			},
 		],