diff --git a/ts/components/conversation/ContactDetail.md b/ts/components/conversation/ContactDetail.md deleted file mode 100644 index cd2c5ae94..000000000 --- a/ts/components/conversation/ContactDetail.md +++ /dev/null @@ -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!', - }, - ], -}; - 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, - }, - ], -}; - console.log('onSendMessage')} -/>; -``` - -### With default avatar - -```jsx -const contact = { - name: { - displayName: 'Someone Somewhere', - }, - number: [ - { - value: '(202) 555-0000', - type: 1, - }, - ], -}; - 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, - }, - ], -}; - 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', - }, - ], -}; - 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, - }, - ], -}; - console.log('onSendMessage')} -/>; -``` - -### Empty contact - -```jsx -const contact = {}; - console.log('onSendMessage')} -/>; -``` diff --git a/ts/components/conversation/ContactDetail.stories.tsx b/ts/components/conversation/ContactDetail.stories.tsx new file mode 100644 index 000000000..180430c8a --- /dev/null +++ b/ts/components/conversation/ContactDetail.stories.tsx @@ -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 => ({ + 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 ; +}); + +story.add('Only Email', () => { + const props = createProps({ + contact: { + email: [ + { + value: 'jerjor@fakemail.com', + type: ContactFormType.HOME, + }, + ], + }, + hasSignalAccount: true, + }); + + return ; +}); + +story.add('Given Name', () => { + const props = createProps({ + contact: { + name: { + givenName: 'Jerry', + }, + }, + hasSignalAccount: true, + }); + + return ; +}); + +story.add('Organization', () => { + const props = createProps({ + contact: { + organization: 'Company 5', + }, + hasSignalAccount: true, + }); + + return ; +}); + +story.add('Given + Family Name', () => { + const props = createProps({ + contact: { + name: { + givenName: 'Jerry', + familyName: 'FamilyName', + }, + }, + hasSignalAccount: true, + }); + + return ; +}); + +story.add('Family Name', () => { + const props = createProps({ + contact: { + name: { + familyName: 'FamilyName', + }, + }, + hasSignalAccount: true, + }); + + return ; +}); + +story.add('Loading Avatar', () => { + const props = createProps({ + contact: { + avatar: { + avatar: { + pending: true, + }, + isProfile: true, + }, + }, + hasSignalAccount: true, + }); + return ; +}); + +story.add('Empty with Account', () => { + const props = createProps({ + hasSignalAccount: true, + }); + return ; +}); + +story.add('Empty without Account', () => { + const props = createProps({ + hasSignalAccount: false, + }); + return ; +}); diff --git a/ts/components/conversation/ContactDetail.tsx b/ts/components/conversation/ContactDetail.tsx index 2424af4b3..88dd70933 100644 --- a/ts/components/conversation/ContactDetail.tsx +++ b/ts/components/conversation/ContactDetail.tsx @@ -18,7 +18,7 @@ import { import { LocalizerType } from '../../types/Util'; -interface Props { +export interface Props { contact: ContactType; hasSignalAccount: boolean; i18n: LocalizerType;