Feat #30 - Toggle and Icon components (#52)

* Feat #30 - Add toggle component, icon component, improved verified labels action

.github/workflows/verify-labels.yml

@@ -1,5 +1,3 @@
-<<<<<<< HEAD
-<<<<<<< HEAD
 name: Pull Request Labels
 on:
     pull_request:
@@ -22,28 +20,3 @@ jobs:
                   mode: minimum
                   count: 1
                   labels: 'fix, bug, bugfix, feature, enhancement, chore'
-=======
-=======
->>>>>>> chore #41 - Add verify labels GitHub action (#42)
-name: Verify Labels
-
-on:
-    pull_request:
-        types: [opened, labeled, unlabeled, synchronize]
-
-jobs:
-    check_pr_labels:
-        runs-on: ubuntu-latest
-        name: Verify that the PR has a valid label
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v2
-            - name: Verify PR label action
-              uses: jesusvasquez333/[email protected]
-              with:
-                  github-token: '${{ secrets.GITHUB_TOKEN }}'
-                  valid-labels: 'fix, bug, bugfix, feature, enhancement, chore'
-<<<<<<< HEAD
->>>>>>> chore #41 - Add verify labels GitHub action (#42)
-=======
->>>>>>> chore #41 - Add verify labels GitHub action (#42)

src/__snapshots__/storybook.test.ts.snap

@@ -85,6 +85,22 @@ exports[`Storyshots Button Primary Disabled 1`] = `
 </button>
 `;
 
+exports[`Storyshots Icon Custom 1`] = `
+<img
+  alt="https://dummyimage.com/600x400/000/fff&text=Dassana"
+  height={64}
+  src="https://dummyimage.com/600x400/000/fff&text=Dassana"
+/>
+`;
+
+exports[`Storyshots Icon Predefined 1`] = `
+<img
+  alt="dassana-orange"
+  height={64}
+  src="dassana-orange.png"
+/>
+`;
+
 exports[`Storyshots InputField Default 1`] = `
 <div
   className="container-0-2-3 container-d0-0-2-8"
@@ -193,10 +209,9 @@ exports[`Storyshots InputField Loading 1`] = `
 </div>
 `;
 
-exports[`Storyshots Link Default 1`] = `
+exports[`Storyshots Link Click 1`] = `
 <a
   className="ant-typography"
-  href=" "
   onClick={[Function]}
   style={
     Object {
@@ -206,7 +221,24 @@ exports[`Storyshots Link Default 1`] = `
   target="_self"
 >
   <u>
