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,
|
renderName,
|
||||||
} from './_contactUtil';
|
} from './_contactUtil';
|
||||||
|
|
||||||
interface Props {
|
export interface Props {
|
||||||
contact: ContactType;
|
contact: ContactType;
|
||||||
i18n: LocalizerType;
|
i18n: LocalizerType;
|
||||||
isIncoming: boolean;
|
isIncoming: boolean;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue