feat #61 - Skeleton loader component

package.json

@@ -25,7 +25,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",
 		"rollup": "^2.23.0",
 		"rollup-plugin-typescript2": "^0.27.1",

src/__snapshots__/storybook.test.ts.snap

@@ -103,10 +103,10 @@ exports[`Storyshots Icon Predefined 1`] = `
 
 exports[`Storyshots InputField Default 1`] = `
 <div
-  className="container-0-2-3 container-d0-0-2-8"
+  className="container-0-2-2 container-d0-0-2-7"
 >
   <div
-    className="label-0-2-6"
+    className="label-0-2-5"
   >
     Field Label
   </div>
@@ -126,15 +126,15 @@ exports[`Storyshots InputField Default 1`] = `
 
 exports[`Storyshots InputField Error 1`] = `
 <div
-  className="container-0-2-3 container-d4-0-2-12"
+  className="container-0-2-2 container-d4-0-2-14"
 >
   <div
-    className="label-0-2-6"
+    className="label-0-2-5"
   >
     Field Label
   </div>
   <input
-    className="ant-input error-0-2-4"
+    className="ant-input error-0-2-3"
     disabled={false}
     onBlur={[Function]}
     onChange={[Function]}
@@ -149,10 +149,10 @@ exports[`Storyshots InputField Error 1`] = `
 
 exports[`Storyshots InputField Full Width 1`] = `
 <div
-  className="container-0-2-3 container-d3-0-2-11"
+  className="container-0-2-2 container-d3-0-2-13"
 >
   <div
-    className="label-0-2-6"
+    className="label-0-2-5"
   >
     Field Label
   </div>
@@ -172,38 +172,24 @@ exports[`Storyshots InputField Full Width 1`] = `
 
 exports[`Storyshots InputField Loading 1`] = `
 <div
-  className="container-0-2-3 container-d2-0-2-10"
+  className="container-0-2-2 container-d2-0-2-9"
 >
   <div
-    className="label-0-2-6"
+    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-5"
+    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/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,14 +2,16 @@ 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({
-	'@keyframes shake': {
-		'0%, 100%': { left: '0rem' },
-		'20%, 60%': { left: '0.5rem' },
-		'40%, 80%': { left: '-0.5rem' }
+	'@global': {
+		'@keyframes shake': {
+			'0%, 100%': { left: '0rem' },
+			'20%, 60%': { left: '0.5rem' },
+			'40%, 80%': { left: '-0.5rem' }
+		}
 	},
 	container: {
 		display: 'flex',
@@ -59,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