Add stories for timeline notifications with long names
This commit is contained in:
parent
5bf3720d1d
commit
ddc591e962
5 changed files with 86 additions and 1 deletions
|
@ -74,6 +74,25 @@ const getCommonProps = () => ({
|
|||
));
|
||||
});
|
||||
|
||||
story.add('Group call: started by someone with a long name', () => {
|
||||
const longName = '😤🪐🦆'.repeat(50);
|
||||
|
||||
return (
|
||||
<CallingNotification
|
||||
{...getCommonProps()}
|
||||
callMode={CallMode.Group}
|
||||
creator={{
|
||||
isMe: false,
|
||||
title: longName,
|
||||
}}
|
||||
deviceCount={15}
|
||||
ended={false}
|
||||
maxDevices={16}
|
||||
startedTime={1618894800000}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
story.add('Group call: active, call full', () => (
|
||||
<CallingNotification
|
||||
{...getCommonProps()}
|
||||
|
|
|
@ -14,6 +14,8 @@ const i18n = setupI18n('en', enMessages);
|
|||
|
||||
type GroupNotificationStory = [string, Array<Props>];
|
||||
|
||||
const longName = '🍷🐓🥶'.repeat(50);
|
||||
|
||||
const stories: Array<GroupNotificationStory> = [
|
||||
[
|
||||
'Combo',
|
||||
|
@ -390,6 +392,24 @@ const stories: Array<GroupNotificationStory> = [
|
|||
},
|
||||
],
|
||||
],
|
||||
[
|
||||
'Long name',
|
||||
[
|
||||
{
|
||||
from: {
|
||||
title: longName,
|
||||
name: longName,
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
changes: [
|
||||
{
|
||||
type: 'general',
|
||||
},
|
||||
],
|
||||
i18n,
|
||||
},
|
||||
],
|
||||
],
|
||||
];
|
||||
|
||||
book.add('GroupNotification', () =>
|
||||
|
|
|
@ -54,3 +54,14 @@ stories.add('Direct Conversation', () => {
|
|||
|
||||
return <SafetyNumberNotification {...props} />;
|
||||
});
|
||||
|
||||
stories.add('Long name in group', () => {
|
||||
const props = createProps({
|
||||
isGroup: true,
|
||||
contact: createContact({
|
||||
title: '🐈⬛🍕🎂'.repeat(50),
|
||||
}),
|
||||
});
|
||||
|
||||
return <SafetyNumberNotification {...props} />;
|
||||
});
|
||||
|
|
|
@ -62,6 +62,26 @@ story.add('Set By Other', () => {
|
|||
);
|
||||
});
|
||||
|
||||
story.add('Set By Other (with a long name)', () => {
|
||||
const longName = '🦴🧩📴'.repeat(50);
|
||||
|
||||
const props = createProps({
|
||||
expireTimer: moment.duration(1, 'hour').asSeconds(),
|
||||
type: 'fromOther',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
profileName: longName,
|
||||
title: longName,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<TimerNotification {...props} />
|
||||
<div style={{ padding: '1em' }} />
|
||||
<TimerNotification {...props} disabled />
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
story.add('Set By You', () => {
|
||||
const props = createProps({
|
||||
expireTimer: moment.duration(1, 'hour').asSeconds(),
|
||||
|
|
|
@ -26,7 +26,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
i18n,
|
||||
type: overrideProps.type || 'markVerified',
|
||||
isLocal: boolean('isLocal', overrideProps.isLocal !== false),
|
||||
contact,
|
||||
contact: overrideProps.contact || contact,
|
||||
});
|
||||
|
||||
story.add('Mark as Verified', () => {
|
||||
|
@ -52,3 +52,18 @@ story.add('Mark as Not Verified Remotely', () => {
|
|||
|
||||
return <VerificationNotification {...props} />;
|
||||
});
|
||||
|
||||
story.add('Long name', () => {
|
||||
const longName = '🎆🍬🏈'.repeat(50);
|
||||
|
||||
const props = createProps({
|
||||
type: 'markVerified',
|
||||
contact: {
|
||||
...contact,
|
||||
profileName: longName,
|
||||
title: longName,
|
||||
},
|
||||
});
|
||||
|
||||
return <VerificationNotification {...props} />;
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue