signal-desktop/ts/components/AvatarLightbox.stories.tsx
2021-08-05 20:17:05 -04:00

59 lines
1.5 KiB
TypeScript

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { select } from '@storybook/addon-knobs';
import enMessages from '../../_locales/en/messages.json';
import { AvatarColors } from '../types/Colors';
import { AvatarLightbox, PropsType } from './AvatarLightbox';
import { setup as setupI18n } from '../../js/modules/i18n';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
const i18n = setupI18n('en', enMessages);
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
avatarColor: select(
'Color',
AvatarColors,
overrideProps.avatarColor || AvatarColors[0]
),
avatarPath: overrideProps.avatarPath,
conversationTitle: overrideProps.conversationTitle,
i18n,
isGroup: Boolean(overrideProps.isGroup),
onClose: action('onClose'),
});
const story = storiesOf('Components/AvatarLightbox', module);
story.add('Group', () => (
<AvatarLightbox
{...createProps({
isGroup: true,
})}
/>
));
story.add('Person', () => {
const conversation = getDefaultConversation();
return (
<AvatarLightbox
{...createProps({
avatarColor: conversation.color,
conversationTitle: conversation.title,
})}
/>
);
});
story.add('Photo', () => (
<AvatarLightbox
{...createProps({
avatarPath: '/fixtures/kitten-1-64-64.jpg',
})}
/>
));