1 | import React from 'react';
|
2 | import {storiesOf} from '@storybook/html';
|
3 |
|
4 | import reactDecorator from '../../.storybook/react-decorator';
|
5 | import Island, {AdaptiveIsland, Header, Content} from '../island/island';
|
6 |
|
7 | storiesOf('Components|Island', module).
|
8 | addParameters({
|
9 | notes: 'Displays an island.',
|
10 | hermione: {captureSelector: '*[data-test~=ring-island]'}
|
11 | }).
|
12 | addDecorator(reactDecorator()).
|
13 | add('basic', () => (
|
14 | <Island>
|
15 | <Header border>Title</Header>
|
16 | <Content>Content</Content>
|
17 | </Island>
|
18 | )).
|
19 | add('with scroll', () => (
|
20 | <Island className="limited-island" narrow>
|
21 | <Header border>Title</Header>
|
22 | <Content fade>
|
23 | Lorem Ipsum is simply dummy text of the printing and typesetting
|
24 | industry. Lorem Ipsum has been the industry's standard dummy text ever
|
25 | since the 1500s, when an unknown printer took a galley of type and
|
26 | scrambled it to make a type specimen book. It has survived not only five
|
27 | centuries, but also the leap into electronic typesetting, remaining
|
28 | essentially unchanged.
|
29 | </Content>
|
30 | </Island>
|
31 | ), {
|
32 | storyStyles: `
|
33 | <style>
|
34 | .limited-island {
|
35 | height: 200px;
|
36 | width: 200px;
|
37 | }
|
38 | </style>
|
39 | `
|
40 | }).
|
41 | add('with resizeable header', () => (
|
42 | <AdaptiveIsland className="limited-island" narrow>
|
43 | <Header>Title</Header>
|
44 | <Content fade>
|
45 | Lorem Ipsum is simply dummy text of the printing and typesetting
|
46 | industry. Lorem Ipsum has been the industry's standard dummy text ever
|
47 | since the 1500s, when an unknown printer took a galley of type and
|
48 | scrambled it to make a type specimen book. It has survived not only five
|
49 | centuries, but also the leap into electronic typesetting, remaining
|
50 | essentially unchanged.
|
51 | </Content>
|
52 | </AdaptiveIsland>
|
53 | ), {
|
54 | storyStyles: `
|
55 | <style>
|
56 | .limited-island {
|
57 | height: 200px;
|
58 | width: 200px;
|
59 | }
|
60 | </style>
|
61 | `
|
62 | });
|