First-class profile name rendering

This commit is contained in:
Scott Nonnenberg 2020-07-23 18:35:32 -07:00
parent 632cd0e87e
commit d07b8e82b2
63 changed files with 1044 additions and 454 deletions

View file

@ -10,9 +10,9 @@ import enMessages from '../../../\_locales/en/messages.json';
import {
ConversationHeader,
Props,
PropsActions,
PropsHousekeeping,
PropsActionsType,
PropsHousekeepingType,
PropsType,
} from './ConversationHeader';
import { gifUrl } from '../../storybook/Fixtures';
@ -25,11 +25,11 @@ type ConversationHeaderStory = {
description: string;
items: Array<{
title: string;
props: Props;
props: PropsType;
}>;
};
const actionProps: PropsActions = {
const actionProps: PropsActionsType = {
onSetDisappearingMessages: action('onSetDisappearingMessages'),
onDeleteMessages: action('onDeleteMessages'),
onResetSession: action('onResetSession'),
@ -50,7 +50,7 @@ const actionProps: PropsActions = {
onMoveToInbox: action('onMoveToInbox'),
};
const housekeepingProps: PropsHousekeeping = {
const housekeepingProps: PropsHousekeepingType = {
i18n,
};
@ -66,8 +66,10 @@ const stories: Array<ConversationHeaderStory> = [
color: 'red',
isVerified: true,
avatarPath: gifUrl,
title: 'Someone 🔥 Somewhere',
name: 'Someone 🔥 Somewhere',
phoneNumber: '(202) 555-0001',
type: 'direct',
id: '1',
profileName: '🔥Flames🔥',
isAccepted: true,
@ -80,8 +82,25 @@ const stories: Array<ConversationHeaderStory> = [
props: {
color: 'blue',
isVerified: false,
title: 'Someone 🔥 Somewhere',
name: 'Someone 🔥 Somewhere',
phoneNumber: '(202) 555-0002',
type: 'direct',
id: '2',
isAccepted: true,
...actionProps,
...housekeepingProps,
},
},
{
title: 'With name, not verified, descenders',
props: {
color: 'blue',
isVerified: false,
title: 'Joyrey 🔥 Leppey',
name: 'Joyrey 🔥 Leppey',
phoneNumber: '(202) 555-0002',
type: 'direct',
id: '2',
isAccepted: true,
...actionProps,
@ -94,7 +113,9 @@ const stories: Array<ConversationHeaderStory> = [
color: 'teal',
isVerified: false,
phoneNumber: '(202) 555-0003',
type: 'direct',
id: '3',
title: '🔥Flames🔥',
profileName: '🔥Flames🔥',
isAccepted: true,
...actionProps,
@ -104,7 +125,9 @@ const stories: Array<ConversationHeaderStory> = [
{
title: 'No name, no profile, no color',
props: {
title: '(202) 555-0011',
phoneNumber: '(202) 555-0011',
type: 'direct',
id: '11',
isAccepted: true,
...actionProps,
@ -117,6 +140,8 @@ const stories: Array<ConversationHeaderStory> = [
showBackButton: true,
color: 'deep_orange',
phoneNumber: '(202) 555-0004',
title: '(202) 555-0004',
type: 'direct',
id: '4',
isAccepted: true,
...actionProps,
@ -127,7 +152,9 @@ const stories: Array<ConversationHeaderStory> = [
title: 'Disappearing messages set',
props: {
color: 'indigo',
title: '(202) 555-0005',
phoneNumber: '(202) 555-0005',
type: 'direct',
id: '5',
expirationSettingName: '10 seconds',
timerOptions: [
@ -156,10 +183,11 @@ const stories: Array<ConversationHeaderStory> = [
title: 'Basic',
props: {
color: 'signal-blue',
title: 'Typescript support group',
name: 'Typescript support group',
phoneNumber: '',
id: '1',
isGroup: true,
type: 'group',
expirationSettingName: '10 seconds',
timerOptions: [
{
@ -180,10 +208,11 @@ const stories: Array<ConversationHeaderStory> = [
title: 'In a group you left - no disappearing messages',
props: {
color: 'signal-blue',
title: 'Typescript support group',
name: 'Typescript support group',
phoneNumber: '',
id: '2',
isGroup: true,
type: 'group',
leftGroup: true,
expirationSettingName: '10 seconds',
timerOptions: [
@ -211,8 +240,10 @@ const stories: Array<ConversationHeaderStory> = [
title: 'In chat with yourself',
props: {
color: 'blue',
title: '(202) 555-0007',
phoneNumber: '(202) 555-0007',
id: '7',
type: 'direct',
isMe: true,
isAccepted: true,
...actionProps,
@ -229,8 +260,10 @@ const stories: Array<ConversationHeaderStory> = [
title: '1:1 conversation',
props: {
color: 'blue',
title: '(202) 555-0007',
phoneNumber: '(202) 555-0007',
id: '7',
type: 'direct',
isMe: false,
isAccepted: false,
...actionProps,