From aa32fcaea62e76bf690a2721106918196c6f0384 Mon Sep 17 00:00:00 2001 From: Vinh Date: Wed, 4 Sep 2019 23:34:42 +0700 Subject: [PATCH] [CORL-550] More stable css classes (#2515) * feat: more stable css classes * chore: renamee ValidationMessageHelper to FormValidationMessage * chore: Rename FormValidationMessage to FieldValidationMessage * feat: more css classes, icons use tag * feat: stable classnames for gdpr features * feat: more css stable classnames --- .../__snapshots__/resetPassword.spec.tsx.snap | 4 +- .../UserHistoryDrawer/UserBadgesContainer.tsx | 6 +- .../addEmailAddress.spec.tsx.snap | 20 +- .../createPassword.spec.tsx.snap | 28 +- .../createUsername.spec.tsx.snap | 8 +- .../__snapshots__/restricted.spec.tsx.snap | 8 +- .../signInWithEmail.spec.tsx.snap | 72 +- .../__snapshots__/community.spec.tsx.snap | 40 +- .../__snapshots__/auth.spec.tsx.snap | 100 +-- .../__snapshots__/general.spec.tsx.snap | 12 +- .../__snapshots__/moderation.spec.tsx.snap | 8 +- .../decisionHistory.spec.tsx.snap | 56 +- .../invite/__snapshots__/invite.spec.tsx.snap | 4 +- .../__snapshots__/regularQueue.spec.tsx.snap | 112 +-- .../__snapshots__/rejectedQueue.spec.tsx.snap | 64 +- .../__snapshots__/searchBar.spec.tsx.snap | 12 +- .../__snapshots__/singleComment.spec.tsx.snap | 48 +- .../__snapshots__/tabBar.spec.tsx.snap | 16 +- .../__snapshots__/stories.spec.tsx.snap | 32 +- .../addEmailAddress.spec.tsx.snap | 92 +-- .../createPassword.spec.tsx.snap | 28 +- .../createUsername.spec.tsx.snap | 8 +- .../test/__snapshots__/signIn.spec.tsx.snap | 96 +-- .../test/__snapshots__/signUp.spec.tsx.snap | 200 +++--- src/core/client/stream/App/App.tsx | 23 +- .../App/__snapshots__/App.spec.tsx.snap | 5 +- src/core/client/stream/classes.ts | 650 +++++++++++++++++- src/core/client/stream/common/Counter.ts | 5 +- .../stream/common/FieldValidationMessage.ts | 16 + .../__snapshots__/MessageBox.spec.tsx.snap | 4 +- src/core/client/stream/common/Spinner.ts | 16 + .../stream/common/Timestamp/Timestamp.tsx | 3 +- .../__snapshots__/Timestamp.spec.tsx.snap | 2 +- .../common/UserBox/UserBoxAuthenticated.tsx | 4 +- .../common/UserBox/UserBoxUnauthenticated.tsx | 5 +- .../UserBoxAuthenticated.spec.tsx.snap | 3 + .../UserBoxUnauthenticated.spec.tsx.snap | 5 + .../client/stream/common/ValidationMessage.ts | 16 + .../Comment/AuthorBadgesContainer.tsx | 9 +- .../stream/tabs/Comments/Comment/Comment.tsx | 19 +- .../Comments/Comment/CommentContainer.tsx | 35 +- .../EditCommentForm/EditCommentForm.tsx | 12 +- .../EditCommentFormContainer.tsx | 1 + .../tabs/Comments/Comment/EditedMarker.tsx | 9 +- .../tabs/Comments/Comment/InReplyTo.tsx | 11 +- .../ModerationDropdown/CaretContainer.tsx | 4 +- .../ModerationActionBanContainer.tsx | 8 +- .../ModerationActionsContainer.tsx | 20 +- .../ModerationDropdownContainer.tsx | 3 +- .../RejectedTombstoneContainer.tsx | 15 +- .../PermalinkButton/PermalinkButton.tsx | 8 +- .../PermalinkButtonContainer.tsx | 3 + .../PermalinkButton/PermalinkPopover.tsx | 12 +- .../ReactionButtonContainer.tsx | 6 +- .../tabs/Comments/Comment/ReplyButton.tsx | 2 + .../ReplyCommentForm/ReplyCommentForm.tsx | 2 +- .../ReplyCommentFormContainer.tsx | 1 + .../Comment/ReplyCommentForm/ReplyTo.tsx | 21 +- .../__snapshots__/ReplyTo.spec.tsx.snap | 4 +- .../Comment/ReplyEditSubmitStatus.tsx | 12 +- .../ReportButton/ReportButtonContainer.tsx | 11 +- .../ReportButton/ReportButtonWithPopover.tsx | 3 + .../ReportPopover/ReportCommentForm.tsx | 12 +- .../Comment/ReportPopover/ReportPopover.tsx | 6 +- .../__snapshots__/ReportPopover.spec.tsx.snap | 4 +- .../tabs/Comments/Comment/RootParent.tsx | 24 +- .../Comments/Comment/ShowConversationLink.tsx | 2 + .../UserBanPopoverContainer.tsx | 18 +- .../UserIgnorePopoverContainer.tsx | 18 +- .../UserPopoverOverviewContainer.tsx | 18 +- .../Comments/Comment/UserTagsContainer.tsx | 4 +- .../Comments/Comment/Username/Username.tsx | 4 +- .../Username/UsernameWithPopoverContainer.tsx | 2 + .../__snapshots__/Comment.spec.tsx.snap | 13 +- .../CommentContainer.spec.tsx.snap | 70 ++ .../__snapshots__/InReplyTo.spec.tsx.snap | 2 +- .../IgnoredTombstoneOrHideContainer.tsx | 5 +- .../client/stream/tabs/Comments/Indent.tsx | 4 +- .../ConversationThreadContainer.tsx | 20 +- .../Comments/PermalinkView/PermalinkView.tsx | 11 +- .../PermalinkView/PermalinkViewQuery.tsx | 3 +- .../__snapshots__/PermalinkView.spec.tsx.snap | 6 +- .../PermalinkViewQuery.spec.tsx.snap | 2 +- .../tabs/Comments/ReplyList/ReplyList.tsx | 3 + .../__snapshots__/ReplyList.spec.tsx.snap | 2 + .../AllCommentsTabContainer.tsx | 5 +- .../AllCommentsTab/AllCommentsTabQuery.tsx | 3 +- .../AllCommentsTab/SpinnerWhileRendering.tsx | 4 +- .../StreamDeletionRequestCalloutContainer.tsx | 4 +- .../FeaturedCommentContainer.tsx | 63 +- .../FeaturedCommentsContainer.tsx | 2 + .../FeaturedCommentsQuery.tsx | 8 +- .../PostCommentForm/PostCommentForm.tsx | 9 +- .../PostCommentInReviewMessage.tsx | 8 +- .../tabs/Comments/Stream/StreamContainer.tsx | 18 +- .../tabs/Comments/Stream/StreamQuery.tsx | 10 +- .../__snapshots__/SortMenu.spec.tsx.snap | 8 +- .../__snapshots__/Indent.spec.tsx.snap | 4 +- .../stream/tabs/Configure/ConfigureQuery.tsx | 3 +- .../ConfigureStream/ConfigureStream.tsx | 18 +- .../MessageBoxConfig/MessageBoxConfig.tsx | 44 +- .../OpenOrCloseStream/CloseStream.tsx | 6 +- .../OpenOrCloseStream/OpenStream.tsx | 6 +- .../ChangeEmail/ChangeEmailContainer.tsx | 72 +- .../ChangeUsernameContainer.tsx | 47 +- .../Profile/CommentHistory/CommentHistory.tsx | 2 + .../Profile/CommentHistory/HistoryComment.tsx | 28 +- .../CommentHistory.spec.tsx.snap | 2 + .../HistoryComment.spec.tsx.snap | 14 +- .../DeletionRequestCalloutContainer.tsx | 15 +- .../client/stream/tabs/Profile/Profile.tsx | 7 +- .../stream/tabs/Profile/ProfileQuery.tsx | 3 +- .../tabs/Profile/Settings/ChangePassword.tsx | 29 +- .../DeleteAccount/DeleteAccountContainer.tsx | 18 +- .../DeleteAccountModalContents.tsx | 4 +- .../DeleteAccount/Pages/CompletionPage.tsx | 5 +- .../DeleteAccount/Pages/ConfirmPage.tsx | 21 +- .../DeleteAccount/Pages/DescriptionPage.tsx | 14 +- .../Pages/DownloadCommentsPage.tsx | 14 +- .../Settings/DeleteAccount/Pages/WhenPage.tsx | 14 +- .../Settings/DownloadCommentsContainer.tsx | 27 +- .../Settings/IgnoreUserSettingsContainer.tsx | 11 +- .../stream/tabs/Profile/Settings/Username.tsx | 10 +- .../renderFeaturedStream.spec.tsx.snap | 65 +- .../__snapshots__/permalinkView.spec.tsx.snap | 146 ++-- ...permalinkViewCommentNotFound.spec.tsx.snap | 12 +- ...permalinkViewLoadMoreParents.spec.tsx.snap | 108 +-- .../permalinkViewStoryNotFound.spec.tsx.snap | 2 +- .../__snapshots__/editComment.spec.tsx.snap | 190 ++--- .../__snapshots__/loadMore.spec.tsx.snap | 46 +- .../__snapshots__/postComment.spec.tsx.snap | 25 +- .../postLocalReply.spec.tsx.snap | 279 ++++---- .../__snapshots__/postReply.spec.tsx.snap | 80 ++- .../__snapshots__/reaction.spec.tsx.snap | 4 +- .../renderCommunityGuidelines.spec.tsx.snap | 71 +- .../renderMessageBox.spec.tsx.snap | 94 +-- .../__snapshots__/renderReplies.spec.tsx.snap | 128 ++-- .../__snapshots__/renderStream.spec.tsx.snap | 75 +- .../__snapshots__/reportComment.spec.tsx.snap | 28 +- .../showAllReplies.spec.tsx.snap | 28 +- .../showConversation.spec.tsx.snap | 34 +- .../__snapshots__/sortStream.spec.tsx.snap | 44 +- .../renderConfigure.spec.tsx.snap | 17 +- .../__snapshots__/myComments.spec.tsx.snap | 22 +- .../__snapshots__/settings.spec.tsx.snap | 55 +- .../test/profile/changeUsername.spec.tsx | 10 +- .../client/ui/components/Button/Button.tsx | 1 + .../Button/__snapshots__/Button.spec.tsx.snap | 1 + src/core/client/ui/components/Icon/Icon.tsx | 2 +- .../Icon/__snapshots__/Icon.spec.tsx.snap | 8 +- .../__snapshots__/Message.spec.tsx.snap | 4 +- .../__snapshots__/PasswordField.spec.tsx.snap | 8 +- .../__snapshots__/SelectField.spec.tsx.snap | 4 +- .../client/ui/components/Tabs/TabContent.tsx | 3 +- .../__snapshots__/TabContent.spec.tsx.snap | 1 + .../ValidationMessage.spec.tsx.snap | 4 +- src/locales/en-US/stream.ftl | 2 +- 157 files changed, 2965 insertions(+), 1531 deletions(-) create mode 100644 src/core/client/stream/common/FieldValidationMessage.ts create mode 100644 src/core/client/stream/common/Spinner.ts create mode 100644 src/core/client/stream/common/ValidationMessage.ts diff --git a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap b/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap index 45ebe41ba..e040fa260 100644 --- a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap +++ b/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap @@ -85,12 +85,12 @@ Make sure it is unique and be sure to keep it secure. tabIndex={0} title="Hide password" > - + diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx index 58175463a..23e62c06c 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx +++ b/src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx @@ -18,7 +18,11 @@ const UserBadgesContainer: FunctionComponent = ({ user }) => { return ( <> {user.badges.map(badge => ( - + {badge} ))} diff --git a/src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap index 64fb90b7f..102f712cc 100644 --- a/src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap +++ b/src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap @@ -67,12 +67,12 @@ exports[`accepts valid email 1`] = `
- + This field is required. @@ -137,12 +137,12 @@ exports[`checks for invalid email 1`] = `
- + Please enter a valid email address. @@ -176,12 +176,12 @@ exports[`checks for invalid email 1`] = `
- + Emails do not match. Try again. @@ -363,12 +363,12 @@ exports[`shows error when submitting empty form 1`] = `
- + This field is required. @@ -402,12 +402,12 @@ exports[`shows error when submitting empty form 1`] = `
- + This field is required. diff --git a/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap index aec57f3a7..2db89ea4e 100644 --- a/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap +++ b/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap @@ -57,24 +57,24 @@ we require users to create a password. tabIndex={0} title="Show password" > - +
- + Password must contain at least 8 characters. @@ -184,12 +184,12 @@ we require users to create a password. tabIndex={0} title="Show password" > - +
@@ -274,24 +274,24 @@ we require users to create a password. tabIndex={0} title="Show password" > - +
- + This field is required. @@ -386,12 +386,12 @@ GraphQL request (4:3) tabIndex={0} title="Show password" > - +
@@ -471,12 +471,12 @@ we require users to create a password. tabIndex={0} title="Show password" > - + diff --git a/src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap index 3e8ddb374..b9be99a4b 100644 --- a/src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap +++ b/src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap @@ -46,12 +46,12 @@ exports[`checks for invalid username 1`] = `
- + Username must contain at least 3 characters. @@ -217,12 +217,12 @@ exports[`shows error when submitting empty form 1`] = `
- + This field is required. diff --git a/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap index 7e2486afa..a7d656e88 100644 --- a/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap +++ b/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap @@ -81,12 +81,12 @@ exports[`show restricted screen for commenters and staff 1`] = `
- +

- +

- + This field is required. @@ -85,12 +85,12 @@ exports[`accepts correct password 1`] = ` tabIndex={0} title="Show password" > - +

@@ -107,12 +107,12 @@ exports[`accepts correct password 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -193,24 +193,24 @@ exports[`accepts valid email 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -228,12 +228,12 @@ exports[`accepts valid email 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -278,12 +278,12 @@ exports[`checks for invalid email 1`] = `
- + Please enter a valid email address. @@ -327,24 +327,24 @@ exports[`checks for invalid email 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -362,12 +362,12 @@ exports[`checks for invalid email 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -525,12 +525,12 @@ exports[`renders sign in form 1`] = ` tabIndex={0} title="Show password" > - +
@@ -547,12 +547,12 @@ exports[`renders sign in form 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -611,12 +611,12 @@ exports[`shows error when submitting empty form 1`] = `
- + This field is required. @@ -660,24 +660,24 @@ exports[`shows error when submitting empty form 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -695,12 +695,12 @@ exports[`shows error when submitting empty form 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -788,12 +788,12 @@ exports[`shows server error 1`] = ` tabIndex={0} title="Show password" > - +
@@ -810,12 +810,12 @@ exports[`shows server error 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email diff --git a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap index b50b1af9f..6dea16331 100644 --- a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap +++ b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap @@ -56,12 +56,12 @@ exports[`renders community 1`] = ` onTouchEnd={[Function]} type="submit" > - + @@ -127,12 +127,12 @@ exports[`renders community 1`] = ` aria-hidden={true} className="SelectField-afterWrapper" > - + - + @@ -373,12 +373,12 @@ exports[`renders community 1`] = ` > Moderator - +
Staff - +
Commenter - +
- +
- +
@@ -786,12 +786,12 @@ exports[`renders empty community 1`] = ` aria-hidden={true} className="SelectField-afterWrapper" > - + - + diff --git a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap index 8b781a02c..90d9dbfc1 100644 --- a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap +++ b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap @@ -62,12 +62,12 @@ exports[`change settings: during submit: oidc without errors 1`] = ` target="_blank" > https://openid.net/connect/ - +

- + @@ -544,12 +544,12 @@ For more information visit: target="_blank" > https://developers.facebook.com/docs/facebook-login/web - + .

@@ -664,12 +664,12 @@ For more information visit: tabIndex={0} title="Hide Client Secret" > - + @@ -853,12 +853,12 @@ exports[`change settings: enable oidc configure box 1`] = ` target="_blank" > https://openid.net/connect/ - +

- + @@ -1333,12 +1333,12 @@ exports[`change settings: oidc validation errors 1`] = ` target="_blank" > https://openid.net/connect/ - +

- + This field is required. @@ -1465,12 +1465,12 @@ needs to be displayed, e.g. “Log in with <Facebook>”.
- + This field is required. @@ -1512,24 +1512,24 @@ needs to be displayed, e.g. “Log in with <Facebook>”. tabIndex={0} title="Hide Client Secret" > - +
- + This field is required. @@ -1591,12 +1591,12 @@ the remaining fields. You may also enter the information manually.
- + This field is required. @@ -1632,12 +1632,12 @@ the remaining fields. You may also enter the information manually.
- + This field is required. @@ -1673,12 +1673,12 @@ the remaining fields. You may also enter the information manually.
- + This field is required. @@ -1714,12 +1714,12 @@ the remaining fields. You may also enter the information manually.
- + This field is required. @@ -1893,12 +1893,12 @@ exports[`regenerate sso key 1`] = ` tabIndex={0} title="Hide SSO Key" > - +
@@ -1928,12 +1928,12 @@ exports[`regenerate sso key 1`] = ` KEY GENERATED AT: 11/12/2018, 11:26 PM

- +

@@ -2556,12 +2556,12 @@ integration to register for a new account. target="_blank" > https://openid.net/connect/ - +

- +
@@ -3058,12 +3058,12 @@ integration to register for a new account. tabIndex={0} title="Hide SSO Key" > - + @@ -3093,12 +3093,12 @@ integration to register for a new account. KEY GENERATED AT: Invalid Date

- +

@@ -3284,12 +3284,12 @@ to create and set up a web application. For more information visit: target="_blank" > https://developers.google.com/identity/protocols/OAuth2WebServer#creatingcred - + .

@@ -3404,12 +3404,12 @@ to create and set up a web application. For more information visit: tabIndex={0} title="Hide Client Secret" > - + @@ -3592,12 +3592,12 @@ For more information visit: target="_blank" > https://developers.facebook.com/docs/facebook-login/web - + .

@@ -3712,12 +3712,12 @@ For more information visit: tabIndex={0} title="Hide Client Secret" > - + diff --git a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap index e8caeadb1..044c20724 100644 --- a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap +++ b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap @@ -556,12 +556,12 @@ moderation panel. aria-hidden={true} className="SelectField-afterWrapper" > - + @@ -701,12 +701,12 @@ moderation panel. aria-hidden={true} className="SelectField-afterWrapper" > - + @@ -942,12 +942,12 @@ based on the needs of your community. aria-hidden={true} className="SelectField-afterWrapper" > - + diff --git a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap index 61691baba..26e0ceab0 100644 --- a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap +++ b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap @@ -712,12 +712,12 @@ improve the API over time. tabIndex={0} title="Hide API Key" > - + @@ -903,12 +903,12 @@ in your Akismet account: tabIndex={0} title="Hide API Key" > - + diff --git a/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap b/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap index 432b97930..dcbc0f30b 100644 --- a/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap +++ b/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap @@ -7,12 +7,12 @@ exports[`loads more 1`] = `
- +   @@ -37,12 +37,12 @@ exports[`loads more 1`] = `
- +

- +

@@ -101,12 +101,12 @@ exports[`loads more 1`] = `
- +

- +

@@ -165,12 +165,12 @@ exports[`loads more 1`] = `
- +

- +

@@ -232,12 +232,12 @@ exports[`opens popover when clicked on button showing loading state 1`] = `
- +   @@ -264,12 +264,12 @@ exports[`render popover content 1`] = `
- +   @@ -294,12 +294,12 @@ exports[`render popover content 1`] = `
- +

- +

@@ -358,12 +358,12 @@ exports[`render popover content 1`] = `
- +

- +

@@ -448,12 +448,12 @@ exports[`renders decision history popover button 1`] = ` onTouchEnd={[Function]} type="button" > - +
- +
diff --git a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap index 124bdecc6..b30e03bbc 100644 --- a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap +++ b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap @@ -91,12 +91,12 @@ exports[`approves comment in reported queue: dangling 1`] = ` target="_blank" > View Context - +
@@ -158,12 +158,12 @@ exports[`approves comment in reported queue: dangling 1`] = ` > Details - +
@@ -196,12 +196,12 @@ exports[`approves comment in reported queue: dangling 1`] = ` onTouchEnd={[Function]} type="button" > - + @@ -319,12 +319,12 @@ exports[`rejects comment in reported queue: dangling 1`] = ` target="_blank" > View Context - +
@@ -386,12 +386,12 @@ exports[`rejects comment in reported queue: dangling 1`] = ` > Details - +
@@ -424,12 +424,12 @@ exports[`rejects comment in reported queue: dangling 1`] = ` onTouchEnd={[Function]} type="button" > - + @@ -544,12 +544,12 @@ exports[`renders reported queue with comments 1`] = ` target="_blank" > View Context - +
@@ -611,12 +611,12 @@ exports[`renders reported queue with comments 1`] = ` > Details - +
@@ -649,12 +649,12 @@ exports[`renders reported queue with comments 1`] = ` onTouchEnd={[Function]} type="button" > - + @@ -756,12 +756,12 @@ exports[`renders reported queue with comments 1`] = ` target="_blank" > View Context - +
@@ -823,12 +823,12 @@ exports[`renders reported queue with comments 1`] = ` > Details - +
@@ -861,12 +861,12 @@ exports[`renders reported queue with comments 1`] = ` onTouchEnd={[Function]} type="button" > - + @@ -984,12 +984,12 @@ exports[`renders reported queue with comments 2`] = ` target="_blank" > View Context - +
@@ -1051,12 +1051,12 @@ exports[`renders reported queue with comments 2`] = ` > Details - +
@@ -1089,12 +1089,12 @@ exports[`renders reported queue with comments 2`] = ` onTouchEnd={[Function]} type="button" > - + @@ -1196,12 +1196,12 @@ exports[`renders reported queue with comments 2`] = ` target="_blank" > View Context - +
@@ -1263,12 +1263,12 @@ exports[`renders reported queue with comments 2`] = ` > Details - +
@@ -1301,12 +1301,12 @@ exports[`renders reported queue with comments 2`] = ` onTouchEnd={[Function]} type="button" > - + @@ -1414,12 +1414,12 @@ exports[`renders reported queue with comments and load more 1`] = ` target="_blank" > View Context - +
@@ -1499,12 +1499,12 @@ exports[`renders reported queue with comments and load more 1`] = ` > Details - +
@@ -1537,12 +1537,12 @@ exports[`renders reported queue with comments and load more 1`] = ` onTouchEnd={[Function]} type="button" > - + diff --git a/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap index e52a2ecc9..52a99b23d 100644 --- a/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap +++ b/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap @@ -91,12 +91,12 @@ exports[`approves comment in rejected queue: dangling 1`] = ` target="_blank" > View Context - +
@@ -158,12 +158,12 @@ exports[`approves comment in rejected queue: dangling 1`] = ` > Details - +
@@ -196,12 +196,12 @@ exports[`approves comment in rejected queue: dangling 1`] = ` onTouchEnd={[Function]} type="button" > - + @@ -316,12 +316,12 @@ exports[`renders rejected queue with comments 1`] = ` target="_blank" > View Context - +
@@ -383,12 +383,12 @@ exports[`renders rejected queue with comments 1`] = ` > Details - +
@@ -421,12 +421,12 @@ exports[`renders rejected queue with comments 1`] = ` onTouchEnd={[Function]} type="button" > - + @@ -528,12 +528,12 @@ exports[`renders rejected queue with comments 1`] = ` target="_blank" > View Context - +
@@ -595,12 +595,12 @@ exports[`renders rejected queue with comments 1`] = ` > Details - +
@@ -633,12 +633,12 @@ exports[`renders rejected queue with comments 1`] = ` onTouchEnd={[Function]} type="button" > - + @@ -746,12 +746,12 @@ exports[`renders rejected queue with comments and load more 1`] = ` target="_blank" > View Context - +
@@ -826,12 +826,12 @@ exports[`renders rejected queue with comments and load more 1`] = ` > Details - +
@@ -864,12 +864,12 @@ exports[`renders rejected queue with comments and load more 1`] = ` onTouchEnd={[Function]} type="button" > - + diff --git a/src/core/client/admin/test/moderate/__snapshots__/searchBar.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/searchBar.spec.tsx.snap index 9003dc74b..b4d5744ed 100644 --- a/src/core/client/admin/test/moderate/__snapshots__/searchBar.spec.tsx.snap +++ b/src/core/client/admin/test/moderate/__snapshots__/searchBar.spec.tsx.snap @@ -33,12 +33,12 @@ exports[`all stories active search with no results 1`] = `
- +
@@ -172,12 +172,12 @@ exports[`all stories active search with too many results 1`] = ` See all results - + `; @@ -215,12 +215,12 @@ exports[`all stories renders search bar 1`] = `
- +
View Context - +
Details - +
@@ -162,12 +162,12 @@ exports[`approves single comment 1`] = ` onTouchEnd={[Function]} type="button" > - + @@ -272,12 +272,12 @@ exports[`rejects single comment 1`] = ` target="_blank" > View Context - +
Details - +
@@ -356,12 +356,12 @@ exports[`rejects single comment 1`] = ` onTouchEnd={[Function]} type="button" > - + @@ -501,12 +501,12 @@ exports[`renders single comment view 1`] = ` target="_blank" > View Context - +
Details - +
@@ -585,12 +585,12 @@ exports[`renders single comment view 1`] = ` onTouchEnd={[Function]} type="button" > - + diff --git a/src/core/client/admin/test/moderate/__snapshots__/tabBar.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/tabBar.spec.tsx.snap index 763727b6a..fd02836fa 100644 --- a/src/core/client/admin/test/moderate/__snapshots__/tabBar.spec.tsx.snap +++ b/src/core/client/admin/test/moderate/__snapshots__/tabBar.spec.tsx.snap @@ -22,12 +22,12 @@ exports[`tab bar renders tab bar (empty queues) 1`] = ` href="/admin/moderate/reported" onClick={[Function]} > - + reported @@ -51,12 +51,12 @@ exports[`tab bar renders tab bar (empty queues) 1`] = ` href="/admin/moderate/pending" onClick={[Function]} > - + Pending @@ -80,12 +80,12 @@ exports[`tab bar renders tab bar (empty queues) 1`] = ` href="/admin/moderate/unmoderated" onClick={[Function]} > - + unmoderated @@ -109,12 +109,12 @@ exports[`tab bar renders tab bar (empty queues) 1`] = ` href="/admin/moderate/rejected" onClick={[Function]} > - + rejected diff --git a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap index a1036e418..a0b9346f4 100644 --- a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap +++ b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap @@ -53,12 +53,12 @@ exports[`renders empty stories 1`] = ` onTouchEnd={[Function]} type="submit" > - + @@ -103,12 +103,12 @@ exports[`renders empty stories 1`] = ` aria-hidden={true} className="SelectField-afterWrapper" > - + @@ -210,12 +210,12 @@ exports[`renders empty stories 1`] = ` > Open - +
Open - +
- +
@@ -414,12 +414,12 @@ exports[`renders stories 1`] = ` aria-hidden={true} className="SelectField-afterWrapper" > - + @@ -521,12 +521,12 @@ exports[`renders stories 1`] = ` > Open - +
Open - +
- +
- +
- +
- + This field is required. @@ -188,12 +188,12 @@ Your email address will be used to:
- +
- +
- +
- + Please enter a valid email address. @@ -314,12 +314,12 @@ Your email address will be used to:
- + Emails do not match. Try again. @@ -386,12 +386,12 @@ Your email address will be used to:
- +
- +
- +
- +
- +
- +
- + This field is required. @@ -668,12 +668,12 @@ Your email address will be used to:
- + This field is required. @@ -720,12 +720,12 @@ Your email address will be used to:
- +
- +
- +
- +
- +
- +
- +
- + Password must contain at least 8 characters. @@ -175,12 +175,12 @@ we require users to create a password. tabIndex={0} title="Show password" > - +
@@ -264,24 +264,24 @@ we require users to create a password. tabIndex={0} title="Show password" > - +
- + This field is required. @@ -376,12 +376,12 @@ GraphQL request (4:3) tabIndex={0} title="Show password" > - +
@@ -461,12 +461,12 @@ we require users to create a password. tabIndex={0} title="Show password" > - +
diff --git a/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap index ee23fd9aa..2548d545b 100644 --- a/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap @@ -46,12 +46,12 @@ exports[`checks for invalid username 1`] = `
- + Username must contain at least 3 characters. @@ -207,12 +207,12 @@ exports[`shows error when submitting empty form 1`] = `
- + This field is required. diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap index f8e21fd6d..9acb8165d 100644 --- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap @@ -36,12 +36,12 @@ exports[`accepts correct password 1`] = `
- + This field is required. @@ -85,12 +85,12 @@ exports[`accepts correct password 1`] = ` tabIndex={0} title="Show password" > - +
@@ -122,12 +122,12 @@ exports[`accepts correct password 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -208,24 +208,24 @@ exports[`accepts valid email 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -258,12 +258,12 @@ exports[`accepts valid email 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -351,12 +351,12 @@ exports[`auth configuration renders all auth enabled 1`] = ` tabIndex={0} title="Show password" > - +
@@ -388,12 +388,12 @@ exports[`auth configuration renders all auth enabled 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -600,12 +600,12 @@ exports[`checks for invalid email 1`] = `
- + Please enter a valid email address. @@ -649,24 +649,24 @@ exports[`checks for invalid email 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -699,12 +699,12 @@ exports[`checks for invalid email 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -833,12 +833,12 @@ exports[`renders sign in view 1`] = ` tabIndex={0} title="Show password" > - +
@@ -870,12 +870,12 @@ exports[`renders sign in view 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -1017,12 +1017,12 @@ exports[`renders sign in view with error 1`] = ` tabIndex={0} title="Show password" > - +
@@ -1054,12 +1054,12 @@ exports[`renders sign in view with error 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -1110,12 +1110,12 @@ exports[`shows error when submitting empty form 1`] = `
- + This field is required. @@ -1159,24 +1159,24 @@ exports[`shows error when submitting empty form 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -1209,12 +1209,12 @@ exports[`shows error when submitting empty form 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -1302,12 +1302,12 @@ exports[`shows server error 1`] = ` tabIndex={0} title="Show password" > - +
@@ -1339,12 +1339,12 @@ exports[`shows server error 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email @@ -1425,12 +1425,12 @@ exports[`submits form successfully 1`] = ` tabIndex={0} title="Show password" > - + @@ -1462,12 +1462,12 @@ exports[`submits form successfully 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign in with Email diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap index cfdaaae10..69d59bd1c 100644 --- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap @@ -43,12 +43,12 @@ exports[`accepts correct password 1`] = `
- + This field is required. @@ -87,12 +87,12 @@ exports[`accepts correct password 1`] = `
- + This field is required. @@ -141,12 +141,12 @@ exports[`accepts correct password 1`] = ` tabIndex={0} title="Show password" > - +
@@ -163,12 +163,12 @@ exports[`accepts correct password 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -256,12 +256,12 @@ exports[`accepts valid email 1`] = `
- + This field is required. @@ -310,24 +310,24 @@ exports[`accepts valid email 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -345,12 +345,12 @@ exports[`accepts valid email 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -407,12 +407,12 @@ exports[`accepts valid username 1`] = `
- + This field is required. @@ -492,24 +492,24 @@ exports[`accepts valid username 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -527,12 +527,12 @@ exports[`accepts valid username 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -661,12 +661,12 @@ exports[`auth configuration renders all auth enabled 1`] = ` tabIndex={0} title="Show password" > - +
@@ -683,12 +683,12 @@ exports[`auth configuration renders all auth enabled 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -902,12 +902,12 @@ exports[`checks for invalid characters in username 1`] = `
- + This field is required. @@ -946,12 +946,12 @@ exports[`checks for invalid characters in username 1`] = `
- + Invalid characters. Try again. @@ -1000,24 +1000,24 @@ exports[`checks for invalid characters in username 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -1035,12 +1035,12 @@ exports[`checks for invalid characters in username 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -1097,12 +1097,12 @@ exports[`checks for invalid email 1`] = `
- + Please enter a valid email address. @@ -1141,12 +1141,12 @@ exports[`checks for invalid email 1`] = `
- + This field is required. @@ -1195,24 +1195,24 @@ exports[`checks for invalid email 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -1230,12 +1230,12 @@ exports[`checks for invalid email 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -1292,12 +1292,12 @@ exports[`checks for too long username 1`] = `
- + This field is required. @@ -1336,12 +1336,12 @@ exports[`checks for too long username 1`] = `
- + Usernames cannot be longer than 30 characters. @@ -1390,24 +1390,24 @@ exports[`checks for too long username 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -1425,12 +1425,12 @@ exports[`checks for too long username 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -1487,12 +1487,12 @@ exports[`checks for too short password 1`] = `
- + This field is required. @@ -1531,12 +1531,12 @@ exports[`checks for too short password 1`] = `
- + This field is required. @@ -1585,24 +1585,24 @@ exports[`checks for too short password 1`] = ` tabIndex={0} title="Show password" > - +
- + Password must contain at least 8 characters. @@ -1620,12 +1620,12 @@ exports[`checks for too short password 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -1682,12 +1682,12 @@ exports[`checks for too short username 1`] = `
- + This field is required. @@ -1726,12 +1726,12 @@ exports[`checks for too short username 1`] = `
- + Username must contain at least 3 characters. @@ -1780,24 +1780,24 @@ exports[`checks for too short username 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -1815,12 +1815,12 @@ exports[`checks for too short username 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -1990,12 +1990,12 @@ exports[`renders sign up form 1`] = ` tabIndex={0} title="Show password" > - +
@@ -2012,12 +2012,12 @@ exports[`renders sign up form 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -2077,12 +2077,12 @@ exports[`shows error when submitting empty form 1`] = `
- + This field is required. @@ -2121,12 +2121,12 @@ exports[`shows error when submitting empty form 1`] = `
- + This field is required. @@ -2175,24 +2175,24 @@ exports[`shows error when submitting empty form 1`] = ` tabIndex={0} title="Show password" > - +
- + This field is required. @@ -2210,12 +2210,12 @@ exports[`shows error when submitting empty form 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -2351,12 +2351,12 @@ exports[`shows server error 1`] = ` tabIndex={0} title="Show password" > - +
@@ -2373,12 +2373,12 @@ exports[`shows server error 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email @@ -2507,12 +2507,12 @@ exports[`submits form successfully 1`] = ` tabIndex={0} title="Show password" > - + @@ -2529,12 +2529,12 @@ exports[`submits form successfully 1`] = ` onTouchEnd={[Function]} type="submit" > - + Sign up with Email diff --git a/src/core/client/stream/App/App.tsx b/src/core/client/stream/App/App.tsx index af6049d3f..b3244277f 100644 --- a/src/core/client/stream/App/App.tsx +++ b/src/core/client/stream/App/App.tsx @@ -1,6 +1,9 @@ +import cn from "classnames"; import { HorizontalGutter, TabContent, TabPane } from "coral-ui/components"; import React, { FunctionComponent } from "react"; +import CLASSES from "coral-stream/classes"; + import Comments from "../tabs/Comments"; import Configure from "../tabs/Configure"; import Profile from "../tabs/Profile"; @@ -16,16 +19,28 @@ export interface AppProps { const App: FunctionComponent = props => { return ( - + - + - + - + diff --git a/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap index fa42a9c69..b8ec81cef 100644 --- a/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap +++ b/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap @@ -2,7 +2,7 @@ exports[`renders correctly 1`] = ` diff --git a/src/core/client/stream/classes.ts b/src/core/client/stream/classes.ts index 1ebef9e79..ca0bd923c 100644 --- a/src/core/client/stream/classes.ts +++ b/src/core/client/stream/classes.ts @@ -1,4 +1,9 @@ const CLASSES = { + /** + * app is the container of the app. + */ + app: "coral coral-stream", + /** * guidlines represents the box containing the guidlines. */ @@ -76,7 +81,7 @@ const CLASSES = { featured: "coral coral-tabBarSecondary-tab coral-tabBarComments-featured", /** - * featuredTooltip is the tooltip next to the fextured tab. + * featuredTooltip is the tooltip next to the featured tab. */ featuredTooltip: "coral coral-tabBarComments-featuredTooltip", }, @@ -130,6 +135,17 @@ const CLASSES = { * signIn is the button for submitting a new comment and signing in. */ signIn: "coral coral-createComment-signIn", + + /** + * inReview is the message notifying the user that the posted comment is + * in review. + */ + inReview: "coral coral-createComment-inReview", + + /** + * dismissButton is the button to dismiss the in review message. + */ + dismissButton: "coral coral-createComment-dismissButton", }, /** @@ -142,6 +158,12 @@ const CLASSES = { */ $root: "coral coral-createReplyComment", + /** + * inReview is the message notifying the user that the posted comment is + * in review. + */ + inReview: "coral coral-createReplyComment-inReview", + /** * submit is the button for submitting a new reply. */ @@ -156,6 +178,15 @@ const CLASSES = { * dimiss is the button to dismiss the message after submit. */ dismiss: "coral coral-createReplyComment-dismiss", + + /** + * replyTo shows the author of the parent comment. + */ + replyTo: { + $root: "coral coral-createReplyComment-replyTo", + text: "coral coral-createReplyComment-replyToText", + username: "coral coral-createReplyComment-replyToUsername", + }, }, /** @@ -167,6 +198,22 @@ const CLASSES = { */ $root: "coral coral-editComment", + /** + * inReview is the message notifying the user that the edited comment is + * in review. + */ + inReview: "coral coral-editComment-inReview", + + /** + * remainingTime is the message telling the user the remaining time. + */ + remainingTime: "coral coral-editComment-remainingTime", + + /** + * expiredTime appears when the comment can no longer be edited. + */ + expiredTime: "coral coral-editComment-expiredTime", + /** * submit is the button for submitting the edit. */ @@ -198,36 +245,601 @@ const CLASSES = { $root: "coral coral-comment", /** - * username is the text display for any given Username in the system. + * topBar is the uppper bar of the comment. */ - username: "coral coral-comment-username", + topBar: { + /** + * $root represents the container of the top bar. + */ + $root: "coral coral-comment-topBar", + + /** + * username is the text display for any given Username in the system. + */ + username: "coral coral-username coral-comment-username", + + /** + * timestamp is the text that contains the time since the comment was + * published. + */ + timestamp: "coral coral-timestamp coral-comment-timestamp", + + /** + * edited is the text that indicated that a comment was edited. + */ + edited: "coral coral-comment-edited", + + /** + * userTag can be used to target a tag associated with a User. + */ + userTag: "coral coral-userTag coral-comment-userTag", + + /** + * userBadge can be used to target a badge associated with a User. + */ + userBadge: "coral coral-userBadge coral-comment-userBadge", + + /** + * commentTag can be used to target a tag associated with a Comment. + */ + commentTag: "coral coral-commentTag coral-comment-commentTag", + + /** + * caretButton can be used to target the caret that opens the moderation dropdown. + */ + caretButton: "coral coral-comment-caret", + + /** + * editButton can be used to target the edit button. + */ + editButton: "coral coral-comment-editButton", + }, /** - * timestamp is the text that contains the time since the comment was - * published. + * content is the html text body of the comment. */ - timestamp: "coral coral-comment-timestamp", + content: "coral coral-content coral-comment-content", /** - * userTag can be used to target a tag associated with a User. + * readMoreOfConversation is the link that continues the + * thread of the conversation on a deeper level. */ - userTag: "coral coral-comment-userTag", - - /** - * userBadge can be used to target a badge associated with a User. - */ - userBadge: "coral coral-comment-userBadge", - - /** - * commentTag can be used to target a tag associated with a Comment. - */ - commentTag: "coral coral-comment-commentTag", + readMoreOfConversation: "coral coral-comment-readMoreOfConveration", /** * inReplyTo shows the author of the parent comment. */ - inReplyTo: "coral coral-comment-inReplyTo", + inReplyTo: { + $root: "coral coral-comment-inReplyTo", + text: "coral coral-comment-inReplyToText", + username: "coral coral-comment-inReplyToUsername", + }, + + /** + * actionBar is the lower bar of the comment. + */ + actionBar: { + /** + * $root represents the container of action bar. + */ + $root: "coral coral-comment-actionBar", + /** + * reactButton is the reaction button. + */ + reactButton: "coral coral-reactButton coral-comment-reactButton", + /** + * reactedButton is the class added to the reaction button + * when the viewer has already reacted to the comment. + */ + reactedButton: "coral-reactedButton coral-comment-reactedButton", + /** + * replyButton is button that triggers the reply form. + */ + replyButton: "coral coral-comment-replyButton", + /** + * shareButton is the button that will show the permalink popover. + */ + shareButton: "coral coral-comment-shareButton", + /** + * reportButton is the button that triggers the report feature. + */ + reportButton: "coral coral-reportButton coral-comment-reportButton", + /** + * reportedButton is added to report button when the viewer + * has already reported the comment. + */ + reportedButton: "coral-reportedButton coral-comment-reportedButton", + }, + + /** + * indentation classes for the different levels. + */ + indent: [ + "", + "coral coral-indent-1", + "coral coral-indent-2", + "coral coral-indent-3", + "coral coral-indent-4", + "coral coral-indent-5", + "coral coral-indent-6", + ], }, + + /** + * rejectedTombstone is shown when a comment got rejected. + */ + rejectedTombstone: { + $root: "coral coral-rejectedtombstone", + goToModerateButton: "coral coral-rejectedtombstone-goToModerateButton", + }, + /** + * deletedTombstone is shown when a comment has been deleted. + */ + deletedTombstone: "coral coral-rejectedtombstone", + + /** + * ignoredTombstown is shown when a comment got ignored. + */ + ignoredTombstone: "coral coral-ignoredTombstone", + + /** + * replyList represents the list of replies to a comment. + */ + replyList: { + /** + * showAllButton is the button to show all replies. + */ + showAllButton: "coral coral-replyList-showAllButton", + /** + * showAllButton is the button to show incoming live replies. + */ + showMoreReplies: "coral coral-replyList-showMoreButton", + }, + + /** + * comment is the visual representation of a featured comment. + */ + featuredComment: { + /** + * $root represents the container containing a featured comment. + */ + $root: "coral coral-featuredComment", + + /** + * authorBar is the uppper bar of the comment. + */ + authorBar: { + $root: "coral coral-featuredComment-authorBar", + + /** + * username is the text display for any given Username in the system. + */ + username: "coral coral-username coral-comment-username", + + /** + * timestamp is the text that contains the time since the comment was + * published. + */ + timestamp: "coral coral-timestamp coral-comment-timestamp", + + /** + * userTag can be used to target a tag associated with a User. + */ + userTag: "coral coral-userTag coral-comment-userTag", + }, + + /** + * content is the html text body of the featured comment. + */ + content: "coral coral-content coral-featuredComment-content", + + /** + * actionBar is the lower bar of the featured comment. + */ + actionBar: { + /** + * $root represents the container of action bar. + */ + $root: "coral coral-featuredComment-actionBar", + + /** + * replies indicates the amount of replies this comment has. + */ + replies: "coral coral-featuredComment-replies", + + /** + * reactButton is the reaction button. + */ + reactButton: "coral coral-reactButton coral-featuredComment-reactButton", + /** + * reactedButton is the class added to the reaction button + * when the viewer has already reacted to the comment. + */ + reactedButton: "coral-reactedButton coral-featuredComment-reactedButton", + /** + * goToConversation is the link that leads to the whole conversation. + */ + goToConversation: "coral coral-featuredComment-goToConversationButton", + }, + }, + + /** + * userPopover is the popover that appears when clicking on the username. + */ + userPopover: { + /** + * $root is the container of the user popover. + */ + $root: "coral coral-userPopover", + /** + * username that is rendeed inside the user popover. + */ + username: "coral coral-username coral-userPopover-username", + /** + * ignoreButton that will trigger the ignore user popover. + */ + ignoreButton: "coral coral-userPopover-ignoreButton", + }, + + /** + * ignoreUserPopover is the popover that allow the + * viewer to ignore a user. + */ + ignoreUserPopover: { + /** + * $root is the container of the ignore user popover. + */ + $root: "coral coral-ignoreUserPopover", + cancelButton: "coral coral-ignoreUserPopover-cancelButton", + ignoreButton: "coral coral-ignoreUserPopover-ignoreButton", + }, + + /** + * sharePopover is the popover that shows the permalink of the comment. + */ + sharePopover: { + $root: "coral coral-sharePopover", + copyButton: "coral coral-sharePopover-copyButotn", + }, + + /** + * reportPopover is the popover that appears when the viewer clicks on the + * report button. + */ + reportPopover: { + $root: "coral coral-reportPopover", + closeButton: "coral coral-reportPopover-closeButton", + cancelButton: "coral coral-reportPopover-cancelButton", + submitButton: "coral coral-reportPopover-submitButton", + }, + + /** + * moderationDropdown is the dropdown that appears when clicking on the + * caret as a priviledged user (at least moderator). + */ + moderationDropdown: { + $root: "coral coral-moderationDropdown", + approveButton: + "coral coral-dropdownButton coral-moderationDropdown-approveButton", + approvedButton: + "coral coral-dropdownButton coral-moderationDropdown-approveedButton", + rejectButton: + "coral coral-dropdownButton coral-moderationDropdown-rejectButton", + rejectedButton: + "coral coral-dropdownButton coral-moderationDropdown-rejectedButton", + featureButton: + "coral coral-dropdownButton coral-moderationDropdown-featureButton", + unfeatureButton: + "coral coral-dropdownButton coral-moderationDropdown-unfeatureButton", + banUserButton: + "coral coral-dropdownButton coral-moderationDropdown-banUserButton", + bannedButton: + "coral coral-dropdownButton coral-moderationDropdown-bannedButton", + goToModerateButton: + "coral coral-dropdownButton coral-moderationDropdown-goToModerateButton", + }, + + /** + * banUserPopover is the popover that allows the viewer to ban users. + */ + banUserPopover: { + $root: "coral coral-banUserPopover", + cancelButton: "coral coral-banUserPopover-cancelButton", + banButton: "coral coral-banUserPopover-banButton", + }, + + /** + * viewerBox is the box that indicates which user is logged in and + * provides login, signout or register functionality. + */ + viewerBox: { + $root: "coral coral-viewerBox", + logoutButton: "coral coral-viewerBox-logoutButton", + signInButton: "coral coral-viewerBox-signInButton", + registerButton: "coral coral-viewerBox-registerButton", + }, + + /** + * comments tab pane is the default tab pane. + */ + commentsTabPane: { + /** + * $root is the container for the comments tab pane. + */ + $root: "coral coral-comments", + /** + * authenticated will indicate that the user is logged in. + */ + authenticated: "coral coral-authenticated", + /** + * unauthenticated will indicate that the user hasn't logged in yet. + */ + unauthenticated: "coral coral-unauthenticated", + }, + + /** + * allCommentsTabPane is the tab pane that shows all comments. + */ + allCommentsTabPane: { + $root: "coral coral-allComments", + /** + * loadMoreButton is the button to paginate. + */ + loadMoreButton: + "coral coral-loadMoreButton coral-allComments-loadMoreButton", + /** + * viewNewButton is the button that reveals newer comments. + */ + viewNewButton: "coral coral-allComments-viewNewButton", + }, + + /** + * featuredCommentsTabPane is the tab pane that shows featured comments. + */ + featuredCommentsTabPane: { + $root: "coral coral-featuredComments", + loadMoreButton: + "coral coral-loadMoreButton coral-featuredComments-loadMoreButton", + }, + + /** + * permalinkView is the tab pane that shows the conversation of a comment. + */ + permalinkView: { + /** + * $root is the container for the permalink tab pane. + */ + $root: "coral coral-permalink", + /** + * authenticated will be applied to the container when the user is logged in. + */ + authenticated: "coral-authenticated", + /** + * unauthenticated will be applied to the container when the user has not logged in yet. + */ + unauthenticated: "coral-unauthenticated", + + /** + * viewFullDiscussionButton is the button that leads to the full comment stream. + */ + viewFullDiscussionButton: "coral coral-permalink-viewFullDiscussionButton", + }, + + /** + * conversationThread shows the thread of comments that lead to the permalinked comment. + */ + conversationThread: { + $root: "coral coral-conversationThread", + /** + * rootParent is the root comment that is shown in the thread before it has been + * expanded. + */ + rootParent: { + $root: "coral coral-rootParent", + username: "coral coral-username coral-rootParent-username", + timestamp: "coral coral-timestamp coral-rootParent-timestamp", + userTag: "coral coral-userTag coral-rootParent-userTag", + }, + /** + * showMore is the button that reveals all comments between root parent and highlighted comment. + */ + showMore: "coral coral-conversationThread-showMore", + /** + * highlighted is the comment that is targeted by the permalink. + */ + hightlighted: "coral coral-conversationThread-highlighted", + }, + + /** + * myProfileTabPane is the tab pane that shows the profile of the viewer. + */ + myProfileTabPane: { + $root: "coral coral-myProfile", + }, + + /** + * myUsername is the username part of my profile. + */ + myUsername: { + username: "coral coral-myUsername", + editButton: "coral coral-myUsername-editButton", + form: { + $root: "coral coral-changeMyUsername", + username: "coral coral-changeMyUsername-username", + cancelButton: "coral coral-changeMyUsername-cancelButton", + saveButton: "coral coral-changeMyUsername-saveButton", + closeButton: "coral coral-changeMyUsername-closeButton", + errorMessage: "coral coral-changeMyEmail-errorMessage", + }, + }, + + /** + * myUsername is the email part of my profile. + */ + myEmail: { + email: "coral coral-myEmail", + unverified: "coral coral-myEmail-unverified", + editButton: "coral coral-myEmail-editButton", + form: { + $root: "coral coral-changeMyEmail", + currentEmail: "coral coral-changeMyEmail-currentEmail", + cancelButton: "coral coral-changeMyEmail-cancelButton", + saveButton: "coral coral-changeMyEmail-saveButton", + errorMessage: "coral coral-changeMyEmail-errorMessage", + }, + }, + + /** + * myUsername is the verify email part of my profile. + */ + verifyEmail: { + $root: "coral coral-verifyEmail", + resendButton: "coral coral-verifyEmail-resendButton", + resentMessage: "coral coral-verifyEmail-resentMessage", + }, + + /** + * myCommentsTabPane is the tab pane that shows viewers comments. + */ + myCommentsTabPane: { + $root: "coral coral-myComments", + loadMoreButton: + "coral coral-loadMoreButton coral-myComments-loadMoreButton", + }, + + /** + * myComment is the comment that shows up in the viewers comment history. + */ + myComment: { + $root: "coral coral-myComment", + story: "coral coral-myComment-story", + timestamp: "coral coral-myComment-timestamp", + content: "coral coral-myComment-content", + replies: "coral coral-myComment-replies", + viewConversationButton: "coral coral-myComment-viewConversationButton", + }, + + /** + * settingsTabPane is the tab pane that shows viewers settings. + */ + settingsTabPane: { + $root: "coral coral-settings", + }, + + /** + * ignoredCommenters is ignored commenters settings. + */ + ignoredCommenters: { + $root: "coral coral-ignoredCommenters", + username: "coral coral-ignoredCommenters-username", + stopIgnoreButton: "coral coral-ignoredCommenters-stopIgnoreButton", + }, + + /** + * changePassword allows the viewer to change password in settings. + */ + changePassword: { + $root: "coral coral-changePassword", + forgotButton: "coral coral-changePassword-forgotButton", + changeButton: "coral coral-changePassword-changeButton", + successMessage: "coral coral-changePassword-successMessage", + errorMessage: "coral coral-changePassword-errorMessage", + }, + + /** + * downloadCommentHistory allows the viewer to download the comment + * history in settings. + */ + downloadCommentHistory: { + $root: "coral coral-downloadCommentHistory", + requestButton: "coral coral-downloadCommentHistory-requestButton", + recentRequest: "coral coral-downloadCommentHistory-recentRequest", + requestLater: "coral coral-downloadCommentHistory-requestLater", + }, + + /** + * deleteMyAccount allows the viewer to delete their account. + */ + deleteMyAccount: { + $root: "coral coral-deleteMyAccount", + requestButton: "coral coral-deleteMyAccount-requestButton", + cancelRequestButton: "coral coral-deleteMyAccount-cancelRequestButton", + }, + + /** + * pendingAccountDeletion is the message box informing the viewer + * about a pending account deletion. + */ + pendingAccountDeletion: { + $root: "coral coral-pendingAccountDeletion", + cancelRequestButton: + "coral coral-pendingAccountDeletion-cancelRequestButton", + }, + + /** + * deleteMyAccount allows the viewer to delete their account. + */ + deleteMyAccountModal: { + $root: "coral coral-deleteMyAccountModal", + header: "coral coral-deleteMyAccountModal-header", + cancelButton: "coral coral-deleteMyAccountModal-cancelButton", + proceedButton: "coral coral-deleteMyAccountModal-proceedButton", + doneButton: "coral coral-deleteMyAccountModal-doneButton", + deleteMyAccountButton: "coral coral-deleteMyAccount-deleteMyAccountButton", + }, + + /** + * configureTabPane is the tab pane that lets priviledged users to + * change settings of the stream. + */ + configureTabPane: { + $root: "coral coral-configure", + }, + + /** + * configureMessageBox is the message box section in the stream configure. + */ + configureMessageBox: { + $root: "coral coral-configureMessageBox", + messageBox: "coral coral-configureMessageBox-messageBox", + option: "coral coral-configureMessageBox-option", + }, + + /** + * configureCommentStream allows priviledged users to adjust settings of + * the stream. + */ + configureCommentStream: { + $root: "coral coral-configureCommentStream", + applyButton: "coral coral-configureCommentStream-applyButton", + errorMessage: "coral coral-configureCommentStream-errorMessage", + }, + + /** + * closeCommentStream allows priviledged users to close the stream. + */ + closeCommentStream: { + $root: "coral coral-closeCommentStream", + closeButton: "coral coral-closeCommentStream-closeButton", + }, + + /** + * openCommentStream allows priviledged users to open the stream. + */ + openCommentStream: { + $root: "coral coral-openCommentStream", + openButton: "coral coral-openCommentStream-openButton", + }, + + /** + * spinner is the loading indicator. + */ + spinner: "coral-spinner", + + /** + * validation message that shows up on form errors. + */ + validationMessage: "coral-validation-message", }; export default CLASSES; diff --git a/src/core/client/stream/common/Counter.ts b/src/core/client/stream/common/Counter.ts index 30156421c..580d51ea2 100644 --- a/src/core/client/stream/common/Counter.ts +++ b/src/core/client/stream/common/Counter.ts @@ -5,8 +5,11 @@ import CLASSES from "coral-stream/classes"; import { Counter } from "coral-ui/components"; import { PropTypesOf } from "coral-ui/types"; +/** + * Like from coral ui but with a stable css classname. + */ export default withProps< - PropTypesOf, + Partial>, PropTypesOf >(({ className }) => ({ className: cn(className, CLASSES.counter), diff --git a/src/core/client/stream/common/FieldValidationMessage.ts b/src/core/client/stream/common/FieldValidationMessage.ts new file mode 100644 index 000000000..dc20315d5 --- /dev/null +++ b/src/core/client/stream/common/FieldValidationMessage.ts @@ -0,0 +1,16 @@ +import cn from "classnames"; +import { withProps } from "recompose"; + +import { ValidationMessage } from "coral-framework/lib/form"; +import CLASSES from "coral-stream/classes"; +import { PropTypesOf } from "coral-ui/types"; + +/** + * Like from the form library but with a stable css classname. + */ +export default withProps< + Partial>, + PropTypesOf +>(({ className }) => ({ + className: cn(className, CLASSES.validationMessage), +}))(ValidationMessage); diff --git a/src/core/client/stream/common/MessageBox/__snapshots__/MessageBox.spec.tsx.snap b/src/core/client/stream/common/MessageBox/__snapshots__/MessageBox.spec.tsx.snap index c31491163..b65087755 100644 --- a/src/core/client/stream/common/MessageBox/__snapshots__/MessageBox.spec.tsx.snap +++ b/src/core/client/stream/common/MessageBox/__snapshots__/MessageBox.spec.tsx.snap @@ -12,12 +12,12 @@ exports[`renders icon 1`] = `
- + Alert MessageBox
`; diff --git a/src/core/client/stream/common/Spinner.ts b/src/core/client/stream/common/Spinner.ts new file mode 100644 index 000000000..a20c5772f --- /dev/null +++ b/src/core/client/stream/common/Spinner.ts @@ -0,0 +1,16 @@ +import cn from "classnames"; +import { withProps } from "recompose"; + +import CLASSES from "coral-stream/classes"; +import { Spinner } from "coral-ui/components"; +import { PropTypesOf } from "coral-ui/types"; + +/** + * Like from coral ui but with a stable css classname. + */ +export default withProps< + Partial>, + PropTypesOf +>(({ className }) => ({ + className: cn(className, CLASSES.spinner), +}))(Spinner); diff --git a/src/core/client/stream/common/Timestamp/Timestamp.tsx b/src/core/client/stream/common/Timestamp/Timestamp.tsx index 98e32c9af..3cb54aef2 100644 --- a/src/core/client/stream/common/Timestamp/Timestamp.tsx +++ b/src/core/client/stream/common/Timestamp/Timestamp.tsx @@ -1,7 +1,6 @@ import cn from "classnames"; import React, { FunctionComponent } from "react"; -import CLASSES from "coral-stream/classes"; import { RelativeTime } from "coral-ui/components"; import styles from "./Timestamp.css"; @@ -13,7 +12,7 @@ export interface TimestampProps { const Timestamp: FunctionComponent = props => ( ); diff --git a/src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap b/src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap index fc2ac16cd..ed879ed6e 100644 --- a/src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap +++ b/src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap @@ -2,7 +2,7 @@ exports[`renders correctly 1`] = ` `; diff --git a/src/core/client/stream/common/UserBox/UserBoxAuthenticated.tsx b/src/core/client/stream/common/UserBox/UserBoxAuthenticated.tsx index 75d8e3d0f..42034b605 100644 --- a/src/core/client/stream/common/UserBox/UserBoxAuthenticated.tsx +++ b/src/core/client/stream/common/UserBox/UserBoxAuthenticated.tsx @@ -1,6 +1,7 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; +import CLASSES from "coral-stream/classes"; import { Button, Flex, Typography } from "coral-ui/components"; export interface UserBoxAuthenticatedProps { @@ -19,7 +20,7 @@ const UserBoxAuthenticated: FunctionComponent< ); return ( - + } @@ -37,6 +38,7 @@ const UserBoxAuthenticated: FunctionComponent< size="small" variant="underlined" onClick={props.onSignOut} + className={CLASSES.viewerBox.logoutButton} /> } > diff --git a/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.tsx b/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.tsx index 644a74253..2093afdb1 100644 --- a/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.tsx +++ b/src/core/client/stream/common/UserBox/UserBoxUnauthenticated.tsx @@ -1,6 +1,7 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; +import CLASSES from "coral-stream/classes"; import { Button, Flex, Typography } from "coral-ui/components"; import MatchMedia from "coral-ui/components/MatchMedia"; @@ -16,7 +17,7 @@ const UserBoxUnauthenticated: FunctionComponent< UserBoxUnauthenticatedProps > = props => { return ( - + Sign in @@ -48,6 +50,7 @@ const UserBoxUnauthenticated: FunctionComponent< size="small" variant="outlined" onClick={props.onRegister} + className={CLASSES.viewerBox.registerButton} > Register diff --git a/src/core/client/stream/common/UserBox/__snapshots__/UserBoxAuthenticated.spec.tsx.snap b/src/core/client/stream/common/UserBox/__snapshots__/UserBoxAuthenticated.spec.tsx.snap index 2e37b6b34..0ada6ef2c 100644 --- a/src/core/client/stream/common/UserBox/__snapshots__/UserBoxAuthenticated.spec.tsx.snap +++ b/src/core/client/stream/common/UserBox/__snapshots__/UserBoxAuthenticated.spec.tsx.snap @@ -2,6 +2,7 @@ exports[`renders correctly with logout button 1`] = ` @@ -19,6 +20,7 @@ exports[`renders correctly with logout button 1`] = ` diff --git a/src/core/client/stream/common/UserBox/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap b/src/core/client/stream/common/UserBox/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap index fb60e5563..ff70d1849 100644 --- a/src/core/client/stream/common/UserBox/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap +++ b/src/core/client/stream/common/UserBox/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap @@ -3,6 +3,7 @@ exports[`renders correctly 1`] = ` from coral ui but with a stable css classname. + */ +export default withProps< + Partial>, + PropTypesOf +>(({ className }) => ({ + className: cn(className, CLASSES.validationMessage), +}))(ValidationMessage); diff --git a/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx index e5f09e5e0..7cc44ee79 100644 --- a/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx @@ -4,21 +4,24 @@ import { graphql } from "react-relay"; import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer"; import { AuthorBadgesContainer_comment as CommentData } from "coral-stream/__generated__/AuthorBadgesContainer_comment.graphql"; -import CLASSES from "coral-stream/classes"; import { Tag } from "coral-ui/components"; interface Props { comment: CommentData; + className?: string; } -const AuthorBadgesContainer: FunctionComponent = ({ comment }) => { +const AuthorBadgesContainer: FunctionComponent = ({ + comment, + className, +}) => { if (!comment.author || !comment.author.badges) { return null; } return ( <> {comment.author.badges.map(badge => ( - + {badge} ))} diff --git a/src/core/client/stream/tabs/Comments/Comment/Comment.tsx b/src/core/client/stream/tabs/Comments/Comment/Comment.tsx index 64bb41bc3..a5b19bba3 100644 --- a/src/core/client/stream/tabs/Comments/Comment/Comment.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/Comment.tsx @@ -1,6 +1,7 @@ import cn from "classnames"; import React, { FunctionComponent } from "react"; +import CLASSES from "coral-stream/classes"; import HTMLContent from "coral-stream/common/HTMLContent"; import Timestamp from "coral-stream/common/Timestamp"; import { Flex, HorizontalGutter } from "coral-ui/components"; @@ -30,15 +31,23 @@ const Comment: FunctionComponent = props => { role="article" className={cn(styles.root, { [styles.highlight]: props.highlight })} > - + {props.username && props.username} {props.userTags} - {props.createdAt} - {props.showEditedMarker && } + + {props.createdAt} + + {props.showEditedMarker && ( + + )} {props.topBarRight &&
{props.topBarRight}
} @@ -50,7 +59,9 @@ const Comment: FunctionComponent = props => { )} - {props.body || ""} + + {props.body || ""} + {props.footer} diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx index 4f934b236..7ff67004c 100644 --- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx @@ -1,3 +1,4 @@ +import cn from "classnames"; import { Localized } from "fluent-react/compat"; import React, { Component, MouseEvent } from "react"; import { graphql } from "react-relay"; @@ -56,6 +57,7 @@ interface Props { /** showConversationLink will render a link to the conversation */ showConversationLink?: boolean; highlight?: boolean; + className?: string; } interface State { @@ -164,6 +166,7 @@ export class CommentContainer extends Component { showConversationLink, highlight, viewer, + className, } = this.props; const { showReplyDialog, showEditDialog, editable } = this.state; const hasFeaturedTag = Boolean( @@ -173,7 +176,7 @@ export class CommentContainer extends Component { <> {hasFeaturedTag && ( @@ -222,7 +225,7 @@ export class CommentContainer extends Component { } return (
@@ -243,11 +246,18 @@ export class CommentContainer extends Component { comment.author && ( <> - - + + ) } @@ -260,6 +270,7 @@ export class CommentContainer extends Component { color="primary" variant="underlined" onClick={this.openEditDialog} + className={CLASSES.comment.topBar.editButton} > Edit @@ -276,13 +287,20 @@ export class CommentContainer extends Component { } footer={ <> - + {!disableReplies && !banned && @@ -298,11 +316,13 @@ export class CommentContainer extends Component { settings.disableCommenting.enabled || story.isClosed } + className={CLASSES.comment.actionBar.replyButton} /> )} @@ -310,12 +330,17 @@ export class CommentContainer extends Component { )} {showConversationLink && ( = props => { {props.expired ? ( - + Edit time has expired. You can no longer edit this comment. Why not post another one? ) : ( <> - + alarm { status={this.state.submitStatus} onDismiss={this.handleOnCancelOrClose} buttonClassName={CLASSES.editComment.dismiss} + inReviewClassName={CLASSES.editComment.inReview} /> ); } diff --git a/src/core/client/stream/tabs/Comments/Comment/EditedMarker.tsx b/src/core/client/stream/tabs/Comments/Comment/EditedMarker.tsx index 8a843fc85..876640594 100644 --- a/src/core/client/stream/tabs/Comments/Comment/EditedMarker.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/EditedMarker.tsx @@ -1,10 +1,15 @@ +import cn from "classnames"; import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; import styles from "./EditedMarker.css"; -const EditedMarker: FunctionComponent = () => ( -
+interface Props { + className?: string; +} + +const EditedMarker: FunctionComponent = props => ( +
( Edited diff --git a/src/core/client/stream/tabs/Comments/Comment/InReplyTo.tsx b/src/core/client/stream/tabs/Comments/Comment/InReplyTo.tsx index 88a36e351..2791dff71 100644 --- a/src/core/client/stream/tabs/Comments/Comment/InReplyTo.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/InReplyTo.tsx @@ -1,3 +1,4 @@ +import cn from "classnames"; import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; @@ -12,19 +13,23 @@ interface Props { const InReplyTo: FunctionComponent = ({ username }) => { const Username = () => ( - + {username} ); return ( - + reply{" "} }> {"In reply to "} diff --git a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx index c5991ef4b..cec15dbd4 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx @@ -1,3 +1,4 @@ +import cn from "classnames"; import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; import { graphql } from "react-relay"; @@ -6,6 +7,7 @@ import { withFragmentContainer } from "coral-framework/lib/relay"; import { CaretContainer_comment } from "coral-stream/__generated__/CaretContainer_comment.graphql"; import { CaretContainer_story } from "coral-stream/__generated__/CaretContainer_story.graphql"; import { CaretContainer_viewer } from "coral-stream/__generated__/CaretContainer_viewer.graphql"; +import CLASSES from "coral-stream/classes"; import { Button, ClickOutside, Icon, Popover } from "coral-ui/components"; import ModerationDropdownContainer from "./ModerationDropdownContainer"; @@ -49,7 +51,7 @@ const CaretContainer: FunctionComponent = props => {
} adornment={} + className={CLASSES.moderationDropdown.banUserButton} disabled > Ban User @@ -46,7 +49,7 @@ const ModerationActionBanContainer: FunctionComponent = ({ block
} - className={styles.banned} + className={cn(styles.banned, CLASSES.moderationDropdown.bannedButton)} disabled > Banned @@ -63,6 +66,7 @@ const ModerationActionBanContainer: FunctionComponent = ({
} onClick={onBan} + className={CLASSES.moderationDropdown.banUserButton} > Ban User diff --git a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx index 1a592ec4b..32885225d 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx @@ -7,6 +7,7 @@ import { useMutation, withFragmentContainer } from "coral-framework/lib/relay"; import { ModerationActionsContainer_comment } from "coral-stream/__generated__/ModerationActionsContainer_comment.graphql"; import { ModerationActionsContainer_story } from "coral-stream/__generated__/ModerationActionsContainer_story.graphql"; import { ModerationActionsContainer_viewer } from "coral-stream/__generated__/ModerationActionsContainer_viewer.graphql"; +import CLASSES from "coral-stream/classes"; import { DropdownButton, DropdownDivider, Icon } from "coral-ui/components"; import ApproveCommentMutation from "./ApproveCommentMutation"; @@ -85,7 +86,10 @@ const ModerationActionsContainer: FunctionComponent = ({ star } - className={styles.featured} + className={cn( + styles.featured, + CLASSES.moderationDropdown.unfeatureButton + )} onClick={onUnfeature} > Un-Feature @@ -94,6 +98,7 @@ const ModerationActionsContainer: FunctionComponent = ({ ) : ( star_border} onClick={onFeature} > @@ -112,7 +117,10 @@ const ModerationActionsContainer: FunctionComponent = ({ check } - className={styles.approved} + className={cn( + styles.approved, + CLASSES.moderationDropdown.approvedButton + )} disabled > Approved @@ -121,6 +129,7 @@ const ModerationActionsContainer: FunctionComponent = ({ ) : ( check @@ -143,7 +152,10 @@ const ModerationActionsContainer: FunctionComponent = ({ close } - className={styles.rejected} + className={cn( + styles.rejected, + CLASSES.moderationDropdown.rejectedButton + )} disabled > Rejected @@ -158,6 +170,7 @@ const ModerationActionsContainer: FunctionComponent = ({ } onClick={onReject} + className={CLASSES.moderationDropdown.rejectButton} > Reject @@ -172,6 +185,7 @@ const ModerationActionsContainer: FunctionComponent = ({ = ({ return (
{view === "MODERATE" ? ( - + = ({ comment }) => { const Link = useMemo( () => ({ children }) => ( - + {children} ), [comment] ); return ( - + }>
You have rejected this comment.{" "} diff --git a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx index d368db8bd..ff31f0b68 100644 --- a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx @@ -16,9 +16,14 @@ import styles from "./PermalinkButton.css"; interface PermalinkProps { commentID: string; url: string; + className?: string; } -const Permalink: FunctionComponent = ({ commentID, url }) => { +const Permalink: FunctionComponent = ({ + commentID, + url, + className, +}) => { const popoverID = `permalink-popover-${commentID}`; return ( @@ -41,6 +46,7 @@ const Permalink: FunctionComponent = ({ commentID, url }) => { variant="ghost" active={visible} size="small" + className={className} > share diff --git a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButtonContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButtonContainer.tsx index 545d18ade..ecb21758e 100644 --- a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButtonContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButtonContainer.tsx @@ -9,14 +9,17 @@ import PermalinkButton from "./PermalinkButton"; interface Props { story: StoryData; commentID: string; + className?: string; } export const PermalinkButtonContainer: FunctionComponent = ({ story, commentID, + className, }) => { return ( diff --git a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx index e932900dc..b9cd63e09 100644 --- a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx @@ -1,6 +1,8 @@ +import cn from "classnames"; import React from "react"; import { CopyButton } from "coral-framework/components"; +import CLASSES from "coral-stream/classes"; import { Flex, TextField } from "coral-ui/components"; import styles from "./PermalinkPopover.css"; @@ -13,13 +15,19 @@ class PermalinkPopover extends React.Component { public render() { const { permalinkURL } = this.props; return ( - + - + ); } diff --git a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButtonContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButtonContainer.tsx index 35513f72f..1b3841e73 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButtonContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButtonContainer.tsx @@ -1,3 +1,4 @@ +import cn from "classnames"; import { withFragmentContainer } from "coral-framework/lib/relay"; import { ReactionButtonContainer_comment as CommentData } from "coral-stream/__generated__/ReactionButtonContainer_comment.graphql"; import { ReactionButtonContainer_settings as SettingsData } from "coral-stream/__generated__/ReactionButtonContainer_settings.graphql"; @@ -28,6 +29,8 @@ interface Props { viewer: ViewerData | null; showAuthPopup: ShowAuthPopupMutation; readOnly?: boolean; + className?: string; + reactedClassName?: string; } class ReactionButtonContainer extends React.Component { @@ -56,7 +59,7 @@ class ReactionButtonContainer extends React.Component { }; public render() { - const { readOnly } = this.props; + const { readOnly, className, reactedClassName = "" } = this.props; const { actionCounts: { reaction: { total: totalReactions }, @@ -72,6 +75,7 @@ class ReactionButtonContainer extends React.Component { return !readOnly || totalReactions > 0 ? ( >; active?: boolean; disabled?: boolean; + className?: string; } const ReplyButton: FunctionComponent = props => ( - diff --git a/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.tsx index a66c821db..641d14e66 100644 --- a/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.tsx @@ -1,8 +1,10 @@ +import cn from "classnames"; import React, { FunctionComponent, useCallback } from "react"; import { graphql } from "react-relay"; import { useMutation, withFragmentContainer } from "coral-framework/lib/relay"; import { UserIgnorePopoverContainer_user as UserData } from "coral-stream/__generated__/UserIgnorePopoverContainer_user.graphql"; +import CLASSES from "coral-stream/classes"; import { Box, Button, Flex, Typography } from "coral-ui/components"; import IgnoreUserMutation from "./IgnoreUserMutation"; @@ -25,7 +27,7 @@ export const UserIgnorePopoverContainer: FunctionComponent = ({ onDismiss(); }, [user.id, ignoreUser]); return ( - + = ({ - - diff --git a/src/core/client/stream/tabs/Comments/Comment/UserPopover/UserPopoverOverviewContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/UserPopover/UserPopoverOverviewContainer.tsx index 9b063e0b0..f39eb260d 100644 --- a/src/core/client/stream/tabs/Comments/Comment/UserPopover/UserPopoverOverviewContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/UserPopover/UserPopoverOverviewContainer.tsx @@ -1,3 +1,4 @@ +import cn from "classnames"; import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; import { graphql } from "react-relay"; @@ -5,6 +6,7 @@ import { graphql } from "react-relay"; import { withFragmentContainer } from "coral-framework/lib/relay"; import { UserPopoverOverviewContainer_user as UserData } from "coral-stream/__generated__/UserPopoverOverviewContainer_user.graphql"; import { UserPopoverOverviewContainer_viewer as ViewerData } from "coral-stream/__generated__/UserPopoverOverviewContainer_viewer.graphql"; +import CLASSES from "coral-stream/classes"; import { Button, Flex, @@ -33,10 +35,15 @@ export const UserPopoverOverviewContainer: FunctionComponent = ({ viewer.ignoredUsers.every(u => u.id !== user.id) && user.ignoreable; return ( - +
- {user.username!} + + {user.username!} +
= ({ {canIgnore && ( - diff --git a/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx index 0601c8ffd..f9d2c92f7 100644 --- a/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx @@ -4,11 +4,11 @@ import { graphql } from "react-relay"; import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer"; import { UserTagsContainer_comment as CommentData } from "coral-stream/__generated__/UserTagsContainer_comment.graphql"; -import CLASSES from "coral-stream/classes"; import { Tag } from "coral-ui/components"; interface Props { comment: CommentData; + className?: string; } const UserTagsContainer: FunctionComponent = props => { @@ -18,7 +18,7 @@ const UserTagsContainer: FunctionComponent = props => { <> {staffTag && ( - Staff + Staff )} diff --git a/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx b/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx index 2f2987b39..ff060be06 100644 --- a/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx @@ -1,20 +1,20 @@ import cn from "classnames"; import React, { FunctionComponent } from "react"; -import CLASSES from "coral-stream/classes"; import { Typography } from "coral-ui/components"; import styles from "./Username.css"; interface Props { children: React.ReactNode; + className?: string; } const Username: FunctionComponent = props => { return ( {props.children} diff --git a/src/core/client/stream/tabs/Comments/Comment/Username/UsernameWithPopoverContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/Username/UsernameWithPopoverContainer.tsx index fb7d784fe..6a260d674 100644 --- a/src/core/client/stream/tabs/Comments/Comment/Username/UsernameWithPopoverContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/Username/UsernameWithPopoverContainer.tsx @@ -13,6 +13,7 @@ import Username from "./Username"; interface Props { user: UserData; viewer: ViewerData | null; + className?: string; } const UsernameWithPopoverContainer: FunctionComponent = props => { @@ -38,6 +39,7 @@ const UsernameWithPopoverContainer: FunctionComponent = props => { onClick={toggleVisibility} aria-controls={popoverID} ref={ref} + className={props.className} > {props.user.username!} diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap index 7be849284..f8a1a73cc 100644 --- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap +++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap @@ -6,6 +6,7 @@ exports[`renders username and body 1`] = ` role="article" > @@ -22,10 +23,14 @@ exports[`renders username and body 1`] = ` direction="row" itemGutter={true} > - + 1995-12-17T03:24:00.000Z - +
@@ -35,7 +40,9 @@ exports[`renders username and body 1`] = ` - + Woof footer diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap index 77a767059..be64f1bd4 100644 --- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap +++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap @@ -13,10 +13,12 @@ exports[`hide reply button 1`] = ` footer={ @@ -103,6 +109,7 @@ exports[`hide reply button 1`] = ` username={ @@ -276,6 +292,7 @@ exports[`renders body only 1`] = ` username={ @@ -449,6 +475,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = ` username={ @@ -622,6 +658,7 @@ exports[`renders disabled reply when story is closed 1`] = ` username={ @@ -803,6 +849,7 @@ exports[`renders in reply to 1`] = ` username={ @@ -984,6 +1040,7 @@ exports[`renders username and body 1`] = ` username={ diff --git a/src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.tsx b/src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.tsx index 9b2019df2..8f44a7c2a 100644 --- a/src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.tsx +++ b/src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.tsx @@ -10,6 +10,7 @@ import { usePrevious } from "coral-framework/hooks"; import { graphql, withFragmentContainer } from "coral-framework/lib/relay"; import { IgnoredTombstoneOrHideContainer_comment as CommentData } from "coral-stream/__generated__/IgnoredTombstoneOrHideContainer_comment.graphql"; import { IgnoredTombstoneOrHideContainer_viewer as ViewerData } from "coral-stream/__generated__/IgnoredTombstoneOrHideContainer_viewer.graphql"; +import CLASSES from "coral-stream/classes"; import { CallOut } from "coral-ui/components"; interface Props { @@ -48,7 +49,7 @@ const IgnoredTombstoneOrHideContainer: FunctionComponent = ({ return ( <> - + This comment is no longer available. The commenter has deleted their account. @@ -75,7 +76,7 @@ const IgnoredTombstoneOrHideContainer: FunctionComponent = ({ id="comments-tombstone-ignore" $username={comment.author!.username} > - + This comment is hidden because you ignored {comment.author!.username} diff --git a/src/core/client/stream/tabs/Comments/Indent.tsx b/src/core/client/stream/tabs/Comments/Indent.tsx index 30616945b..73576226e 100644 --- a/src/core/client/stream/tabs/Comments/Indent.tsx +++ b/src/core/client/stream/tabs/Comments/Indent.tsx @@ -1,6 +1,8 @@ import cn from "classnames"; import React, { FunctionComponent } from "react"; +import CLASSES from "coral-stream/classes"; + import styles from "./Indent.css"; export interface IndentProps { @@ -24,7 +26,7 @@ function getLevelClassName(level: number = 0) { if (!(level in levels)) { throw new Error(`Indent level ${level} does not exist`); } - return levels[level]; + return cn(levels[level], CLASSES.comment.indent[level]); } const Indent: FunctionComponent = props => { diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx b/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx index efa49e216..365608495 100644 --- a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx +++ b/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx @@ -1,3 +1,4 @@ +import cn from "classnames"; import { Localized } from "fluent-react/compat"; import { Child as PymChild } from "pym.js"; import React from "react"; @@ -10,6 +11,7 @@ import { ConversationThreadContainer_settings as SettingsData } from "coral-stre import { ConversationThreadContainer_story as StoryData } from "coral-stream/__generated__/ConversationThreadContainer_story.graphql"; import { ConversationThreadContainer_viewer as ViewerData } from "coral-stream/__generated__/ConversationThreadContainer_viewer.graphql"; import { ConversationThreadContainerPaginationQueryVariables } from "coral-stream/__generated__/ConversationThreadContainerPaginationQuery.graphql"; +import CLASSES from "coral-stream/classes"; import Counter from "coral-stream/common/Counter"; import { SetCommentIDMutation, @@ -83,7 +85,10 @@ class ConversationThreadContainer extends React.Component< ); } return ( -
+
}> {rootParent && ( @@ -91,7 +96,12 @@ class ConversationThreadContainer extends React.Component< id={rootParent.id} username={rootParent.author && rootParent.author.username} createdAt={rootParent.createdAt} - tags={} + tags={ + + } /> )} @@ -103,7 +113,10 @@ class ConversationThreadContainer extends React.Component< $count={remaining} > diff --git a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabQuery.tsx b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabQuery.tsx index 96cf4ecd1..7d4ae0194 100644 --- a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabQuery.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabQuery.tsx @@ -5,7 +5,8 @@ import { } from "coral-framework/lib/relay"; import { AllCommentsTabQuery as QueryTypes } from "coral-stream/__generated__/AllCommentsTabQuery.graphql"; import { AllCommentsTabQueryLocal as Local } from "coral-stream/__generated__/AllCommentsTabQueryLocal.graphql"; -import { Flex, Spinner } from "coral-ui/components"; +import Spinner from "coral-stream/common/Spinner"; +import { Flex } from "coral-ui/components"; import React, { FunctionComponent } from "react"; import { ReadyState } from "react-relay"; diff --git a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/SpinnerWhileRendering.tsx b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/SpinnerWhileRendering.tsx index 3f1b289c0..ab386de5c 100644 --- a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/SpinnerWhileRendering.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/SpinnerWhileRendering.tsx @@ -1,6 +1,8 @@ -import { Flex, Spinner } from "coral-ui/components"; import React, { FunctionComponent, useEffect, useState } from "react"; +import Spinner from "coral-stream/common/Spinner"; +import { Flex } from "coral-ui/components"; + interface Props { children: React.ReactNode; } diff --git a/src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx index a18ca09d4..eecefb61f 100644 --- a/src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx @@ -14,6 +14,7 @@ import { Typography, } from "coral-ui/components"; +import CLASSES from "coral-stream/classes"; import CancelAccountDeletionMutation from "coral-stream/mutations/CancelAccountDeletionMutation"; import { StreamDeletionRequestCalloutContainer_viewer } from "coral-stream/__generated__/StreamDeletionRequestCalloutContainer_viewer.graphql"; @@ -67,7 +68,7 @@ const StreamDeletionRequestCalloutContainer: FunctionComponent = ({ return ( <> {deletionDate && ( - + @@ -108,6 +109,7 @@ const StreamDeletionRequestCalloutContainer: FunctionComponent = ({ variant="underlined" color="primary" onClick={cancelDeletion} + className={CLASSES.pendingAccountDeletion.cancelRequestButton} > Cancel account deletion request diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx index 02a957179..7f4e68c7e 100644 --- a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx @@ -1,3 +1,5 @@ +import cn from "classnames"; +import { Localized } from "fluent-react/compat"; import React, { FunctionComponent, MouseEvent, useCallback } from "react"; import { graphql } from "react-relay"; @@ -8,6 +10,7 @@ import { FeaturedCommentContainer_comment as CommentData } from "coral-stream/__ import { FeaturedCommentContainer_settings as SettingsData } from "coral-stream/__generated__/FeaturedCommentContainer_settings.graphql"; import { FeaturedCommentContainer_story as StoryData } from "coral-stream/__generated__/FeaturedCommentContainer_story.graphql"; import { FeaturedCommentContainer_viewer as ViewerData } from "coral-stream/__generated__/FeaturedCommentContainer_viewer.graphql"; +import CLASSES from "coral-stream/classes"; import HTMLContent from "coral-stream/common/HTMLContent"; import Timestamp from "coral-stream/common/Timestamp"; import { @@ -20,7 +23,6 @@ import { UserTagsContainer } from "../../Comment"; import ReactionButtonContainer from "../../Comment/ReactionButton"; import { UsernameWithPopoverContainer } from "../../Comment/Username"; -import { Localized } from "fluent-react/compat"; import styles from "./FeaturedCommentContainer.css"; interface Props { @@ -46,40 +48,73 @@ const FeaturedCommentContainer: FunctionComponent = props => { ); return ( -
- {comment.body || ""} - +
+ + {comment.body || ""} + + {comment.author && ( - + )} - + - {comment.createdAt} + + {comment.createdAt} + - + {comment.replyCount > 0 && ( - reply - - Replies - - {comment.replyCount} + + reply + + Replies + + {comment.replyCount} + | )}
diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsContainer.tsx index ffb1cec06..3a5039402 100644 --- a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsContainer.tsx @@ -10,6 +10,7 @@ import { FeaturedCommentsContainer_settings as SettingsData } from "coral-stream import { FeaturedCommentsContainer_story as StoryData } from "coral-stream/__generated__/FeaturedCommentsContainer_story.graphql"; import { FeaturedCommentsContainer_viewer as ViewerData } from "coral-stream/__generated__/FeaturedCommentsContainer_viewer.graphql"; import { FeaturedCommentsContainerPaginationQueryVariables } from "coral-stream/__generated__/FeaturedCommentsContainerPaginationQuery.graphql"; +import CLASSES from "coral-stream/classes"; import { Button, HorizontalGutter } from "coral-ui/components"; import { Localized } from "fluent-react/compat"; @@ -57,6 +58,7 @@ export const FeaturedCommentsContainer: FunctionComponent = props => { fullWidth disabled={isLoadingMore} aria-controls="comments-featuredComments-log" + className={CLASSES.featuredCommentsTabPane.loadMoreButton} > Load More diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsQuery.tsx b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsQuery.tsx index ba252ef58..316368882 100644 --- a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsQuery.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsQuery.tsx @@ -1,3 +1,6 @@ +import React, { FunctionComponent } from "react"; +import { ReadyState } from "react-relay"; + import { graphql, QueryRenderer, @@ -5,9 +8,8 @@ import { } from "coral-framework/lib/relay"; import { FeaturedCommentsQuery as QueryTypes } from "coral-stream/__generated__/FeaturedCommentsQuery.graphql"; import { FeaturedCommentsQueryLocal as Local } from "coral-stream/__generated__/FeaturedCommentsQueryLocal.graphql"; -import { Delay, Flex, Spinner } from "coral-ui/components"; -import React, { FunctionComponent } from "react"; -import { ReadyState } from "react-relay"; +import Spinner from "coral-stream/common/Spinner"; +import { Delay, Flex } from "coral-ui/components"; import FeaturedCommentsContainer from "./FeaturedCommentsContainer"; diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx index 1c159aad0..aec89f978 100644 --- a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx @@ -7,13 +7,8 @@ import { Field, Form, FormSpy } from "react-final-form"; import { OnSubmit } from "coral-framework/lib/form"; import CLASSES from "coral-stream/classes"; -import { - AriaInfo, - Button, - Flex, - HorizontalGutter, - ValidationMessage, -} from "coral-ui/components"; +import ValidationMessage from "coral-stream/common/ValidationMessage"; +import { AriaInfo, Button, Flex, HorizontalGutter } from "coral-ui/components"; import { cleanupRTEEmptyHTML, getCommentBodyValidators } from "../../helpers"; import RemainingCharactersContainer from "../../RemainingCharacters"; diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentInReviewMessage.tsx b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentInReviewMessage.tsx index 648668a18..0c526923e 100644 --- a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentInReviewMessage.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentInReviewMessage.tsx @@ -1,6 +1,7 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; +import CLASSES from "coral-stream/classes"; import { Button, Flex, Message } from "coral-ui/components"; import styles from "./PostCommentInReviewMessage.css"; @@ -13,7 +14,11 @@ const PostCommentInReview: FunctionComponent< PostCommentInReviewProps > = props => { return ( - +
@@ -23,6 +28,7 @@ const PostCommentInReview: FunctionComponent<
@@ -97,12 +97,12 @@ exports[`renders correctly on small screens 1`] = ` aria-hidden={true} className="SelectField-afterWrapper SortMenu-mobileAfterWrapper" > - +
diff --git a/src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap b/src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap index 49a938937..f5f658bfb 100644 --- a/src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap +++ b/src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap @@ -19,7 +19,7 @@ exports[`renders level1 1`] = ` className="Indent-root" >
Hello World @@ -33,7 +33,7 @@ exports[`renders without border 1`] = ` className="Indent-root" >
Hello World diff --git a/src/core/client/stream/tabs/Configure/ConfigureQuery.tsx b/src/core/client/stream/tabs/Configure/ConfigureQuery.tsx index 1389c032e..87ee5362b 100644 --- a/src/core/client/stream/tabs/Configure/ConfigureQuery.tsx +++ b/src/core/client/stream/tabs/Configure/ConfigureQuery.tsx @@ -10,7 +10,8 @@ import { } from "coral-framework/lib/relay"; import { ConfigureQuery as QueryTypes } from "coral-stream/__generated__/ConfigureQuery.graphql"; import { ConfigureQueryLocal as Local } from "coral-stream/__generated__/ConfigureQueryLocal.graphql"; -import { Delay, Spinner } from "coral-ui/components"; +import Spinner from "coral-stream/common/Spinner"; +import { Delay } from "coral-ui/components"; const loadConfigureContainer = () => import("./ConfigureContainer" /* webpackChunkName: "configure" */); diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx b/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx index f3d17a46e..b0ed0b7d8 100644 --- a/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx +++ b/src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx @@ -5,6 +5,7 @@ import { Form } from "react-final-form"; import { FormInitializer } from "coral-framework/lib/form"; import { PropTypesOf } from "coral-framework/types"; +import CLASSES from "coral-stream/classes"; import { Button, CallOut, @@ -37,7 +38,12 @@ const ConfigureStream: FunctionComponent = ({ {({ handleSubmit, submitting, pristine, form, submitError }) => ( {({ onInitValues }) => ( -
+ = ({ @@ -161,7 +177,7 @@ const changeEmailContainer: FunctionComponent = ({ )} {!viewer.emailVerified && !showEditForm && ( - +
email @@ -187,7 +203,10 @@ const changeEmailContainer: FunctionComponent = ({ )} )} {showEditForm && ( - +
@@ -205,7 +217,10 @@ const ChangeUsernameContainer: FunctionComponent = ({
Current username @@ -242,7 +257,7 @@ const ChangeUsernameContainer: FunctionComponent = ({ {...input} id="profile-changeUsername-username" /> - + )} @@ -268,21 +283,29 @@ const ChangeUsernameContainer: FunctionComponent = ({ {...input} id="profile-changeUsername-username-confirm" /> - + )} {submitError && ( - + {submitError} )} - @@ -292,6 +315,7 @@ const ChangeUsernameContainer: FunctionComponent = ({ span={} > diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx index 7d8545d88..6ec725a4a 100644 --- a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx +++ b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx @@ -2,6 +2,7 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; import { PropTypesOf } from "coral-framework/types"; +import CLASSES from "coral-stream/classes"; import { Button, Flex, @@ -67,6 +68,7 @@ const CommentHistory: FunctionComponent = props => { fullWidth disabled={props.disableLoadMore} aria-controls="coral-profile-commentHistory-log" + className={CLASSES.myCommentsTabPane.loadMoreButton} > Load More diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx index cb9a5d31e..7c989e276 100644 --- a/src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx +++ b/src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx @@ -1,6 +1,8 @@ +import cn from "classnames"; import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; +import CLASSES from "coral-stream/classes"; import HTMLContent from "coral-stream/common/HTMLContent"; import Timestamp from "coral-stream/common/Timestamp"; import { @@ -29,20 +31,31 @@ export interface HistoryCommentProps { const HistoryComment: FunctionComponent = props => { return ( - + - {"Story: {$title}"} + + {"Story: {$title}"} + - {props.createdAt} + + {props.createdAt} + - {props.body && {props.body}} + {props.body && ( + + {props.body} + + )} {!!props.replyCount && ( -
+
reply = props => { target="_parent" href={props.conversationURL} onClick={props.onGotoConversation} - className={styles.viewConversation} + className={cn( + styles.viewConversation, + CLASSES.myComment.viewConversationButton + )} > View Conversation diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/CommentHistory.spec.tsx.snap b/src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/CommentHistory.spec.tsx.snap index d13265f87..8d1ddd9bf 100644 --- a/src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/CommentHistory.spec.tsx.snap +++ b/src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/CommentHistory.spec.tsx.snap @@ -35,6 +35,7 @@ exports[`has more disables load more 1`] = ` > Story: {$title} - + 2018-07-06T18:24:00.000Z - + Hello World @@ -31,7 +37,7 @@ exports[`renders correctly 1`] = ` itemGutter={true} >
= ({ : null; return ( - + @@ -70,7 +76,12 @@ const DeletionRequestCalloutContainer: FunctionComponent = ({ - diff --git a/src/core/client/stream/tabs/Profile/Profile.tsx b/src/core/client/stream/tabs/Profile/Profile.tsx index ff74ba642..5d5168dcc 100644 --- a/src/core/client/stream/tabs/Profile/Profile.tsx +++ b/src/core/client/stream/tabs/Profile/Profile.tsx @@ -73,10 +73,13 @@ const Profile: FunctionComponent = props => { - + - + diff --git a/src/core/client/stream/tabs/Profile/ProfileQuery.tsx b/src/core/client/stream/tabs/Profile/ProfileQuery.tsx index d2ad998a3..8d965f429 100644 --- a/src/core/client/stream/tabs/Profile/ProfileQuery.tsx +++ b/src/core/client/stream/tabs/Profile/ProfileQuery.tsx @@ -10,7 +10,8 @@ import { } from "coral-framework/lib/relay"; import { ProfileQuery as QueryTypes } from "coral-stream/__generated__/ProfileQuery.graphql"; import { ProfileQueryLocal as Local } from "coral-stream/__generated__/ProfileQueryLocal.graphql"; -import { CallOut, Delay, Spinner } from "coral-ui/components"; +import Spinner from "coral-stream/common/Spinner"; +import { CallOut, Delay } from "coral-ui/components"; const loadProfileContainer = () => import("./ProfileContainer" /* webpackChunkName: "profile" */); diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangePassword.tsx b/src/core/client/stream/tabs/Profile/Settings/ChangePassword.tsx index 15f70042f..290fee1d6 100644 --- a/src/core/client/stream/tabs/Profile/Settings/ChangePassword.tsx +++ b/src/core/client/stream/tabs/Profile/Settings/ChangePassword.tsx @@ -1,15 +1,18 @@ import { FORM_ERROR, FormApi } from "final-form"; +import { Localized } from "fluent-react/compat"; import React, { FunctionComponent, useCallback } from "react"; import { Field, Form } from "react-final-form"; import { InvalidRequestError } from "coral-framework/lib/errors"; -import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form"; +import { colorFromMeta } from "coral-framework/lib/form"; import { useMutation } from "coral-framework/lib/relay"; import { composeValidators, required, validatePassword, } from "coral-framework/lib/validation"; +import CLASSES from "coral-stream/classes"; +import FieldValidationMessage from "coral-stream/common/FieldValidationMessage"; import { Button, CallOut, @@ -22,7 +25,6 @@ import { Typography, } from "coral-ui/components"; -import { Localized } from "fluent-react/compat"; import UpdatePasswordMutation from "./UpdatePasswordMutation"; interface Props { @@ -59,7 +61,10 @@ const ChangePassword: FunctionComponent = ({ onResetPassword }) => { ); return ( -
+
{({ handleSubmit, @@ -93,7 +98,7 @@ const ChangePassword: FunctionComponent = ({ onResetPassword }) => { autoComplete="current-password" {...input} /> - + @@ -101,6 +106,7 @@ const ChangePassword: FunctionComponent = ({ onResetPassword }) => { variant="underlined" color="primary" onClick={onResetPassword} + className={CLASSES.changePassword.forgotButton} > Forgot your password? @@ -128,18 +134,26 @@ const ChangePassword: FunctionComponent = ({ onResetPassword }) => { autoComplete="new-password" {...input} /> - + )} {submitError && ( - + {submitError} )} {submitSucceeded && ( - + Your password has been updated @@ -151,6 +165,7 @@ const ChangePassword: FunctionComponent = ({ onResetPassword }) => { variant="filled" type="submit" disabled={submitting || pristine} + className={CLASSES.changePassword.changeButton} > Change Password diff --git a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx index 3f0a27311..3996fdebc 100644 --- a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx +++ b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/DeleteAccountContainer.tsx @@ -1,3 +1,4 @@ +import cn from "classnames"; import { Localized } from "fluent-react/compat"; import React, { FunctionComponent, useCallback, useState } from "react"; @@ -7,6 +8,7 @@ import { useMutation, withFragmentContainer, } from "coral-framework/lib/relay"; +import CLASSES from "coral-stream/classes"; import { Icon, Typography } from "coral-ui/components"; import { Button } from "coral-ui/components/Button"; @@ -57,7 +59,7 @@ const DeleteAccountContainer: FunctionComponent = ({ : null; return ( -
+
= ({ request until that time. - ) : ( - diff --git a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/DescriptionPage.tsx b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/DescriptionPage.tsx index f29a2e7f0..060dabc9a 100644 --- a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/DescriptionPage.tsx +++ b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/DescriptionPage.tsx @@ -1,6 +1,8 @@ +import cn from "classnames"; import { Localized } from "fluent-react/compat"; import React, { FunctionComponent, useCallback } from "react"; +import CLASSES from "coral-stream/classes"; import { Button, Flex, Typography } from "coral-ui/components"; import PageStepBar from "./Common/PageStepBar"; @@ -30,7 +32,7 @@ const DescriptionPage: FunctionComponent = ({ @@ -72,7 +74,10 @@ const DescriptionPage: FunctionComponent = ({ ) : ( - + query_builder diff --git a/src/core/client/stream/tabs/Profile/Settings/IgnoreUserSettingsContainer.tsx b/src/core/client/stream/tabs/Profile/Settings/IgnoreUserSettingsContainer.tsx index 3d6434d67..7e545eaa2 100644 --- a/src/core/client/stream/tabs/Profile/Settings/IgnoreUserSettingsContainer.tsx +++ b/src/core/client/stream/tabs/Profile/Settings/IgnoreUserSettingsContainer.tsx @@ -4,6 +4,7 @@ import { graphql } from "react-relay"; import { useMutation, withFragmentContainer } from "coral-framework/lib/relay"; import { IgnoreUserSettingsContainer_viewer as ViewerData } from "coral-stream/__generated__/IgnoreUserSettingsContainer_viewer.graphql"; +import CLASSES from "coral-stream/classes"; import { Button, Flex, @@ -23,7 +24,10 @@ interface Props { const IgnoreUserSettingsContainer: FunctionComponent = ({ viewer }) => { const removeUserIgnore = useMutation(RemoveUserIgnoreMutation); return ( -
+
Ignored Commenters @@ -40,8 +44,11 @@ const IgnoreUserSettingsContainer: FunctionComponent = ({ viewer }) => { justifyContent="space-between" alignItems="center" > - {user.username} + + {user.username} +
@@ -228,12 +228,12 @@ exports[`renders comment stream 1`] = ` aria-hidden={true} className="SelectField-afterWrapper undefined" > - +
@@ -280,6 +280,7 @@ exports[`renders comment stream 1`] = `