IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: components: Moved stories for Loader and RequestLoader + added base tests

Browse Source
This commit is contained in:
Alexey Safronov 2019-09-08 17:42:08 +03:00
parent 12970efe95
commit 42e1505bec
12 changed files with 53 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
web/ASC.Web.Storybook/stories/loaders/base/README.md → web/ASC.Web.Components/src/components/loader/README.md
View File

27
web/ASC.Web.Storybook/stories/loaders/base/base.stories.js → web/ASC.Web.Components/src/components/loader/loader.stories.js
View File

@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
import { withKnobs, text, number, select, color } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Loader } from 'asc-web-components';
import Loader from '.';
import Section from '../../../.storybook/decorators/section';
const typeOptions = ['base', 'oval', 'dual-ring', 'rombs'];
@ -19,4 +19,29 @@ storiesOf('Components|Loaders', module)
size={number('size', 18)}
label={text('label', "Loading content, please wait...")} />
</Section>
))
.add('dual-ring', () => (
<Section>
<Loader
type={select('type', typeOptions, 'dual-ring')}
color={color('color', '#63686a')}
size={number('size', 40)}
label={text('label', "Loading content, please wait.")} />
</Section>
))
.add('oval', () => (
<Section>
<Loader
type={select('type', typeOptions, 'oval')}
color={color('color', '#63686a')}
size={number('size', 40)}
label={text('label', "Loading content, please wait.")} />
</Section>
))
.add('rombs', () => (
<Section>
<Loader
type={select('type', typeOptions, 'rombs')}
size={number('size', 40)} />
</Section>
));

13
web/ASC.Web.Components/src/components/loader/loader.test.js Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
import { mount } from 'enzyme';
import Loader from '.';
describe('<Loader />', () => {
it('renders without error', () => {
const wrapper = mount(
<Loader type="base" color="black" size={18} label="Loading" />
);
expect(wrapper).toExist();
});
});

0
web/ASC.Web.Storybook/stories/loaders/request-loader/README.md → web/ASC.Web.Components/src/components/request-loader/README.md
View File

2
web/ASC.Web.Storybook/stories/loaders/request-loader/request-loader.stories.js → web/ASC.Web.Components/src/components/request-loader/request-loader.stories.js
View File

@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
import { withKnobs, boolean, number, text, color } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { RequestLoader } from 'asc-web-components';
import RequestLoader from '.';
import Section from '../../../.storybook/decorators/section';
storiesOf('Components|Loaders', module)

13
web/ASC.Web.Components/src/components/request-loader/request-loader.test.js Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
import { mount } from 'enzyme';
import RequestLoader from '.';
describe('<RequestLoader />', () => {
it('renders without error', () => {
const wrapper = mount(
<RequestLoader label="Loading... Please wait..." />
);
expect(wrapper).toExist();
});
});

28
web/ASC.Web.Storybook/stories/loaders/dual-ring/README.md
View File

@ -1,28 +0,0 @@
# Loaders: Dual-Ring
## Usage
```js
import { Loader } from 'asc-web-components';
```
#### Description
Loader component is used for displaying loading actions on a page.
#### Usage
```js
<Loader color="black" size={40} type="dual-ring" label="Loading..." />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `color` | `string` | - | - | - | Svg color |
| `type` | `oneOf` | - | `base`, `oval`, `dual-ring`, `rombs` | `base` | - |
| `size` | `number` or `string` | - | - | - | Svg height and width value |
| `label` | `string` | - | - | - | Svg aria-lable or text label |

22
web/ASC.Web.Storybook/stories/loaders/dual-ring/dual-ring.stories.js
View File

@ -1,22 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, number, text, select, color } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Loader } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const typeOptions = ['base', 'oval', 'dual-ring', 'rombs'];
storiesOf('Components|Loaders', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('dual-ring', () => (
<Section>
<Loader
type={select('type', typeOptions, 'dual-ring')}
color={color('color', '#63686a')}
size={number('size', 40)}
label={text('label', "Loading content, please wait.")} />
</Section>
));

28
web/ASC.Web.Storybook/stories/loaders/oval/README.md
View File

@ -1,28 +0,0 @@
# Loaders: Oval
## Usage
```js
import { Loader } from 'asc-web-components';
```
#### Description
Loader component is used for displaying loading actions on a page.
#### Usage
```js
<Loader color="black" size={40} type="oval" label="Loading..." />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `color` | `string` | - | - | - | Svg color |
| `type` | `oneOf` | - | `base`, `oval`, `dual-ring`, `rombs` | `base` | - |
| `size` | `number` or `string` | - | - | - | Svg height and width value |
| `label` | `string` | - | - | - | Svg aria-lable or text label |

22
web/ASC.Web.Storybook/stories/loaders/oval/oval.stories.js
View File

@ -1,22 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, number, text, select, color } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Loader } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const typeOptions = ['base', 'oval', 'dual-ring', 'rombs'];
storiesOf('Components|Loaders', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('oval', () => (
<Section>
<Loader
type={select('type', typeOptions, 'oval')}
color={color('color', '#63686a')}
size={number('size', 40)}
label={text('label', "Loading content, please wait.")} />
</Section>
));

26
web/ASC.Web.Storybook/stories/loaders/rombs/README.md
View File

@ -1,26 +0,0 @@
# Loaders: Rombs
## Usage
```js
import { Loader } from 'asc-web-components';
```
#### Description
Loader component is used for displaying loading actions on a page.
#### Usage
```js
<Loader color="black" size={40} type="rombs" />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `type` | `oneOf` | - | `base`, `oval`, `dual-ring`, `rombs` | `base` | - |
| `size` | `number` or `string` | - | - | - | Loader height and width value |

20
web/ASC.Web.Storybook/stories/loaders/rombs/rombs.stories.js
View File

@ -1,20 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, number, text, select, color } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Loader } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const typeOptions = ['base', 'oval', 'dual-ring', 'rombs'];
storiesOf('Components|Loaders', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('rombs', () => (
<Section>
<Loader
type={select('type', typeOptions, 'rombs')}
size={number('size', 40)} />
</Section>
));