Skip to content

Commit

Permalink
v0.4.0 -> v0.5.0 (#105)
Browse files Browse the repository at this point in the history
* 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)
  • Loading branch information
nancy-dassana authored and github-actions committed Oct 16, 2020
1 parent 08c014d commit 0dff6ed
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 83 deletions.
38 changes: 38 additions & 0 deletions .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
13 changes: 13 additions & 0 deletions .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)
})
})
186 changes: 103 additions & 83 deletions src/__snapshots__/storybook.test.ts.snap
Expand Up @@ -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>
`;
Expand All @@ -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>
`;
Expand All @@ -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>
`;
Expand All @@ -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>
Expand All @@ -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>
`;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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]}
Expand Down Expand Up @@ -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]}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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]}
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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]}
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 0dff6ed

Please sign in to comment.