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

feat: Implement InReplyTo

Browse Source
This commit is contained in:
Chi Vinh Le
2018-10-19 17:31:21 +02:00
parent 9a129af21e
commit 1176080aee
26 changed files with 326 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/tabs/comments/components/Comment/Comment.css
+1 -1
View File
@@ -4,7 +4,7 @@
background-color: var(--palette-primary-lightest);
padding: var(--spacing-unit);
}
.topBar {
.subBar {
margin-bottom: calc(0.5 * var(--spacing-unit));
}
.footer:not(:empty) {
src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
+9 -6
View File
@@ -7,6 +7,7 @@ import { Flex, HorizontalGutter } from "talk-ui/components";
import * as styles from "./Comment.css";
import EditedMarker from "./EditedMarker";
import InReplyTo from "./InReplyTo";
import TopBarLeft from "./TopBarLeft";
import Username from "./Username";
@@ -20,6 +21,7 @@ export interface CommentProps {
footer?: React.ReactNode;
showEditedMarker?: boolean;
highlight?: boolean;
parentAuthorName?: string | null;
}
const Comment: StatelessComponent<CommentProps> = props => {
@@ -28,12 +30,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
role="article"
className={cn(styles.root, { [styles.highlight]: props.highlight })}
>
<Flex
className={styles.topBar}
direction="row"
justifyContent="space-between"
id={props.id}
>
<Flex direction="row" justifyContent="space-between" id={props.id}>
<TopBarLeft>
{props.username && <Username>{props.username}</Username>}
<Flex direction="row" alignItems="baseline" itemGutter>
@@ -43,6 +40,12 @@ const Comment: StatelessComponent<CommentProps> = props => {
</TopBarLeft>
{props.topBarRight && <div>{props.topBarRight}</div>}
</Flex>
{props.parentAuthorName && (
<div className={styles.subBar}>
<InReplyTo username={props.parentAuthorName} />
</div>
)}
<HorizontalGutter>
<HTMLContent>{props.body || ""}</HTMLContent>
{props.footer}
src/core/client/stream/tabs/comments/components/Comment/InReplyTo.css
+9
View File
@@ -0,0 +1,9 @@
.icon {
color: var(--palette-grey-light);
}
.inReplyTo {
color: var(--palette-grey-light);
}
.username {
color: var(--palette-grey-dark);
}
src/core/client/stream/tabs/comments/components/Comment/InReplyTo.spec.tsx
+14
View File
@@ -0,0 +1,14 @@
import { shallow } from "enzyme";
import React from "react";
import { PropTypesOf } from "talk-framework/types";
import InReplyTo from "./InReplyTo";
it("renders correctly", () => {
const props: PropTypesOf<typeof InReplyTo> = {
username: "Username",
};
const wrapper = shallow(<InReplyTo {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/tabs/comments/components/Comment/InReplyTo.tsx
+34
View File
@@ -0,0 +1,34 @@
import { Localized } from "fluent-react/compat";
import React, { StatelessComponent } from "react";
import { Flex, Icon, Typography } from "talk-ui/components";
import styles from "./InReplyTo.css";
interface Props {
username: string;
}
const InReplyTo: StatelessComponent<Props> = ({ username }) => {
const Username = () => (
<Typography variant="heading5" container="span" className={styles.username}>
{username}
</Typography>
);
return (
<Flex alignItems="center">
<Icon className={styles.icon}>reply</Icon>{" "}
<Localized id="comments-inReplyTo" username={<Username />}>
<Typography
variant="timestamp"
container="span"
className={styles.inReplyTo}
>
{"In reply to <username><username>"}
</Typography>
</Localized>
</Flex>
);
};
export default InReplyTo;
src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap
-1
View File
@@ -6,7 +6,6 @@ exports[`renders username and body 1`] = `
role="article"
>
<withPropsOnChange(Flex)
className="Comment-topBar"
direction="row"
id="comment-id"
justifyContent="space-between"
src/core/client/stream/tabs/comments/components/Comment/__snapshots__/InReplyTo.spec.tsx.snap
+26
View File
@@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<withPropsOnChange(Flex)
alignItems="center"
>
<withPropsOnChange(Icon)
className="InReplyTo-icon"
>
reply
</withPropsOnChange(Icon)>
<Localized
id="comments-inReplyTo"
username={<Username />}
>
<withPropsOnChange(Typography)
className="InReplyTo-inReplyTo"
container="span"
variant="timestamp"
>
In reply to &lt;username&gt;&lt;username&gt;
</withPropsOnChange(Typography)>
</Localized>
</withPropsOnChange(Flex)>
`;
src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx
+46
View File
@@ -22,6 +22,7 @@ it("renders username and body", () => {
id: "author-id",
username: "Marvin",
},
parent: null,
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
@@ -59,6 +60,7 @@ it("renders body only", () => {
id: "author-id",
username: null,
},
parent: null,
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
@@ -94,6 +96,7 @@ it("hide reply button", () => {
id: "author-id",
username: "Marvin",
},
parent: null,
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
@@ -138,6 +141,7 @@ it("shows conversation link", () => {
id: "author-id",
username: "Marvin",
},
parent: null,
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
@@ -157,3 +161,45 @@ it("shows conversation link", () => {
const wrapper = shallow(<CommentContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders in reply to", () => {
const props: PropTypesOf<typeof CommentContainerN> = {
me: null,
asset: {
url: "http://localhost/asset",
},
comment: {
id: "comment-id",
author: {
id: "author-id",
username: "Marvin",
},
parent: {
author: {
username: "ParentAuthor",
},
},
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
edited: false,
editableUntil: "1995-12-17T03:24:30.000Z",
},
pending: false,
},
settings: {
reaction: {
icon: "thumb_up_alt",
label: "Respect",
},
},
indentLevel: 1,
showAuthPopup: noop as any,
setCommentID: noop as any,
localReply: false,
disableReplies: false,
};
const wrapper = shallow(<CommentContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
+10
View File
@@ -165,6 +165,11 @@ export class CommentContainer extends Component<InnerProps, State> {
blur={comment.pending || false}
showEditedMarker={comment.editing.edited}
highlight={highlight}
parentAuthorName={
comment.parent &&
comment.parent.author &&
comment.parent.author.username
}
topBarRight={
(editable && (
<Localized id="comments-commentContainer-editButton">
@@ -247,6 +252,11 @@ const enhanced = withSetCommentIDMutation(
id
username
}
parent {
author {
username
}
}
body
createdAt
editing {
src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
+69
View File
@@ -26,6 +26,7 @@ exports[`hide reply button 1`] = `
"edited": false,
},
"id": "comment-id",
"parent": null,
"pending": false,
}
}
@@ -44,6 +45,7 @@ exports[`hide reply button 1`] = `
}
id="comment-comment-id"
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
username="Marvin"
/>
@@ -81,6 +83,7 @@ exports[`renders body only 1`] = `
"edited": false,
},
"id": "comment-id",
"parent": null,
"pending": false,
}
}
@@ -99,12 +102,74 @@ exports[`renders body only 1`] = `
}
id="comment-comment-id"
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
username={null}
/>
</withPropsOnChange(HorizontalGutter)>
`;
exports[`renders in reply to 1`] = `
<withPropsOnChange(HorizontalGutter)>
<IndentedComment
blur={false}
body="Woof"
createdAt="1995-12-17T03:24:00.000Z"
footer={
<React.Fragment>
<ButtonsBar>
<ReplyButton
active={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"parent": Object {
"author": Object {
"username": "ParentAuthor",
},
},
"pending": false,
}
}
me={null}
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
},
}
}
/>
</ButtonsBar>
</React.Fragment>
}
id="comment-comment-id"
indentLevel={1}
parentAuthorName="ParentAuthor"
showEditedMarker={false}
username="Marvin"
/>
</withPropsOnChange(HorizontalGutter)>
`;
exports[`renders username and body 1`] = `
<withPropsOnChange(HorizontalGutter)>
<IndentedComment
@@ -136,6 +201,7 @@ exports[`renders username and body 1`] = `
"edited": false,
},
"id": "comment-id",
"parent": null,
"pending": false,
}
}
@@ -154,6 +220,7 @@ exports[`renders username and body 1`] = `
}
id="comment-comment-id"
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
username="Marvin"
/>
@@ -191,6 +258,7 @@ exports[`shows conversation link 1`] = `
"edited": false,
},
"id": "comment-id",
"parent": null,
"pending": false,
}
}
@@ -215,6 +283,7 @@ exports[`shows conversation link 1`] = `
}
id="comment-comment-id"
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
username="Marvin"
/>
src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
+11 -11
View File
@@ -256,7 +256,7 @@ exports[`cancel edit: edit canceled 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -365,7 +365,7 @@ exports[`cancel edit: edit canceled 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -868,7 +868,7 @@ exports[`edit a comment: edit form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -1371,7 +1371,7 @@ exports[`edit a comment: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -1709,7 +1709,7 @@ exports[`edit a comment: render stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -1818,7 +1818,7 @@ exports[`edit a comment: render stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -2156,7 +2156,7 @@ exports[`edit a comment: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -2274,7 +2274,7 @@ exports[`edit a comment: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -2612,7 +2612,7 @@ exports[`shows expiry message: edit form closed 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -2721,7 +2721,7 @@ exports[`shows expiry message: edit form closed 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -3201,7 +3201,7 @@ exports[`shows expiry message: edit time expired 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
+5 -5
View File
@@ -195,7 +195,7 @@ exports[`loads more comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -288,7 +288,7 @@ exports[`loads more comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -381,7 +381,7 @@ exports[`loads more comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-2"
>
<div
@@ -658,7 +658,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -751,7 +751,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
+8 -8
View File
@@ -144,7 +144,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -254,7 +254,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-2"
>
<div
@@ -362,7 +362,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-replies"
>
<div
@@ -465,7 +465,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-3"
>
<div
@@ -558,7 +558,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-4"
>
<div
@@ -837,7 +837,7 @@ exports[`show all comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-replies"
>
<div
@@ -934,7 +934,7 @@ exports[`show all comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-3"
>
<div
@@ -1027,7 +1027,7 @@ exports[`show all comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-4"
>
<div
src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+1 -1
View File
@@ -305,7 +305,7 @@ exports[`show all comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
src/core/client/stream/test/comments/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
+4 -4
View File
@@ -234,7 +234,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -465,7 +465,7 @@ exports[`views pervious comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -575,7 +575,7 @@ exports[`views pervious comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-2"
>
<div
@@ -683,7 +683,7 @@ exports[`views pervious comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
+8 -8
View File
@@ -250,7 +250,7 @@ exports[`post a comment: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-uuid-0"
>
<div
@@ -359,7 +359,7 @@ exports[`post a comment: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -452,7 +452,7 @@ exports[`post a comment: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -790,7 +790,7 @@ exports[`post a comment: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-x"
>
<div
@@ -883,7 +883,7 @@ exports[`post a comment: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -976,7 +976,7 @@ exports[`post a comment: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -1314,7 +1314,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -1407,7 +1407,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
+26 -26
View File
@@ -256,7 +256,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies"
>
<div
@@ -353,7 +353,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-1"
>
<div
@@ -450,7 +450,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-2"
>
<div
@@ -547,7 +547,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-3"
>
<div
@@ -644,7 +644,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-4"
>
<div
@@ -741,7 +741,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
@@ -1232,7 +1232,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies"
>
<div
@@ -1329,7 +1329,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-1"
>
<div
@@ -1426,7 +1426,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-2"
>
<div
@@ -1523,7 +1523,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-3"
>
<div
@@ -1620,7 +1620,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-4"
>
<div
@@ -1717,7 +1717,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
@@ -1951,7 +1951,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-uuid-0"
>
<div
@@ -2301,7 +2301,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies"
>
<div
@@ -2398,7 +2398,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-1"
>
<div
@@ -2495,7 +2495,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-2"
>
<div
@@ -2592,7 +2592,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-3"
>
<div
@@ -2689,7 +2689,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-4"
>
<div
@@ -2786,7 +2786,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
@@ -2899,7 +2899,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-x"
>
<div
@@ -3233,7 +3233,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies"
>
<div
@@ -3330,7 +3330,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-1"
>
<div
@@ -3427,7 +3427,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-2"
>
<div
@@ -3524,7 +3524,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-3"
>
<div
@@ -3621,7 +3621,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-4"
>
<div
@@ -3718,7 +3718,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
+10 -10
View File
@@ -256,7 +256,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -476,7 +476,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -814,7 +814,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -1032,7 +1032,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-uuid-0"
>
<div
@@ -1143,7 +1143,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -1481,7 +1481,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -1578,7 +1578,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-x"
>
<div
@@ -1673,7 +1673,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -2011,7 +2011,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -2104,7 +2104,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
+6 -6
View File
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -288,7 +288,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deep-replies"
>
<div
@@ -385,7 +385,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-replies"
>
<div
@@ -482,7 +482,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-3"
>
<div
@@ -575,7 +575,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-4"
>
<div
@@ -670,7 +670,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-5"
>
<div
src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
+2 -2
View File
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -288,7 +288,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
+5 -5
View File
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -292,7 +292,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -595,7 +595,7 @@ exports[`show all replies 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -692,7 +692,7 @@ exports[`show all replies 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -785,7 +785,7 @@ exports[`show all replies 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-2"
>
<div
src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
+7 -7
View File
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies"
>
<div
@@ -292,7 +292,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-1"
>
<div
@@ -389,7 +389,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-2"
>
<div
@@ -486,7 +486,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-3"
>
<div
@@ -583,7 +583,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-4"
>
<div
@@ -680,7 +680,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
@@ -908,7 +908,7 @@ exports[`shows conversation 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
src/core/client/ui/components/Typography/Typography.css
+4
View File
@@ -19,6 +19,10 @@
composes: heading4 from "talk-ui/shared/typography.css";
}
.heading5 {
composes: heading5 from "talk-ui/shared/typography.css";
}
.bodyCopy {
composes: bodyCopy from "talk-ui/shared/typography.css";
}
src/core/client/ui/components/Typography/Typography.tsx
+2
View File
@@ -12,6 +12,7 @@ type Variant =
| "heading2"
| "heading3"
| "heading4"
| "heading5"
| "bodyCopy"
| "bodyCopyBold"
| "inputLabel"
@@ -142,6 +143,7 @@ Typography.defaultProps = {
heading2: "h1",
heading3: "h1",
heading4: "h1",
heading5: "h1",
bodyCopy: "p",
bodyCopyBold: "p",
timestamp: "span",
src/core/client/ui/shared/typography.css
+8
View File
@@ -91,6 +91,14 @@
letter-spacing: calc(0.2em / 16);
color: var(--palette-text-primary);
}
.heading5 {
font-size: calc(14rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: var(--font-family-serif);
line-height: calc(16em / 16);
letter-spacing: calc(0.2em / 16);
color: var(--palette-text-primary);
}
.bodyCopy {
font-size: calc(16rem / var(--rem-base));
src/locales/en-US/stream.ftl
+1
View File
@@ -84,6 +84,7 @@ comments-conversationThread-showHiddenComments =
comments-permalinkView-currentViewing = You are currently viewing a
comments-permalinkView-singleConversation = SINGLE CONVERSATION
comments-inReplyTo = In reply to <username></username>
## Profile Tab
profile-historyComment-viewConversation = View Conversation