UNPKG

1.94 kBJavaScriptView Raw
1import React from 'react';
2import {storiesOf} from '@storybook/html';
3
4import reactDecorator from '../../.storybook/react-decorator';
5import Island, {AdaptiveIsland, Header, Content} from '../island/island';
6
7storiesOf('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 });