Avatar defaults and colors
This commit is contained in:
parent
a001882d58
commit
12d2b1bf7c
140 changed files with 4212 additions and 1084 deletions
98
ts/components/AvatarEditor.stories.tsx
Normal file
98
ts/components/AvatarEditor.stories.tsx
Normal file
|
@ -0,0 +1,98 @@
|
|||
// 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 { setup as setupI18n } from '../../js/modules/i18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
import { AvatarColors } from '../types/Colors';
|
||||
import { AvatarEditor, PropsType } from './AvatarEditor';
|
||||
import { getDefaultAvatars } from '../types/Avatar';
|
||||
import { createAvatarData } from '../util/createAvatarData';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
||||
avatarColor: overrideProps.avatarColor || AvatarColors[9],
|
||||
avatarPath: overrideProps.avatarPath,
|
||||
conversationId: '123',
|
||||
conversationTitle: overrideProps.conversationTitle || 'Default Title',
|
||||
deleteAvatarFromDisk: action('deleteAvatarFromDisk'),
|
||||
i18n,
|
||||
isGroup: Boolean(overrideProps.isGroup),
|
||||
onCancel: action('onCancel'),
|
||||
onSave: action('onSave'),
|
||||
replaceAvatar: action('replaceAvatar'),
|
||||
saveAvatarToDisk: action('saveAvatarToDisk'),
|
||||
userAvatarData: overrideProps.userAvatarData || [
|
||||
createAvatarData({
|
||||
imagePath: '/fixtures/kitten-3-64-64.jpg',
|
||||
}),
|
||||
createAvatarData({
|
||||
color: 'A110',
|
||||
text: 'YA',
|
||||
}),
|
||||
createAvatarData({
|
||||
color: 'A120',
|
||||
text: 'OK',
|
||||
}),
|
||||
createAvatarData({
|
||||
color: 'A130',
|
||||
text: 'F',
|
||||
}),
|
||||
createAvatarData({
|
||||
color: 'A140',
|
||||
text: '🏄💣',
|
||||
}),
|
||||
createAvatarData({
|
||||
color: 'A150',
|
||||
text: '😇🙃😆',
|
||||
}),
|
||||
createAvatarData({
|
||||
color: 'A160',
|
||||
text: '🦊F💦',
|
||||
}),
|
||||
createAvatarData({
|
||||
color: 'A170',
|
||||
text: 'J',
|
||||
}),
|
||||
createAvatarData({
|
||||
color: 'A180',
|
||||
text: 'ZAP',
|
||||
}),
|
||||
createAvatarData({
|
||||
color: 'A190',
|
||||
text: '🍍P',
|
||||
}),
|
||||
createAvatarData({
|
||||
color: 'A200',
|
||||
text: '🌵',
|
||||
}),
|
||||
createAvatarData({
|
||||
color: 'A210',
|
||||
text: 'NAP',
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/AvatarEditor', module);
|
||||
|
||||
story.add('No Avatar (group)', () => (
|
||||
<AvatarEditor
|
||||
{...createProps({ isGroup: true, userAvatarData: getDefaultAvatars(true) })}
|
||||
/>
|
||||
));
|
||||
story.add('No Avatar (me)', () => (
|
||||
<AvatarEditor {...createProps({ userAvatarData: getDefaultAvatars() })} />
|
||||
));
|
||||
|
||||
story.add('Has Avatar', () => (
|
||||
<AvatarEditor
|
||||
{...createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
})}
|
||||
/>
|
||||
));
|
Loading…
Add table
Add a link
Reference in a new issue