[CORL-435] Stable CSS Classes (#2414)

* feat: fixed import issue with react

* feat: initial impl

* fix: review
This commit is contained in:
Wyatt Johnson
2019-07-26 22:43:42 +00:00
committed by GitHub
parent 4f640826de
commit 14e225e26f
102 changed files with 504 additions and 328 deletions
+1 -1
View File
@@ -23643,7 +23643,7 @@
"dependencies": {
"async": {
"version": "1.5.2",
"resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
"resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
"integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
"dev": true
}
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { RelativeTime } from "coral-ui/components";
@@ -1,6 +1,5 @@
import cn from "classnames";
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Typography } from "coral-ui/components";
@@ -11,8 +11,7 @@ import {
ValidationMessage,
} from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
interface Props {
@@ -1,6 +1,5 @@
import { RouterState, withRouter } from "found";
import * as React from "react";
import { Component } from "react";
import React, { Component } from "react";
import { AccountCompletionContainer_auth as AuthData } from "coral-admin/__generated__/AccountCompletionContainer_auth.graphql";
import { AccountCompletionContainer_viewer as UserData } from "coral-admin/__generated__/AccountCompletionContainer_viewer.graphql";
@@ -1,3 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import {
composeValidators,
required,
@@ -9,10 +13,6 @@ import {
TextField,
ValidationMessage,
} from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import { Field } from "react-final-form";
interface Props {
disabled: boolean;
@@ -1,3 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import {
composeValidators,
required,
@@ -9,10 +13,6 @@ import {
TextField,
ValidationMessage,
} from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import { Field } from "react-final-form";
interface Props {
disabled: boolean;
@@ -1,3 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import {
composeValidators,
required,
@@ -9,10 +13,6 @@ import {
TextField,
ValidationMessage,
} from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import { Field } from "react-final-form";
interface Props {
disabled: boolean;
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Icon } from "coral-ui/components";
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import styles from "./UnorderedList.css";
@@ -1,3 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import { PasswordField } from "coral-framework/components";
import {
composeValidators,
@@ -10,10 +14,6 @@ import {
InputLabel,
ValidationMessage,
} from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import { Field } from "react-final-form";
interface Props {
disabled: boolean;
@@ -1,3 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import {
composeValidators,
required,
@@ -10,10 +14,6 @@ import {
TextField,
ValidationMessage,
} from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import { Field } from "react-final-form";
interface Props {
disabled: boolean;
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Flex } from "coral-ui/components";
@@ -1,6 +1,5 @@
import { Localized } from "fluent-react/compat";
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import HorizontalSeparator from "./HorizontalSeparator";
@@ -159,7 +159,7 @@ exports[`renders community 1`] = `
>
<button
aria-label="Search"
className="BaseButton-root Button-root UserTableFilter-adornment Button-sizeRegular Button-colorDark Button-variantAdornment"
className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment UserTableFilter-adornment"
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
@@ -360,7 +360,7 @@ exports[`renders community 1`] = `
className="TableCell-root UserRow-usernameColumn TableCell-body"
>
<button
className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -427,7 +427,7 @@ exports[`renders community 1`] = `
className="TableCell-root UserRow-usernameColumn TableCell-body"
>
<button
className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -462,7 +462,7 @@ exports[`renders community 1`] = `
>
<button
aria-label="Change role"
className="BaseButton-root Button-root UserRoleChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -525,7 +525,7 @@ exports[`renders community 1`] = `
className="TableCell-root UserRow-usernameColumn TableCell-body"
>
<button
className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -560,7 +560,7 @@ exports[`renders community 1`] = `
>
<button
aria-label="Change role"
className="BaseButton-root Button-root UserRoleChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -623,7 +623,7 @@ exports[`renders community 1`] = `
className="TableCell-root UserRow-usernameColumn TableCell-body"
>
<button
className="BaseButton-root Button-root UserRow-usernameButton Button-sizeRegular Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -658,7 +658,7 @@ exports[`renders community 1`] = `
>
<button
aria-label="Change role"
className="BaseButton-root Button-root UserRoleChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -702,7 +702,7 @@ exports[`renders community 1`] = `
>
<button
aria-label="Change user status"
className="BaseButton-root Button-root UserStatusChange-button UserStatusChange-fullWidth Button-sizeSmall Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserStatusChange-button UserStatusChange-fullWidth"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -796,7 +796,7 @@ exports[`renders empty community 1`] = `
>
<button
aria-label="Search"
className="BaseButton-root Button-root UserTableFilter-adornment Button-sizeRegular Button-colorDark Button-variantAdornment"
className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment UserTableFilter-adornment"
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
@@ -60,7 +60,7 @@ exports[`loads more 1`] = `
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-11-29T16:01:51.897Z"
title="2018-11-29T16:01:51.897Z"
>
@@ -124,7 +124,7 @@ exports[`loads more 1`] = `
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-11-29T16:01:45.644Z"
title="2018-11-29T16:01:45.644Z"
>
@@ -188,7 +188,7 @@ exports[`loads more 1`] = `
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-11-29T16:01:42.060Z"
title="2018-11-29T16:01:42.060Z"
>
@@ -317,7 +317,7 @@ exports[`render popover content 1`] = `
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-11-29T16:01:51.897Z"
title="2018-11-29T16:01:51.897Z"
>
@@ -381,7 +381,7 @@ exports[`render popover content 1`] = `
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-11-29T16:01:45.644Z"
title="2018-11-29T16:01:45.644Z"
>
@@ -47,7 +47,7 @@ exports[`approves comment in reported queue: dangling 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -272,7 +272,7 @@ exports[`rejects comment in reported queue: dangling 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -494,7 +494,7 @@ exports[`renders reported queue with comments 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -703,7 +703,7 @@ exports[`renders reported queue with comments 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -928,7 +928,7 @@ exports[`renders reported queue with comments 2`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -1137,7 +1137,7 @@ exports[`renders reported queue with comments 2`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -1352,7 +1352,7 @@ exports[`renders reported queue with comments and load more 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -47,7 +47,7 @@ exports[`approves comment in rejected queue: dangling 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -269,7 +269,7 @@ exports[`renders rejected queue with comments 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -478,7 +478,7 @@ exports[`renders rejected queue with comments 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -693,7 +693,7 @@ exports[`renders rejected queue with comments and load more 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -34,7 +34,7 @@ exports[`approves single comment 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -225,7 +225,7 @@ exports[`rejects single comment 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -451,7 +451,7 @@ exports[`renders single comment view 1`] = `
</span>
</button>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -41,7 +41,7 @@ exports[`renders empty stories 1`] = `
>
<button
aria-label="Search"
className="BaseButton-root Button-root StoryTableFilter-adornment Button-sizeRegular Button-colorDark Button-variantAdornment"
className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment StoryTableFilter-adornment"
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
@@ -190,7 +190,7 @@ exports[`renders empty stories 1`] = `
>
<button
aria-label="Change status"
className="BaseButton-root Button-root StoryStatusChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -259,7 +259,7 @@ exports[`renders empty stories 1`] = `
>
<button
aria-label="Change status"
className="BaseButton-root Button-root StoryStatusChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -344,7 +344,7 @@ exports[`renders stories 1`] = `
>
<button
aria-label="Search"
className="BaseButton-root Button-root StoryTableFilter-adornment Button-sizeRegular Button-colorDark Button-variantAdornment"
className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment StoryTableFilter-adornment"
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
@@ -493,7 +493,7 @@ exports[`renders stories 1`] = `
>
<button
aria-label="Change status"
className="BaseButton-root Button-root StoryStatusChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -562,7 +562,7 @@ exports[`renders stories 1`] = `
>
<button
aria-label="Change status"
className="BaseButton-root Button-root StoryStatusChange-button Button-sizeSmall Button-colorRegular Button-variantRegular"
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -1,5 +1,4 @@
import * as React from "react";
import { Component } from "react";
import React, { Component } from "react";
import { AccountCompletionContainer_auth as AuthData } from "coral-auth/__generated__/AccountCompletionContainer_auth.graphql";
import { AccountCompletionContainer_viewer as UserData } from "coral-auth/__generated__/AccountCompletionContainer_viewer.graphql";
+1 -2
View File
@@ -1,5 +1,4 @@
import * as React from "react";
import { Component } from "react";
import React, { Component } from "react";
import { AppContainer_auth as AuthData } from "coral-auth/__generated__/AppContainer_auth.graphql";
import { AppContainer_viewer as UserData } from "coral-auth/__generated__/AppContainer_viewer.graphql";
@@ -1,3 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import {
composeValidators,
required,
@@ -9,10 +13,6 @@ import {
TextField,
ValidationMessage,
} from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import { Field } from "react-final-form";
interface Props {
disabled: boolean;
@@ -1,6 +1,5 @@
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import {
@@ -1,3 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import {
composeValidators,
required,
@@ -9,10 +13,6 @@ import {
TextField,
ValidationMessage,
} from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import { Field } from "react-final-form";
interface Props {
disabled: boolean;
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Flex } from "coral-ui/components";
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Flex } from "coral-ui/components";
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Typography } from "coral-ui/components";
import styles from "./Subtitle.css";
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Typography } from "coral-ui/components";
import styles from "./Title.css";
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Flex } from "coral-ui/components";
@@ -1,6 +1,5 @@
import { Localized } from "fluent-react/compat";
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import HorizontalSeparator from "./HorizontalSeparator";
@@ -1,3 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import { PasswordField } from "coral-framework/components";
import {
composeValidators,
@@ -10,10 +14,6 @@ import {
InputLabel,
ValidationMessage,
} from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import { Field } from "react-final-form";
interface Props {
disabled: boolean;
@@ -1,3 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { Field } from "react-final-form";
import {
composeValidators,
required,
@@ -10,10 +14,6 @@ import {
TextField,
ValidationMessage,
} from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import { Field } from "react-final-form";
interface Props {
disabled: boolean;
+1 -2
View File
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import ReactDOM from "react-dom";
import { createManaged } from "coral-framework/lib/bootstrap";
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Icon } from "coral-ui/components";
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import styles from "./UnorderedList.css";
@@ -1,6 +1,5 @@
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Form } from "react-final-form";
import AutoHeight from "coral-auth/components/AutoHeight";
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
import { Button } from "coral-ui/components";
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
import { Button } from "coral-ui/components";
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
import { Button } from "coral-ui/components";
@@ -1,4 +1,4 @@
import * as React from "react";
import React from "react";
import {
hoistStatics,
InferableComponentEnhancer,
@@ -1,4 +1,4 @@
import * as React from "react";
import React from "react";
import { DefaultingInferableComponentEnhancer, hoistStatics } from "recompose";
import { CoralContext, withContext } from "../bootstrap";
@@ -1,4 +1,4 @@
import * as React from "react";
import React from "react";
import { createContextHOC } from "coral-framework/helpers";
@@ -1,4 +1,4 @@
import * as React from "react";
import React from "react";
import { DefaultingInferableComponentEnhancer, hoistStatics } from "recompose";
import { Observe, withIntersectionContext } from "./IntersectionContext";
@@ -1,4 +1,4 @@
import * as React from "react";
import React from "react";
import {
compose,
hoistStatics,
@@ -1,4 +1,4 @@
import * as React from "react";
import React from "react";
import {
compose,
hoistStatics,
@@ -1,4 +1,4 @@
import * as React from "react";
import React from "react";
import { _RefType } from "react-relay";
import {
compose,
@@ -1,5 +1,5 @@
import { RouteMatch, RouteProps } from "found";
import * as React from "react";
import React from "react";
type RouteConfig<Props = any, QueryResponse = undefined> = Partial<
Pick<RouteProps, "query" | "getQuery">
+1 -2
View File
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import ReactDOM from "react-dom";
import { createManaged } from "coral-framework/lib/bootstrap";
+1 -2
View File
@@ -1,6 +1,5 @@
import { HorizontalGutter, TabContent, TabPane } from "coral-ui/components";
import * as React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import Comments from "../tabs/Comments";
import Configure from "../tabs/Configure";
+11 -6
View File
@@ -1,7 +1,8 @@
import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import CLASSES from "coral-stream/classes";
type TabValue = "COMMENTS" | "PROFILE" | "%future added value";
@@ -14,21 +15,25 @@ export interface Props {
const AppTabBar: FunctionComponent<Props> = props => {
return (
<TabBar activeTab={props.activeTab} onTabClick={props.onTabClick}>
<Tab tabID="COMMENTS">
<TabBar
className={CLASSES.tabBar.$root}
activeTab={props.activeTab}
onTabClick={props.onTabClick}
>
<Tab className={CLASSES.tabBar.allComments} tabID="COMMENTS">
<Localized id="general-tabBar-commentsTab">
<span>Comments</span>
</Localized>
</Tab>
{props.showProfileTab && (
<Tab tabID="PROFILE">
<Tab className={CLASSES.tabBar.myProfile} tabID="PROFILE">
<Localized id="general-tabBar-myProfileTab">
<span>My Profile</span>
</Localized>
</Tab>
)}
{props.showConfigureTab && (
<Tab tabID="CONFIGURE">
<Tab className={CLASSES.tabBar.configure} tabID="CONFIGURE">
<MatchMedia gteWidth="sm">
{matches =>
matches ? (
@@ -1,5 +1,4 @@
import * as React from "react";
import { Component } from "react";
import React, { Component } from "react";
import {
graphql,
+105
View File
@@ -0,0 +1,105 @@
const CLASSES = {
/**
* tabBar is all the components in the top tab bar selector.
*/
tabBar: {
/**
* $root represents the container for the tab buttons.
*/
$root: "coral coral-tabBar",
/**
* allComments is the button for the "All Comments" tab.
*/
allComments: "coral coral-tabBar-allComments",
/**
* myProfile is the button for the "My Profile" tab.
*/
myProfile: "coral coral-tabBar-myProfile",
/**
* configure is the button for the "Configure" tab.
*/
configure: "coral coral-tabBar-configure",
},
/**
* createComment is the comment creation box where a user can write a comment.
*/
createComment: {
/**
* $root represents the container for the new comments box.
*/
$root: "coral coral-createComment",
/**
* box is the actual commenting input box for creating a new comment.
*/
box: "coral coral-createComment-box",
/**
* submit is the button for submitting a new comment.
*/
submit: "coral coral-createComment-submit",
/**
* signIn is the button for submitting a new comment and signing in.
*/
signIn: "coral coral-createComment-signIn",
},
/**
* replyComment is the comment creation box where a user can write a reply on
* a specific comment.
*/
createReplyComment: {
/**
* $root represents the container for the new reply box.
*/
$root: "coral coral-createReplyComment",
/**
* box is the actual commenting input box for creating a new reply.
*/
box: "coral coral-createReplyComment-box",
/**
* submit is the button for submitting a new reply.
*/
submit: "coral coral-createReplyComment-submit",
},
/**
* comment is the visual representation of a Comment.
*/
comment: {
/**
* $root represents the container containing a given Comment.
*/
$root: "coral coral-comment",
/**
* username is the text display for any given Username in the system.
*/
username: "coral coral-comment-username",
/**
* timestamp is the text that contains the time since the comment was
* published.
*/
timestamp: "coral coral-comment-timestamp",
/**
* userTag can be used to target a tag associated with a User.
*/
userTag: "coral coral-comment-userTag",
/**
* commentTag can be used to target a tag associated with a Comment.
*/
commentTag: "coral coral-comment-commentTag",
},
};
export default CLASSES;
@@ -0,0 +1,13 @@
import React, { FunctionComponent } from "react";
interface Props {
id: string;
children: React.ReactNode;
}
const NamedComponent: FunctionComponent<Props> = ({
id: className,
children,
}) => <div className={className}>{children}</div>;
export default NamedComponent;
@@ -1,7 +1,7 @@
import cn from "classnames";
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import CLASSES from "coral-stream/classes";
import { RelativeTime } from "coral-ui/components";
import styles from "./Timestamp.css";
@@ -13,7 +13,7 @@ export interface TimestampProps {
const Timestamp: FunctionComponent<TimestampProps> = props => (
<RelativeTime
className={cn(styles.root, props.className)}
className={cn(styles.root, props.className, CLASSES.comment.timestamp)}
date={props.children}
/>
);
@@ -2,7 +2,7 @@
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
className="Timestamp-root"
className="Timestamp-root coral coral-comment-timestamp"
date="1995-12-17T03:24:00.000Z"
/>
`;
@@ -1,5 +1,4 @@
import * as React from "react";
import { Component } from "react";
import React, { Component } from "react";
import { urls } from "coral-framework/helpers";
import {
+1 -2
View File
@@ -1,6 +1,5 @@
import { Child as PymChild } from "pym.js";
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import ReactDOM from "react-dom";
import { createManaged } from "coral-framework/lib/bootstrap";
@@ -19,6 +19,7 @@ import {
} from "coral-stream/mutations";
import { Button, Flex, HorizontalGutter, Tag } from "coral-ui/components";
import CLASSES from "coral-stream/classes";
import { isCommentVisible } from "../helpers";
import ButtonsBar from "./ButtonsBar";
import EditCommentFormContainer from "./EditCommentForm";
@@ -164,7 +165,11 @@ export class CommentContainer extends Component<Props, State> {
const commentTags = (
<>
{hasFeaturedTag && (
<Tag color="primary" variant="pill">
<Tag
className={CLASSES.comment.commentTag}
color="primary"
variant="pill"
>
<Localized id="comments-featuredTag">
<span>Featured</span>
</Localized>
@@ -203,7 +208,10 @@ export class CommentContainer extends Component<Props, State> {
return null;
}
return (
<div data-testid={`comment-${comment.id}`}>
<div
className={CLASSES.comment.$root}
data-testid={`comment-${comment.id}`}
>
<HorizontalGutter>
<IndentedComment
indentLevel={indentLevel}
@@ -1,10 +1,12 @@
import { CoralRTE } from "@coralproject/rte";
import cn from "classnames";
import { FormApi, FormState } from "final-form";
import { Localized } from "fluent-react/compat";
import React, { EventHandler, FunctionComponent, MouseEvent, Ref } from "react";
import { Field, Form, FormSpy } from "react-final-form";
import { OnSubmit } from "coral-framework/lib/form";
import CLASSES from "coral-stream/classes";
import {
AriaInfo,
Button,
@@ -44,7 +46,7 @@ const ReplyCommentForm: FunctionComponent<ReplyCommentFormProps> = props => {
<Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
{({ handleSubmit, submitting, form, submitError }) => (
<form
className={props.className}
className={cn(props.className, CLASSES.createReplyComment.$root)}
autoComplete="off"
onSubmit={handleSubmit}
id={`comments-replyCommentForm-form-${props.id}`}
@@ -60,7 +62,7 @@ const ReplyCommentForm: FunctionComponent<ReplyCommentFormProps> = props => {
{({ input, meta }) => (
<>
<HorizontalGutter size="half">
<div>
<div className={CLASSES.createReplyComment.box}>
<Localized id="comments-replyCommentForm-rteLabel">
<AriaInfo component="label" htmlFor={inputID}>
Write a reply
@@ -143,6 +145,7 @@ const ReplyCommentForm: FunctionComponent<ReplyCommentFormProps> = props => {
submitting || !input.value || props.disabled
}
type="submit"
className={CLASSES.createReplyComment.submit}
fullWidth={matches}
>
Submit
@@ -1,6 +1,5 @@
import cn from "classnames";
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { Flex, MatchMedia } from "coral-ui/components";
@@ -4,6 +4,7 @@ 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 {
@@ -17,7 +18,7 @@ const UserTagsContainer: FunctionComponent<Props> = props => {
<>
{staffTag && (
<Localized id="comments-staffTag">
<Tag>Staff</Tag>
<Tag className={CLASSES.comment.userTag}>Staff</Tag>
</Localized>
)}
</>
@@ -1,6 +1,7 @@
import React from "react";
import { FunctionComponent } from "react";
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";
@@ -11,7 +12,11 @@ interface Props {
const Username: FunctionComponent<Props> = props => {
return (
<Typography variant={"heading3"} className={styles.root} container="span">
<Typography
variant={"heading3"}
className={cn(styles.root, CLASSES.comment.username)}
container="span"
>
{props.children}
</Typography>
);
@@ -2,6 +2,7 @@
exports[`hide reply button 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -137,6 +138,7 @@ exports[`hide reply button 1`] = `
exports[`renders body only 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -278,6 +280,7 @@ exports[`renders body only 1`] = `
exports[`renders disabled reply when commenting has been disabled 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -419,6 +422,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
exports[`renders disabled reply when story is closed 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -560,6 +564,7 @@ exports[`renders disabled reply when story is closed 1`] = `
exports[`renders in reply to 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -713,6 +718,7 @@ exports[`renders in reply to 1`] = `
exports[`renders username and body 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -854,6 +860,7 @@ exports[`renders username and body 1`] = `
exports[`shows conversation link 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
@@ -1,5 +1,4 @@
import * as React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { graphql, useLocal } from "coral-framework/lib/relay";
import { CommentsPaneLocal } from "coral-stream/__generated__/CommentsPaneLocal.graphql";
@@ -1,6 +1,5 @@
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { ReadyState } from "react-relay";
import {
@@ -1,6 +1,5 @@
import cn from "classnames";
import * as React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import styles from "./Circle.css";
@@ -1,6 +1,5 @@
import cn from "classnames";
import * as React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import styles from "./Line.css";
@@ -1,6 +1,5 @@
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import FadeInTransition from "coral-framework/components/FadeInTransition";
import { PropTypesOf } from "coral-framework/types";
@@ -5,6 +5,7 @@ import React, { FunctionComponent } from "react";
import { Field, Form, FormSpy } from "react-final-form";
import { OnSubmit } from "coral-framework/lib/form";
import CLASSES from "coral-stream/classes";
import {
AriaInfo,
Button,
@@ -46,6 +47,7 @@ const PostCommentForm: FunctionComponent<Props> = props => (
<Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
{({ handleSubmit, submitting, submitError, form }) => (
<form
className={CLASSES.createComment.$root}
autoComplete="off"
onSubmit={handleSubmit}
id="comments-postCommentForm-form"
@@ -78,6 +80,7 @@ const PostCommentForm: FunctionComponent<Props> = props => (
onChange={({ html }) =>
input.onChange(cleanupRTEEmptyHTML(html))
}
className={CLASSES.createComment.box}
value={input.value}
placeholder="Post a comment"
disabled={submitting || props.disabled}
@@ -123,6 +126,7 @@ const PostCommentForm: FunctionComponent<Props> = props => (
<Button
color="primary"
variant="filled"
className={CLASSES.createComment.submit}
disabled={submitting || !input.value || props.disabled}
type="submit"
>
@@ -7,6 +7,7 @@ import { Button, HorizontalGutter } from "coral-ui/components";
import RTE from "../../RTE";
import MessageBoxContainer from "../MessageBoxContainer";
import CLASSES from "coral-stream/classes";
import styles from "./PostCommentFormFake.css";
interface Props {
@@ -23,7 +24,7 @@ const PostCommentFormFake: FunctionComponent<Props> = props => {
[props.onDraftChange]
);
return (
<div>
<div className={CLASSES.createComment.$root}>
{props.showMessageBox && (
<MessageBoxContainer
story={props.story}
@@ -31,7 +32,7 @@ const PostCommentFormFake: FunctionComponent<Props> = props => {
/>
)}
<HorizontalGutter className={styles.root}>
<div aria-hidden="true">
<div className={CLASSES.createComment.box} aria-hidden="true">
<Localized
id="comments-postCommentFormFake-rte"
attrs={{ placeholder: true }}
@@ -45,6 +46,7 @@ const PostCommentFormFake: FunctionComponent<Props> = props => {
</div>
<Localized id="comments-postCommentFormFake-signInAndJoin">
<Button
className={CLASSES.createComment.signIn}
color="primary"
variant="filled"
type="submit"
@@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<div>
<div
className="coral coral-createComment"
>
<Relay(MessageBoxContainer)
className="PostCommentFormFake-messageBox"
story={Object {}}
@@ -11,6 +13,7 @@ exports[`renders correctly 1`] = `
>
<div
aria-hidden="true"
className="coral coral-createComment-box"
>
<Localized
attrs={
@@ -31,6 +34,7 @@ exports[`renders correctly 1`] = `
id="comments-postCommentFormFake-signInAndJoin"
>
<ForwardRef(forwardRef)
className="coral coral-createComment-signIn"
color="primary"
fullWidth={true}
onClick={[Function]}
@@ -1,8 +1,8 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
import { Button, HorizontalGutter, Typography } from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import HistoryCommentContainer from "./HistoryCommentContainer";
@@ -1,6 +1,5 @@
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import HTMLContent from "coral-stream/common/HTMLContent";
import Timestamp from "coral-stream/common/Timestamp";
@@ -5,7 +5,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root App-root HorizontalGutter-full"
>
<ul
className="TabBar-root TabBar-primary"
className="TabBar-root TabBar-primary coral coral-tabBar"
role="tablist"
>
<li
@@ -16,7 +16,7 @@ exports[`renders comment stream 1`] = `
<button
aria-controls="tabPane-COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-primary Tab-active"
className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -70,12 +70,15 @@ exports[`renders comment stream 1`] = `
Register
</button>
</div>
<div>
<div
className="coral coral-createComment"
>
<div
className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
>
<div
aria-hidden="true"
className="coral coral-createComment-box"
>
<div>
<div
@@ -159,7 +162,7 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -312,7 +315,7 @@ exports[`renders comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -335,7 +338,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Box-ml-1"
/>
<time
className="Timestamp-root Box-root Box-ml-2 RelativeTime-root"
className="RelativeTime-root Timestamp-root Box-root Box-ml-2 coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -412,7 +415,7 @@ exports[`renders comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Lukas
</span>
@@ -435,7 +438,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Box-ml-1"
/>
<time
className="Timestamp-root Box-root Box-ml-2 RelativeTime-root"
className="RelativeTime-root Timestamp-root Box-root Box-ml-2 coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -99,6 +99,7 @@ exports[`renders permalink view 1`] = `
</svg>
</div>
<div
className="coral coral-comment"
data-testid="comment-comment-1"
>
<div
@@ -138,7 +139,7 @@ exports[`renders permalink view 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Lukas
</span>
@@ -162,7 +163,7 @@ exports[`renders permalink view 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -305,6 +306,7 @@ exports[`renders permalink view 1`] = `
</svg>
</div>
<div
className="coral coral-comment"
data-testid="comment-comment-2"
>
<div
@@ -344,7 +346,7 @@ exports[`renders permalink view 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Isabelle
</span>
@@ -368,7 +370,7 @@ exports[`renders permalink view 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -509,6 +511,7 @@ exports[`renders permalink view 1`] = `
</svg>
</div>
<div
className="coral coral-comment"
data-testid="comment-comment-with-replies"
>
<div
@@ -548,7 +551,7 @@ exports[`renders permalink view 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -572,7 +575,7 @@ exports[`renders permalink view 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -709,6 +712,7 @@ exports[`renders permalink view 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-3"
>
<div
@@ -748,7 +752,7 @@ exports[`renders permalink view 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Isabelle
</span>
@@ -772,7 +776,7 @@ exports[`renders permalink view 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -925,6 +929,7 @@ exports[`renders permalink view 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-4"
>
<div
@@ -964,7 +969,7 @@ exports[`renders permalink view 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Isabelle
</span>
@@ -988,7 +993,7 @@ exports[`renders permalink view 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -38,13 +38,13 @@ exports[`renders conversation thread 1`] = `
>
<div>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Moderator
</span>
</div>
<span
className="Tag-root Tag-colorGrey"
className="Tag-root coral coral-comment-userTag Tag-colorGrey"
>
Staff
</span>
@@ -53,7 +53,7 @@ exports[`renders conversation thread 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -87,7 +87,7 @@ exports[`renders conversation thread 1`] = `
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
>
<button
className="BaseButton-root Button-root ConversationThreadContainer-showMoreButton Button-sizeRegular Button-colorRegular Button-variantUnderlined"
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined ConversationThreadContainer-showMoreButton"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -133,6 +133,7 @@ exports[`renders conversation thread 1`] = `
</svg>
</div>
<div
className="coral coral-comment"
data-testid="comment-comment-0"
>
<div
@@ -172,7 +173,7 @@ exports[`renders conversation thread 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -196,7 +197,7 @@ exports[`renders conversation thread 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -352,6 +353,7 @@ exports[`shows more of this conversation 1`] = `
</svg>
</div>
<div
className="coral coral-comment"
data-testid="comment-comment-1"
>
<div
@@ -391,7 +393,7 @@ exports[`shows more of this conversation 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Lukas
</span>
@@ -415,7 +417,7 @@ exports[`shows more of this conversation 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -558,6 +560,7 @@ exports[`shows more of this conversation 1`] = `
</svg>
</div>
<div
className="coral coral-comment"
data-testid="comment-comment-from-staff-0"
>
<div
@@ -597,7 +600,7 @@ exports[`shows more of this conversation 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Moderator
</span>
@@ -617,7 +620,7 @@ exports[`shows more of this conversation 1`] = `
</div>
</div>
<span
className="Tag-root Tag-colorGrey"
className="Tag-root coral coral-comment-userTag Tag-colorGrey"
>
Staff
</span>
@@ -626,7 +629,7 @@ exports[`shows more of this conversation 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -767,6 +770,7 @@ exports[`shows more of this conversation 1`] = `
</svg>
</div>
<div
className="coral coral-comment"
data-testid="comment-comment-0"
>
<div
@@ -806,7 +810,7 @@ exports[`shows more of this conversation 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -830,7 +834,7 @@ exports[`shows more of this conversation 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -2,6 +2,7 @@
exports[`cancel edit 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-with-replies"
>
<div
@@ -41,7 +42,7 @@ exports[`cancel edit 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -65,7 +66,7 @@ exports[`cancel edit 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -236,13 +237,13 @@ exports[`edit a comment and handle server error: edit form 1`] = `
>
<div>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
</div>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -408,13 +409,13 @@ exports[`edit a comment: edit form 1`] = `
>
<div>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
</div>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -580,13 +581,13 @@ exports[`edit a comment: optimistic response 1`] = `
>
<div>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
</div>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -737,6 +738,7 @@ exports[`edit a comment: optimistic response 1`] = `
exports[`edit a comment: render comment with edit button 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-with-replies"
>
<div
@@ -776,7 +778,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -800,7 +802,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -956,6 +958,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
exports[`edit a comment: server response 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-with-replies"
>
<div
@@ -995,7 +998,7 @@ exports[`edit a comment: server response 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -1019,7 +1022,7 @@ exports[`edit a comment: server response 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -1184,6 +1187,7 @@ exports[`edit a comment: server response 1`] = `
exports[`shows expiry message: edit form closed 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-with-replies"
>
<div
@@ -1223,7 +1227,7 @@ exports[`shows expiry message: edit form closed 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -1247,7 +1251,7 @@ exports[`shows expiry message: edit form closed 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -1418,13 +1422,13 @@ exports[`shows expiry message: edit time expired 1`] = `
>
<div>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
</div>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -12,6 +12,7 @@ exports[`renders comment stream with load more button 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-0"
>
<div
@@ -51,7 +52,7 @@ exports[`renders comment stream with load more button 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -75,7 +76,7 @@ exports[`renders comment stream with load more button 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -201,6 +202,7 @@ exports[`renders comment stream with load more button 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-1"
>
<div
@@ -240,7 +242,7 @@ exports[`renders comment stream with load more button 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Lukas
</span>
@@ -264,7 +266,7 @@ exports[`renders comment stream with load more button 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -2,6 +2,7 @@
exports[`post a comment: optimistic response 1`] = `
<div
className="coral coral-comment"
data-testid="comment-uuid-0"
>
<div
@@ -41,7 +42,7 @@ exports[`post a comment: optimistic response 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -65,7 +66,7 @@ exports[`post a comment: optimistic response 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -2,6 +2,7 @@
exports[`post a reply: open reply form 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-with-deepest-replies-5"
>
<div
@@ -41,7 +42,7 @@ exports[`post a reply: open reply form 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -65,7 +66,7 @@ exports[`post a reply: open reply form 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -246,6 +247,7 @@ exports[`post a reply: open reply form 1`] = `
</div>
<form
autoComplete="off"
className="coral coral-createReplyComment"
id="comments-replyCommentForm-form-comment-with-deepest-replies-5"
onSubmit={[Function]}
>
@@ -255,7 +257,9 @@ exports[`post a reply: open reply form 1`] = `
<div
className="Box-root HorizontalGutter-root HorizontalGutter-half"
>
<div>
<div
className="coral coral-createReplyComment-box"
>
<label
className="AriaInfo-root"
htmlFor="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
@@ -386,7 +390,7 @@ exports[`post a reply: open reply form 1`] = `
Cancel
</button>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-createReplyComment-submit"
disabled={true}
onBlur={[Function]}
onFocus={[Function]}
@@ -415,6 +419,7 @@ exports[`post a reply: optimistic response 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-uuid-0"
>
<div
@@ -454,7 +459,7 @@ exports[`post a reply: optimistic response 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -478,7 +483,7 @@ exports[`post a reply: optimistic response 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -657,6 +662,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-with-deepest-replies"
>
<div
@@ -696,7 +702,7 @@ exports[`renders comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -720,7 +726,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -869,6 +875,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-with-deepest-replies-1"
>
<div
@@ -908,7 +915,7 @@ exports[`renders comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -932,7 +939,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -1108,6 +1115,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-with-deepest-replies-2"
>
<div
@@ -1147,7 +1155,7 @@ exports[`renders comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -1171,7 +1179,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -1347,6 +1355,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-with-deepest-replies-3"
>
<div
@@ -1386,7 +1395,7 @@ exports[`renders comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -1410,7 +1419,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -1586,6 +1595,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-with-deepest-replies-4"
>
<div
@@ -1625,7 +1635,7 @@ exports[`renders comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -1649,7 +1659,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -1825,6 +1835,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-with-deepest-replies-5"
>
<div
@@ -1864,7 +1875,7 @@ exports[`renders comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -1888,7 +1899,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -2,6 +2,7 @@
exports[`post a reply: open reply form 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-0"
>
<div
@@ -41,7 +42,7 @@ exports[`post a reply: open reply form 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -65,7 +66,7 @@ exports[`post a reply: open reply form 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -204,6 +205,7 @@ exports[`post a reply: open reply form 1`] = `
</div>
<form
autoComplete="off"
className="coral coral-createReplyComment"
id="comments-replyCommentForm-form-comment-0"
onSubmit={[Function]}
>
@@ -213,7 +215,9 @@ exports[`post a reply: open reply form 1`] = `
<div
className="Box-root HorizontalGutter-root HorizontalGutter-half"
>
<div>
<div
className="coral coral-createReplyComment-box"
>
<label
className="AriaInfo-root"
htmlFor="comments-replyCommentForm-rte-comment-0"
@@ -344,7 +348,7 @@ exports[`post a reply: open reply form 1`] = `
Cancel
</button>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-createReplyComment-submit"
disabled={true}
onBlur={[Function]}
onFocus={[Function]}
@@ -373,6 +377,7 @@ exports[`post a reply: optimistic response 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-uuid-0"
>
<div
@@ -412,7 +417,7 @@ exports[`post a reply: optimistic response 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -436,7 +441,7 @@ exports[`post a reply: optimistic response 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -54,12 +54,15 @@ exports[`renders comment stream with community guidelines 1`] = `
/>
</div>
</div>
<div>
<div
className="coral coral-createComment"
>
<div
className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
>
<div
aria-hidden="true"
className="coral coral-createComment-box"
>
<div>
<div
@@ -143,7 +146,7 @@ exports[`renders comment stream with community guidelines 1`] = `
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -270,6 +273,7 @@ exports[`renders comment stream with community guidelines 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-0"
>
<div
@@ -309,7 +313,7 @@ exports[`renders comment stream with community guidelines 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -333,7 +337,7 @@ exports[`renders comment stream with community guidelines 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -459,6 +463,7 @@ exports[`renders comment stream with community guidelines 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-1"
>
<div
@@ -498,7 +503,7 @@ exports[`renders comment stream with community guidelines 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Lukas
</span>
@@ -522,7 +527,7 @@ exports[`renders comment stream with community guidelines 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -264,6 +264,7 @@ exports[`renders message box when logged in 1`] = `
</div>
<form
autoComplete="off"
className="coral coral-createComment"
id="comments-postCommentForm-form"
onSubmit={[Function]}
>
@@ -281,7 +282,7 @@ exports[`renders message box when logged in 1`] = `
</label>
<div>
<div
className=""
className="coral coral-createComment-box"
>
<div
className="RTE-contentEditableContainer"
@@ -366,7 +367,7 @@ exports[`renders message box when logged in 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignFlexEnd Flex-directionColumn"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-createComment-submit"
disabled={true}
onBlur={[Function]}
onFocus={[Function]}
@@ -536,7 +537,9 @@ exports[`renders message box when not logged in 1`] = `
Register
</button>
</div>
<div>
<div
className="coral coral-createComment"
>
<div
className="MessageBox-root PostCommentFormFake-messageBox"
>
@@ -561,6 +564,7 @@ exports[`renders message box when not logged in 1`] = `
>
<div
aria-hidden="true"
className="coral coral-createComment-box"
>
<div>
<div
@@ -644,7 +648,7 @@ exports[`renders message box when not logged in 1`] = `
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -11,6 +11,7 @@ exports[`renders reply list 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-with-replies"
>
<div
@@ -50,7 +51,7 @@ exports[`renders reply list 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -74,7 +75,7 @@ exports[`renders reply list 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -232,6 +233,7 @@ exports[`renders reply list 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-3"
>
<div
@@ -271,7 +273,7 @@ exports[`renders reply list 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Isabelle
</span>
@@ -295,7 +297,7 @@ exports[`renders reply list 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -448,6 +450,7 @@ exports[`renders reply list 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-4"
>
<div
@@ -487,7 +490,7 @@ exports[`renders reply list 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Isabelle
</span>
@@ -511,7 +514,7 @@ exports[`renders reply list 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -666,6 +669,7 @@ exports[`renders reply list 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-5"
>
<div
@@ -705,7 +709,7 @@ exports[`renders reply list 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Isabelle
</span>
@@ -729,7 +733,7 @@ exports[`renders reply list 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -5,7 +5,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root App-root HorizontalGutter-full"
>
<ul
className="TabBar-root TabBar-primary"
className="TabBar-root TabBar-primary coral coral-tabBar"
role="tablist"
>
<li
@@ -16,7 +16,7 @@ exports[`renders comment stream 1`] = `
<button
aria-controls="tabPane-COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-primary Tab-active"
className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -70,12 +70,15 @@ exports[`renders comment stream 1`] = `
Register
</button>
</div>
<div>
<div
className="coral coral-createComment"
>
<div
className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
>
<div
aria-hidden="true"
className="coral coral-createComment-box"
>
<div>
<div
@@ -159,7 +162,7 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -286,6 +289,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-0"
>
<div
@@ -325,7 +329,7 @@ exports[`renders comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -349,7 +353,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -475,6 +479,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-from-staff-0"
>
<div
@@ -514,7 +519,7 @@ exports[`renders comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Moderator
</span>
@@ -534,7 +539,7 @@ exports[`renders comment stream 1`] = `
</div>
</div>
<span
className="Tag-root Tag-colorGrey"
className="Tag-root coral coral-comment-userTag Tag-colorGrey"
>
Staff
</span>
@@ -543,7 +548,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -493,7 +493,7 @@ exports[`report comment as offensive 1`] = `
Weve received your message. Reports from members like you keep the community safe.
 
<button
className="BaseButton-root Button-root ThankYou-dismiss Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined ThankYou-dismiss"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -11,6 +11,7 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-1"
>
<div
@@ -50,7 +51,7 @@ exports[`renders comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Lukas
</span>
@@ -74,7 +75,7 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -2,6 +2,7 @@
exports[`renders deepest comment with link 1`] = `
<div
className="coral coral-comment"
data-testid="comment-comment-with-deepest-replies-5"
>
<div
@@ -41,7 +42,7 @@ exports[`renders deepest comment with link 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Markus
</span>
@@ -65,7 +66,7 @@ exports[`renders deepest comment with link 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -12,6 +12,7 @@ exports[`renders app with comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-2"
>
<div
@@ -51,7 +52,7 @@ exports[`renders app with comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Isabelle
</span>
@@ -75,7 +76,7 @@ exports[`renders app with comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -201,6 +202,7 @@ exports[`renders app with comment stream 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="coral coral-comment"
data-testid="comment-comment-3"
>
<div
@@ -240,7 +242,7 @@ exports[`renders app with comment stream 1`] = `
type="button"
>
<span
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root coral coral-comment-username"
>
Isabelle
</span>
@@ -264,7 +266,7 @@ exports[`renders app with comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -275,7 +275,7 @@ no new comments may be submitted and all previously submitted comments
will still be displayed.
</p>
<button
className="BaseButton-root Button-root CloseStream-button Button-sizeRegular Button-colorError Button-variantOutlined"
className="BaseButton-root Button-root Button-sizeRegular Button-colorError Button-variantOutlined CloseStream-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -20,7 +20,7 @@ exports[`renders profile 1`] = `
Story: title
</h1>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
@@ -61,7 +61,7 @@ exports[`renders profile 1`] = `
Story: title
</h1>
<time
className="Timestamp-root RelativeTime-root"
className="RelativeTime-root Timestamp-root coral coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
+25 -21
View File
@@ -75,27 +75,31 @@ export class Button extends React.Component<Props> {
...rest
} = this.props;
const rootClassName = cn(classes.root, className, {
[classes.sizeRegular]: size === "regular",
[classes.sizeSmall]: size === "small",
[classes.sizeLarge]: size === "large",
[classes.colorRegular]: color === "regular",
[classes.colorLight]: color === "light",
[classes.colorPrimary]: color === "primary",
[classes.colorError]: color === "error",
[classes.colorSuccess]: color === "success",
[classes.colorBrand]: color === "brand",
[classes.colorDark]: color === "dark",
[classes.variantRegular]: variant === "regular",
[classes.variantFilled]: variant === "filled",
[classes.variantOutlined]: variant === "outlined",
[classes.variantGhost]: variant === "ghost",
[classes.variantAdornment]: variant === "adornment",
[classes.variantUnderlined]: variant === "underlined",
[classes.fullWidth]: fullWidth,
[classes.active]: active,
[classes.disabled]: disabled,
});
const rootClassName = cn(
classes.root,
{
[classes.sizeRegular]: size === "regular",
[classes.sizeSmall]: size === "small",
[classes.sizeLarge]: size === "large",
[classes.colorRegular]: color === "regular",
[classes.colorLight]: color === "light",
[classes.colorPrimary]: color === "primary",
[classes.colorError]: color === "error",
[classes.colorSuccess]: color === "success",
[classes.colorBrand]: color === "brand",
[classes.colorDark]: color === "dark",
[classes.variantRegular]: variant === "regular",
[classes.variantFilled]: variant === "filled",
[classes.variantOutlined]: variant === "outlined",
[classes.variantGhost]: variant === "ghost",
[classes.variantAdornment]: variant === "adornment",
[classes.variantUnderlined]: variant === "underlined",
[classes.fullWidth]: fullWidth,
[classes.active]: active,
[classes.disabled]: disabled,
},
className
);
return (
<BaseButton
@@ -1,5 +1,4 @@
import React from "react";
import { Component } from "react";
import React, { Component } from "react";
interface Props {
ms?: number;
@@ -1,6 +1,5 @@
import cn from "classnames";
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { withStyles } from "coral-ui/hocs";
@@ -1,6 +1,5 @@
import cn from "classnames";
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { withStyles } from "coral-ui/hocs";
@@ -29,7 +29,7 @@ const RelativeTime: React.FunctionComponent<Props> = props => {
{({ timeagoFormatter }) => (
<TimeAgo
date={date}
className={cn(className, classes.root)}
className={cn(classes.root, className)}
live={live}
formatter={timeagoFormatter || formatter || defaultFormatter}
/>
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
export interface OptGroupProps {
label: string;
@@ -1,5 +1,4 @@
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
export interface OptionProps {
value?: string;
+1 -2
View File
@@ -1,6 +1,5 @@
import cn from "classnames";
import React from "react";
import { FunctionComponent } from "react";
import React, { FunctionComponent } from "react";
import { withStyles } from "coral-ui/hocs";

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