-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
/
TypingBubble.stories.tsx
51 lines (42 loc) · 1.47 KB
/
TypingBubble.stories.tsx
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
// Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { select, text } from '@storybook/addon-knobs';
import { setupI18n } from '../../util/setupI18n';
import enMessages from '../../../_locales/en/messages.json';
import type { Props } from './TypingBubble';
import { TypingBubble } from './TypingBubble';
import { AvatarColors } from '../../types/Colors';
import { ThemeType } from '../../types/Util';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/TypingBubble', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
acceptedMessageRequest: true,
badge: undefined,
isMe: false,
i18n,
color: select(
'color',
AvatarColors.reduce((m, c) => ({ ...m, [c]: c }), {}),
overrideProps.color || AvatarColors[0]
),
avatarPath: text('avatarPath', overrideProps.avatarPath || ''),
title: '',
profileName: text('profileName', overrideProps.profileName || ''),
conversationType: select(
'conversationType',
{ group: 'group', direct: 'direct' },
overrideProps.conversationType || 'direct'
),
sharedGroupNames: [],
theme: ThemeType.light,
});
story.add('Direct', () => {
const props = createProps();
return <TypingBubble {...props} />;
});
story.add('Group', () => {
const props = createProps({ conversationType: 'group' });
return <TypingBubble {...props} />;
});