diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index f70e4a6a9..b9d4dc1ee 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -22,10 +22,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -89,10 +88,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -156,10 +154,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -355,10 +352,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -441,10 +437,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -547,10 +542,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -791,10 +785,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -1035,10 +1028,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -1140,10 +1132,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -1585,10 +1576,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -1721,10 +1711,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -1951,10 +1940,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -2006,10 +1994,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -2246,10 +2233,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -2330,10 +2316,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -2502,10 +2487,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -2852,10 +2836,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3040,10 +3023,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3191,10 +3173,9 @@ exports[`Storyshots Markdown list Markdown 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3233,10 +3214,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3255,10 +3235,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3277,10 +3256,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3299,10 +3277,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3321,10 +3298,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3343,10 +3319,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3365,10 +3340,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3387,10 +3361,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3409,10 +3382,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3431,10 +3403,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3453,10 +3424,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3475,10 +3445,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3497,10 +3466,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3519,10 +3487,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3541,10 +3508,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3563,10 +3529,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3585,10 +3550,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3607,10 +3571,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3629,10 +3592,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3651,10 +3613,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3673,10 +3634,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3695,10 +3655,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3717,10 +3676,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3739,10 +3697,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3913,10 +3870,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3935,10 +3891,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3957,10 +3912,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -3979,10 +3933,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4001,10 +3954,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4023,10 +3975,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4045,10 +3996,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4067,10 +4017,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4089,10 +4038,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4111,10 +4059,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4133,10 +4080,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4155,10 +4101,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4177,10 +4122,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4199,10 +4143,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4221,10 +4164,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4471,10 +4413,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4493,10 +4434,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4515,10 +4455,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4537,10 +4476,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4559,10 +4497,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4581,10 +4518,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4603,10 +4539,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4625,10 +4560,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4647,10 +4581,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4669,10 +4602,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4691,10 +4623,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4713,10 +4644,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4735,10 +4665,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4757,10 +4686,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4779,10 +4707,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4801,10 +4728,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4823,10 +4749,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4845,10 +4770,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4867,10 +4791,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4889,10 +4812,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4911,10 +4833,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4933,10 +4854,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4955,10 +4875,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4977,10 +4896,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -4999,10 +4917,9 @@ exports[`Storyshots Message list message 1`] = ` "fontSize": 20, "fontWeight": "300", "marginLeft": 10, - "marginTop": 30, + "marginVertical": 30, }, Object { - "backgroundColor": "#ffffff", "color": "#0d0e12", }, Object { @@ -5018,6 +4935,157 @@ exports[`Storyshots Message list message 1`] = ` `; +exports[`Storyshots RoomItem list roomitem 1`] = ` + + + + Basic + + View + + User + + View + View + + Type + + View + View + View + View + View + View + View + + User status + + View + View + View + View + View + + Alerts + + View + View + View + View + View + View + View + View + + Last Message + + View + View + View + View + View + View + View + + +`; + exports[`Storyshots UiKitMessage list uikitmessage 1`] = ` ( + + + {showLastMessage + ? ( + <> + + + + <UpdatedAt + roomUpdatedAt={roomUpdatedAt} + date={date} + theme={theme} + hideUnreadStatus={hideUnreadStatus} + alert={alert} + /> + </View> + <View style={styles.row}> + <LastMessage + lastMessage={lastMessage} + type={type} + showLastMessage={showLastMessage} + username={username} + alert={alert && !hideUnreadStatus} + useRealName={useRealName} + theme={theme} + /> + <UnreadBadge + unread={unread} + userMentions={userMentions} + groupMentions={groupMentions} + theme={theme} + /> + </View> + </> + ) + : ( + <View style={[styles.titleContainer, styles.flex]}> + <TypeIcon + type={type} + prid={prid} + status={status} + isGroupChat={isGroupChat} + theme={theme} + /> + <Title + name={name} + theme={theme} + hideUnreadStatus={hideUnreadStatus} + alert={alert} + /> + <UnreadBadge + unread={unread} + userMentions={userMentions} + groupMentions={groupMentions} + theme={theme} + /> + </View> + ) + } + </Wrapper> + </Touchable> +); + +RoomItem.propTypes = { + rid: PropTypes.string.isRequired, + type: PropTypes.string.isRequired, + prid: PropTypes.string, + name: PropTypes.string.isRequired, + avatar: PropTypes.string.isRequired, + baseUrl: PropTypes.string.isRequired, + showLastMessage: PropTypes.bool, + userId: PropTypes.string, + username: PropTypes.string, + token: PropTypes.string, + avatarSize: PropTypes.number, + testID: PropTypes.string, + width: PropTypes.number, + status: PropTypes.string, + useRealName: PropTypes.bool, + theme: PropTypes.string, + isFocused: PropTypes.bool, + isGroupChat: PropTypes.bool, + isRead: PropTypes.bool, + date: PropTypes.string, + accessibilityLabel: PropTypes.string, + lastMessage: PropTypes.object, + favorite: PropTypes.bool, + alert: PropTypes.bool, + hideUnreadStatus: PropTypes.bool, + unread: PropTypes.number, + userMentions: PropTypes.number, + groupMentions: PropTypes.number, + roomUpdatedAt: PropTypes.instanceOf(Date), + toggleFav: PropTypes.func, + toggleRead: PropTypes.func, + onPress: PropTypes.func, + hideChannel: PropTypes.func +}; + +RoomItem.defaultProps = { + avatarSize: 48, + status: 'offline' +}; + +export default RoomItem; diff --git a/app/presentation/RoomItem/Title.js b/app/presentation/RoomItem/Title.js new file mode 100644 index 000000000..6f4f848d6 --- /dev/null +++ b/app/presentation/RoomItem/Title.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { Text } from 'react-native'; +import PropTypes from 'prop-types'; + +import styles from './styles'; +import { themes } from '../../constants/colors'; + +const Title = React.memo(({ + name, theme, hideUnreadStatus, alert +}) => ( + <Text + style={[ + styles.title, + alert && !hideUnreadStatus && styles.alert, + { color: themes[theme].titleText } + ]} + ellipsizeMode='tail' + numberOfLines={1} + > + {name} + </Text> +)); + +Title.propTypes = { + name: PropTypes.string, + theme: PropTypes.string, + hideUnreadStatus: PropTypes.bool, + alert: PropTypes.bool +}; + +export default Title; diff --git a/app/presentation/RoomItem/UpdatedAt.js b/app/presentation/RoomItem/UpdatedAt.js new file mode 100644 index 000000000..667a05bf0 --- /dev/null +++ b/app/presentation/RoomItem/UpdatedAt.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { Text } from 'react-native'; +import PropTypes from 'prop-types'; + +import styles from './styles'; +import { themes } from '../../constants/colors'; +import { capitalize } from '../../utils/room'; + +const UpdatedAt = React.memo(({ + roomUpdatedAt, date, theme, hideUnreadStatus, alert +}) => { + if (!roomUpdatedAt) { + return null; + } + return ( + <Text + style={[ + styles.date, + { + color: + themes[theme] + .auxiliaryText + }, + alert && !hideUnreadStatus && [ + styles.updateAlert, + { + color: + themes[theme] + .tintColor + } + ] + ]} + ellipsizeMode='tail' + numberOfLines={1} + > + {capitalize(date)} + </Text> + ); +}); + +UpdatedAt.propTypes = { + roomUpdatedAt: PropTypes.instanceOf(Date), + date: PropTypes.string, + theme: PropTypes.string, + hideUnreadStatus: PropTypes.bool, + alert: PropTypes.bool +}; + +export default UpdatedAt; diff --git a/app/presentation/RoomItem/Wrapper.js b/app/presentation/RoomItem/Wrapper.js new file mode 100644 index 000000000..a7473cae2 --- /dev/null +++ b/app/presentation/RoomItem/Wrapper.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { View } from 'react-native'; +import PropTypes from 'prop-types'; + +import styles from './styles'; +import { themes } from '../../constants/colors'; +import Avatar from '../../containers/Avatar'; + +const RoomItemInner = ({ + accessibilityLabel, + avatar, + avatarSize, + type, + baseUrl, + userId, + token, + theme, + children +}) => ( + <View + style={styles.container} + accessibilityLabel={accessibilityLabel} + > + <Avatar + text={avatar} + size={avatarSize} + type={type} + baseUrl={baseUrl} + style={styles.avatar} + userId={userId} + token={token} + /> + <View + style={[ + styles.centerContainer, + { + borderColor: themes[theme].separatorColor + } + ]} + > + {children} + </View> + </View> +); + +RoomItemInner.propTypes = { + accessibilityLabel: PropTypes.string, + avatar: PropTypes.string, + avatarSize: PropTypes.number, + type: PropTypes.string, + baseUrl: PropTypes.string, + userId: PropTypes.string, + token: PropTypes.string, + theme: PropTypes.string, + children: PropTypes.element +}; + +export default RoomItemInner; diff --git a/app/presentation/RoomItem/index.js b/app/presentation/RoomItem/index.js index 0bb4c3157..dfeaa97cc 100644 --- a/app/presentation/RoomItem/index.js +++ b/app/presentation/RoomItem/index.js @@ -1,17 +1,11 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { View, Text } from 'react-native'; import { connect } from 'react-redux'; -import Avatar from '../../containers/Avatar'; import I18n from '../../i18n'; -import styles, { ROW_HEIGHT } from './styles'; -import UnreadBadge from './UnreadBadge'; -import TypeIcon from './TypeIcon'; -import LastMessage from './LastMessage'; -import { capitalize, formatDate } from '../../utils/room'; -import Touchable from './Touchable'; -import { themes } from '../../constants/colors'; +import { ROW_HEIGHT } from './styles'; +import { formatDate } from '../../utils/room'; +import RoomItem from './RoomItem'; export { ROW_HEIGHT }; @@ -27,7 +21,7 @@ const attrs = [ const arePropsEqual = (oldProps, newProps) => attrs.every(key => oldProps[key] === newProps[key]); -const RoomItem = React.memo(({ +const RoomItemContainer = React.memo(({ item, onPress, width, @@ -97,12 +91,18 @@ const RoomItem = React.memo(({ } return ( - <Touchable + <RoomItem + name={name} + avatar={avatar} + isGroupChat={isGroupChat} + isRead={isRead} onPress={_onPress} + date={date} + accessibilityLabel={accessibilityLabel} + userMentions={item.userMentions} width={width} favorite={item.f} toggleFav={toggleFav} - isRead={isRead} rid={item.rid} toggleRead={toggleRead} hideChannel={hideChannel} @@ -110,96 +110,26 @@ const RoomItem = React.memo(({ type={item.t} theme={theme} isFocused={isFocused} - > - <View - style={styles.container} - accessibilityLabel={accessibilityLabel} - > - <Avatar - text={avatar} - size={avatarSize} - type={item.t} - baseUrl={baseUrl} - style={styles.avatar} - userId={userId} - token={token} - /> - <View - style={[ - styles.centerContainer, - { - borderColor: themes[theme].separatorColor - } - ]} - > - <View style={styles.titleContainer}> - <TypeIcon - type={item.t} - prid={item.prid} - status={status} - isGroupChat={isGroupChat} - theme={theme} - /> - <Text - style={[ - styles.title, - item.alert && !item.hideUnreadStatus && styles.alert, - { color: themes[theme].titleText } - ]} - ellipsizeMode='tail' - numberOfLines={1} - > - {name} - </Text> - {item.roomUpdatedAt ? ( - <Text - style={[ - styles.date, - { - color: - themes[theme] - .auxiliaryText - }, - item.alert && !item.hideUnreadStatus && [ - styles.updateAlert, - { - color: - themes[theme] - .tintColor - } - ] - ]} - ellipsizeMode='tail' - numberOfLines={1} - > - {capitalize(date)} - </Text> - ) : null} - </View> - <View style={styles.row}> - <LastMessage - lastMessage={item.lastMessage} - type={item.t} - showLastMessage={showLastMessage} - username={username} - alert={item.alert && !item.hideUnreadStatus} - useRealName={useRealName} - theme={theme} - /> - <UnreadBadge - unread={item.unread} - userMentions={item.userMentions} - groupMentions={item.groupMentions} - theme={theme} - /> - </View> - </View> - </View> - </Touchable> + size={avatarSize} + baseUrl={baseUrl} + userId={userId} + token={token} + prid={item.prid} + status={status} + hideUnreadStatus={item.hideUnreadStatus} + alert={item.alert} + roomUpdatedAt={item.roomUpdatedAt} + lastMessage={item.lastMessage} + showLastMessage={showLastMessage} + username={username} + useRealName={useRealName} + unread={item.unread} + groupMentions={item.groupMentions} + /> ); }, arePropsEqual); -RoomItem.propTypes = { +RoomItemContainer.propTypes = { item: PropTypes.object.isRequired, baseUrl: PropTypes.string.isRequired, showLastMessage: PropTypes.bool, @@ -226,7 +156,7 @@ RoomItem.propTypes = { getIsRead: PropTypes.func }; -RoomItem.defaultProps = { +RoomItemContainer.defaultProps = { avatarSize: 48, status: 'offline', getUserPresence: () => {}, @@ -252,4 +182,4 @@ const mapStateToProps = (state, ownProps) => { }; }; -export default connect(mapStateToProps)(RoomItem); +export default connect(mapStateToProps)(RoomItemContainer); diff --git a/app/presentation/RoomItem/styles.js b/app/presentation/RoomItem/styles.js index 93c70a845..ae7086c80 100644 --- a/app/presentation/RoomItem/styles.js +++ b/app/presentation/RoomItem/styles.js @@ -8,6 +8,9 @@ export const SMALL_SWIPE = ACTION_WIDTH / 2; export const LONG_SWIPE = ACTION_WIDTH * 3; export default StyleSheet.create({ + flex: { + flex: 1 + }, container: { flexDirection: 'row', alignItems: 'center', diff --git a/storybook/index.js b/storybook/index.js index c8ed935f7..924e91deb 100644 --- a/storybook/index.js +++ b/storybook/index.js @@ -16,7 +16,9 @@ configure(() => { // Refer to https://github.com/storybooks/storybook/tree/master/app/react-native#start-command-parameters // To find allowed options for getStorybookUI -const StorybookUIRoot = getStorybookUI({}); +const StorybookUIRoot = getStorybookUI({ + asyncStorage: null +}); // If you are using React Native vanilla and after installation you don't see your app name here, write it manually. // If you use Expo you can safely remove this line. diff --git a/storybook/stories/RoomItem.js b/storybook/stories/RoomItem.js index 396043063..21169a41b 100644 --- a/storybook/stories/RoomItem.js +++ b/storybook/stories/RoomItem.js @@ -3,23 +3,34 @@ import { ScrollView, Dimensions } from 'react-native'; // import moment from 'moment'; import { themes } from '../../app/constants/colors'; -import RoomItemComponent from '../../app/presentation/RoomItem'; +import RoomItemComponent from '../../app/presentation/RoomItem/RoomItem'; import StoriesSeparator from './StoriesSeparator'; -const date = '2017-10-10T10:00:00Z'; const baseUrl = 'https://open.rocket.chat'; const { width } = Dimensions.get('window'); let _theme = 'light'; +const longText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries'; +const lastMessage = { + u: { + username: 'diego.mello' + }, + msg: longText +}; +const updatedAt = { + date: '10:00', + roomUpdatedAt: new Date('2020-01-01') +}; const RoomItem = props => ( <RoomItemComponent - id='abc' + rid='abc' type='d' name='rocket.cat' - _updatedAt={date} + avatar='rocket.cat' baseUrl={baseUrl} width={width} theme={_theme} + {...updatedAt} {...props} /> ); @@ -36,9 +47,9 @@ export default ({ theme }) => { <RoomItem /> <Separator title='User' /> - <RoomItem name='diego.mello' /> + <RoomItem name='diego.mello' avatar='diego.mello' /> <RoomItem - name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries" + name={longText} /> <Separator title='Type' /> @@ -46,33 +57,26 @@ export default ({ theme }) => { <RoomItem type='c' /> <RoomItem type='p' /> <RoomItem type='l' /> + <RoomItem type='discussion' /> + <RoomItem type='d' isGroupChat /> <RoomItem type='&' /> - {/* We can't add date stories because it breaks jest snapshots - <Separator title='Date' /> - <RoomItem - _updatedAt={moment()} - /> - <RoomItem - _updatedAt={moment().subtract(1, 'day')} - /> - <RoomItem - _updatedAt={moment().subtract(5, 'day')} - /> - <RoomItem - _updatedAt={moment().subtract(30, 'day')} - /> */} + <Separator title='User status' /> + <RoomItem status='online' /> + <RoomItem status='away' /> + <RoomItem status='busy' /> + <RoomItem status='offline' /> + <RoomItem status='wrong' /> <Separator title='Alerts' /> <RoomItem alert /> - <RoomItem alert unread={1} /> - <RoomItem alert unread={1000} /> - <RoomItem alert unread={1} userMentions={1} /> - <RoomItem alert unread={1000} userMentions={1} /> - <RoomItem alert name='general' unread={1} type='c' /> - <RoomItem alert name='general' unread={1000} type='c' /> - <RoomItem alert name='general' unread={1} userMentions={1} type='c' /> - <RoomItem alert name='general' unread={1000} userMentions={1} type='c' /> + <RoomItem alert name='unread' unread={1} /> + <RoomItem alert name='unread' unread={1000} /> + <RoomItem alert name='user mentions' unread={1} userMentions={1} /> + <RoomItem alert name='user mentions' unread={1000} userMentions={1} /> + <RoomItem alert name='group mentions' unread={1} groupMentions={1} /> + <RoomItem alert name='group mentions' unread={1000} groupMentions={1} /> + <RoomItem name='user mentions > group mentions' alert unread={1000} userMentions={1} groupMentions={1} /> <Separator title='Last Message' /> <RoomItem @@ -95,37 +99,29 @@ export default ({ theme }) => { }, msg: '1' }} + username='diego.mello' /> <RoomItem showLastMessage - lastMessage={{ - u: { - username: 'diego.mello' - }, - msg: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries' - }} + lastMessage={lastMessage} /> <RoomItem showLastMessage alert unread={1} - lastMessage={{ - u: { - username: 'diego.mello' - }, - msg: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries' - }} + lastMessage={lastMessage} /> <RoomItem showLastMessage alert unread={1000} - lastMessage={{ - u: { - username: 'diego.mello' - }, - msg: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries' - }} + lastMessage={lastMessage} + /> + <RoomItem + showLastMessage + alert + unread={1000} + lastMessage={lastMessage} /> </ScrollView> ); diff --git a/storybook/stories/StoriesSeparator.js b/storybook/stories/StoriesSeparator.js index 8b1b9b353..a24fa1d04 100644 --- a/storybook/stories/StoriesSeparator.js +++ b/storybook/stories/StoriesSeparator.js @@ -6,7 +6,7 @@ import { themes } from '../../app/constants/colors'; const styles = StyleSheet.create({ separator: { - marginTop: 30, + marginVertical: 30, marginLeft: 10, fontSize: 20, fontWeight: '300' @@ -18,8 +18,7 @@ const Separator = ({ title, style, theme }) => ( style={[ styles.separator, { - color: themes[theme].titleText, - backgroundColor: themes[theme].backgroundColor + color: themes[theme].titleText }, style ]} diff --git a/storybook/stories/index.js b/storybook/stories/index.js index 882416c6c..cc5a4068f 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -1,10 +1,10 @@ /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ import React from 'react'; -// import { Provider } from 'react-redux'; -// import { createStore, combineReducers } from 'redux'; +import { Provider } from 'react-redux'; +import { createStore, combineReducers } from 'redux'; import { storiesOf } from '@storybook/react-native'; -// import RoomItem from './RoomItem'; +import RoomItem from './RoomItem'; import Message from './Message'; import UiKitMessage from './UiKitMessage'; import UiKitModal from './UiKitModal'; @@ -24,17 +24,17 @@ const user = { // Change here to see themed storybook const theme = 'light'; -// const reducers = combineReducers({ -// settings: () => ({}), -// login: () => ({ -// user: { -// username: 'diego.mello' -// } -// }), -// meteor: () => ({ connected: true }), -// activeUsers: () => ({ abc: { status: 'online', statusText: 'dog' } }) -// }); -// const store = createStore(reducers); +const reducers = combineReducers({ + settings: () => ({}), + login: () => ({ + user: { + username: 'diego.mello' + } + }), + meteor: () => ({ connected: true }), + activeUsers: () => ({ abc: { status: 'online', statusText: 'dog' } }) +}); +const store = createStore(reducers); const messageDecorator = story => ( <MessageContext.Provider @@ -55,9 +55,9 @@ const messageDecorator = story => ( </MessageContext.Provider> ); -// storiesOf('RoomItem', module) -// .addDecorator(story => <Provider store={store}>{story()}</Provider>) -// .add('list roomitem', () => <RoomItem theme={theme} />); +storiesOf('RoomItem', module) + .addDecorator(story => <Provider store={store}>{story()}</Provider>) + .add('list roomitem', () => <RoomItem theme={theme} />); storiesOf('Message', module) .addDecorator(messageDecorator) .add('list message', () => <Message theme={theme} />);