import ActivityItem from 'sentry/components/activity/item'; import ActivityAvatar from 'sentry/components/activity/item/avatar'; import ActivityBubble from 'sentry/components/activity/item/bubble'; const user = { username: 'billy@sentry.io', identities: [], id: '1', name: 'billy@sentry.io', dateJoined: '2019-03-09T06:52:42.836Z', avatar: {avatarUuid: null, avatarType: 'letter_avatar'}, email: 'billy@sentry.io', }; export default { title: 'Views/Activity/Activity Item', }; export const DefaultActivityItem = ({hideDate}) => ( <ActivityItem author={{type: 'user', user}} item={{id: '123'}} date={new Date()} header={<div>{user.email}</div>} hideDate={hideDate} > Activity Item </ActivityItem> ); DefaultActivityItem.storyName = 'Default'; DefaultActivityItem.args = { hideDate: false, }; DefaultActivityItem.parameters = { docs: { description: { story: 'An Activity Item is composed of: an author, header, body, and additionally timestamp and a status.', }, }, }; export const WithCustomHeader = ({hideDate}) => ( <ActivityItem author={{type: 'user', user}} item={{id: '123'}} date={new Date()} header={() => ( <div style={{backgroundColor: '#ccc'}}>Custom header (no timestamp)</div> )} hideDate={hideDate} > Activity Item </ActivityItem> ); WithCustomHeader.storyName = 'with custom Header'; WithCustomHeader.args = { hideDate: false, }; WithCustomHeader.parameters = { docs: { description: { story: 'Activity Item with a custom header', }, }, }; export const WithFooter = ({hideDate}) => ( <ActivityItem author={{type: 'user', user}} item={{id: '123'}} date={new Date()} header={<div>{user.email}</div>} footer={<div>Footer</div>} hideDate={hideDate} > Activity Item </ActivityItem> ); WithFooter.storyName = 'with footer'; WithFooter.args = { hideDate: false, }; WithFooter.parameters = { docs: { description: { story: 'Activity Item with a footer', }, }, }; export const SystemActivity = ({hideDate}) => ( <ActivityItem author={{type: 'system'}} item={{id: '123'}} date={new Date()} header={<div>Sentry detected something</div>} hideDate={hideDate} > Sentry did something </ActivityItem> ); SystemActivity.storyName = 'system activity'; SystemActivity.args = { hideDate: false, }; SystemActivity.parameters = { docs: { description: { story: 'An ActivityItem generated by Sentry', }, }, }; export const Bubble = ({...args}) => ( <ActivityBubble {...args}> <div>Activity Bubble</div> <div>Activity Bubble</div> <div>Activity Bubble</div> <div>Activity Bubble</div> <div>Activity Bubble</div> </ActivityBubble> ); Bubble.component = ActivityBubble; Bubble.args = { backgroundColor: '#fff', borderColor: 'red', }; Bubble.argTypes = { backgroundColor: {control: 'color'}, borderColor: {control: 'color'}, }; Bubble.parameters = { docs: { description: { story: 'Activity bubble with arrow at the top-left. This should probably not be used directly unless creating a new component.', }, }, }; export const Avatar = () => ( <div> <h3>User</h3> <ActivityAvatar type="user" user={user} size={48} /> <h3>System</h3> <ActivityAvatar type="system" size={48} /> </div> ); Avatar.parameters = { docs: { description: { story: 'Avatar based on the author type.', }, }, };