import React from 'react' ; import { MessageSystem , MessageSystemBody , MessageSystemContainer , MessageSystemLeftContainer , MessageSystemName , MessageSystemTimestamp , } from '.' ; import { MessageDivider , MessageSystemBlock } from '..' ; import { Avatar , Box } from '../..' ; import MessageReactions from '../MessageReactions' ; export default { title : 'Message/System' , component : MessageSystem , parameters : { jest : [ 'Message.spec.tsx' ] , } , } ; export const Default = ( ) => ( < Box overflow = 'hidden' > < MessageDivider > May , 24 , 2020 < /MessageDivider> < MessageSystem > < MessageSystemLeftContainer > < Avatar url = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC 4n ICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL / 2 wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj IyMjIyMjIyMjIyMjIyMjL / wAARCAAoACgDASIAAhEBAxEB / 8 QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj / xAAuEAACAQQAAwcEAQUAAA AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH / xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP / EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg MREiExE0HR / 9 oADAMBAAIRAxEAPwBuXuIkhBuMe5ib / AHQP49q4L3mLitryTLTSpOiHQI5k / HzXa / qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L xqjOU / 24 dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9 / MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD / AGvJAluyxxRd6F4x00o + NdKoVr jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw + 37 mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS / BIzSN0YRk eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1 + agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk / u4eZ0deTl71Ef 6 hY + 0 yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em + taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB SuvjQ / FFJayjDWrCTepAQ2vUH0oo / Jk3ovpwJJeVCP5CN + lFFaaMqy + nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP + iqBexSWdxLazoUljJVlP UH2oorkV10pRc7b1zXb / hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs < /MessageSystemLeftContainer> < MessageSystemContainer > < MessageSystemBlock > < MessageSystemName > Haylie George < /MessageSystemName> < MessageSystemBody > Ut enim ad minim veniam , quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur . Consectetur adipiscing elit , sed do eiusmod tempor incididunt ut labore et dolore magna aliqua . Ut enim ad minim veniam ... < /MessageSystemBody> < MessageSystemTimestamp > 12 : 00 PM < /MessageSystemTimestamp> < /MessageSystemBlock> < /MessageSystemContainer> < /MessageSystem> < MessageDivider unreadLabel = 'Unread' > May , 24 , 2020 < /MessageDivider> < MessageSystem > < MessageSystemLeftContainer > < Avatar url = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC 4n ICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL / 2 wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj IyMjIyMjIyMjIyMjIyMjL / wAARCAAoACgDASIAAhEBAxEB / 8 QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj / xAAuEAACAQQAAwcEAQUAAA AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH / xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP / EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg MREiExE0HR / 9 oADAMBAAIRAxEAPwBuXuIkhBuMe5ib / AHQP49q4L3mLitryTLTSpOiHQI5k / HzXa / qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L xqjOU / 24 dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9 / MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD / AGvJAluyxxRd6F4x00o + NdKoVr jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw + 37 mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS / BIzSN0YRk eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1 + agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk / u4eZ0deTl71Ef 6 hY + 0 yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em + taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB SuvjQ / FFJayjDWrCTepAQ2vUH0oo / Jk3ovpwJJeVCP5CN + lFFaaMqy + nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP + iqBexSWdxLazoUljJVlP UH2oorkV10pRc7b1zXb / hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs < /MessageSystemLeftContainer> < MessageSystemContainer > < MessageSystemBlock > < MessageSystemName > Haylie George < /MessageSystemName> < MessageSystemBody > Ut enim ad minim veniam , quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur . Consectetur adipiscing elit , sed do eiusmod tempor incididunt ut labore et dolore magna aliqua . Ut enim ad minim veniam ... < /MessageSystemBody> < MessageSystemTimestamp > 12 : 00 PM < /MessageSystemTimestamp> < /MessageSystemBlock> < MessageSystemBlock > < MessageReactions > < MessageReactions . Reaction counter = { 1 } /> < MessageReactions . Reaction counter = { 2 } / > < MessageReactions . Reaction counter = { 3 } /> < MessageReactions . Action / > < /MessageReactions> < /MessageSystemBlock> < /MessageSystemContainer> < /MessageSystem> < MessageDivider unreadLabel = 'Unread' / > < MessageSystem > < MessageSystemLeftContainer > < Avatar url = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC 4n ICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL / 2 wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj IyMjIyMjIyMjIyMjIyMjL / wAARCAAoACgDASIAAhEBAxEB / 8 QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj / xAAuEAACAQQAAwcEAQUAAA AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH / xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP / EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg MREiExE0HR / 9 oADAMBAAIRAxEAPwBuXuIkhBuMe5ib / AHQP49q4L3mLitryTLTSpOiHQI5k / HzXa / qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L xqjOU / 24 dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9 / MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD / AGvJAluyxxRd6F4x00o + NdKoVr jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw + 37 mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS / BIzSN0YRk eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1 + agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk / u4eZ0deTl71Ef 6 hY + 0 yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em + taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB SuvjQ / FFJayjDWrCTepAQ2vUH0oo / Jk3ovpwJJeVCP5CN + lFFaaMqy + nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP + iqBexSWdxLazoUljJVlP UH2oorkV10pRc7b1zXb / hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs < /MessageSystemLeftContainer> < MessageSystemContainer > < MessageSystemBlock > < MessageSystemName > Haylie George < /MessageSystemName> < MessageSystemBody > Ut enim ad minim veniam , quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur . Consectetur adipiscing elit , sed do eiusmod tempor incididunt ut labore et dolore magna aliqua . Ut enim ad minim veniam ... < /MessageSystemBody> < MessageSystemTimestamp > 12 : 00 PM < /MessageSystemTimestamp> < /MessageSystemBlock> < /MessageSystemContainer> < /MessageSystem> < /Box>);