Migrate ContactDetail to Storybook
This commit is contained in:
Chris Svenningsen
Josh Perez
parent
702913b21a
commit
6494818f76
3 changed files with 233 additions and 249 deletions
|
|
@ -1,248 +0,0 @@
|
|||
### With all data types
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0000',
|
||||
type: 3,
|
||||
},
|
||||
{
|
||||
value: '(202) 555-0001',
|
||||
type: 4,
|
||||
label: 'My favorite custom label',
|
||||
},
|
||||
],
|
||||
email: [
|
||||
{
|
||||
value: 'someone@somewhere.com',
|
||||
type: 2,
|
||||
},
|
||||
|
||||
{
|
||||
value: 'someone2@somewhere.com',
|
||||
type: 4,
|
||||
label: 'My second-favorite custom label',
|
||||
},
|
||||
],
|
||||
address: [
|
||||
{
|
||||
street: '5 Pike Place',
|
||||
city: 'Seattle',
|
||||
region: 'WA',
|
||||
postcode: '98101',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
street: '10 Pike Place',
|
||||
pobox: '3242',
|
||||
neighborhood: 'Downtown',
|
||||
city: 'Seattle',
|
||||
region: 'WA',
|
||||
postcode: '98101',
|
||||
country: 'United States',
|
||||
type: 3,
|
||||
label: 'My favorite spot!',
|
||||
},
|
||||
],
|
||||
};
|
||||
<ContactDetail
|
||||
contact={contact}
|
||||
hasSignalAccount={true}
|
||||
i18n={util.i18n}
|
||||
onSendMessage={() => console.log('onSendMessage')}
|
||||
/>;
|
||||
```
|
||||
|
||||
### With missing custom labels
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0000',
|
||||
type: 4,
|
||||
},
|
||||
],
|
||||
email: [
|
||||
{
|
||||
value: 'someone2@somewhere.com',
|
||||
type: 4,
|
||||
},
|
||||
],
|
||||
address: [
|
||||
{
|
||||
street: '10 Pike Place, Seattle WA',
|
||||
type: 3,
|
||||
},
|
||||
],
|
||||
};
|
||||
<ContactDetail
|
||||
contact={contact}
|
||||
hasSignalAccount={true}
|
||||
i18n={util.i18n}
|
||||
onSendMessage={() => console.log('onSendMessage')}
|
||||
/>;
|
||||
```
|
||||
|
||||
### With default avatar
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0000',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
<ContactDetail
|
||||
contact={contact}
|
||||
hasSignalAccount={true}
|
||||
i18n={util.i18n}
|
||||
onSendMessage={() => console.log('onSendMessage')}
|
||||
/>;
|
||||
```
|
||||
|
||||
### Without a Signal account
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0001',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
<ContactDetail
|
||||
contact={contact}
|
||||
hasSignalAccount={false}
|
||||
i18n={util.i18n}
|
||||
onSendMessage={() => console.log('onSendMessage')}
|
||||
/>;
|
||||
```
|
||||
|
||||
### No phone or email, partial addresses
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
address: [
|
||||
{
|
||||
type: 1,
|
||||
neighborhood: 'Greenwood',
|
||||
region: 'WA',
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
city: 'Seattle',
|
||||
region: 'WA',
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
label: 'My label',
|
||||
region: 'WA',
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
label: 'My label',
|
||||
postcode: '98101',
|
||||
region: 'WA',
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
label: 'My label',
|
||||
postcode: '98101',
|
||||
},
|
||||
],
|
||||
};
|
||||
<ContactDetail
|
||||
contact={contact}
|
||||
hasSignalAccount={false}
|
||||
i18n={util.i18n}
|
||||
onSendMessage={() => console.log('onSendMessage')}
|
||||
/>;
|
||||
```
|
||||
|
||||
### With all data types
|
||||
|
||||
```jsx
|
||||
const contact = {
|
||||
avatar: {
|
||||
avatar: {
|
||||
pending: true,
|
||||
},
|
||||
},
|
||||
name: {
|
||||
displayName: 'Someone Somewhere',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '(202) 555-0000',
|
||||
type: 3,
|
||||
},
|
||||
],
|
||||
address: [
|
||||
{
|
||||
street: '5 Pike Place',
|
||||
city: 'Seattle',
|
||||
region: 'WA',
|
||||
postcode: '98101',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
<ContactDetail
|
||||
contact={contact}
|
||||
hasSignalAccount={true}
|
||||
i18n={util.i18n}
|
||||
onSendMessage={() => console.log('onSendMessage')}
|
||||
/>;
|
||||
```
|
||||
|
||||
### Empty contact
|
||||
|
||||
```jsx
|
||||
const contact = {};
|
||||
<ContactDetail
|
||||
contact={contact}
|
||||
hasSignalAccount={false}
|
||||
i18n={util.i18n}
|
||||
onSendMessage={() => console.log('onSendMessage')}
|
||||
/>;
|
||||
```
|
||||
232
ts/components/conversation/ContactDetail.stories.tsx
Normal file
232
ts/components/conversation/ContactDetail.stories.tsx
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { ContactDetail, Props } from './ContactDetail';
|
||||
import { AddressType, ContactFormType } from '../../types/Contact';
|
||||
|
||||
// @ts-ignore
|
||||
import { setup as setupI18n } from '../../../js/modules/i18n';
|
||||
// @ts-ignore
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/Conversation/ContactDetail', module);
|
||||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
contact: overrideProps.contact || {},
|
||||
hasSignalAccount: boolean(
|
||||
'hasSignalAccount',
|
||||
overrideProps.hasSignalAccount || false
|
||||
),
|
||||
i18n,
|
||||
onSendMessage: action('onSendMessage'),
|
||||
});
|
||||
|
||||
const fullContact = {
|
||||
address: [
|
||||
{
|
||||
type: AddressType.HOME,
|
||||
street: '555 Main St.',
|
||||
city: 'Boston',
|
||||
region: 'MA',
|
||||
postcode: '33333',
|
||||
pobox: '2323-444',
|
||||
country: 'US',
|
||||
neighborhood: 'Garden Place',
|
||||
},
|
||||
{
|
||||
type: AddressType.WORK,
|
||||
street: '333 Another St.',
|
||||
city: 'Boston',
|
||||
region: 'MA',
|
||||
postcode: '33344',
|
||||
pobox: '2424-555',
|
||||
country: 'US',
|
||||
neighborhood: 'Factory Place',
|
||||
},
|
||||
{
|
||||
type: AddressType.CUSTOM,
|
||||
street: '111 Dream St.',
|
||||
city: 'Miami',
|
||||
region: 'FL',
|
||||
postcode: '44232',
|
||||
pobox: '111-333',
|
||||
country: 'US',
|
||||
neighborhood: 'BeachVille',
|
||||
label: 'vacation',
|
||||
},
|
||||
{
|
||||
type: AddressType.CUSTOM,
|
||||
street: '333 Fake St.',
|
||||
city: 'Boston',
|
||||
region: 'MA',
|
||||
postcode: '33345',
|
||||
pobox: '123-444',
|
||||
country: 'US',
|
||||
neighborhood: 'Downtown',
|
||||
},
|
||||
],
|
||||
avatar: {
|
||||
avatar: {
|
||||
path: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
|
||||
},
|
||||
isProfile: true,
|
||||
},
|
||||
email: [
|
||||
{
|
||||
value: 'jerjor@fakemail.com',
|
||||
type: ContactFormType.HOME,
|
||||
},
|
||||
{
|
||||
value: 'jerry.jordan@fakeco.com',
|
||||
type: ContactFormType.WORK,
|
||||
},
|
||||
{
|
||||
value: 'jj@privatething.net',
|
||||
type: ContactFormType.CUSTOM,
|
||||
label: 'private',
|
||||
},
|
||||
{
|
||||
value: 'jordan@another.net',
|
||||
type: ContactFormType.CUSTOM,
|
||||
},
|
||||
],
|
||||
name: {
|
||||
givenName: 'Jerry',
|
||||
familyName: 'Jordan',
|
||||
prefix: 'Dr.',
|
||||
suffix: 'Jr.',
|
||||
middleName: 'James',
|
||||
displayName: 'Jerry Jordan',
|
||||
},
|
||||
number: [
|
||||
{
|
||||
value: '555-444-2323',
|
||||
type: ContactFormType.HOME,
|
||||
},
|
||||
{
|
||||
value: '555-444-3232',
|
||||
type: ContactFormType.WORK,
|
||||
},
|
||||
{
|
||||
value: '555-666-3232',
|
||||
type: ContactFormType.MOBILE,
|
||||
},
|
||||
{
|
||||
value: '333-666-3232',
|
||||
type: ContactFormType.CUSTOM,
|
||||
label: 'special',
|
||||
},
|
||||
{
|
||||
value: '333-777-3232',
|
||||
type: ContactFormType.CUSTOM,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
story.add('Fully Filled Out', () => {
|
||||
const props = createProps({
|
||||
contact: fullContact,
|
||||
hasSignalAccount: true,
|
||||
});
|
||||
return <ContactDetail {...props} />;
|
||||
});
|
||||
|
||||
story.add('Only Email', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
email: [
|
||||
{
|
||||
value: 'jerjor@fakemail.com',
|
||||
type: ContactFormType.HOME,
|
||||
},
|
||||
],
|
||||
},
|
||||
hasSignalAccount: true,
|
||||
});
|
||||
|
||||
return <ContactDetail {...props} />;
|
||||
});
|
||||
|
||||
story.add('Given Name', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
name: {
|
||||
givenName: 'Jerry',
|
||||
},
|
||||
},
|
||||
hasSignalAccount: true,
|
||||
});
|
||||
|
||||
return <ContactDetail {...props} />;
|
||||
});
|
||||
|
||||
story.add('Organization', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
organization: 'Company 5',
|
||||
},
|
||||
hasSignalAccount: true,
|
||||
});
|
||||
|
||||
return <ContactDetail {...props} />;
|
||||
});
|
||||
|
||||
story.add('Given + Family Name', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
name: {
|
||||
givenName: 'Jerry',
|
||||
familyName: 'FamilyName',
|
||||
},
|
||||
},
|
||||
hasSignalAccount: true,
|
||||
});
|
||||
|
||||
return <ContactDetail {...props} />;
|
||||
});
|
||||
|
||||
story.add('Family Name', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
name: {
|
||||
familyName: 'FamilyName',
|
||||
},
|
||||
},
|
||||
hasSignalAccount: true,
|
||||
});
|
||||
|
||||
return <ContactDetail {...props} />;
|
||||
});
|
||||
|
||||
story.add('Loading Avatar', () => {
|
||||
const props = createProps({
|
||||
contact: {
|
||||
avatar: {
|
||||
avatar: {
|
||||
pending: true,
|
||||
},
|
||||
isProfile: true,
|
||||
},
|
||||
},
|
||||
hasSignalAccount: true,
|
||||
});
|
||||
return <ContactDetail {...props} />;
|
||||
});
|
||||
|
||||
story.add('Empty with Account', () => {
|
||||
const props = createProps({
|
||||
hasSignalAccount: true,
|
||||
});
|
||||
return <ContactDetail {...props} />;
|
||||
});
|
||||
|
||||
story.add('Empty without Account', () => {
|
||||
const props = createProps({
|
||||
hasSignalAccount: false,
|
||||
});
|
||||
return <ContactDetail {...props} />;
|
||||
});
|
||||
|
|
@ -18,7 +18,7 @@ import {
|
|||
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
|
||||
interface Props {
|
||||
export interface Props {
|
||||
contact: ContactType;
|
||||
hasSignalAccount: boolean;
|
||||
i18n: LocalizerType;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue