Feat #30 - Toggle and Icon components

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 Link Default 1`] = `
 <a
   className="ant-typography"
@@ -141,3 +168,59 @@ exports[`Storyshots Tag Default 1`] = `
   Default
 </span>
 `;
+
+exports[`Storyshots Toggle Checked Disabled 1`] = `
+<button
+  aria-checked={true}
+  className="ant-switch ant-switch-checked ant-switch-disabled"
+  disabled={true}
+  onClick={[Function]}
+  onKeyDown={[Function]}
+  role="switch"
+  type="button"
+>
+  <div
+    className="ant-switch-handle"
+  />
+  <span
+    className="ant-switch-inner"
+  />
+</button>
+`;
+
+exports[`Storyshots Toggle Default 1`] = `
+<button
+  aria-checked={true}
+  className="ant-switch ant-switch-checked"
+  onClick={[Function]}
+  onKeyDown={[Function]}
+  role="switch"
+  type="button"
+>
+  <div
+    className="ant-switch-handle"
+  />
+  <span
+    className="ant-switch-inner"
+  />
+</button>
+`;
+
+exports[`Storyshots Toggle Disabled 1`] = `
+<button
+  aria-checked={false}
+  className="ant-switch ant-switch-disabled"
+  disabled={true}
+  onClick={[Function]}
+  onKeyDown={[Function]}
+  role="switch"
+  type="button"
+>
+  <div
+    className="ant-switch-handle"
+  />
+  <span
+    className="ant-switch-inner"
+  />
+</button>
+`;

src/components/Button/Button.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Button, { ButtonProps } from './index'
+import Button, { ButtonProps } from '.'
 import { shallow, ShallowWrapper } from 'enzyme'
 
 let wrapper: ShallowWrapper<ButtonProps>

src/components/Button/index.tsx

@@ -20,7 +20,7 @@ export interface ButtonProps {
 	primary?: boolean
 	/**
 	 * Adds the disabled attribute and styles (opacity, gray scale filter, no pointer events).
-	 * */
+	 */
 	disabled?: boolean
 	/**
 	 * Array of classes to pass to button.

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

src/components/Link/Link.stories.tsx

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions'
 import React from 'react'
-import Link, { LinkProps } from './index'
+import Link, { LinkProps } from '.'
 import { Meta, Story } from '@storybook/react/types-6-0'
 
 export default {

src/components/Link/Link.test.tsx

@@ -17,24 +17,22 @@ beforeEach(() => {
 
 describe('Link', () => {
 	it('renders', () => {
-		const link = wrapper.find(Link)
-		expect(link).toHaveLength(1)
+		expect(wrapper).toHaveLength(1)
 	})
 
 	it('calls onClick function when link is clicked', () => {
-		const link = wrapper.find(Link)
-		link.simulate('click')
+		wrapper.simulate('click')
 		expect(mockClick).toHaveBeenCalledTimes(1)
 	})
 
 	it('has the correct href attribute', () => {
-		const link = wrapper.find(Link)
-		expect(link.getDOMNode().getAttribute('href')).toBe(mockProps.href)
+		expect(wrapper.getDOMNode().getAttribute('href')).toBe(mockProps.href)
 	})
 
 	it('has the correct target attribute', () => {
-		const link = wrapper.find(Link)
-		expect(link.getDOMNode().getAttribute('target')).toBe(mockProps.target)
+		expect(wrapper.getDOMNode().getAttribute('target')).toBe(
+			mockProps.target
+		)
 	})
 
 	it('throws an error if both onClick and href props are undefined', () => {

src/components/Tag/Tag.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Meta, Story } from '@storybook/react/types-6-0'
-import Tag, { TagProps } from './index'
+import Tag, { TagProps } from '.'
 
 export default {
 	argTypes: {

src/components/Tag/Tag.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow, ShallowWrapper } from 'enzyme'
-import Tag, { TagProps } from './index'
+import Tag, { TagProps } from '.'
 
 let wrapper: ShallowWrapper<TagProps>
 

src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import Toggle, { ToggleProps } from '.'
+
+export default {
+	component: Toggle,
+	title: 'Toggle'
+} as Meta
+
+const Template: Story<ToggleProps> = args => <Toggle {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+	defaultChecked: true
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+	defaultChecked: false,
+	disabled: true
+}
+
+export const CheckedDisabled = Template.bind({})
+CheckedDisabled.args = {
+	defaultChecked: true,
+	disabled: true
+}

src/components/Toggle/Toggle.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { mount, ReactWrapper } from 'enzyme'
+import Toggle, { ToggleProps } from '.'
+
+let wrapper: ReactWrapper
+const mockProps: ToggleProps = {
+	defaultChecked: false
+}
+
+beforeEach(() => {
+	wrapper = mount(<Toggle {...mockProps} />)
+})
+
+describe('Toggle', () => {
+	it('renders', () => {
+		expect(wrapper).toHaveLength(1)
+	})
+
+	it('has the correct role attribute', () => {
+		expect(wrapper.getDOMNode().getAttribute('role')).toBe('switch')
+	})
+
+	it('has the correct aria-checked attribute', () => {
+		expect(wrapper.getDOMNode().getAttribute('aria-checked')).toBe('false')
+	})
+
+	it('changes the aria-checked attribute when it is clicked', () => {
+		wrapper.simulate('click')
+		expect(wrapper.getDOMNode().getAttribute('aria-checked')).toBe('true')
+	})
+})