Migrate EmbeddedContact to Storybook
This commit is contained in:
Chris Svenningsen
Josh Perez
parent
84fee07a72
commit
0e79f83a42
3 changed files with 173 additions and 677 deletions
|
|
@ -1,676 +0,0 @@
|
|||
### With a contact
|
||||
|
||||
#### Including all data types
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0000',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
onClick: () => console.log('onClick'),
|
||||
onSendMessage: () => console.log('onSendMessage'),
|
||||
signalAccount: '+12025550000',
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Image download pending
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0000',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
avatar: {
|
||||
avatar: {
|
||||
pending: true,
|
||||
},
|
||||
},
|
||||
onClick: () => console.log('onClick'),
|
||||
onSendMessage: () => console.log('onSendMessage'),
|
||||
signalAccount: '+12025550000',
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Really long data
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
name: {
|
||||
displayName:
|
||||
'Dr. First Middle Last Junior Senior and all that and a bag of chips',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0000 0000 0000 0000 0000 0000 0000 0000 0000 0000',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### In group conversation
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0000',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
signalAccount: '+12025550000',
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationType="group"
|
||||
authorName="Mr. Fire"
|
||||
authorAvatarPath={util.gifObjectUrl}
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
authorName="Mr. Fire"
|
||||
conversationType="group"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
conversationType="group"
|
||||
authorName="Mr. Fire"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### If contact has no signal account
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0000',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### With organization name instead of name
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
organization: 'United Somewheres, Inc.',
|
||||
email: [
|
||||
{
|
||||
value: 'someone@somewheres.com',
|
||||
type: 2,
|
||||
},
|
||||
],
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### No displayName or organization
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
name: {
|
||||
givenName: 'Someone',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-1000',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
signalAccount: '+12025551000',
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Default avatar
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-1001',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Empty contact
|
||||
|
||||
```jsx
|
||||
const contact = {};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Contact with caption (cannot currently be sent)
|
||||
|
||||
```jsx
|
||||
const contactWithAccount = {
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0000',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
signalAccount: '+12025550000',
|
||||
};
|
||||
const contactWithoutAccount = {
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0000',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contactWithAccount}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contactWithAccount}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contactWithAccount}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contactWithAccount}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contactWithoutAccount}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contactWithoutAccount}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contactWithoutAccount}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contactWithoutAccount}
|
||||
selectMessage={(...args) => console.log('selectMessage', args)}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
172
ts/components/conversation/EmbeddedContact.stories.tsx
Normal file
172
ts/components/conversation/EmbeddedContact.stories.tsx
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean, number } from '@storybook/addon-knobs';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { EmbeddedContact, Props } from './EmbeddedContact';
|
||||
|
||||
// @ts-ignore
|
||||
import { setup as setupI18n } from '../../../js/modules/i18n';
|
||||
// @ts-ignore
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
import { ContactFormType } from '../../types/Contact';
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/Conversation/EmbeddedContact', module);
|
||||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
contact: overrideProps.contact || {},
|
||||
i18n,
|
||||
isIncoming: boolean('isIncoming', overrideProps.isIncoming || false),
|
||||
onClick: action('onClick'),
|
||||
tabIndex: number('tabIndex', overrideProps.tabIndex || 0),
|
||||
withContentAbove: boolean(
|
||||
'withContentAbove',
|
||||
overrideProps.withContentAbove || false
|
||||
),
|
||||
withContentBelow: boolean(
|
||||
'withContentBelow',
|
||||
overrideProps.withContentBelow || false
|
||||
),
|
||||
});
|
||||
|
||||
const fullContact = {
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
|
||||
},
|
||||
isProfile: true,
|
||||
},
|
||||
email: [
|
||||
{
|
||||
value: 'jerjor@fakemail.com',
|
||||
type: ContactFormType.HOME,
|
||||
},
|
||||
],
|
||||
name: {
|
||||
givenName: 'Jerry',
|
||||
familyName: 'Jordan',
|
||||
prefix: 'Dr.',
|
||||
suffix: 'Jr.',
|
||||
middleName: 'James',
|
||||
displayName: 'Jerry Jordan',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '555-444-2323',
|
||||
type: ContactFormType.HOME,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
story.add('Full Contact', () => {
|
||||
const props = createProps({
|
||||
contact: fullContact,
|
||||
});
|
||||
return <EmbeddedContact {...props} />;
|
||||
});
|
||||
|
||||
story.add('Only Email', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
email: fullContact.email,
|
||||
},
|
||||
});
|
||||
|
||||
return <EmbeddedContact {...props} />;
|
||||
});
|
||||
|
||||
story.add('Given Name', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
name: {
|
||||
givenName: 'Jerry',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return <EmbeddedContact {...props} />;
|
||||
});
|
||||
|
||||
story.add('Organization', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
organization: 'Company 5',
|
||||
},
|
||||
});
|
||||
|
||||
return <EmbeddedContact {...props} />;
|
||||
});
|
||||
|
||||
story.add('Given + Family Name', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
name: {
|
||||
givenName: 'Jerry',
|
||||
familyName: 'FamilyName',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return <EmbeddedContact {...props} />;
|
||||
});
|
||||
|
||||
story.add('Family Name', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
name: {
|
||||
familyName: 'FamilyName',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return <EmbeddedContact {...props} />;
|
||||
});
|
||||
|
||||
story.add('Loading Avatar', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
name: {
|
||||
displayName: 'Jerry Jordan',
|
||||
},
|
||||
avatar: {
|
||||
avatar: {
|
||||
pending: true,
|
||||
},
|
||||
isProfile: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
return <EmbeddedContact {...props} />;
|
||||
});
|
||||
|
||||
story.add('Incoming', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
name: fullContact.name,
|
||||
},
|
||||
isIncoming: true,
|
||||
});
|
||||
|
||||
// Wrapped in a <div> to provide a background for light color of text
|
||||
return (
|
||||
<div style={{ backgroundColor: 'darkgreen' }}>
|
||||
<EmbeddedContact {...props} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
story.add('Content Above and Below', () => {
|
||||
const props = createProps({
|
||||
withContentAbove: true,
|
||||
withContentBelow: true,
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<div>Content Above</div>
|
||||
<EmbeddedContact {...props} />
|
||||
<div>Content Below</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -10,7 +10,7 @@ import {
|
|||
renderName,
|
||||
} from './_contactUtil';
|
||||
|
||||
interface Props {
|
||||
export interface Props {
|
||||
contact: ContactType;
|
||||
i18n: LocalizerType;
|
||||
isIncoming: boolean;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue