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"
 	},

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import Skeleton, { SkeletonProps } from './index'
+
+export default {
+	component: Skeleton,
+	title: 'Skeleton'
+} as Meta
+
+const Template: Story<SkeletonProps> = args => <Skeleton {...args} />
+
+export const Default = Template.bind({})
+
+export const Circle = Template.bind({})
+Circle.args = { circle: true, height: 50, width: 50 }
+
+export const Count = Template.bind({})
+Count.args = { count: 5, width: 300 }