signal-desktop/ts/components/conversation/TypingBubble.stories.tsx
2021-09-17 20:30:08 -04:00

47 lines
1.3 KiB
TypeScript

// 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 { Props, TypingBubble } from './TypingBubble';
import { AvatarColors } from '../../types/Colors';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/TypingBubble', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
acceptedMessageRequest: true,
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: [],
});
story.add('Direct', () => {
const props = createProps();
return <TypingBubble {...props} />;
});
story.add('Group', () => {
const props = createProps({ conversationType: 'group' });
return <TypingBubble {...props} />;
});