Add stories for timeline notifications with long names

ts/components/conversation/CallingNotification.stories.tsx

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

ts/components/conversation/GroupNotification.stories.tsx

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

ts/components/conversation/SafetyNumberNotification.stories.tsx

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

ts/components/conversation/TimerNotification.stories.tsx

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

ts/components/conversation/VerificationNotification.stories.tsx

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