-    Default
+    Click
+  </u>
+</a>
+`;
+
+exports[`Storyshots Link Href 1`] = `
+<a
+  className="ant-typography"
+  href=" "
+  style={
+    Object {
+      "WebkitLineClamp": null,
+    }
+  }
+  target="_self"
+>
+  <u>
+    Href
   </u>
 </a>
 `;
@@ -249,3 +281,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

@@ -19,7 +19,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/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 {
@@ -11,13 +11,26 @@ export default {
 	title: 'Link'
 } as Meta
 
-const linkProps: LinkProps = {
-	children: 'Default',
-	href: ' ',
-	onClick: action('onClick')
-}
-
 const Template: Story<LinkProps> = args => <Link {...args} />
 
-export const Default = Template.bind({})
-Default.args = linkProps
+export const Href = Template.bind({})
+Href.argTypes = {
+	onClick: {
+		control: { disable: true }
+	}
+}
+Href.args = {
+	children: 'Href',
+	href: ' '
+}
+
+export const Click = Template.bind({})
+Click.argTypes = {
+	href: {
+		control: { disable: true }
+	}
+}
+Click.args = {
+	children: 'Click',
+	onClick: action('onClick')
+}

src/components/Link/Link.test.tsx

@@ -1,43 +1,62 @@
 import React from 'react'
 import Link, { LinkProps } from '.'
-import { mount, ReactWrapper, shallow } from 'enzyme'
+import { mount, ReactWrapper } from 'enzyme'
 
 let wrapper: ReactWrapper
 let mockClick: jest.Mock<void>
-const mockProps: LinkProps = {
-	children: 'Test',
-	href: '/test',
-	target: '_blank'
-}
-
-beforeEach(() => {
-	mockClick = jest.fn()
-	wrapper = mount(<Link {...mockProps} onClick={mockClick} />)
-})
+let mockProps: LinkProps
 
-describe('Link', () => {
-	it('renders', () => {
-		const link = wrapper.find(Link)
-		expect(link).toHaveLength(1)
+describe('Link with href', () => {
+	beforeEach(() => {
+		mockProps = {
+			children: 'Test',
+			href: '/test',
+			target: '_blank'
+		}
+
+		wrapper = mount(<Link {...mockProps} />)
 	})
 
-	it('calls onClick function when link is clicked', () => {
-		const link = wrapper.find(Link)
-		link.simulate('click')
-		expect(mockClick).toHaveBeenCalledTimes(1)
+	it('renders', () => {
+		expect(wrapper).toHaveLength(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
+		)
 	})
+})
+
+describe('Link', () => {
+	beforeEach(() => {
+		mockClick = jest.fn()
+
+		mockProps = {
+			children: 'Test',
+			onClick: mockClick,
+			target: '_blank'
+		}
 
-	it('throws an error if both onClick and href props are undefined', () => {
-		expect(() => shallow(<Link>Test</Link>)).toThrow()
+		wrapper = mount(<Link {...mockProps} />)
+	})
+
+	it('renders', () => {
+		expect(wrapper).toHaveLength(1)
+	})
+
+	it('calls onClick function when link is clicked', () => {
+		wrapper.simulate('click')
+		expect(mockClick).toHaveBeenCalledTimes(1)
+	})
+
+	it('has the correct target attribute', () => {
+		expect(wrapper.getDOMNode().getAttribute('target')).toBe(
+			mockProps.target
+		)
 	})
 })

src/components/Link/index.tsx

@@ -1,32 +1,42 @@
 import 'antd/lib/typography/style/index.css'
 import { createUseStyles } from 'react-jss'
-import { linkColor } from '../../styles/styleguide'
+import { linkColor } from 'styles/styleguide'
 import { Typography } from 'antd'
 import React, { FC, ReactNode } from 'react'
 
 const AntDLink = Typography.Link
 
 export type LinkTargetType = '_self' | '_blank'
 
-export interface LinkProps {
+interface SharedLinkProps {
 	/**
 	 * Link children to render including link text.
 	 */
 	children: ReactNode
 	/**
-	 * The URL the link goes to.
+	 * Where to open the linked url - either in a new tab or the current browsing context.
 	 */
-	href?: string
+	target?: LinkTargetType
+}
+
+interface LinkHref extends SharedLinkProps {
 	/**
-	 * Click handler. **Note**: While both `onClick` and `href` are optional, one of them is required.
+	 * The URL the link goes to.
 	 */
-	onClick?: () => void
+	href: string
 	/**
-	 * Where to open the linked url - either in a new tab or the current browsing context.
+	 * Click handler. **Note**: Either an `onClick` or `href` is required.
 	 */
-	target?: LinkTargetType
+	onClick?: never
+}
+
+interface LinkClick extends SharedLinkProps {
+	href?: never
+	onClick: () => void
 }
 
+export type LinkProps = LinkHref | LinkClick
+
 interface AntDProps extends Omit<LinkProps, 'children'> {
 	underline: boolean
 }
@@ -54,9 +64,6 @@ const Link: FC<LinkProps> = ({
 		underline: true
 	}
 
-	if (!onClick && !href)
-		throw new Error('Link requires either an onClick or href prop.')
-
 	return <AntDLink {...antDProps}>{children}</AntDLink>
 }
 

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,14 +1,6 @@
 import React from 'react'
 import { shallow, ShallowWrapper } from 'enzyme'
-<<<<<<< HEAD
-<<<<<<< HEAD
 import Tag, { TagProps } from '.'
-=======
-import Tag, { TagProps } from './index'
->>>>>>> Feat #43 - Tag, Link components
-=======
-import Tag, { TagProps } from './index'
->>>>>>> Feat #43 - Tag, Link components
 
 let wrapper: ShallowWrapper<TagProps>
 

src/components/index.ts

@@ -1,6 +1,8 @@
 import 'normalize.css'
-import '../styles/index.css'
+import 'styles/index.css'
 export { default as Button } from './Button'
 export { default as InputField } from './InputField'
+export { default as Icon } from './Icon'
 export { default as Link } from './Link'
 export { default as Tag } from './Tag'
+export { default as Toggle } from './Toggle'