Feat #30 - Add icon component

src/__snapshots__/storybook.test.ts.snap

@@ -85,6 +85,33 @@ exports[`Storyshots Button Primary Disabled 1`] = `
 </button>
 `;
 
+exports[`Storyshots Icon AWS 1`] = `
+<img
+  alt="aws-logo"
+  height={64}
+  src="aws.svg"
+  width={64}
+/>
+`;
+
+exports[`Storyshots Icon Dassana Blue 1`] = `
+<img
+  alt="dassana-blue"
+  height={64}
+  src="dassana-blue.png"
+  width={64}
+/>
+`;
+
+exports[`Storyshots Icon Dassana Orange 1`] = `
+<img
+  alt="dassana-orange"
+  height={32}
+  src="dassana-orange.png"
+  width={32}
+/>
+`;
+
 exports[`Storyshots InputField Default 1`] = `
 <div
   className="container-0-2-3 container-d0-0-2-8"

src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Icon, { IconProps } from '.'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+export default {
+	component: Icon,
+	title: 'Icon'
+} as Meta
+
+const Template: Story<IconProps> = args => <Icon {...args} />
+
+export const DassanaBlue = Template.bind({})
+DassanaBlue.args = {
+	icon: 'dassana-blue',
+	size: 64
+}
+
+export const DassanaOrange = Template.bind({})
+DassanaOrange.args = {
+	icon: 'dassana-orange'
+}
+
+export const AWS = Template.bind({})
+AWS.args = {
+	icon: 'aws-logo',
+	size: 64
+}

src/components/Icon/Icon.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Icon, { IconProps } from '.'
+import { mount, ReactWrapper } from 'enzyme'
+
+let wrapper: ReactWrapper
+const mockProps: IconProps = {
+	icon: 'dassana-blue',
+	size: 64
+}
+
+beforeEach(() => {
+	wrapper = mount(<Icon {...mockProps} />)
+})
+
+describe('Icon', () => {
+	it('renders', () => {
+		expect(wrapper).toHaveLength(1)
+	})
+
+	it('renders with correct src url', () => {
+		expect(wrapper.getDOMNode().getAttribute('src')).toContain(
+			'dassana-blue'
+		)
+	})
+
+	it('has the correct alt attribute', () => {
+		expect(wrapper.getDOMNode().getAttribute('alt')).toBe('dassana-blue')
+	})
+
+	it('has the correct size', () => {
+		expect(wrapper.getDOMNode().getAttribute('height')).toBe('64')
+		expect(wrapper.getDOMNode().getAttribute('width')).toBe('64')
+	})
+})

src/components/Icon/icons/index.ts

@@ -0,0 +1,13 @@
+import AWS from './aws.svg'
+import DASSANA_BLUE from './dassana-blue.png'
+import DASSANA_ORANGE from './dassana-orange.png'
+
+const Icons = {
+	'aws-logo': AWS,
+	'dassana-blue': DASSANA_BLUE,
+	'dassana-orange': DASSANA_ORANGE
+}
+
+export type IconName = keyof typeof Icons
+
+export default Icons

src/components/Icon/index.tsx

@@ -0,0 +1,19 @@
+import Icons, { IconName } from './icons'
+import React, { FC } from 'react'
+
+export interface IconProps {
+	/**
+	 * The name of the icon.
+	 */
+	icon: IconName
+	/**
+	 * The width and height of the icon, in pixels.
+	 */
+	size?: number
+}
+
+const Icon: FC<IconProps> = ({ icon, size = 32 }: IconProps) => {
+	return <img alt={icon} height={size} src={Icons[icon]} width={size} />
+}
+
+export default Icon