Feat #30 - Adress PR comments

src/components/Icon/Icon.stories.tsx

@@ -11,17 +11,17 @@ const Template: Story<IconProps> = args => <Icon {...args} />
 
 export const DassanaBlue = Template.bind({})
 DassanaBlue.args = {
-	icon: 'dassana-blue',
+	iconKey: 'dassana-blue',
 	size: 64
 }
 
 export const DassanaOrange = Template.bind({})
 DassanaOrange.args = {
-	icon: 'dassana-orange'
+	iconKey: 'dassana-orange'
 }
 
 export const AWS = Template.bind({})
 AWS.args = {
-	icon: 'aws-logo',
+	iconKey: 'aws-logo',
 	size: 64
 }

src/components/Icon/Icon.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import Icon, { IconProps } from '.'
-import { mount, ReactWrapper } from 'enzyme'
+import { mount, ReactWrapper, shallow } from 'enzyme'
 
 let wrapper: ReactWrapper
 const mockProps: IconProps = {
-	icon: 'dassana-blue',
+	iconKey: 'dassana-blue',
 	size: 64
 }
 
@@ -31,4 +31,8 @@ describe('Icon', () => {
 		expect(wrapper.getDOMNode().getAttribute('height')).toBe('64')
 		expect(wrapper.getDOMNode().getAttribute('width')).toBe('64')
 	})
+
+	it('throws an error if both icon and iconType props are undefined', () => {
+		expect(() => shallow(<Icon />)).toThrow()
+	})
 })

src/components/Icon/IconsMap.ts

@@ -0,0 +1,13 @@
+import AWS from '../../assets/icons/aws.svg'
+import DASSANA_BLUE from '../../assets/icons/dassana-blue.png'
+import DASSANA_ORANGE from '../../assets/icons/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

@@ -1,19 +1,31 @@
-import Icons, { IconName } from './icons'
+import Icons, { IconName } from './IconsMap'
 import React, { FC } from 'react'
 
+export type { IconName }
+
 export interface IconProps {
 	/**
-	 * The name of the icon.
+	 * The url of the icon if you want Icon to render a custom icon.
+	 */
+	icon?: string
+	/**
+	 * The name of the icon if using icons provided by Dassana.
 	 */
-	icon: IconName
+	iconKey?: 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} />
+const Icon: FC<IconProps> = ({ icon, iconKey, size = 32 }: IconProps) => {
+	if (!icon && !iconKey)
+		throw new Error('Icon requires either an iconKey or icon prop.')
+
+	const imgSrc = iconKey ? Icons[iconKey] : icon
+	const imgAlt = iconKey ? iconKey : icon
+
+	return <img alt={imgAlt} height={size} src={imgSrc} width={size} />
 }
 
 export default Icon