From 947663a36f2c9ace26afef88a7184a721fc23552 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 + src/components/assets/styles/styleguide.ts | 4 +- 6 files changed, 172 insertions(+), 85 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 = ({ + children, + classes = [] +}: DecoratorProps) => { + const decoratorClasses = useStyles() + + return ( +
+ {children} +
+ ) +} + +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 + +describe('Decorator', () => { + it('renders', () => { + wrapper = shallow(Decorator) + + expect(wrapper).toHaveLength(1) + }) +}) diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index c2f46dfe..3ffab856 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" >
- +
+ +
`; @@ -272,20 +276,24 @@ exports[`Storyshots Input Error 1`] = ` className="storyWrapper-0-2-2" >
- +
+ +
`; @@ -295,20 +303,24 @@ exports[`Storyshots Input Full Width 1`] = ` className="storyWrapper-0-2-2" >
- +
+ +
`; @@ -318,16 +330,20 @@ exports[`Storyshots Input Loading 1`] = ` className="storyWrapper-0-2-2" >
- -   - + +   + +
@@ -338,20 +354,24 @@ exports[`Storyshots Input Placeholder 1`] = ` className="storyWrapper-0-2-2" >
- +
+ +
`; @@ -622,31 +642,31 @@ exports[`Storyshots Radio Group Loading 1`] = ` className="storyWrapper-0-2-2" >
 
 
  @@ -749,10 +769,10 @@ exports[`Storyshots Select Default 1`] = ` className="storyWrapper-0-2-2" >
Lorem @@ -946,10 +966,10 @@ exports[`Storyshots Select Icon 1`] = ` className="storyWrapper-0-2-2" >
  @@ -1166,27 +1186,27 @@ exports[`Storyshots Skeleton Count 1`] = ` className="storyWrapper-0-2-2" >           @@ -1198,7 +1218,7 @@ exports[`Storyshots Skeleton Default 1`] = ` className="storyWrapper-0-2-2" >   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) => ( + + + + ) + ], 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) => ( + + + + ) + ], title: 'Input' } as Meta diff --git a/src/components/assets/styles/styleguide.ts b/src/components/assets/styles/styleguide.ts index 8623751f..bafb61bd 100644 --- a/src/components/assets/styles/styleguide.ts +++ b/src/components/assets/styles/styleguide.ts @@ -17,9 +17,9 @@ export const fieldErrorStyles = { } export const fontSizeRegular = '14px' export const linkColor = '#1EA7FD' -export * from './themes' -/* eslint-disable sort-keys */ + export const styleguide = { colors, + /* eslint-disable-next-line sort-keys */ spacing: { s: 8, m: 16, l: 24, xl: 32 } }