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

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

.github/workflows/verify-labels.yml

@@ -1,18 +1,22 @@
-name: Verify Labels
-
+name: Pull Request Labels
 on:
     pull_request:
         types: [opened, labeled, unlabeled, synchronize]
-
 jobs:
     check_pr_labels:
+        name: Verify that the PR has the appropriate label(s)
         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]
+            - name: Check for version label
+              if: ${{ github.base_ref == 'master' }}
+              uses: mheap/github-action-required-labels@v1
               with:
-                  github-token: '${{ secrets.GITHUB_TOKEN }}'
-                  valid-labels: 'fix, bug, bugfix, feature, enhancement, chore'
+                  mode: exactly
+                  count: 1
+                  labels: 'patch, minor, major'
+            - name: Check for issue type label
+              uses: mheap/github-action-required-labels@v1
+              with:
+                  mode: minimum
+                  count: 1
+                  labels: 'fix, bug, bugfix, feature, enhancement, chore'

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/Icon/Icon.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import Icon, { IconProps } from '.'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+export default {
+	argTypes: {
+		height: { defaultValue: 64 }
+	},
+	component: Icon,
+	title: 'Icon'
+} as Meta
+
+const Template: Story<IconProps> = args => <Icon {...args} />
+
+export const Predefined = Template.bind({})
+Predefined.argTypes = {
+	icon: {
+		control: { disable: true }
+	}
+}
+Predefined.args = {
+	iconKey: 'dassana-orange'
+}
+
+export const Custom = Template.bind({})
+Custom.argTypes = {
+	iconKey: {
+		control: { disable: true }
+	}
+}
+Custom.args = {
+	icon: 'https://dummyimage.com/600x400/000/fff&text=Dassana'
+}

src/components/Icon/Icon.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import Icon, { IconProps } from '.'
+import { mount, ReactWrapper } from 'enzyme'
+
+let wrapper: ReactWrapper
+
+describe('Predefined Icon', () => {
+	const mockProps: IconProps = {
+		height: 64,
+		iconKey: 'dassana-blue'
+	}
+
+	beforeEach(() => {
+		wrapper = mount(<Icon {...mockProps} />)
+	})
+
+	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 height', () => {
+		expect(wrapper.getDOMNode().getAttribute('height')).toBe('64')
+	})
+})
+
+describe('Custom Icon', () => {
+	const mockProps: IconProps = {
+		height: 64,
+		icon: 'https://dummyimage.com/600x400/000/fff&text=Dassana'
+	}
+
+	beforeEach(() => {
+		wrapper = mount(<Icon {...mockProps} />)
+	})
+
+	it('renders', () => {
+		expect(wrapper).toHaveLength(1)
+	})
+
+	it('renders with correct src url', () => {
+		expect(wrapper.getDOMNode().getAttribute('src')).toBe(
+			'https://dummyimage.com/600x400/000/fff&text=Dassana'
+		)
+	})
+
+	it('has the correct alt attribute', () => {
+		expect(wrapper.getDOMNode().getAttribute('alt')).toBe(
+			'https://dummyimage.com/600x400/000/fff&text=Dassana'
+		)
+	})
+
+	it('has the correct height', () => {
+		expect(wrapper.getDOMNode().getAttribute('height')).toBe('64')
+	})
+})

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

@@ -0,0 +1,41 @@
+import Icons, { IconName } from './IconsMap'
+import React, { FC } from 'react'
+
+export type { IconName }
+
+interface SharedIconProps {
+	/**
+	 * The height of the icon, in pixels. Width will be calculated by default.
+	 */
+	height?: number
+}
+
+interface IconPath extends SharedIconProps {
+	/**
+	 * The url of the icon if rendering a custom icon.
+	 */
+	icon: string
+	/**
+	 * The name of the icon if using icons provided by Dassana. **Note**: Either an `icon` or `iconKey` is required.
+	 */
+	iconKey?: never
+}
+
+interface IconKey extends SharedIconProps {
+	iconKey: IconName
+	icon?: never
+}
+
+export type IconProps = IconKey | IconPath
+
+const Icon: FC<IconProps> = ({ height = 32, ...props }: IconProps) => {
+	const { icon } = props as IconPath
+	const { iconKey } = props as IconKey
+
+	const imgSrc = iconKey ? Icons[iconKey] : icon
+	const imgAlt = iconKey ? iconKey : icon
+
+	return <img alt={imgAlt} height={height} src={imgSrc} />
+}
+
+export default Icon