/
Basic.js
58 lines (54 loc) · 1.49 KB
/
Basic.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import * as Preact from '#preact';
import {BentoTwitter} from '../component';
import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
export default {
title: 'Twitter',
component: BentoTwitter,
decorators: [withKnobs],
};
export const _default = () => {
const tweetId = select(
'tweet id',
['1356304203044499462', '495719809695621121', '463440424141459456'],
'1356304203044499462'
);
const cards = boolean('show cards', true) ? undefined : 'hidden';
const conversation = boolean('show conversation', false) ? undefined : 'none';
return (
<BentoTwitter
cards={cards}
conversation={conversation}
tweetid={tweetId}
style={{width: '300px', height: '200px'}}
/>
);
};
export const moments = () => {
const limit = number('limit to', 2);
return (
<BentoTwitter
limit={limit}
momentid="1009149991452135424"
style={{width: '300px', height: '200px'}}
/>
);
};
export const timelines = () => {
const tweetLimit = number('limit to', 5);
const timelineSourceType = select(
'source type',
['profile', 'likes', 'list', 'source', 'collection', 'url', 'widget'],
'profile'
);
const timelineScreenName = 'amphtml';
const timelineUserId = '3450662892';
return (
<BentoTwitter
tweetLimit={tweetLimit}
timelineSourceType={timelineSourceType}
timelineScreenName={timelineScreenName}
timelineUserId={timelineUserId}
style={{width: '300px', height: '200px'}}
/>
);
};