From 0dff6ed7e9b81f2c36c6950aa2fe5eef2c0388fb Mon Sep 17 00:00:00 2001
From: Nancy <68706811+nancy-dassana@users.noreply.github.com>
Date: Fri, 9 Oct 2020 16:26:57 -0700
Subject: [PATCH] v0.4.0 -> v0.5.0 (#105)

* feat #99 - Avatar component (#103)
* feat #100 - Notification component should take in configuration options (#103)
* feat #101 - Icon component should render svgs (#103)
* feat #92 - Theming (#97)
* fix #104 - Fix exported types for table and form (#97)
---
 .storybook/Decorator.tsx                 |  38 +++++
 .storybook/__tests__/Decorator.test.tsx  |  13 ++
 src/__snapshots__/storybook.test.ts.snap | 186 +++++++++++++----------
 src/components/Form/Form.stories.tsx     |   8 +
 src/components/Input/Input.stories.tsx   |   8 +
 5 files changed, 170 insertions(+), 83 deletions(-)
 create mode 100644 .storybook/Decorator.tsx
 create mode 100644 .storybook/__tests__/Decorator.test.tsx

diff --git a/.storybook/Decorator.tsx b/.storybook/Decorator.tsx
new file mode 100644
index 00000000..95ed2ba7
--- /dev/null
+++ b/.storybook/Decorator.tsx
@@ -0,0 +1,38 @@
+import React, { FC, ReactNode } from 'react'
+import { createUseStyles } from 'react-jss'
+import { ThemeType, themes } from '../src/components/assets/styles/themes'
+import cn from 'classnames'
+const { dark } = ThemeType
+
+const useStyles = createUseStyles({
+	'@global': {
+		[`.${dark} .decorator`]: {
+			backgroundColor: themes[dark].background.secondary
+		}
+	},
+	decorator: {
+		padding: '1rem'
+	}
+})
+
+export interface DecoratorProps {
+	children: ReactNode
+	classes?: string[]
+}
+
+const Decorator: FC<DecoratorProps> = ({
+	children,
+	classes = []
+}: DecoratorProps) => {
+	const decoratorClasses = useStyles()
+
+	return (
+		<div
+			className={cn(decoratorClasses.decorator, 'decorator', ...classes)}
+		>
+			{children}
+		</div>
+	)
+}
+
+export default Decorator
diff --git a/.storybook/__tests__/Decorator.test.tsx b/.storybook/__tests__/Decorator.test.tsx
new file mode 100644
index 00000000..34f5525f
--- /dev/null
+++ b/.storybook/__tests__/Decorator.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import Decorator, { DecoratorProps } from '../Decorator'
+import { shallow, ShallowWrapper } from 'enzyme'
+
+let wrapper: ShallowWrapper<DecoratorProps>
+
+describe('Decorator', () => {
+	it('renders', () => {
+		wrapper = shallow(<Decorator>Decorator</Decorator>)
+
+		expect(wrapper).toHaveLength(1)
+	})
+})
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index 7e535484..9cc0dd29 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -249,20 +249,24 @@ exports[`Storyshots Input Default 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-6 container-d0-0-2-9"
+    className="decorator-0-2-6 decorator"
   >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
+    <div
+      className="container-0-2-7 container-d0-0-2-10"
+    >
+      <input
+        className="ant-input"
+        data-test="input"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder=""
+        type="text"
+        value=""
+      />
+    </div>
   </div>
 </div>
 `;
@@ -272,20 +276,24 @@ exports[`Storyshots Input Error 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-6 container-d5-0-2-15"
+    className="decorator-0-2-6 decorator"
   >
-    <input
-      className="ant-input error-0-2-7"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
+    <div
+      className="container-0-2-7 container-d5-0-2-16"
+    >
+      <input
+        className="ant-input error-0-2-8"
+        data-test="input"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder=""
+        type="text"
+        value=""
+      />
+    </div>
   </div>
 </div>
 `;
@@ -295,20 +303,24 @@ exports[`Storyshots Input Full Width 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-6 container-d4-0-2-14"
+    className="decorator-0-2-6 decorator"
   >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
+    <div
+      className="container-0-2-7 container-d4-0-2-15"
+    >
+      <input
+        className="ant-input"
+        data-test="input"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder=""
+        type="text"
+        value=""
+      />
+    </div>
   </div>
 </div>
 `;
@@ -318,16 +330,20 @@ exports[`Storyshots Input Loading 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-6 container-d3-0-2-12"
+    className="decorator-0-2-6 decorator"
   >
     <div
-      className="inputSkeleton-0-2-8"
+      className="container-0-2-7 container-d3-0-2-13"
     >
-      <span
-        className="container-0-2-3 container-d1-0-2-13"
+      <div
+        className="inputSkeleton-0-2-9"
       >
-         
-      </span>
+        <span
+          className="container-0-2-3 container-d1-0-2-14"
+        >
+           
+        </span>
+      </div>
     </div>
   </div>
 </div>
@@ -338,20 +354,24 @@ exports[`Storyshots Input Placeholder 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-6 container-d1-0-2-10"
+    className="decorator-0-2-6 decorator"
   >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder="Search..."
-      type="text"
-      value=""
-    />
+    <div
+      className="container-0-2-7 container-d1-0-2-11"
+    >
+      <input
+        className="ant-input"
+        data-test="input"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Search..."
+        type="text"
+        value=""
+      />
+    </div>
   </div>
 </div>
 `;
@@ -622,31 +642,31 @@ exports[`Storyshots Radio Group Loading 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-16"
+    className="container-0-2-17"
   >
     <div
-      className="skeletonButton-0-2-18"
+      className="skeletonButton-0-2-19"
     >
       <span
-        className="container-0-2-3 container-d2-0-2-19 skeleton-0-2-17"
+        className="container-0-2-3 container-d2-0-2-20 skeleton-0-2-18"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-18"
+      className="skeletonButton-0-2-19"
     >
       <span
-        className="container-0-2-3 container-d3-0-2-20 skeleton-0-2-17"
+        className="container-0-2-3 container-d3-0-2-21 skeleton-0-2-18"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-18"
+      className="skeletonButton-0-2-19"
     >
       <span
-        className="container-0-2-3 container-d4-0-2-21 skeleton-0-2-17"
+        className="container-0-2-3 container-d4-0-2-22 skeleton-0-2-18"
       >
          
       </span>
@@ -749,10 +769,10 @@ exports[`Storyshots Select Default 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d0-0-2-27"
+    className="container-0-2-24 container-d0-0-2-28"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-25 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -845,10 +865,10 @@ exports[`Storyshots Select Full Width 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d2-0-2-29"
+    className="container-0-2-24 container-d2-0-2-30"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-25 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -895,7 +915,7 @@ exports[`Storyshots Select Full Width 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-26"
+            className="option-0-2-27"
           >
             <span>
               Lorem
@@ -946,10 +966,10 @@ exports[`Storyshots Select Icon 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d1-0-2-28"
+    className="container-0-2-24 container-d1-0-2-29"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-25 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -996,10 +1016,10 @@ exports[`Storyshots Select Icon 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-26"
+            className="option-0-2-27"
           >
             <span
-              className="icon-0-2-25"
+              className="icon-0-2-26"
             >
               <svg
                 fill="#7E8083"
@@ -1058,10 +1078,10 @@ exports[`Storyshots Select Search 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d3-0-2-30"
+    className="container-0-2-24 container-d3-0-2-31"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow ant-select-show-search"
+      className="ant-select dropdown-0-2-25 ant-select-single ant-select-show-arrow ant-select-show-search"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1154,7 +1174,7 @@ exports[`Storyshots Skeleton Circle 1`] = `
   className="storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d6-0-2-32"
+    className="container-0-2-3 container-d6-0-2-33"
   >
      
   </span>
@@ -1166,27 +1186,27 @@ exports[`Storyshots Skeleton Count 1`] = `
   className="storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-34"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-34"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-34"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-34"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-34"
   >
      
   </span>
@@ -1198,7 +1218,7 @@ exports[`Storyshots Skeleton Default 1`] = `
   className="storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d5-0-2-31"
+    className="container-0-2-3 container-d5-0-2-32"
   >
      
   </span>
diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
index 572bcc7e..745e9b20 100644
--- a/src/components/Form/Form.stories.tsx
+++ b/src/components/Form/Form.stories.tsx
@@ -1,4 +1,5 @@
 import { basicOptions } from '../RadioGroup/fixtures/sample_options'
+import Decorator from '../../../.storybook/Decorator'
 import { iconOptions } from '../Select/fixtures/sample_options'
 import React from 'react'
 import treeData from '../Tree/fixtures/0_sample_data'
@@ -11,6 +12,13 @@ export default {
 		onSubmit: { control: { disable: true } }
 	},
 	component: Form,
+	decorators: [
+		(ComponentStory: Story) => (
+			<Decorator>
+				<ComponentStory />
+			</Decorator>
+		)
+	],
 	parameters: {
 		// disabled because shallow rendering gives warning, but FormTree only works with shallow render
 		storyshots: { disable: true }
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index 54ea78d1..0e9a187b 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -1,3 +1,4 @@
+import Decorator from '../../../.storybook/Decorator'
 import React from 'react'
 import { Input, InputProps } from './index'
 import { Meta, Story } from '@storybook/react/types-6-0'
@@ -8,6 +9,13 @@ export default {
 		value: { control: { disable: true } }
 	},
 	component: Input,
+	decorators: [
+		(ComponentStory: Story) => (
+			<Decorator>
+				<ComponentStory />
+			</Decorator>
+		)
+	],
 	title: 'Input'
 } as Meta