Add stories for timeline notifications with long names

This commit is contained in:
Evan Hahn 2021-09-02 16:23:27 -05:00 committed by GitHub
parent 5bf3720d1d
commit ddc591e962
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 86 additions and 1 deletions

View file

@ -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()}

View file

@ -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', () =>

View file

@ -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} />;
});

View file

@ -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(),

View file

@ -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} />;
});