feat #61 - Skeleton loader component

package.json

@@ -22,7 +22,6 @@
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",
 		"react-jss": "^10.4.0",
-		"react-loading-skeleton": "^2.1.1",
 		"react-scripts": "^3.4.3",
 		"typescript": "^3.9.7"
 	},
@@ -42,6 +41,11 @@
 	"eslintConfig": {
 		"extends": "react-app"
 	},
+	"jest": {
+		"coveragePathIgnorePatterns": [
+			".stories.tsx"
+		]
+	},
 	"browserslist": {
 		"production": [
 			">0.2%",

src/__snapshots__/storybook.test.ts.snap

@@ -126,7 +126,7 @@ exports[`Storyshots InputField Default 1`] = `
 
 exports[`Storyshots InputField Error 1`] = `
 <div
-  className="container-0-2-2 container-d4-0-2-11"
+  className="container-0-2-2 container-d4-0-2-14"
 >
   <div
     className="label-0-2-5"
@@ -149,7 +149,7 @@ exports[`Storyshots InputField Error 1`] = `
 
 exports[`Storyshots InputField Full Width 1`] = `
 <div
-  className="container-0-2-2 container-d3-0-2-10"
+  className="container-0-2-2 container-d3-0-2-13"
 >
   <div
     className="label-0-2-5"
@@ -177,33 +177,19 @@ exports[`Storyshots InputField Loading 1`] = `
   <div
     className="label-0-2-5"
   >
-    <span>
-      <span
-        className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
-        style={
-          Object {
-            "width": 100,
-          }
-        }
-      >
-        ‌
-      </span>
+    <span
+      className="container-0-2-10 container-d0-0-2-11"
+    >
+
     </span>
   </div>
   <div
     className="input-0-2-4"
   >
-    <span>
-      <span
-        className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
-        style={
-          Object {
-            "height": 13,
-          }
-        }
-      >
-        ‌
-      </span>
+    <span
+      className="container-0-2-10 container-d1-0-2-12"
+    >
+
     </span>
   </div>
 </div>
@@ -243,6 +229,52 @@ exports[`Storyshots Link Href 1`] = `
 </a>
 `;
 
+exports[`Storyshots Skeleton Circle 1`] = `
+<span
+  className="container-0-2-10 container-d3-0-2-16"
+>
+
+</span>
+`;
+
+exports[`Storyshots Skeleton Count 1`] = `
+Array [
+  <span
+    className="container-0-2-10 container-d4-0-2-17"
+  >
+
+  </span>,
+  <span
+    className="container-0-2-10 container-d4-0-2-17"
+  >
+
+  </span>,
+  <span
+    className="container-0-2-10 container-d4-0-2-17"
+  >
+
+  </span>,
+  <span
+    className="container-0-2-10 container-d4-0-2-17"
+  >
+
+  </span>,
+  <span
+    className="container-0-2-10 container-d4-0-2-17"
+  >
+
+  </span>,
+]
+`;
+
+exports[`Storyshots Skeleton Default 1`] = `
+<span
+  className="container-0-2-10 container-d2-0-2-15"
+>
+
+</span>
+`;
+
 exports[`Storyshots Tag Colored 1`] = `
 <span
   className="ant-tag ant-tag-has-color"

src/components/Button/Button.test.tsx

@@ -1,3 +1,4 @@
+import { Button as AntDButton } from 'antd'
 import React from 'react'
 import Button, { ButtonProps } from '.'
 import { shallow, ShallowWrapper } from 'enzyme'
@@ -19,6 +20,19 @@ describe('Button', () => {
 		expect(wrapper.simulate('click'))
 		expect(mockClick).toHaveBeenCalledTimes(1)
 	})
+
+	it('should pass type primary if primary is passed as true', () => {
+		wrapper = shallow(
+			<Button onClick={mockClick} primary>
+				Test
+			</Button>
+		)
+		expect(wrapper.find(AntDButton).props().type).toEqual('primary')
+	})
+
+	it('should have a type default by default', () => {
+		expect(wrapper.find(AntDButton).props().type).toEqual('default')
+	})
 })
 
 describe('Disabled Button', () => {

src/components/Icon/Icon.test.tsx

@@ -31,6 +31,12 @@ describe('Predefined Icon', () => {
 	it('has the correct height', () => {
 		expect(wrapper.getDOMNode().getAttribute('height')).toBe('64')
 	})
+
+	it('renders with a default height of 32', () => {
+		wrapper = mount(<Icon iconKey='dassana-blue' />)
+
+		expect(wrapper.getDOMNode().getAttribute('height')).toBe('32')
+	})
 })
 
 describe('Custom Icon', () => {

src/components/InputField/InputField.test.tsx

@@ -1,6 +1,6 @@
 import { Input } from 'antd'
 import React from 'react'
-import Skeleton from 'react-loading-skeleton'
+import Skeleton from '../Skeleton'
 import InputField, { InputFieldProps } from './index'
 import { mount, ReactWrapper, shallow } from 'enzyme'
 
@@ -98,10 +98,7 @@ describe('InputField', () => {
 				attachTo: document.getElementById('container')
 			})
 
-			const element = document.getElementsByClassName(
-				wrapper.getDOMNode().className
-			)[0]
-			const style = window.getComputedStyle(element)
+			const style = window.getComputedStyle(wrapper.getDOMNode())
 
 			expect(style.width).toEqual('100%')
 		})
@@ -111,10 +108,7 @@ describe('InputField', () => {
 				attachTo: document.getElementById('container')
 			})
 
-			const element = document.getElementsByClassName(
-				wrapper.getDOMNode().className
-			)[0]
-			const style = window.getComputedStyle(element)
+			const style = window.getComputedStyle(wrapper.getDOMNode())
 
 			expect(style.width).not.toEqual('100%')
 		})

src/components/InputField/index.tsx

@@ -2,7 +2,7 @@ import 'antd/lib/input/style/index.css'
 import cn from 'classnames'
 import { createUseStyles } from 'react-jss'
 import { Input } from 'antd'
-import Skeleton from 'react-loading-skeleton'
+import Skeleton from '../Skeleton'
 import React, { FC } from 'react'
 
 const useStyles = createUseStyles({
@@ -61,12 +61,12 @@ const InputFieldSkeleton: FC<InputFieldProps> = (props: InputFieldProps) => {
 
 export interface InputFieldProps {
 	/**
-	 * Array of classes to pass to button.
+	 * Array of classes to pass to input
 	 * @default []
 	 */
 	classes?: string[]
 	/**
-	 * Adds the disabled attribute and styles (opacity, gray scale filter, no pointer events).
+	 * Adds the disabled attribute and styles (opacity, gray scale filter, no pointer events)
 	 * @default false
 	 */
 	disabled?: boolean

src/components/Link/Link.test.tsx

@@ -30,6 +30,12 @@ describe('Link with href', () => {
 			mockProps.target
 		)
 	})
+
+	it('has a default target of _self if none is passed in', () => {
+		wrapper = mount(<Link onClick={mockClick}>Test</Link>)
+
+		expect(wrapper.getDOMNode().getAttribute('target')).toBe('_self')
+	})
 })
 
 describe('Link', () => {