wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-03 18:24:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CORL-550] More stable css classes (#2515)

Browse Source 
* feat: more stable css classes

* chore: renamee ValidationMessageHelper to FormValidationMessage

* chore: Rename FormValidationMessage to FieldValidationMessage

* feat: more css classes, icons use <i> tag

* feat: stable classnames for gdpr features

* feat: more css stable classnames
This commit is contained in:
Vinh
2019-09-04 23:34:42 +07:00
committed by Kim Gardner
parent fcf3640adc
commit aa32fcaea6
157 changed files with 2965 additions and 1531 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
+2 -2
View File
@@ -85,12 +85,12 @@ Make sure it is unique and be sure to keep it secure.
tabIndex={0}
title="Hide password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx
+5 -1
View File
@@ -18,7 +18,11 @@ const UserBadgesContainer: FunctionComponent<Props> = ({ user }) => {
return (
<>
{user.badges.map(badge => (
<Tag key={badge} color="dark" className={CLASSES.comment.userBadge}>
<Tag
key={badge}
color="dark"
className={CLASSES.comment.topBar.userBadge}
>
{badge}
</Tag>
))}
src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap
+10 -10
View File
@@ -67,12 +67,12 @@ exports[`accepts valid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -137,12 +137,12 @@ exports[`checks for invalid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Please enter a valid email address.
</span>
@@ -176,12 +176,12 @@ exports[`checks for invalid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Emails do not match. Try again.
</span>
@@ -363,12 +363,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -402,12 +402,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap
+14 -14
View File
@@ -57,24 +57,24 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Password must contain at least 8 characters.
</span>
@@ -184,12 +184,12 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -274,24 +274,24 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -386,12 +386,12 @@ GraphQL request (4:3)
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -471,12 +471,12 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap
+4 -4
View File
@@ -46,12 +46,12 @@ exports[`checks for invalid username 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Username must contain at least 3 characters.
</span>
@@ -217,12 +217,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap
+4 -4
View File
@@ -81,12 +81,12 @@ exports[`show restricted screen for commenters and staff 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg Restricted-lockIcon"
>
lock
</span>
</i>
</div>
<h1
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
@@ -216,12 +216,12 @@ exports[`show restricted screen for commenters and staff 2`] = `
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg Restricted-lockIcon"
>
lock
</span>
</i>
</div>
<h1
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
+36 -36
View File
@@ -36,12 +36,12 @@ exports[`accepts correct password 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -85,12 +85,12 @@ exports[`accepts correct password 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -107,12 +107,12 @@ exports[`accepts correct password 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -193,24 +193,24 @@ exports[`accepts valid email 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -228,12 +228,12 @@ exports[`accepts valid email 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -278,12 +278,12 @@ exports[`checks for invalid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Please enter a valid email address.
</span>
@@ -327,24 +327,24 @@ exports[`checks for invalid email 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -362,12 +362,12 @@ exports[`checks for invalid email 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -525,12 +525,12 @@ exports[`renders sign in form 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -547,12 +547,12 @@ exports[`renders sign in form 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -611,12 +611,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -660,24 +660,24 @@ exports[`shows error when submitting empty form 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -695,12 +695,12 @@ exports[`shows error when submitting empty form 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -788,12 +788,12 @@ exports[`shows server error 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -810,12 +810,12 @@ exports[`shows server error 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
+20 -20
View File
@@ -56,12 +56,12 @@ exports[`renders community 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md"
>
search
</span>
</i>
</button>
</div>
</div>
@@ -127,12 +127,12 @@ exports[`renders community 1`] = `
aria-hidden={true}
className="SelectField-afterWrapper"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
</i>
</span>
</span>
<span
@@ -171,12 +171,12 @@ exports[`renders community 1`] = `
aria-hidden={true}
className="SelectField-afterWrapper"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
</i>
</span>
</span>
</div>
@@ -373,12 +373,12 @@ exports[`renders community 1`] = `
>
Moderator
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ButtonIcon-root"
>
arrow_drop_down
</span>
</i>
</button>
<div
aria-hidden={true}
@@ -475,12 +475,12 @@ exports[`renders community 1`] = `
>
Staff
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ButtonIcon-root"
>
arrow_drop_down
</span>
</i>
</button>
<div
aria-hidden={true}
@@ -577,12 +577,12 @@ exports[`renders community 1`] = `
>
Commenter
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ButtonIcon-root"
>
arrow_drop_down
</span>
</i>
</button>
<div
aria-hidden={true}
@@ -629,12 +629,12 @@ exports[`renders community 1`] = `
</div>
</div>
</div>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ButtonIcon-root"
>
arrow_drop_down
</span>
</i>
</button>
<div
aria-hidden={true}
@@ -715,12 +715,12 @@ exports[`renders empty community 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md"
>
search
</span>
</i>
</button>
</div>
</div>
@@ -786,12 +786,12 @@ exports[`renders empty community 1`] = `
aria-hidden={true}
className="SelectField-afterWrapper"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
</i>
</span>
</span>
<span
@@ -830,12 +830,12 @@ exports[`renders empty community 1`] = `
aria-hidden={true}
className="SelectField-afterWrapper"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
</i>
</span>
</span>
</div>
src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
+50 -50
View File
@@ -62,12 +62,12 @@ exports[`change settings: during submit: oidc without errors 1`] = `
target="_blank"
>
https://openid.net/connect/
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</p>
<hr
@@ -215,12 +215,12 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
tabIndex={0}
title="Hide Client Secret"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -544,12 +544,12 @@ For more information visit:
target="_blank"
>
https://developers.facebook.com/docs/facebook-login/web
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
.
</p>
@@ -664,12 +664,12 @@ For more information visit:
tabIndex={0}
title="Hide Client Secret"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -853,12 +853,12 @@ exports[`change settings: enable oidc configure box 1`] = `
target="_blank"
>
https://openid.net/connect/
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</p>
<hr
@@ -1006,12 +1006,12 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
tabIndex={0}
title="Hide Client Secret"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -1333,12 +1333,12 @@ exports[`change settings: oidc validation errors 1`] = `
target="_blank"
>
https://openid.net/connect/
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</p>
<hr
@@ -1424,12 +1424,12 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
<div
className="Message-root Message-colorError"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1465,12 +1465,12 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
<div
className="Message-root Message-colorError ValidationMessage-root"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1512,24 +1512,24 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
tabIndex={0}
title="Hide Client Secret"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1591,12 +1591,12 @@ the remaining fields. You may also enter the information manually.
<div
className="Message-root Message-colorError"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1632,12 +1632,12 @@ the remaining fields. You may also enter the information manually.
<div
className="Message-root Message-colorError"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1673,12 +1673,12 @@ the remaining fields. You may also enter the information manually.
<div
className="Message-root Message-colorError"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1714,12 +1714,12 @@ the remaining fields. You may also enter the information manually.
<div
className="Message-root Message-colorError"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1893,12 +1893,12 @@ exports[`regenerate sso key 1`] = `
tabIndex={0}
title="Hide SSO Key"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -1928,12 +1928,12 @@ exports[`regenerate sso key 1`] = `
KEY GENERATED AT:
11/12/2018, 11:26 PM
</p>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm SSOKeyField-warnIcon"
>
warning
</span>
</i>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-warn"
>
@@ -2556,12 +2556,12 @@ integration to register for a new account.
target="_blank"
>
https://openid.net/connect/
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</p>
<hr
@@ -2709,12 +2709,12 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
tabIndex={0}
title="Hide Client Secret"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -3058,12 +3058,12 @@ integration to register for a new account.
tabIndex={0}
title="Hide SSO Key"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -3093,12 +3093,12 @@ integration to register for a new account.
KEY GENERATED AT:
Invalid Date
</p>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm SSOKeyField-warnIcon"
>
warning
</span>
</i>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-warn"
>
@@ -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
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
.
</p>
@@ -3404,12 +3404,12 @@ to create and set up a web application. For more information visit:
tabIndex={0}
title="Hide Client Secret"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -3592,12 +3592,12 @@ For more information visit:
target="_blank"
>
https://developers.facebook.com/docs/facebook-login/web
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
.
</p>
@@ -3712,12 +3712,12 @@ For more information visit:
tabIndex={0}
title="Hide Client Secret"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
+6 -6
View File
@@ -556,12 +556,12 @@ moderation panel.
aria-hidden={true}
className="SelectField-afterWrapper"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
</i>
</span>
</span>
</div>
@@ -701,12 +701,12 @@ moderation panel.
aria-hidden={true}
className="SelectField-afterWrapper"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
</i>
</span>
</span>
</div>
@@ -942,12 +942,12 @@ based on the needs of your community.
aria-hidden={true}
className="SelectField-afterWrapper"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
</i>
</span>
</span>
</div>
src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
+4 -4
View File
@@ -712,12 +712,12 @@ improve the API over time.
tabIndex={0}
title="Hide API Key"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -903,12 +903,12 @@ in your Akismet account:
tabIndex={0}
title="Hide API Key"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap
+28 -28
View File
@@ -7,12 +7,12 @@ exports[`loads more 1`] = `
<div
className="Box-root Flex-root Title-root Flex-flex Flex-alignCenter"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
history
</span>
</i>
<span>
 
</span>
@@ -37,12 +37,12 @@ exports[`loads more 1`] = `
<div
className="DecisionItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm ApprovedIcon-root"
>
check
</span>
</i>
</div>
<div>
<p
@@ -81,12 +81,12 @@ exports[`loads more 1`] = `
Go to comment
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
chevron_right
</span>
</i>
</a>
</div>
</div>
@@ -101,12 +101,12 @@ exports[`loads more 1`] = `
<div
className="DecisionItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm RejectedIcon-root"
>
cancel
</span>
</i>
</div>
<div>
<p
@@ -145,12 +145,12 @@ exports[`loads more 1`] = `
Go to comment
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
chevron_right
</span>
</i>
</a>
</div>
</div>
@@ -165,12 +165,12 @@ exports[`loads more 1`] = `
<div
className="DecisionItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm ApprovedIcon-root"
>
check
</span>
</i>
</div>
<div>
<p
@@ -209,12 +209,12 @@ exports[`loads more 1`] = `
Go to comment
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
chevron_right
</span>
</i>
</a>
</div>
</div>
@@ -232,12 +232,12 @@ exports[`opens popover when clicked on button showing loading state 1`] = `
<div
className="Box-root Flex-root Title-root Flex-flex Flex-alignCenter"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
history
</span>
</i>
<span>
 
</span>
@@ -264,12 +264,12 @@ exports[`render popover content 1`] = `
<div
className="Box-root Flex-root Title-root Flex-flex Flex-alignCenter"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
history
</span>
</i>
<span>
 
</span>
@@ -294,12 +294,12 @@ exports[`render popover content 1`] = `
<div
className="DecisionItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm ApprovedIcon-root"
>
check
</span>
</i>
</div>
<div>
<p
@@ -338,12 +338,12 @@ exports[`render popover content 1`] = `
Go to comment
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
chevron_right
</span>
</i>
</a>
</div>
</div>
@@ -358,12 +358,12 @@ exports[`render popover content 1`] = `
<div
className="DecisionItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm RejectedIcon-root"
>
cancel
</span>
</i>
</div>
<div>
<p
@@ -402,12 +402,12 @@ exports[`render popover content 1`] = `
Go to comment
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
chevron_right
</span>
</i>
</a>
</div>
</div>
@@ -448,12 +448,12 @@ exports[`renders decision history popover button 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg"
>
history
</span>
</i>
</button>
<div
aria-hidden={true}
src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap
+2 -2
View File
@@ -183,12 +183,12 @@ exports[`renders form 1`] = `
tabIndex={0}
title="Hide password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
+56 -56
View File
@@ -91,12 +91,12 @@ exports[`approves comment in reported queue: dangling 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div>
@@ -158,12 +158,12 @@ exports[`approves comment in reported queue: dangling 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -196,12 +196,12 @@ exports[`approves comment in reported queue: dangling 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -215,12 +215,12 @@ exports[`approves comment in reported queue: dangling 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
@@ -319,12 +319,12 @@ exports[`rejects comment in reported queue: dangling 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div>
@@ -386,12 +386,12 @@ exports[`rejects comment in reported queue: dangling 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -424,12 +424,12 @@ exports[`rejects comment in reported queue: dangling 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -443,12 +443,12 @@ exports[`rejects comment in reported queue: dangling 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
@@ -544,12 +544,12 @@ exports[`renders reported queue with comments 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div>
@@ -611,12 +611,12 @@ exports[`renders reported queue with comments 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -649,12 +649,12 @@ exports[`renders reported queue with comments 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -668,12 +668,12 @@ exports[`renders reported queue with comments 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
@@ -756,12 +756,12 @@ exports[`renders reported queue with comments 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div>
@@ -823,12 +823,12 @@ exports[`renders reported queue with comments 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -861,12 +861,12 @@ exports[`renders reported queue with comments 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -880,12 +880,12 @@ exports[`renders reported queue with comments 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
@@ -984,12 +984,12 @@ exports[`renders reported queue with comments 2`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div>
@@ -1051,12 +1051,12 @@ exports[`renders reported queue with comments 2`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -1089,12 +1089,12 @@ exports[`renders reported queue with comments 2`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -1108,12 +1108,12 @@ exports[`renders reported queue with comments 2`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
@@ -1196,12 +1196,12 @@ exports[`renders reported queue with comments 2`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div>
@@ -1263,12 +1263,12 @@ exports[`renders reported queue with comments 2`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -1301,12 +1301,12 @@ exports[`renders reported queue with comments 2`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -1320,12 +1320,12 @@ exports[`renders reported queue with comments 2`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
@@ -1414,12 +1414,12 @@ exports[`renders reported queue with comments and load more 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div>
@@ -1499,12 +1499,12 @@ exports[`renders reported queue with comments and load more 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -1537,12 +1537,12 @@ exports[`renders reported queue with comments and load more 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -1556,12 +1556,12 @@ exports[`renders reported queue with comments and load more 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
+32 -32
View File
@@ -91,12 +91,12 @@ exports[`approves comment in rejected queue: dangling 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div>
@@ -158,12 +158,12 @@ exports[`approves comment in rejected queue: dangling 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -196,12 +196,12 @@ exports[`approves comment in rejected queue: dangling 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -215,12 +215,12 @@ exports[`approves comment in rejected queue: dangling 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
@@ -316,12 +316,12 @@ exports[`renders rejected queue with comments 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div>
@@ -383,12 +383,12 @@ exports[`renders rejected queue with comments 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -421,12 +421,12 @@ exports[`renders rejected queue with comments 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -440,12 +440,12 @@ exports[`renders rejected queue with comments 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
@@ -528,12 +528,12 @@ exports[`renders rejected queue with comments 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div>
@@ -595,12 +595,12 @@ exports[`renders rejected queue with comments 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -633,12 +633,12 @@ exports[`renders rejected queue with comments 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -652,12 +652,12 @@ exports[`renders rejected queue with comments 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
@@ -746,12 +746,12 @@ exports[`renders rejected queue with comments and load more 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div>
@@ -826,12 +826,12 @@ exports[`renders rejected queue with comments and load more 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -864,12 +864,12 @@ exports[`renders rejected queue with comments and load more 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -883,12 +883,12 @@ exports[`renders rejected queue with comments and load more 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
src/core/client/admin/test/moderate/__snapshots__/searchBar.spec.tsx.snap
+6 -6
View File
@@ -33,12 +33,12 @@ exports[`all stories active search with no results 1`] = `
<div
className="Box-root Flex-root Field-begin Flex-flex Flex-alignCenter"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md Field-searchIcon"
>
search
</span>
</i>
<div
className="Field-beginStories"
>
@@ -172,12 +172,12 @@ exports[`all stories active search with too many results 1`] = `
<span>
See all results
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm SeeAllOption-icon"
>
arrow_forward
</span>
</i>
</a>
</li>
`;
@@ -215,12 +215,12 @@ exports[`all stories renders search bar 1`] = `
<div
className="Box-root Flex-root Field-begin Flex-flex Flex-alignCenter"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md Field-searchIcon"
>
search
</span>
</i>
</div>
<input
aria-autocomplete="list"
src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
+24 -24
View File
@@ -78,12 +78,12 @@ exports[`approves single comment 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div
@@ -124,12 +124,12 @@ exports[`approves single comment 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -162,12 +162,12 @@ exports[`approves single comment 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -181,12 +181,12 @@ exports[`approves single comment 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
@@ -272,12 +272,12 @@ exports[`rejects single comment 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div
@@ -318,12 +318,12 @@ exports[`rejects single comment 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -356,12 +356,12 @@ exports[`rejects single comment 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -375,12 +375,12 @@ exports[`rejects single comment 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
@@ -501,12 +501,12 @@ exports[`renders single comment view 1`] = `
target="_blank"
>
View Context
<span
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
>
open_in_new
</span>
</i>
</a>
</div>
<div
@@ -547,12 +547,12 @@ exports[`renders single comment view 1`] = `
>
Details
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
arrow_drop_down
</span>
</i>
</button>
</div>
</div>
@@ -585,12 +585,12 @@ exports[`renders single comment view 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg RejectButton-icon"
>
close
</span>
</i>
</button>
<button
aria-label="Approve"
@@ -604,12 +604,12 @@ exports[`renders single comment view 1`] = `
onTouchEnd={[Function]}
type="button"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ApproveButton-icon"
>
done
</span>
</i>
</button>
</div>
</div>
src/core/client/admin/test/moderate/__snapshots__/tabBar.spec.tsx.snap
+8 -8
View File
@@ -22,12 +22,12 @@ exports[`tab bar renders tab bar (empty queues) 1`] = `
href="/admin/moderate/reported"
onClick={[Function]}
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
flag
</span>
</i>
<span>
reported
</span>
@@ -51,12 +51,12 @@ exports[`tab bar renders tab bar (empty queues) 1`] = `
href="/admin/moderate/pending"
onClick={[Function]}
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
access_time
</span>
</i>
<span>
Pending
</span>
@@ -80,12 +80,12 @@ exports[`tab bar renders tab bar (empty queues) 1`] = `
href="/admin/moderate/unmoderated"
onClick={[Function]}
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
forum
</span>
</i>
<span>
unmoderated
</span>
@@ -109,12 +109,12 @@ exports[`tab bar renders tab bar (empty queues) 1`] = `
href="/admin/moderate/rejected"
onClick={[Function]}
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
cancel
</span>
</i>
<span>
rejected
</span>
src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
+16 -16
View File
@@ -53,12 +53,12 @@ exports[`renders empty stories 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md"
>
search
</span>
</i>
</button>
</div>
</div>
@@ -103,12 +103,12 @@ exports[`renders empty stories 1`] = `
aria-hidden={true}
className="SelectField-afterWrapper"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
</i>
</span>
</span>
</fieldset>
@@ -210,12 +210,12 @@ exports[`renders empty stories 1`] = `
>
Open
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ButtonIcon-root"
>
arrow_drop_down
</span>
</i>
</button>
<div
aria-hidden={true}
@@ -281,12 +281,12 @@ exports[`renders empty stories 1`] = `
>
Open
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ButtonIcon-root"
>
arrow_drop_down
</span>
</i>
</button>
<div
aria-hidden={true}
@@ -364,12 +364,12 @@ exports[`renders stories 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md"
>
search
</span>
</i>
</button>
</div>
</div>
@@ -414,12 +414,12 @@ exports[`renders stories 1`] = `
aria-hidden={true}
className="SelectField-afterWrapper"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
</i>
</span>
</span>
</fieldset>
@@ -521,12 +521,12 @@ exports[`renders stories 1`] = `
>
Open
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ButtonIcon-root"
>
arrow_drop_down
</span>
</i>
</button>
<div
aria-hidden={true}
@@ -592,12 +592,12 @@ exports[`renders stories 1`] = `
>
Open
</span>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg ButtonIcon-root"
>
arrow_drop_down
</span>
</i>
</button>
<div
aria-hidden={true}
src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
+46 -46
View File
@@ -23,12 +23,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -45,12 +45,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -66,12 +66,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -136,12 +136,12 @@ Your email address will be used to:
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -188,12 +188,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -210,12 +210,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -231,12 +231,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -275,12 +275,12 @@ Your email address will be used to:
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Please enter a valid email address.
</span>
@@ -314,12 +314,12 @@ Your email address will be used to:
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Emails do not match. Try again.
</span>
@@ -386,12 +386,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -408,12 +408,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -429,12 +429,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -542,12 +542,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -564,12 +564,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -585,12 +585,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -629,12 +629,12 @@ Your email address will be used to:
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -668,12 +668,12 @@ Your email address will be used to:
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -720,12 +720,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -742,12 +742,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -763,12 +763,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -886,12 +886,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -908,12 +908,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
@@ -929,12 +929,12 @@ Your email address will be used to:
<div
className="ListItem-leftCol"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</i>
</div>
<div>
<div
src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
+14 -14
View File
@@ -57,24 +57,24 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Password must contain at least 8 characters.
</span>
@@ -175,12 +175,12 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -264,24 +264,24 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -376,12 +376,12 @@ GraphQL request (4:3)
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -461,12 +461,12 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
+4 -4
View File
@@ -46,12 +46,12 @@ exports[`checks for invalid username 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Username must contain at least 3 characters.
</span>
@@ -207,12 +207,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+48 -48
View File
@@ -36,12 +36,12 @@ exports[`accepts correct password 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -85,12 +85,12 @@ exports[`accepts correct password 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -122,12 +122,12 @@ exports[`accepts correct password 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -208,24 +208,24 @@ exports[`accepts valid email 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -258,12 +258,12 @@ exports[`accepts valid email 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -351,12 +351,12 @@ exports[`auth configuration renders all auth enabled 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -388,12 +388,12 @@ exports[`auth configuration renders all auth enabled 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -600,12 +600,12 @@ exports[`checks for invalid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Please enter a valid email address.
</span>
@@ -649,24 +649,24 @@ exports[`checks for invalid email 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -699,12 +699,12 @@ exports[`checks for invalid email 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -833,12 +833,12 @@ exports[`renders sign in view 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -870,12 +870,12 @@ exports[`renders sign in view 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -1017,12 +1017,12 @@ exports[`renders sign in view with error 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -1054,12 +1054,12 @@ exports[`renders sign in view with error 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -1110,12 +1110,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1159,24 +1159,24 @@ exports[`shows error when submitting empty form 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1209,12 +1209,12 @@ exports[`shows error when submitting empty form 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -1302,12 +1302,12 @@ exports[`shows server error 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -1339,12 +1339,12 @@ exports[`shows server error 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -1425,12 +1425,12 @@ exports[`submits form successfully 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -1462,12 +1462,12 @@ exports[`submits form successfully 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+100 -100
View File
@@ -43,12 +43,12 @@ exports[`accepts correct password 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -87,12 +87,12 @@ exports[`accepts correct password 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -141,12 +141,12 @@ exports[`accepts correct password 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -163,12 +163,12 @@ exports[`accepts correct password 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -256,12 +256,12 @@ exports[`accepts valid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -310,24 +310,24 @@ exports[`accepts valid email 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -345,12 +345,12 @@ exports[`accepts valid email 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -407,12 +407,12 @@ exports[`accepts valid username 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -492,24 +492,24 @@ exports[`accepts valid username 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -527,12 +527,12 @@ exports[`accepts valid username 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -661,12 +661,12 @@ exports[`auth configuration renders all auth enabled 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -683,12 +683,12 @@ exports[`auth configuration renders all auth enabled 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -902,12 +902,12 @@ exports[`checks for invalid characters in username 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -946,12 +946,12 @@ exports[`checks for invalid characters in username 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Invalid characters. Try again.
</span>
@@ -1000,24 +1000,24 @@ exports[`checks for invalid characters in username 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1035,12 +1035,12 @@ exports[`checks for invalid characters in username 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -1097,12 +1097,12 @@ exports[`checks for invalid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Please enter a valid email address.
</span>
@@ -1141,12 +1141,12 @@ exports[`checks for invalid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1195,24 +1195,24 @@ exports[`checks for invalid email 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1230,12 +1230,12 @@ exports[`checks for invalid email 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -1292,12 +1292,12 @@ exports[`checks for too long username 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1336,12 +1336,12 @@ exports[`checks for too long username 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Usernames cannot be longer than 30 characters.
</span>
@@ -1390,24 +1390,24 @@ exports[`checks for too long username 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1425,12 +1425,12 @@ exports[`checks for too long username 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -1487,12 +1487,12 @@ exports[`checks for too short password 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1531,12 +1531,12 @@ exports[`checks for too short password 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1585,24 +1585,24 @@ exports[`checks for too short password 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Password must contain at least 8 characters.
</span>
@@ -1620,12 +1620,12 @@ exports[`checks for too short password 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -1682,12 +1682,12 @@ exports[`checks for too short username 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1726,12 +1726,12 @@ exports[`checks for too short username 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Username must contain at least 3 characters.
</span>
@@ -1780,24 +1780,24 @@ exports[`checks for too short username 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -1815,12 +1815,12 @@ exports[`checks for too short username 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -1990,12 +1990,12 @@ exports[`renders sign up form 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -2012,12 +2012,12 @@ exports[`renders sign up form 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -2077,12 +2077,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -2121,12 +2121,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -2175,24 +2175,24 @@ exports[`shows error when submitting empty form 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -2210,12 +2210,12 @@ exports[`shows error when submitting empty form 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -2351,12 +2351,12 @@ exports[`shows server error 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -2373,12 +2373,12 @@ exports[`shows server error 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
@@ -2507,12 +2507,12 @@ exports[`submits form successfully 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -2529,12 +2529,12 @@ exports[`submits form successfully 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign up with Email
</span>
src/core/client/stream/App/App.tsx
+19 -4
View File
@@ -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<AppProps> = props => {
return (
<HorizontalGutter className={styles.root}>
<HorizontalGutter className={cn(CLASSES.app, styles.root)}>
<TabBarQuery />
<TabContent activeTab={props.activeTab} className={styles.tabContent}>
<TabPane tabID="COMMENTS" data-testid="current-tab-pane">
<TabPane
className={CLASSES.commentsTabPane.$root}
tabID="COMMENTS"
data-testid="current-tab-pane"
>
<Comments />
</TabPane>
<TabPane tabID="PROFILE" data-testid="current-tab-pane">
<TabPane
className={CLASSES.myProfileTabPane.$root}
tabID="PROFILE"
data-testid="current-tab-pane"
>
<Profile />
</TabPane>
<TabPane tabID="CONFIGURE" data-testid="current-tab-pane">
<TabPane
className={CLASSES.configureTabPane.$root}
tabID="CONFIGURE"
data-testid="current-tab-pane"
>
<Configure />
</TabPane>
</TabContent>
src/core/client/stream/App/__snapshots__/App.spec.tsx.snap
+4 -1
View File
@@ -2,7 +2,7 @@
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
className="App-root"
className="coral coral-stream App-root"
>
<withContext(withLocalStateContainer(TabBarQuery)) />
<TabContent
@@ -10,18 +10,21 @@ exports[`renders correctly 1`] = `
className="App-tabContent"
>
<TabPane
className="coral coral-comments"
data-testid="current-tab-pane"
tabID="COMMENTS"
>
<CommentsPane />
</TabPane>
<TabPane
className="coral coral-myProfile"
data-testid="current-tab-pane"
tabID="PROFILE"
>
<withContext(withLocalStateContainer(ProfileQuery)) />
</TabPane>
<TabPane
className="coral coral-configure"
data-testid="current-tab-pane"
tabID="CONFIGURE"
>
src/core/client/stream/classes.ts
+631 -19
View File
@@ -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;
src/core/client/stream/common/Counter.ts
+4 -1
View File
@@ -5,8 +5,11 @@ import CLASSES from "coral-stream/classes";
import { Counter } from "coral-ui/components";
import { PropTypesOf } from "coral-ui/types";
/**
* Like <Counter /> from coral ui but with a stable css classname.
*/
export default withProps<
PropTypesOf<typeof Counter>,
Partial<PropTypesOf<typeof Counter>>,
PropTypesOf<typeof Counter>
>(({ className }) => ({
className: cn(className, CLASSES.counter),
src/core/client/stream/common/FieldValidationMessage.ts
+16
View File
@@ -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 <ValidationMessage /> from the form library but with a stable css classname.
*/
export default withProps<
Partial<PropTypesOf<typeof ValidationMessage>>,
PropTypesOf<typeof ValidationMessage>
>(({ className }) => ({
className: cn(className, CLASSES.validationMessage),
}))(ValidationMessage);
src/core/client/stream/common/MessageBox/__snapshots__/MessageBox.spec.tsx.snap
+2 -2
View File
@@ -12,12 +12,12 @@ exports[`renders icon 1`] = `
<div
className="MessageBox-root"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md MessageBoxIcon-root"
>
alert
</span>
</i>
Alert MessageBox
</div>
`;
src/core/client/stream/common/Spinner.ts
+16
View File
@@ -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 <Spinner /> from coral ui but with a stable css classname.
*/
export default withProps<
Partial<PropTypesOf<typeof Spinner>>,
PropTypesOf<typeof Spinner>
>(({ className }) => ({
className: cn(className, CLASSES.spinner),
}))(Spinner);
src/core/client/stream/common/Timestamp/Timestamp.tsx
+1 -2
View File
@@ -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<TimestampProps> = props => (
<RelativeTime
className={cn(styles.root, props.className, CLASSES.comment.timestamp)}
className={cn(styles.root, props.className)}
date={props.children}
/>
);
src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap
+1 -1
View File
@@ -2,7 +2,7 @@
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
className="Timestamp-root coral coral-comment-timestamp"
className="Timestamp-root"
date="1995-12-17T03:24:00.000Z"
/>
`;
src/core/client/stream/common/UserBox/UserBoxAuthenticated.tsx
+3 -1
View File
@@ -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 (
<Flex itemGutter="half" wrap>
<Flex itemGutter="half" className={CLASSES.viewerBox.$root} wrap>
<Localized
id="general-userBoxAuthenticated-signedInAs"
Username={<Username />}
@@ -37,6 +38,7 @@ const UserBoxAuthenticated: FunctionComponent<
size="small"
variant="underlined"
onClick={props.onSignOut}
className={CLASSES.viewerBox.logoutButton}
/>
}
>
src/core/client/stream/common/UserBox/UserBoxUnauthenticated.tsx
+4 -1
View File
@@ -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 (
<Flex itemGutter alignItems="center">
<Flex itemGutter alignItems="center" className={CLASSES.viewerBox.$root}>
<MatchMedia gteWidth="sm">
<Localized id="general-userBoxUnauthenticated-joinTheConversation">
<Typography
@@ -37,6 +38,7 @@ const UserBoxUnauthenticated: FunctionComponent<
size="small"
variant="underlined"
onClick={props.onSignIn}
className={CLASSES.viewerBox.signInButton}
>
Sign in
</Button>
@@ -48,6 +50,7 @@ const UserBoxUnauthenticated: FunctionComponent<
size="small"
variant="outlined"
onClick={props.onRegister}
className={CLASSES.viewerBox.registerButton}
>
Register
</Button>
src/core/client/stream/common/UserBox/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
+3
View File
@@ -2,6 +2,7 @@
exports[`renders correctly with logout button 1`] = `
<ForwardRef(forwardRef)
className="coral coral-viewerBox"
itemGutter="half"
wrap={true}
>
@@ -19,6 +20,7 @@ exports[`renders correctly with logout button 1`] = `
<Localized
button={
<ForwardRef(forwardRef)
className="coral coral-viewerBox-logoutButton"
color="primary"
onClick={[Function]}
size="small"
@@ -44,6 +46,7 @@ exports[`renders correctly with logout button 1`] = `
exports[`renders correctly without logout button 1`] = `
<ForwardRef(forwardRef)
className="coral coral-viewerBox"
itemGutter="half"
wrap={true}
>
src/core/client/stream/common/UserBox/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+5
View File
@@ -3,6 +3,7 @@
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
alignItems="center"
className="coral coral-viewerBox"
itemGutter={true}
>
<MatchMediaWithContext
@@ -30,6 +31,7 @@ exports[`renders correctly 1`] = `
id="general-userBoxUnauthenticated-signIn"
>
<ForwardRef(forwardRef)
className="coral coral-viewerBox-signInButton"
color="primary"
onClick={[Function]}
size="small"
@@ -42,6 +44,7 @@ exports[`renders correctly 1`] = `
id="general-userBoxUnauthenticated-register"
>
<ForwardRef(forwardRef)
className="coral coral-viewerBox-registerButton"
color="primary"
onClick={[Function]}
size="small"
@@ -56,6 +59,7 @@ exports[`renders correctly 1`] = `
exports[`renders correctly hides showRegisterButton 1`] = `
<ForwardRef(forwardRef)
alignItems="center"
className="coral coral-viewerBox"
itemGutter={true}
>
<MatchMediaWithContext
@@ -83,6 +87,7 @@ exports[`renders correctly hides showRegisterButton 1`] = `
id="general-userBoxUnauthenticated-signIn"
>
<ForwardRef(forwardRef)
className="coral coral-viewerBox-signInButton"
color="primary"
onClick={[Function]}
size="small"
src/core/client/stream/common/ValidationMessage.ts
+16
View File
@@ -0,0 +1,16 @@
import cn from "classnames";
import { withProps } from "recompose";
import CLASSES from "coral-stream/classes";
import { ValidationMessage } from "coral-ui/components";
import { PropTypesOf } from "coral-ui/types";
/**
* Like <ValidationMessage /> from coral ui but with a stable css classname.
*/
export default withProps<
Partial<PropTypesOf<typeof ValidationMessage>>,
PropTypesOf<typeof ValidationMessage>
>(({ className }) => ({
className: cn(className, CLASSES.validationMessage),
}))(ValidationMessage);
src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx
+6 -3
View File
@@ -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<Props> = ({ comment }) => {
const AuthorBadgesContainer: FunctionComponent<Props> = ({
comment,
className,
}) => {
if (!comment.author || !comment.author.badges) {
return null;
}
return (
<>
{comment.author.badges.map(badge => (
<Tag key={badge} color="dark" className={CLASSES.comment.userBadge}>
<Tag key={badge} color="dark" className={className}>
{badge}
</Tag>
))}
src/core/client/stream/tabs/Comments/Comment/Comment.tsx
+15 -4
View File
@@ -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<CommentProps> = props => {
role="article"
className={cn(styles.root, { [styles.highlight]: props.highlight })}
>
<Flex direction="row" justifyContent="space-between">
<Flex
direction="row"
justifyContent="space-between"
className={CLASSES.comment.topBar.$root}
>
<TopBarLeft>
<Flex direction="row" alignItems="center" itemGutter="half">
{props.username && props.username}
{props.userTags}
</Flex>
<Flex direction="row" alignItems="baseline" itemGutter>
<Timestamp>{props.createdAt}</Timestamp>
{props.showEditedMarker && <EditedMarker />}
<Timestamp className={CLASSES.comment.topBar.timestamp}>
{props.createdAt}
</Timestamp>
{props.showEditedMarker && (
<EditedMarker className={CLASSES.comment.topBar.edited} />
)}
</Flex>
</TopBarLeft>
{props.topBarRight && <div>{props.topBarRight}</div>}
@@ -50,7 +59,9 @@ const Comment: FunctionComponent<CommentProps> = props => {
)}
<HorizontalGutter spacing={1}>
<HTMLContent>{props.body || ""}</HTMLContent>
<HTMLContent className={CLASSES.comment.content}>
{props.body || ""}
</HTMLContent>
{props.footer}
</HorizontalGutter>
</div>
src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+30 -5
View File
@@ -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<Props, State> {
showConversationLink,
highlight,
viewer,
className,
} = this.props;
const { showReplyDialog, showEditDialog, editable } = this.state;
const hasFeaturedTag = Boolean(
@@ -173,7 +176,7 @@ export class CommentContainer extends Component<Props, State> {
<>
{hasFeaturedTag && (
<Tag
className={CLASSES.comment.commentTag}
className={CLASSES.comment.topBar.commentTag}
color="primary"
variant="pill"
>
@@ -222,7 +225,7 @@ export class CommentContainer extends Component<Props, State> {
}
return (
<div
className={CLASSES.comment.$root}
className={cn(CLASSES.comment.$root, className)}
data-testid={`comment-${comment.id}`}
>
<HorizontalGutter>
@@ -243,11 +246,18 @@ export class CommentContainer extends Component<Props, State> {
comment.author && (
<>
<UsernameWithPopoverContainer
className={CLASSES.comment.topBar.username}
viewer={viewer}
user={comment.author}
/>
<UserTagsContainer comment={comment} />
<UserBadgesContainer comment={comment} />
<UserTagsContainer
className={CLASSES.comment.topBar.userTag}
comment={comment}
/>
<UserBadgesContainer
className={CLASSES.comment.topBar.userBadge}
comment={comment}
/>
</>
)
}
@@ -260,6 +270,7 @@ export class CommentContainer extends Component<Props, State> {
color="primary"
variant="underlined"
onClick={this.openEditDialog}
className={CLASSES.comment.topBar.editButton}
>
Edit
</Button>
@@ -276,13 +287,20 @@ export class CommentContainer extends Component<Props, State> {
}
footer={
<>
<Flex justifyContent="space-between">
<Flex
justifyContent="space-between"
className={CLASSES.comment.actionBar.$root}
>
<ButtonsBar>
<ReactionButtonContainer
comment={comment}
settings={settings}
viewer={viewer}
readOnly={banned || suspended}
className={CLASSES.comment.actionBar.reactButton}
reactedClassName={
CLASSES.comment.actionBar.reactedButton
}
/>
{!disableReplies &&
!banned &&
@@ -298,11 +316,13 @@ export class CommentContainer extends Component<Props, State> {
settings.disableCommenting.enabled ||
story.isClosed
}
className={CLASSES.comment.actionBar.replyButton}
/>
)}
<PermalinkButtonContainer
story={story}
commentID={comment.id}
className={CLASSES.comment.actionBar.shareButton}
/>
</ButtonsBar>
<ButtonsBar>
@@ -310,12 +330,17 @@ export class CommentContainer extends Component<Props, State> {
<ReportButtonContainer
comment={comment}
viewer={viewer}
className={CLASSES.comment.actionBar.reportButton}
reportedClassName={
CLASSES.comment.actionBar.reportedButton
}
/>
)}
</ButtonsBar>
</Flex>
{showConversationLink && (
<ShowConversationLink
className={CLASSES.comment.readMoreOfConversation}
id={`comments-commentContainer-showConversation-${
comment.id
}`}
src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx
+9 -3
View File
@@ -7,6 +7,7 @@ import { Field, Form } from "react-final-form";
import { OnSubmit } from "coral-framework/lib/form";
import CLASSES from "coral-stream/classes";
import Timestamp from "coral-stream/common/Timestamp";
import ValidationMessage from "coral-stream/common/ValidationMessage";
import {
AriaInfo,
Button,
@@ -16,7 +17,6 @@ import {
Message,
MessageIcon,
RelativeTime,
ValidationMessage,
} from "coral-ui/components";
import { cleanupRTEEmptyHTML, getCommentBodyValidators } from "../../helpers";
@@ -98,14 +98,20 @@ const EditCommentForm: FunctionComponent<EditCommentFormProps> = props => {
</Localized>
{props.expired ? (
<Localized id="comments-editCommentForm-editTimeExpired">
<ValidationMessage fullWidth>
<ValidationMessage
className={CLASSES.editComment.expiredTime}
fullWidth
>
Edit time has expired. You can no longer edit this
comment. Why not post another one?
</ValidationMessage>
</Localized>
) : (
<>
<Message fullWidth>
<Message
className={CLASSES.editComment.remainingTime}
fullWidth
>
<MessageIcon>alarm</MessageIcon>
<Localized
id="comments-editCommentForm-editRemainingTime"
src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx
+1
View File
@@ -124,6 +124,7 @@ export class EditCommentFormContainer extends Component<Props, State> {
status={this.state.submitStatus}
onDismiss={this.handleOnCancelOrClose}
buttonClassName={CLASSES.editComment.dismiss}
inReviewClassName={CLASSES.editComment.inReview}
/>
);
}
src/core/client/stream/tabs/Comments/Comment/EditedMarker.tsx
+7 -2
View File
@@ -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 = () => (
<div className={styles.root}>
interface Props {
className?: string;
}
const EditedMarker: FunctionComponent<Props> = props => (
<div className={cn(styles.root, props.className)}>
(
<Localized id="comments-editedMarker-edited">
<span>Edited</span>
src/core/client/stream/tabs/Comments/Comment/InReplyTo.tsx
+8 -3
View File
@@ -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<Props> = ({ username }) => {
const Username = () => (
<Typography variant="heading5" container="span" className={styles.username}>
<Typography
variant="heading5"
container="span"
className={cn(styles.username, CLASSES.comment.inReplyTo.username)}
>
{username}
</Typography>
);
return (
<Flex alignItems="center" className={CLASSES.comment.inReplyTo}>
<Flex alignItems="center" className={CLASSES.comment.inReplyTo.$root}>
<Icon className={styles.icon}>reply</Icon>{" "}
<Localized id="comments-inReplyTo" Username={<Username />}>
<Typography
variant="timestamp"
container="span"
className={styles.inReplyTo}
className={cn(styles.inReplyTo, CLASSES.comment.inReplyTo.text)}
>
{"In reply to <Username></Username>"}
</Typography>
src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx
+3 -1
View File
@@ -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> = props => {
<Button
variant="ghost"
size="small"
className={styles.root}
className={cn(styles.root, CLASSES.comment.topBar.caretButton)}
onClick={toggleVisibility}
aria-controls={popoverID}
active={visible}
src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionBanContainer.tsx
+6 -2
View File
@@ -5,7 +5,9 @@ import { graphql } from "react-relay";
import { withFragmentContainer } from "coral-framework/lib/relay";
import { ModerationActionBanContainer_user } from "coral-stream/__generated__/ModerationActionBanContainer_user.graphql";
import { DropdownButton, Icon, Spinner } from "coral-ui/components";
import CLASSES from "coral-stream/classes";
import Spinner from "coral-stream/common/Spinner";
import { DropdownButton, Icon } from "coral-ui/components";
import styles from "./ModerationActionBanContainer.css";
@@ -29,6 +31,7 @@ const ModerationActionBanContainer: FunctionComponent<Props> = ({
</div>
}
adornment={<Spinner size="xs" className={styles.spinner} />}
className={CLASSES.moderationDropdown.banUserButton}
disabled
>
Ban User
@@ -46,7 +49,7 @@ const ModerationActionBanContainer: FunctionComponent<Props> = ({
<Icon size="sm">block</Icon>
</div>
}
className={styles.banned}
className={cn(styles.banned, CLASSES.moderationDropdown.bannedButton)}
disabled
>
Banned
@@ -63,6 +66,7 @@ const ModerationActionBanContainer: FunctionComponent<Props> = ({
</div>
}
onClick={onBan}
className={CLASSES.moderationDropdown.banUserButton}
>
Ban User
</DropdownButton>
src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx
+17 -3
View File
@@ -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<Props> = ({
star
</Icon>
}
className={styles.featured}
className={cn(
styles.featured,
CLASSES.moderationDropdown.unfeatureButton
)}
onClick={onUnfeature}
>
Un-Feature
@@ -94,6 +98,7 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
) : (
<Localized id="comments-moderationDropdown-feature">
<DropdownButton
className={CLASSES.moderationDropdown.featureButton}
icon={<Icon size="md">star_border</Icon>}
onClick={onFeature}
>
@@ -112,7 +117,10 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
check
</Icon>
}
className={styles.approved}
className={cn(
styles.approved,
CLASSES.moderationDropdown.approvedButton
)}
disabled
>
Approved
@@ -121,6 +129,7 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
) : (
<Localized id="comments-moderationDropdown-approve">
<DropdownButton
className={CLASSES.moderationDropdown.approveButton}
icon={
<Icon size="md" className={styles.approveIcon}>
check
@@ -143,7 +152,10 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
close
</Icon>
}
className={styles.rejected}
className={cn(
styles.rejected,
CLASSES.moderationDropdown.rejectedButton
)}
disabled
>
Rejected
@@ -158,6 +170,7 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
</Icon>
}
onClick={onReject}
className={CLASSES.moderationDropdown.rejectButton}
>
Reject
</DropdownButton>
@@ -172,6 +185,7 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
<DropdownDivider />
<Localized id="comments-moderationDropdown-goToModerate">
<DropdownButton
className={CLASSES.moderationDropdown.goToModerateButton}
href={`/admin/moderate/comment/${comment.id}`}
target="_blank"
anchor
src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.tsx
+2 -1
View File
@@ -5,6 +5,7 @@ import { withFragmentContainer } from "coral-framework/lib/relay";
import { ModerationDropdownContainer_comment } from "coral-stream/__generated__/ModerationDropdownContainer_comment.graphql";
import { ModerationDropdownContainer_story } from "coral-stream/__generated__/ModerationDropdownContainer_story.graphql";
import { ModerationDropdownContainer_viewer } from "coral-stream/__generated__/ModerationDropdownContainer_viewer.graphql";
import CLASSES from "coral-stream/classes";
import { Dropdown } from "coral-ui/components";
import UserBanPopoverContainer from "../UserBanPopover/UserBanPopoverContainer";
@@ -36,7 +37,7 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
return (
<div>
{view === "MODERATE" ? (
<Dropdown>
<Dropdown className={CLASSES.moderationDropdown.$root}>
<ModerationActionsContainer
comment={comment}
story={story}
src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/RejectedTombstoneContainer.tsx
+12 -3
View File
@@ -1,10 +1,11 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent, useMemo } from "react";
import { graphql } from "react-relay";
import { withFragmentContainer } from "coral-framework/lib/relay";
import { RejectedTombstoneContainer_comment as CommentData } from "coral-stream/__generated__/RejectedTombstoneContainer_comment.graphql";
import CLASSES from "coral-stream/classes";
import { CallOut, TextLink } from "coral-ui/components";
import { Localized } from "fluent-react/compat";
interface Props {
comment: CommentData;
@@ -13,14 +14,22 @@ interface Props {
const RejectedTombstoneContainer: FunctionComponent<Props> = ({ comment }) => {
const Link = useMemo<React.FunctionComponent>(
() => ({ children }) => (
<TextLink href={`/admin/moderate/comment/${comment.id}`} target="_blank">
<TextLink
className={CLASSES.rejectedTombstone.goToModerateButton}
href={`/admin/moderate/comment/${comment.id}`}
target="_blank"
>
{children}
</TextLink>
),
[comment]
);
return (
<CallOut color="primary" fullWidth>
<CallOut
className={CLASSES.rejectedTombstone.$root}
color="primary"
fullWidth
>
<Localized id="comments-rejectedTombstone" TextLink={<Link />}>
<div>
You have rejected this comment.{" "}
src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx
+7 -1
View File
@@ -16,9 +16,14 @@ import styles from "./PermalinkButton.css";
interface PermalinkProps {
commentID: string;
url: string;
className?: string;
}
const Permalink: FunctionComponent<PermalinkProps> = ({ commentID, url }) => {
const Permalink: FunctionComponent<PermalinkProps> = ({
commentID,
url,
className,
}) => {
const popoverID = `permalink-popover-${commentID}`;
return (
<Localized id="comments-permalinkPopover" attrs={{ description: true }}>
@@ -41,6 +46,7 @@ const Permalink: FunctionComponent<PermalinkProps> = ({ commentID, url }) => {
variant="ghost"
active={visible}
size="small"
className={className}
>
<MatchMedia gtWidth="xs">
<ButtonIcon>share</ButtonIcon>
src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButtonContainer.tsx
+3
View File
@@ -9,14 +9,17 @@ import PermalinkButton from "./PermalinkButton";
interface Props {
story: StoryData;
commentID: string;
className?: string;
}
export const PermalinkButtonContainer: FunctionComponent<Props> = ({
story,
commentID,
className,
}) => {
return (
<PermalinkButton
className={className}
commentID={commentID}
url={getURLWithCommentID(story.url, commentID)}
/>
src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx
+10 -2
View File
@@ -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<Props> {
public render() {
const { permalinkURL } = this.props;
return (
<Flex itemGutter="half" className={styles.root}>
<Flex
itemGutter="half"
className={cn(styles.root, CLASSES.sharePopover.$root)}
>
<TextField
defaultValue={permalinkURL}
className={styles.textField}
readOnly
/>
<CopyButton text={permalinkURL} />
<CopyButton
text={permalinkURL}
className={CLASSES.sharePopover.copyButton}
/>
</Flex>
);
}
src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButtonContainer.tsx
+5 -1
View File
@@ -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<Props> {
@@ -56,7 +59,7 @@ class ReactionButtonContainer extends React.Component<Props> {
};
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<Props> {
return !readOnly || totalReactions > 0 ? (
<ReactionButton
className={cn(className, { [reactedClassName]: reacted })}
onClick={this.handleClick}
totalReactions={totalReactions}
reacted={reacted}
src/core/client/stream/tabs/Comments/Comment/ReplyButton.tsx
+2
View File
@@ -8,10 +8,12 @@ interface Props {
onClick?: EventHandler<MouseEvent<HTMLButtonElement>>;
active?: boolean;
disabled?: boolean;
className?: string;
}
const ReplyButton: FunctionComponent<Props> = props => (
<Button
className={props.className}
id={props.id}
onClick={props.onClick}
variant="ghost"
src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx
+1 -1
View File
@@ -7,13 +7,13 @@ import { Field, Form, FormSpy } from "react-final-form";
import { OnSubmit } from "coral-framework/lib/form";
import CLASSES from "coral-stream/classes";
import ValidationMessage from "coral-stream/common/ValidationMessage";
import {
AriaInfo,
Button,
Flex,
HorizontalGutter,
MatchMedia,
ValidationMessage,
} from "coral-ui/components";
import { cleanupRTEEmptyHTML, getCommentBodyValidators } from "../../helpers";
src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx
+1
View File
@@ -168,6 +168,7 @@ export class ReplyCommentFormContainer extends Component<Props, State> {
status={this.state.submitStatus}
onDismiss={this.handleOnCancelOrDismiss}
buttonClassName={CLASSES.createReplyComment.dismiss}
inReviewClassName={CLASSES.createReplyComment.inReview}
/>
);
}
src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyTo.tsx
+18 -3
View File
@@ -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 { Flex, Icon, Typography } from "coral-ui/components";
import styles from "./ReplyTo.css";
@@ -11,16 +13,29 @@ interface Props {
const ReplyTo: FunctionComponent<Props> = ({ username }) => {
const Username = () => (
<Typography variant="heading4" container="span" className={styles.username}>
<Typography
variant="heading4"
container="span"
className={cn(
styles.username,
CLASSES.createReplyComment.replyTo.username
)}
>
{username}
</Typography>
);
return (
<Flex alignItems="center" className={styles.root}>
<Flex
alignItems="center"
className={cn(styles.root, CLASSES.createReplyComment.replyTo.$root)}
>
<Icon>reply</Icon>{" "}
<Localized id="comments-replyTo" Username={<Username />}>
<Typography container="span" className={styles.text}>
<Typography
container="span"
className={cn(styles.text, CLASSES.createReplyComment.replyTo.text)}
>
{"Replying to: <Username></Username>"}
</Typography>
</Localized>
src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/__snapshots__/ReplyTo.spec.tsx.snap
+2 -2
View File
@@ -3,7 +3,7 @@
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
alignItems="center"
className="ReplyTo-root"
className="ReplyTo-root coral coral-createReplyComment-replyTo"
>
<ForwardRef(forwardRef)>
reply
@@ -14,7 +14,7 @@ exports[`renders correctly 1`] = `
id="comments-replyTo"
>
<ForwardRef(forwardRef)
className="ReplyTo-text"
className="ReplyTo-text coral coral-createReplyComment-replyToText"
container="span"
>
Replying to: &lt;Username&gt;&lt;/Username&gt;
src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.tsx
+9 -3
View File
@@ -1,3 +1,4 @@
import cn from "classnames";
import { Localized } from "fluent-react/compat";
import React from "react";
@@ -10,10 +11,11 @@ import styles from "./ReplyEditSubmitStatus.css";
interface Props {
status: SubmitStatus;
buttonClassName?: string;
inReviewClassName?: string;
onDismiss: () => void;
}
function getMessage(status: SubmitStatus) {
function getMessage(status: SubmitStatus, inReviewClassName: string = "") {
switch (status) {
case "RETRY":
throw new Error(`Invalid status ${status}`);
@@ -22,7 +24,11 @@ function getMessage(status: SubmitStatus) {
case "IN_REVIEW":
return (
<Localized id="comments-submitStatus-submittedAndWillBeReviewed">
<CallOut className={styles.callout} color="primary" fullWidth>
<CallOut
className={cn(inReviewClassName, styles.callout)}
color="primary"
fullWidth
>
Your comment has been submitted and will be reviewed by a moderator
</CallOut>
</Localized>
@@ -38,7 +44,7 @@ function getMessage(status: SubmitStatus) {
export default function ReplyEditSubmitStatus(props: Props) {
return (
<HorizontalGutter>
{getMessage(props.status)}
{getMessage(props.status, props.inReviewClassName)}
<Flex justifyContent="flex-end">
<Localized id="comments-submitStatus-dismiss">
<Button
src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonContainer.tsx
+10 -1
View File
@@ -1,3 +1,4 @@
import cn from "classnames";
import React from "react";
import { graphql } from "react-relay";
@@ -17,6 +18,8 @@ interface ReportButtonContainerProps {
comment: CommentData;
viewer: ViewerData | null;
showAuthPopup: ShowAuthPopupMutation;
className?: string;
reportedClassName?: string;
}
class ReportButtonContainer extends React.Component<
@@ -28,6 +31,7 @@ class ReportButtonContainer extends React.Component<
private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
public render() {
const { className, reportedClassName = "" } = this.props;
const reported =
this.props.comment.viewerActionPresence &&
(this.props.comment.viewerActionPresence.flag ||
@@ -35,11 +39,16 @@ class ReportButtonContainer extends React.Component<
return this.loggedIn ? (
<ReportButtonWithPopover
className={cn(className, { [reportedClassName]: Boolean(reported) })}
comment={this.props.comment}
reported={!!reported}
/>
) : (
<ReportButton onClick={this.handleSignIn} reported={!!reported} />
<ReportButton
className={cn(className, { [reportedClassName]: Boolean(reported) })}
onClick={this.handleSignIn}
reported={Boolean(reported)}
/>
);
}
}
src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonWithPopover.tsx
+3
View File
@@ -11,11 +11,13 @@ import { PropTypesOf } from "coral-ui/types";
interface Props {
comment: { id: string } & PropTypesOf<typeof ReportPopover>["comment"];
reported: boolean;
className?: string;
}
const ReportButtonWithPopover: React.FunctionComponent<Props> = ({
comment,
reported,
className,
}) => {
const popoverID = `report-popover-${comment.id}`;
return (
@@ -41,6 +43,7 @@ const ReportButtonWithPopover: React.FunctionComponent<Props> = ({
>
{({ toggleVisibility, ref, visible }) => (
<ReportButton
className={className}
onClick={evt => !reported && toggleVisibility(evt)}
aria-controls={popoverID}
ref={ref}
src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentForm.tsx
+10 -2
View File
@@ -6,16 +6,18 @@ import { Field, Form } from "react-final-form";
import { OnSubmit } from "coral-framework/lib/form";
import { validateMaxLength } from "coral-framework/lib/validation";
import { PropTypesOf } from "coral-framework/types";
import CLASSES from "coral-stream/classes";
import ValidationMessage from "coral-stream/common/ValidationMessage";
import {
Button,
Flex,
HorizontalGutter,
RadioButton,
Typography,
ValidationMessage,
} from "coral-ui/components";
import PropagateMount from "./PropagateMount";
import styles from "./ReportCommentForm.css";
const RadioField: FunctionComponent<
@@ -195,12 +197,18 @@ class ReportCommentForm extends React.Component<Props> {
{get(form.getFieldState("reason"), "value") && (
<Flex alignItems="center" justifyContent="flex-end">
<Localized id="comments-reportPopover-cancel">
<Button color="primary" size="small" onClick={onCancel}>
<Button
className={CLASSES.reportPopover.cancelButton}
color="primary"
size="small"
onClick={onCancel}
>
Cancel
</Button>
</Localized>
<Localized id="comments-reportPopover-submit">
<Button
className={CLASSES.reportPopover.submitButton}
color="primary"
size="small"
variant="filled"
src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportPopover.tsx
+4 -2
View File
@@ -1,5 +1,7 @@
import cn from "classnames";
import React from "react";
import CLASSES from "coral-stream/classes";
import { BaseButton, Icon } from "coral-ui/components";
import { PropTypesOf } from "coral-ui/types";
@@ -16,10 +18,10 @@ class ReportPopover extends React.Component<Props> {
public render() {
const { onClose, onResize, comment } = this.props;
return (
<div className={styles.root}>
<div className={cn(styles.root, CLASSES.reportPopover.$root)}>
<BaseButton
onClick={onClose}
className={styles.close}
className={cn(styles.close, CLASSES.reportPopover.closeButton)}
aria-label="Close Popover"
>
<Icon>close</Icon>
src/core/client/stream/tabs/Comments/Comment/ReportPopover/__snapshots__/ReportPopover.spec.tsx.snap
+2 -2
View File
@@ -2,11 +2,11 @@
exports[`renders correctly 1`] = `
<div
className="ReportPopover-root"
className="ReportPopover-root coral coral-reportPopover"
>
<ForwardRef(forwardRef)
aria-label="Close Popover"
className="ReportPopover-close"
className="ReportPopover-close coral coral-reportPopover-closeButton"
onClick={[Function]}
>
<ForwardRef(forwardRef)>
src/core/client/stream/tabs/Comments/Comment/RootParent.tsx
+21 -3
View File
@@ -1,5 +1,6 @@
import React, { FunctionComponent } from "react";
import CLASSES from "coral-stream/classes";
import Timestamp from "coral-stream/common/Timestamp";
import { Flex } from "coral-ui/components";
@@ -15,14 +16,31 @@ export interface RootParentProps {
const RootParent: FunctionComponent<RootParentProps> = props => {
return (
<Flex direction="row" justifyContent="space-between" id={props.id}>
<Flex
className={CLASSES.conversationThread.rootParent.$root}
direction="row"
justifyContent="space-between"
id={props.id}
>
<TopBarLeft>
<Flex direction="row" alignItems="center" itemGutter="half">
<div>{props.username && <Username>{props.username}</Username>}</div>
<div>
{props.username && (
<Username
className={CLASSES.conversationThread.rootParent.username}
>
{props.username}
</Username>
)}
</div>
{props.tags}
</Flex>
<Flex direction="row" alignItems="baseline" itemGutter>
<Timestamp>{props.createdAt}</Timestamp>
<Timestamp
className={CLASSES.conversationThread.rootParent.timestamp}
>
{props.createdAt}
</Timestamp>
</Flex>
</TopBarLeft>
</Flex>
src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.tsx
+2
View File
@@ -8,6 +8,7 @@ export interface ShowConversationLinkProps {
id?: string;
href?: string;
onClick?: EventHandler<MouseEvent>;
className?: string;
}
const ShowConversationLink: FunctionComponent<
@@ -17,6 +18,7 @@ const ShowConversationLink: FunctionComponent<
<Localized id="comments-showConversationLink-readMore">
<Button
id={props.id}
className={props.className}
variant="underlined"
color="primary"
href={props.href}
src/core/client/stream/tabs/Comments/Comment/UserBanPopover/UserBanPopoverContainer.tsx
+15 -3
View File
@@ -1,3 +1,4 @@
import cn from "classnames";
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent, useCallback } from "react";
import { graphql } from "react-relay";
@@ -6,6 +7,7 @@ import { useCoralContext } from "coral-framework/lib/bootstrap";
import { getMessage } from "coral-framework/lib/i18n";
import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
import { UserBanPopoverContainer_comment } from "coral-stream/__generated__/UserBanPopoverContainer_comment.graphql";
import CLASSES from "coral-stream/classes";
import { Box, Button, Flex, Typography } from "coral-ui/components";
import RejectCommentMutation from "../ModerationDropdown/RejectCommentMutation";
@@ -44,7 +46,7 @@ const UserBanPopoverContainer: FunctionComponent<Props> = ({
onDismiss();
}, [user, banUser, onDismiss, localeBundles]);
return (
<Box className={styles.root} p={3}>
<Box className={cn(styles.root, CLASSES.banUserPopover.$root)} p={3}>
<Localized id="comments-userBanPopover-title" $username={user.username}>
<Typography variant="heading3" mb={2}>
Ban {user.username}?
@@ -58,12 +60,22 @@ const UserBanPopoverContainer: FunctionComponent<Props> = ({
</Localized>
<Flex justifyContent="flex-end" itemGutter="half">
<Localized id="comments-userBanPopover-cancel">
<Button variant="outlined" size="small" onClick={onDismiss}>
<Button
className={CLASSES.banUserPopover.cancelButton}
variant="outlined"
size="small"
onClick={onDismiss}
>
Cancel
</Button>
</Localized>
<Localized id="comments-userBanPopover-ban">
<Button variant="filled" size="small" onClick={onBan}>
<Button
className={CLASSES.banUserPopover.banButton}
variant="filled"
size="small"
onClick={onBan}
>
Ban
</Button>
</Localized>
src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.tsx
+15 -3
View File
@@ -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<Props> = ({
onDismiss();
}, [user.id, ignoreUser]);
return (
<Box className={styles.root} p={3}>
<Box p={3} className={cn(styles.root, CLASSES.ignoreUserPopover.$root)}>
<Localized
id="comments-userIgnorePopover-ignoreUser"
$username={user.username}
@@ -42,12 +44,22 @@ export const UserIgnorePopoverContainer: FunctionComponent<Props> = ({
</Localized>
<Flex justifyContent="flex-end" itemGutter="half">
<Localized id="comments-userIgnorePopover-cancel">
<Button variant="outlined" size="small" onClick={onDismiss}>
<Button
className={CLASSES.ignoreUserPopover.cancelButton}
variant="outlined"
size="small"
onClick={onDismiss}
>
Cancel
</Button>
</Localized>
<Localized id="comments-userIgnorePopover-ignore">
<Button variant="filled" size="small" onClick={onIgnore}>
<Button
className={CLASSES.ignoreUserPopover.ignoreButton}
variant="filled"
size="small"
onClick={onIgnore}
>
Ignore
</Button>
</Localized>
src/core/client/stream/tabs/Comments/Comment/UserPopover/UserPopoverOverviewContainer.tsx
+15 -3
View File
@@ -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<Props> = ({
viewer.ignoredUsers.every(u => u.id !== user.id) &&
user.ignoreable;
return (
<HorizontalGutter spacing={3} className={styles.root}>
<HorizontalGutter
spacing={3}
className={cn(styles.root, CLASSES.userPopover.$root)}
>
<HorizontalGutter spacing={2}>
<div>
<Username>{user.username!}</Username>
<Username className={CLASSES.userPopover.username}>
{user.username!}
</Username>
</div>
<Localized
id="comments-userPopover-memberSince"
@@ -50,7 +57,12 @@ export const UserPopoverOverviewContainer: FunctionComponent<Props> = ({
{canIgnore && (
<Flex justifyContent="flex-end">
<Localized id="comments-userPopover-ignore">
<Button variant="outlined" size="small" onClick={onIgnore}>
<Button
variant="outlined"
size="small"
onClick={onIgnore}
className={CLASSES.userPopover.ignoreButton}
>
Ignore
</Button>
</Localized>
src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx
+2 -2
View File
@@ -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> = props => {
@@ -18,7 +18,7 @@ const UserTagsContainer: FunctionComponent<Props> = props => {
<>
{staffTag && (
<Localized id="comments-staffTag">
<Tag className={CLASSES.comment.userTag}>Staff</Tag>
<Tag className={props.className}>Staff</Tag>
</Localized>
)}
</>
src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx
+2 -2
View File
@@ -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> = props => {
return (
<Typography
variant={"heading3"}
className={cn(styles.root, CLASSES.comment.username)}
className={cn(styles.root, props.className)}
container="span"
>
{props.children}
src/core/client/stream/tabs/Comments/Comment/Username/UsernameWithPopoverContainer.tsx
+2
View File
@@ -13,6 +13,7 @@ import Username from "./Username";
interface Props {
user: UserData;
viewer: ViewerData | null;
className?: string;
}
const UsernameWithPopoverContainer: FunctionComponent<Props> = props => {
@@ -38,6 +39,7 @@ const UsernameWithPopoverContainer: FunctionComponent<Props> = props => {
onClick={toggleVisibility}
aria-controls={popoverID}
ref={ref}
className={props.className}
>
<Username>{props.user.username!}</Username>
</BaseButton>
src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap
+10 -3
View File
@@ -6,6 +6,7 @@ exports[`renders username and body 1`] = `
role="article"
>
<ForwardRef(forwardRef)
className="coral coral-comment-topBar"
direction="row"
justifyContent="space-between"
>
@@ -22,10 +23,14 @@ exports[`renders username and body 1`] = `
direction="row"
itemGutter={true}
>
<Timestamp>
<Timestamp
className="coral coral-timestamp coral-comment-timestamp"
>
1995-12-17T03:24:00.000Z
</Timestamp>
<EditedMarker />
<EditedMarker
className="coral coral-comment-edited"
/>
</ForwardRef(forwardRef)>
</TopBarLeft>
<div>
@@ -35,7 +40,9 @@ exports[`renders username and body 1`] = `
<ForwardRef(forwardRef)
spacing={1}
>
<HTMLContent>
<HTMLContent
className="coral coral-content coral-comment-content"
>
Woof
</HTMLContent>
footer
src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
+70
View File
@@ -13,10 +13,12 @@ exports[`hide reply button 1`] = `
footer={
<React.Fragment>
<ForwardRef(forwardRef)
className="coral coral-comment-actionBar"
justifyContent="space-between"
>
<ButtonsBar>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"author": Object {
@@ -39,6 +41,7 @@ exports[`hide reply button 1`] = `
"tags": Array [],
}
}
reactedClassName="coral-reactedButton coral-comment-reactedButton"
readOnly={false}
settings={
Object {
@@ -50,6 +53,7 @@ exports[`hide reply button 1`] = `
viewer={null}
/>
<Relay(PermalinkButtonContainer)
className="coral coral-comment-shareButton"
commentID="comment-id"
story={
Object {
@@ -61,6 +65,7 @@ exports[`hide reply button 1`] = `
</ButtonsBar>
<ButtonsBar>
<withContext(createMutationContainer(Relay(ReportButtonContainer)))
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"author": Object {
@@ -83,6 +88,7 @@ exports[`hide reply button 1`] = `
"tags": Array [],
}
}
reportedClassName="coral-reportedButton coral-comment-reportedButton"
viewer={null}
/>
</ButtonsBar>
@@ -103,6 +109,7 @@ exports[`hide reply button 1`] = `
username={
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
user={
Object {
"badges": Array [],
@@ -113,6 +120,7 @@ exports[`hide reply button 1`] = `
viewer={null}
/>
<Relay(UserTagsContainer)
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"author": Object {
@@ -137,6 +145,7 @@ exports[`hide reply button 1`] = `
}
/>
<Relay(AuthorBadgesContainer)
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"author": Object {
@@ -180,10 +189,12 @@ exports[`renders body only 1`] = `
footer={
<React.Fragment>
<ForwardRef(forwardRef)
className="coral coral-comment-actionBar"
justifyContent="space-between"
>
<ButtonsBar>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"author": Object {
@@ -206,6 +217,7 @@ exports[`renders body only 1`] = `
"tags": Array [],
}
}
reactedClassName="coral-reactedButton coral-comment-reactedButton"
readOnly={false}
settings={
Object {
@@ -218,11 +230,13 @@ exports[`renders body only 1`] = `
/>
<ReplyButton
active={false}
className="coral coral-comment-replyButton"
disabled={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
className="coral coral-comment-shareButton"
commentID="comment-id"
story={
Object {
@@ -234,6 +248,7 @@ exports[`renders body only 1`] = `
</ButtonsBar>
<ButtonsBar>
<withContext(createMutationContainer(Relay(ReportButtonContainer)))
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"author": Object {
@@ -256,6 +271,7 @@ exports[`renders body only 1`] = `
"tags": Array [],
}
}
reportedClassName="coral-reportedButton coral-comment-reportedButton"
viewer={null}
/>
</ButtonsBar>
@@ -276,6 +292,7 @@ exports[`renders body only 1`] = `
username={
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
user={
Object {
"badges": Array [],
@@ -286,6 +303,7 @@ exports[`renders body only 1`] = `
viewer={null}
/>
<Relay(UserTagsContainer)
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"author": Object {
@@ -310,6 +328,7 @@ exports[`renders body only 1`] = `
}
/>
<Relay(AuthorBadgesContainer)
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"author": Object {
@@ -353,10 +372,12 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
footer={
<React.Fragment>
<ForwardRef(forwardRef)
className="coral coral-comment-actionBar"
justifyContent="space-between"
>
<ButtonsBar>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"author": Object {
@@ -379,6 +400,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
"tags": Array [],
}
}
reactedClassName="coral-reactedButton coral-comment-reactedButton"
readOnly={false}
settings={
Object {
@@ -391,11 +413,13 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
/>
<ReplyButton
active={false}
className="coral coral-comment-replyButton"
disabled={true}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
className="coral coral-comment-shareButton"
commentID="comment-id"
story={
Object {
@@ -407,6 +431,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
</ButtonsBar>
<ButtonsBar>
<withContext(createMutationContainer(Relay(ReportButtonContainer)))
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"author": Object {
@@ -429,6 +454,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
"tags": Array [],
}
}
reportedClassName="coral-reportedButton coral-comment-reportedButton"
viewer={null}
/>
</ButtonsBar>
@@ -449,6 +475,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
username={
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
user={
Object {
"badges": Array [],
@@ -459,6 +486,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
viewer={null}
/>
<Relay(UserTagsContainer)
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"author": Object {
@@ -483,6 +511,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
}
/>
<Relay(AuthorBadgesContainer)
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"author": Object {
@@ -526,10 +555,12 @@ exports[`renders disabled reply when story is closed 1`] = `
footer={
<React.Fragment>
<ForwardRef(forwardRef)
className="coral coral-comment-actionBar"
justifyContent="space-between"
>
<ButtonsBar>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"author": Object {
@@ -552,6 +583,7 @@ exports[`renders disabled reply when story is closed 1`] = `
"tags": Array [],
}
}
reactedClassName="coral-reactedButton coral-comment-reactedButton"
readOnly={false}
settings={
Object {
@@ -564,11 +596,13 @@ exports[`renders disabled reply when story is closed 1`] = `
/>
<ReplyButton
active={false}
className="coral coral-comment-replyButton"
disabled={true}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
className="coral coral-comment-shareButton"
commentID="comment-id"
story={
Object {
@@ -580,6 +614,7 @@ exports[`renders disabled reply when story is closed 1`] = `
</ButtonsBar>
<ButtonsBar>
<withContext(createMutationContainer(Relay(ReportButtonContainer)))
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"author": Object {
@@ -602,6 +637,7 @@ exports[`renders disabled reply when story is closed 1`] = `
"tags": Array [],
}
}
reportedClassName="coral-reportedButton coral-comment-reportedButton"
viewer={null}
/>
</ButtonsBar>
@@ -622,6 +658,7 @@ exports[`renders disabled reply when story is closed 1`] = `
username={
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
user={
Object {
"badges": Array [],
@@ -632,6 +669,7 @@ exports[`renders disabled reply when story is closed 1`] = `
viewer={null}
/>
<Relay(UserTagsContainer)
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"author": Object {
@@ -656,6 +694,7 @@ exports[`renders disabled reply when story is closed 1`] = `
}
/>
<Relay(AuthorBadgesContainer)
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"author": Object {
@@ -699,10 +738,12 @@ exports[`renders in reply to 1`] = `
footer={
<React.Fragment>
<ForwardRef(forwardRef)
className="coral coral-comment-actionBar"
justifyContent="space-between"
>
<ButtonsBar>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"author": Object {
@@ -729,6 +770,7 @@ exports[`renders in reply to 1`] = `
"tags": Array [],
}
}
reactedClassName="coral-reactedButton coral-comment-reactedButton"
readOnly={false}
settings={
Object {
@@ -741,11 +783,13 @@ exports[`renders in reply to 1`] = `
/>
<ReplyButton
active={false}
className="coral coral-comment-replyButton"
disabled={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
className="coral coral-comment-shareButton"
commentID="comment-id"
story={
Object {
@@ -757,6 +801,7 @@ exports[`renders in reply to 1`] = `
</ButtonsBar>
<ButtonsBar>
<withContext(createMutationContainer(Relay(ReportButtonContainer)))
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"author": Object {
@@ -783,6 +828,7 @@ exports[`renders in reply to 1`] = `
"tags": Array [],
}
}
reportedClassName="coral-reportedButton coral-comment-reportedButton"
viewer={null}
/>
</ButtonsBar>
@@ -803,6 +849,7 @@ exports[`renders in reply to 1`] = `
username={
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
user={
Object {
"badges": Array [],
@@ -813,6 +860,7 @@ exports[`renders in reply to 1`] = `
viewer={null}
/>
<Relay(UserTagsContainer)
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"author": Object {
@@ -841,6 +889,7 @@ exports[`renders in reply to 1`] = `
}
/>
<Relay(AuthorBadgesContainer)
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"author": Object {
@@ -888,10 +937,12 @@ exports[`renders username and body 1`] = `
footer={
<React.Fragment>
<ForwardRef(forwardRef)
className="coral coral-comment-actionBar"
justifyContent="space-between"
>
<ButtonsBar>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"author": Object {
@@ -914,6 +965,7 @@ exports[`renders username and body 1`] = `
"tags": Array [],
}
}
reactedClassName="coral-reactedButton coral-comment-reactedButton"
readOnly={false}
settings={
Object {
@@ -926,11 +978,13 @@ exports[`renders username and body 1`] = `
/>
<ReplyButton
active={false}
className="coral coral-comment-replyButton"
disabled={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
className="coral coral-comment-shareButton"
commentID="comment-id"
story={
Object {
@@ -942,6 +996,7 @@ exports[`renders username and body 1`] = `
</ButtonsBar>
<ButtonsBar>
<withContext(createMutationContainer(Relay(ReportButtonContainer)))
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"author": Object {
@@ -964,6 +1019,7 @@ exports[`renders username and body 1`] = `
"tags": Array [],
}
}
reportedClassName="coral-reportedButton coral-comment-reportedButton"
viewer={null}
/>
</ButtonsBar>
@@ -984,6 +1040,7 @@ exports[`renders username and body 1`] = `
username={
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
user={
Object {
"badges": Array [],
@@ -994,6 +1051,7 @@ exports[`renders username and body 1`] = `
viewer={null}
/>
<Relay(UserTagsContainer)
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"author": Object {
@@ -1018,6 +1076,7 @@ exports[`renders username and body 1`] = `
}
/>
<Relay(AuthorBadgesContainer)
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"author": Object {
@@ -1070,10 +1129,12 @@ exports[`shows conversation link 1`] = `
footer={
<React.Fragment>
<ForwardRef(forwardRef)
className="coral coral-comment-actionBar"
justifyContent="space-between"
>
<ButtonsBar>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
className="coral coral-reactButton coral-comment-reactButton"
comment={
Object {
"author": Object {
@@ -1096,6 +1157,7 @@ exports[`shows conversation link 1`] = `
"tags": Array [],
}
}
reactedClassName="coral-reactedButton coral-comment-reactedButton"
readOnly={false}
settings={
Object {
@@ -1108,11 +1170,13 @@ exports[`shows conversation link 1`] = `
/>
<ReplyButton
active={false}
className="coral coral-comment-replyButton"
disabled={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
className="coral coral-comment-shareButton"
commentID="comment-id"
story={
Object {
@@ -1124,6 +1188,7 @@ exports[`shows conversation link 1`] = `
</ButtonsBar>
<ButtonsBar>
<withContext(createMutationContainer(Relay(ReportButtonContainer)))
className="coral coral-reportButton coral-comment-reportButton"
comment={
Object {
"author": Object {
@@ -1146,11 +1211,13 @@ exports[`shows conversation link 1`] = `
"tags": Array [],
}
}
reportedClassName="coral-reportedButton coral-comment-reportedButton"
viewer={null}
/>
</ButtonsBar>
</ForwardRef(forwardRef)>
<ShowConversationLink
className="coral coral-comment-readMoreOfConveration"
href="http://localhost/story?commentID=comment-id"
id="comments-commentContainer-showConversation-comment-id"
onClick={[Function]}
@@ -1171,6 +1238,7 @@ exports[`shows conversation link 1`] = `
username={
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
className="coral coral-username coral-comment-username"
user={
Object {
"badges": Array [],
@@ -1181,6 +1249,7 @@ exports[`shows conversation link 1`] = `
viewer={null}
/>
<Relay(UserTagsContainer)
className="coral coral-userTag coral-comment-userTag"
comment={
Object {
"author": Object {
@@ -1205,6 +1274,7 @@ exports[`shows conversation link 1`] = `
}
/>
<Relay(AuthorBadgesContainer)
className="coral coral-userBadge coral-comment-userBadge"
comment={
Object {
"author": Object {
src/core/client/stream/tabs/Comments/Comment/__snapshots__/InReplyTo.spec.tsx.snap
+1 -1
View File
@@ -16,7 +16,7 @@ exports[`renders correctly 1`] = `
id="comments-inReplyTo"
>
<ForwardRef(forwardRef)
className="InReplyTo-inReplyTo"
className="InReplyTo-inReplyTo coral coral-comment-inReplyToText"
container="span"
variant="timestamp"
>
src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.tsx
+3 -2
View File
@@ -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<Props> = ({
return (
<>
<Localized id="comments-tombstone-deleted">
<CallOut fullWidth>
<CallOut className={CLASSES.deletedTombstone} fullWidth>
This comment is no longer available. The commenter has deleted their
account.
</CallOut>
@@ -75,7 +76,7 @@ const IgnoredTombstoneOrHideContainer: FunctionComponent<Props> = ({
id="comments-tombstone-ignore"
$username={comment.author!.username}
>
<CallOut fullWidth>
<CallOut className={CLASSES.ignoredTombstone} fullWidth>
This comment is hidden because you ignored {comment.author!.username}
</CallOut>
</Localized>
src/core/client/stream/tabs/Comments/Indent.tsx
+3 -1
View File
@@ -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<IndentProps> = props => {
src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx
+17 -3
View File
@@ -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 (
<div className={styles.root} data-testid={dataTestID}>
<div
className={cn(CLASSES.conversationThread.$root, styles.root)}
data-testid={dataTestID}
>
<HorizontalGutter container={<Line dotted />}>
{rootParent && (
<Circle>
@@ -91,7 +96,12 @@ class ConversationThreadContainer extends React.Component<
id={rootParent.id}
username={rootParent.author && rootParent.author.username}
createdAt={rootParent.createdAt}
tags={<UserTagsContainer comment={rootParent} />}
tags={
<UserTagsContainer
className={CLASSES.conversationThread.rootParent.userTag}
comment={rootParent}
/>
}
/>
</Circle>
)}
@@ -103,7 +113,10 @@ class ConversationThreadContainer extends React.Component<
$count={remaining}
>
<Button
className={styles.showMoreButton}
className={cn(
CLASSES.conversationThread.showMore,
styles.showMoreButton
)}
onClick={this.loadMore}
disabled={this.state.disableLoadMore}
variant="underlined"
@@ -139,6 +152,7 @@ class ConversationThreadContainer extends React.Component<
))}
<Circle end>
<CommentContainer
className={CLASSES.conversationThread.hightlighted}
comment={comment}
story={story}
settings={settings}
src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.tsx
+10 -1
View File
@@ -1,7 +1,9 @@
import cn from "classnames";
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent, MouseEvent } from "react";
import { PropTypesOf } from "coral-framework/types";
import CLASSES from "coral-stream/classes";
import {
Button,
CallOut,
@@ -43,7 +45,13 @@ const PermalinkView: FunctionComponent<PermalinkViewProps> = ({
viewer,
}) => {
return (
<HorizontalGutter className={styles.root} size="double">
<HorizontalGutter
className={cn(styles.root, CLASSES.permalinkView.$root, {
[CLASSES.permalinkView.authenticated]: Boolean(viewer),
[CLASSES.permalinkView.unauthenticated]: !Boolean(viewer),
})}
size="double"
>
<UserBoxContainer viewer={viewer} settings={settings} />
<Flex alignItems="center" justifyContent="center" direction="column">
<Localized id="comments-permalinkView-currentViewing">
@@ -57,6 +65,7 @@ const PermalinkView: FunctionComponent<PermalinkViewProps> = ({
{showAllCommentsHref && (
<Localized id="comments-permalinkView-viewFullDiscussion">
<Button
className={CLASSES.permalinkView.viewFullDiscussionButton}
variant="underlined"
color="primary"
onClick={onShowAllComments}
src/core/client/stream/tabs/Comments/PermalinkView/PermalinkViewQuery.tsx
+2 -1
View File
@@ -9,7 +9,8 @@ import {
} from "coral-framework/lib/relay";
import { PermalinkViewQuery as QueryTypes } from "coral-stream/__generated__/PermalinkViewQuery.graphql";
import { PermalinkViewQueryLocal as Local } from "coral-stream/__generated__/PermalinkViewQueryLocal.graphql";
import { Delay, Spinner } from "coral-ui/components";
import Spinner from "coral-stream/common/Spinner";
import { Delay } from "coral-ui/components";
import PermalinkViewContainer from "./PermalinkViewContainer";
src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkView.spec.tsx.snap
+4 -2
View File
@@ -2,7 +2,7 @@
exports[`renders comment not found 1`] = `
<ForwardRef(forwardRef)
className="PermalinkView-root"
className="PermalinkView-root coral coral-permalink coral-authenticated"
size="double"
>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
@@ -37,6 +37,7 @@ exports[`renders comment not found 1`] = `
>
<ForwardRef(forwardRef)
anchor={true}
className="coral coral-permalink-viewFullDiscussionButton"
color="primary"
href="http://localhost/link"
onClick={[Function]}
@@ -63,7 +64,7 @@ exports[`renders comment not found 1`] = `
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
className="PermalinkView-root"
className="PermalinkView-root coral coral-permalink coral-authenticated"
size="double"
>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
@@ -98,6 +99,7 @@ exports[`renders correctly 1`] = `
>
<ForwardRef(forwardRef)
anchor={true}
className="coral coral-permalink-viewFullDiscussionButton"
color="primary"
href="http://localhost/link"
onClick={[Function]}
src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkViewQuery.spec.tsx.snap
+1 -1
View File
@@ -10,7 +10,7 @@ exports[`renders loading 1`] = `
<Delay
ms={500}
>
<withPropsOnChange(Spinner) />
<withProps(withPropsOnChange(Spinner)) />
</Delay>
`;
src/core/client/stream/tabs/Comments/ReplyList/ReplyList.tsx
+3
View File
@@ -3,6 +3,7 @@ import React, { FunctionComponent } from "react";
import FadeInTransition from "coral-framework/components/FadeInTransition";
import { PropTypesOf } from "coral-framework/types";
import CLASSES from "coral-stream/classes";
import { Button, HorizontalGutter } from "coral-ui/components";
import CommentContainer from "../Comment";
@@ -77,6 +78,7 @@ const ReplyList: FunctionComponent<ReplyListProps> = props => {
aria-controls={`coral-comments-replyList-log--${
props.comment.id
}`}
className={CLASSES.replyList.showAllButton}
onClick={props.onShowAll}
disabled={props.disableShowAll}
variant="outlined"
@@ -95,6 +97,7 @@ const ReplyList: FunctionComponent<ReplyListProps> = props => {
props.comment.id
}`}
onClick={props.onViewNew}
className={CLASSES.replyList.showMoreReplies}
variant="outlined"
fullWidth
>
src/core/client/stream/tabs/Comments/ReplyList/__snapshots__/ReplyList.spec.tsx.snap
+2
View File
@@ -198,6 +198,7 @@ exports[`when there is more disables load more button 1`] = `
>
<ForwardRef(forwardRef)
aria-controls="coral-comments-replyList-log--comment-id"
className="coral coral-replyList-showAllButton"
disabled={true}
fullWidth={true}
id="coral-comments-replyList-showAll--comment-id"
@@ -310,6 +311,7 @@ exports[`when there is more renders a load more button 1`] = `
>
<ForwardRef(forwardRef)
aria-controls="coral-comments-replyList-log--comment-id"
className="coral coral-replyList-showAllButton"
disabled={false}
fullWidth={true}
id="coral-comments-replyList-showAll--comment-id"
src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx
+4 -1
View File
@@ -1,3 +1,4 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent, useCallback, useEffect } from "react";
import { graphql, RelayPaginationProp } from "react-relay";
@@ -16,8 +17,8 @@ import { AllCommentsTabContainer_story } from "coral-stream/__generated__/AllCom
import { AllCommentsTabContainer_viewer } from "coral-stream/__generated__/AllCommentsTabContainer_viewer.graphql";
import { AllCommentsTabContainerLocal } from "coral-stream/__generated__/AllCommentsTabContainerLocal.graphql";
import { AllCommentsTabContainerPaginationQueryVariables } from "coral-stream/__generated__/AllCommentsTabContainerPaginationQuery.graphql";
import CLASSES from "coral-stream/classes";
import { Box, Button, HorizontalGutter } from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import { CommentContainer } from "../../Comment";
import IgnoredTombstoneOrHideContainer from "../../IgnoredTombstoneOrHideContainer";
@@ -108,6 +109,7 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
variant="outlined"
color="primary"
onClick={onViewMore}
className={CLASSES.allCommentsTabPane.viewNewButton}
fullWidth
>
<Localized id="comments-viewNew" $count={viewNewCount}>
@@ -154,6 +156,7 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
fullWidth
disabled={isLoadingMore}
aria-controls="comments-allComments-log"
className={CLASSES.allCommentsTabPane.loadMoreButton}
>
Load More
</Button>
src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabQuery.tsx
+2 -1
View File
@@ -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";
src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/SpinnerWhileRendering.tsx
+3 -1
View File
@@ -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;
}
src/core/client/stream/tabs/Comments/Stream/DeleteAccount/StreamDeletionRequestCalloutContainer.tsx
+3 -1
View File
@@ -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<Props> = ({
return (
<>
{deletionDate && (
<CallOut color="error">
<CallOut color="error" className={CLASSES.pendingAccountDeletion.$root}>
<HorizontalGutter className={styles.gutter}>
<Flex>
<Icon size="md" className={styles.icon}>
@@ -108,6 +109,7 @@ const StreamDeletionRequestCalloutContainer: FunctionComponent<Props> = ({
variant="underlined"
color="primary"
onClick={cancelDeletion}
className={CLASSES.pendingAccountDeletion.cancelRequestButton}
>
Cancel account deletion request
</Button>
src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx
+49 -14
View File
@@ -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> = props => {
);
return (
<div className={styles.root} data-testid={`featuredComment-${comment.id}`}>
<HTMLContent>{comment.body || ""}</HTMLContent>
<Flex direction="row" alignItems="center" mt={4}>
<div
className={cn(CLASSES.featuredComment.$root, styles.root)}
data-testid={`featuredComment-${comment.id}`}
>
<HTMLContent className={CLASSES.featuredComment.content}>
{comment.body || ""}
</HTMLContent>
<Flex
direction="row"
alignItems="center"
mt={4}
className={CLASSES.featuredComment.authorBar.$root}
>
{comment.author && (
<UsernameWithPopoverContainer user={comment.author} viewer={viewer} />
<UsernameWithPopoverContainer
className={CLASSES.featuredComment.authorBar.username}
user={comment.author}
viewer={viewer}
/>
)}
<Box ml={1} container="span">
<UserTagsContainer comment={comment} />
<UserTagsContainer
className={CLASSES.featuredComment.authorBar.userTag}
comment={comment}
/>
</Box>
<Box ml={2} clone>
<Timestamp>{comment.createdAt}</Timestamp>
<Timestamp className={CLASSES.featuredComment.authorBar.timestamp}>
{comment.createdAt}
</Timestamp>
</Box>
</Flex>
<Flex justifyContent="space-between" mt={2}>
<Flex
justifyContent="space-between"
mt={2}
className={CLASSES.featuredComment.actionBar.$root}
>
<ReactionButtonContainer
comment={comment}
settings={settings}
viewer={viewer}
readOnly={banned}
className={CLASSES.featuredComment.actionBar.reactButton}
reactedClassName={CLASSES.featuredComment.actionBar.reactedButton}
/>
<Flex alignItems="center">
{comment.replyCount > 0 && (
<Flex alignItems="center" className={styles.replies}>
<Icon size="md">reply</Icon>
<Localized id="comments-featured-replies">
<Box mx={1}>Replies</Box>
</Localized>
<Box>{comment.replyCount}</Box>
<Flex
alignItems="center"
className={CLASSES.featuredComment.actionBar.replies}
>
<Icon size="md">reply</Icon>
<Localized id="comments-featured-replies">
<Box mx={1}>Replies</Box>
</Localized>
<Box>{comment.replyCount}</Box>
</Flex>
<Box mx={2}>|</Box>
</Flex>
)}
<div>
<TextLink
className={styles.gotoConversation}
className={cn(
CLASSES.featuredComment.actionBar.goToConversation,
styles.gotoConversation
)}
onClick={onGotoConversation}
href={getURLWithCommentID(story.url, comment.id)}
>
src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsContainer.tsx
+2
View File
@@ -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> = props => {
fullWidth
disabled={isLoadingMore}
aria-controls="comments-featuredComments-log"
className={CLASSES.featuredCommentsTabPane.loadMoreButton}
>
Load More
</Button>
src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsQuery.tsx
+5 -3
View File
@@ -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";
src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx
+2 -7
View File
@@ -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";
src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentInReviewMessage.tsx
+7 -1
View File
@@ -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 (
<Message color="primary" fullWidth>
<Message
color="primary"
className={CLASSES.createComment.inReview}
fullWidth
>
<Flex justifyContent="space-between" className={styles.flex}>
<Localized id="comments-submitStatus-submittedAndWillBeReviewed">
<div>
@@ -23,6 +28,7 @@ const PostCommentInReview: FunctionComponent<
<div className={styles.buttonWrapper}>
<Localized id="comments-submitStatus-dismiss">
<Button
className={CLASSES.createComment.dismissButton}
onClick={props.onDismiss}
variant="underlined"
color="light"
src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
+15 -3
View File
@@ -114,7 +114,13 @@ export const StreamContainer: FunctionComponent<Props> = props => {
return (
<>
<StoryClosedTimeoutContainer story={props.story} />
<HorizontalGutter className={styles.root} size="double">
<HorizontalGutter
className={cn(styles.root, {
[CLASSES.commentsTabPane.authenticated]: Boolean(props.viewer),
[CLASSES.commentsTabPane.unauthenticated]: !Boolean(props.viewer),
})}
size="double"
>
<UserBoxContainer viewer={props.viewer} settings={props.settings} />
{props.viewer && (
<StreamDeletionRequestCalloutContainer viewer={props.viewer} />
@@ -189,10 +195,16 @@ export const StreamContainer: FunctionComponent<Props> = props => {
</Tab>
</TabBar>
<TabContent activeTab={local.commentsTab}>
<TabPane tabID="FEATURED_COMMENTS">
<TabPane
className={CLASSES.featuredCommentsTabPane.$root}
tabID="FEATURED_COMMENTS"
>
<FeaturedComments />
</TabPane>
<TabPane tabID="ALL_COMMENTS">
<TabPane
className={CLASSES.allCommentsTabPane.$root}
tabID="ALL_COMMENTS"
>
<AllCommentsTab />
</TabPane>
</TabContent>
src/core/client/stream/tabs/Comments/Stream/StreamQuery.tsx
+6 -4
View File
@@ -1,3 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { ReadyState } from "react-relay";
import {
graphql,
QueryRenderer,
@@ -6,10 +10,8 @@ import {
import { COMMENTS_TAB } from "coral-stream/__generated__/StreamContainerLocal.graphql";
import { StreamQuery as QueryTypes } from "coral-stream/__generated__/StreamQuery.graphql";
import { StreamQueryLocal as Local } from "coral-stream/__generated__/StreamQueryLocal.graphql";
import { Delay, Flex, Spinner } from "coral-ui/components";
import { Localized } from "fluent-react/compat";
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 { AllCommentsTabQuery } from "./AllCommentsTab";
import StreamContainer from "./StreamContainer";
src/core/client/stream/tabs/Comments/Stream/__snapshots__/SortMenu.spec.tsx.snap
+4 -4
View File
@@ -46,12 +46,12 @@ exports[`renders correctly on big screens 1`] = `
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
</i>
</span>
</span>
</div>
@@ -97,12 +97,12 @@ exports[`renders correctly on small screens 1`] = `
aria-hidden={true}
className="SelectField-afterWrapper SortMenu-mobileAfterWrapper"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
sort
</span>
</i>
</span>
</span>
</div>
src/core/client/stream/tabs/Comments/__snapshots__/Indent.spec.tsx.snap
+2 -2
View File
@@ -19,7 +19,7 @@ exports[`renders level1 1`] = `
className="Indent-root"
>
<div
className="Indent-level1"
className="Indent-level1 coral coral-indent-1"
>
<div>
Hello World
@@ -33,7 +33,7 @@ exports[`renders without border 1`] = `
className="Indent-root"
>
<div
className="Indent-level1 Indent-noBorder"
className="Indent-level1 coral coral-indent-1 Indent-noBorder"
>
<div>
Hello World
src/core/client/stream/tabs/Configure/ConfigureQuery.tsx
+2 -1
View File
@@ -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" */);
src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx
+16 -2
View File
@@ -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<Props> = ({
{({ handleSubmit, submitting, pristine, form, submitError }) => (
<FormInitializer form={form}>
{({ onInitValues }) => (
<form autoComplete="off" onSubmit={handleSubmit} id="configure-form">
<form
className={CLASSES.configureCommentStream.$root}
autoComplete="off"
onSubmit={handleSubmit}
id="configure-form"
>
<Flex
justifyContent="space-between"
alignItems="flex-start"
@@ -50,6 +56,7 @@ const ConfigureStream: FunctionComponent<Props> = ({
</Localized>
<Localized id="configure-stream-apply">
<Button
className={CLASSES.configureCommentStream.applyButton}
color="success"
variant="filled"
type="submit"
@@ -60,7 +67,14 @@ const ConfigureStream: FunctionComponent<Props> = ({
</Localized>
</Flex>
<HorizontalGutter size="double">
{submitError && <CallOut color="error">{submitError}</CallOut>}
{submitError && (
<CallOut
className={CLASSES.configureCommentStream.errorMessage}
color="error"
>
{submitError}
</CallOut>
)}
<LiveUpdatesConfigContainer
onInitValues={onInitValues}
storySettings={storySettings}

Some files were not shown because too many files have changed in this diff Show More