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

[CORL 581] toggleable timestamp (#2561)

Browse Source 
* toggle between relative and absolute timestamps

* make one common timestamp component

* remove unused timestamp component from /admin
This commit is contained in:
Tessa Thornton
2019-09-17 17:11:52 -04:00
committed by GitHub
parent 24a27ca958
commit 867f0993cc
43 changed files with 1175 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/admin/components/ModerateCard/ModerateCard.css
+4
View File
@@ -156,3 +156,7 @@
.deleted {
background: var(--palette-grey-lightest);
}
.timestamp {
color: var(--palette-grey-lighter);
}
src/core/client/admin/components/ModerateCard/ModerateCard.tsx
+2 -2
View File
@@ -9,6 +9,7 @@ import {
Flex,
HorizontalGutter,
TextLink,
Timestamp,
Typography,
} from "coral-ui/components";
@@ -18,7 +19,6 @@ import FeatureButton from "./FeatureButton";
import InReplyTo from "./InReplyTo";
import MarkersContainer from "./MarkersContainer";
import RejectButton from "./RejectButton";
import Timestamp from "./Timestamp";
import Username from "./Username";
import styles from "./ModerateCard.css";
@@ -130,7 +130,7 @@ const ModerateCard: FunctionComponent<Props> = ({
<Username>{username}</Username>
</BaseButton>
)}
<Timestamp>{createdAt}</Timestamp>
<Timestamp className={styles.timestamp}>{createdAt}</Timestamp>
<FeatureButton
featured={featured}
onClick={onFeature}
src/core/client/admin/components/ModerateCard/Timestamp.css
-4
View File
@@ -1,4 +0,0 @@
.root {
composes: timestamp from "coral-ui/shared/typography.css";
color: var(--palette-grey-lighter);
}
src/core/client/admin/components/ModerateCard/Timestamp.tsx
-15
View File
@@ -1,15 +0,0 @@
import React, { FunctionComponent } from "react";
import { RelativeTime } from "coral-ui/components";
import styles from "./Timestamp.css";
export interface TimestampProps {
children: string;
}
const Timestamp: FunctionComponent<TimestampProps> = props => (
<RelativeTime className={styles.root} date={props.children} />
);
export default Timestamp;
src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
+28 -7
View File
@@ -23,7 +23,10 @@ exports[`renders approved correctly 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -135,7 +138,10 @@ exports[`renders correctly 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -247,7 +253,10 @@ exports[`renders dangling correctly 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -359,7 +368,10 @@ exports[`renders rejected correctly 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -471,7 +483,10 @@ exports[`renders reply correctly 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -593,7 +608,10 @@ exports[`renders story info 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -734,7 +752,10 @@ exports[`renders tombstoned when comment is deleted 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
src/core/client/admin/components/ModerateCard/__snapshots__/Timestamp.spec.tsx.snap
-8
View File
@@ -1,8 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
className="Timestamp-root"
date="1995-12-17T03:24:00.000Z"
/>
`;
src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
+119 -42
View File
@@ -46,13 +46,24 @@ exports[`approves comment in reported queue: dangling 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -274,13 +285,24 @@ exports[`rejects comment in reported queue: dangling 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -499,13 +521,24 @@ exports[`renders reported queue with comments 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -711,13 +744,24 @@ exports[`renders reported queue with comments 1`] = `
Ngoc
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -939,13 +983,24 @@ exports[`renders reported queue with comments 2`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -1151,13 +1206,24 @@ exports[`renders reported queue with comments 2`] = `
Ngoc
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -1369,13 +1435,24 @@ exports[`renders reported queue with comments and load more 1`] = `
Max
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
+68 -24
View File
@@ -46,13 +46,24 @@ exports[`approves comment in rejected queue: dangling 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -271,13 +282,24 @@ exports[`renders rejected queue with comments 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -483,13 +505,24 @@ exports[`renders rejected queue with comments 1`] = `
Ngoc
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -701,13 +734,24 @@ exports[`renders rejected queue with comments and load more 1`] = `
Max
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
+51 -18
View File
@@ -33,13 +33,24 @@ exports[`approves single comment 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -227,13 +238,24 @@ exports[`rejects single comment 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -456,13 +478,24 @@ exports[`renders single comment view 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
src/core/client/stream/common/Timestamp/Timestamp.spec.tsx
-15
View File
@@ -1,15 +0,0 @@
import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { PropTypesOf } from "coral-framework/types";
import Timestamp from "./Timestamp";
it("renders correctly", () => {
const props: PropTypesOf<typeof Timestamp> = {
children: "1995-12-17T03:24:00.000Z",
};
const renderer = createRenderer();
renderer.render(<Timestamp {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
src/core/client/stream/common/Timestamp/Timestamp.tsx
-20
View File
@@ -1,20 +0,0 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { RelativeTime } from "coral-ui/components";
import styles from "./Timestamp.css";
export interface TimestampProps {
className?: string;
children: string;
}
const Timestamp: FunctionComponent<TimestampProps> = props => (
<RelativeTime
className={cn(styles.root, props.className)}
date={props.children}
/>
);
export default Timestamp;
src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap
-8
View File
@@ -1,8 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
className="Timestamp-root"
date="1995-12-17T03:24:00.000Z"
/>
`;
src/core/client/stream/tabs/Comments/Comment/Comment.tsx
+1 -2
View File
@@ -3,8 +3,7 @@ import React, { FunctionComponent } from "react";
import CLASSES from "coral-stream/classes";
import HTMLContent from "coral-stream/common/HTMLContent";
import Timestamp from "coral-stream/common/Timestamp";
import { Flex, HorizontalGutter } from "coral-ui/components";
import { Flex, HorizontalGutter, Timestamp } from "coral-ui/components";
import EditedMarker from "./EditedMarker";
import InReplyTo from "./InReplyTo";
src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx
+1 -1
View File
@@ -6,7 +6,6 @@ import { Field, Form } from "react-final-form";
import { OnSubmit } from "coral-framework/lib/form";
import CLASSES from "coral-stream/classes";
import Timestamp from "coral-stream/common/Timestamp";
import ValidationMessage from "coral-stream/common/ValidationMessage";
import {
AriaInfo,
@@ -17,6 +16,7 @@ import {
Message,
MessageIcon,
RelativeTime,
Timestamp,
} from "coral-ui/components";
import { cleanupRTEEmptyHTML, getCommentBodyValidators } from "../../helpers";
src/core/client/stream/tabs/Comments/Comment/RootParent.tsx
+1 -2
View File
@@ -1,8 +1,7 @@
import React, { FunctionComponent } from "react";
import CLASSES from "coral-stream/classes";
import Timestamp from "coral-stream/common/Timestamp";
import { Flex } from "coral-ui/components";
import { Flex, Timestamp } from "coral-ui/components";
import TopBarLeft from "./TopBarLeft";
import Username from "./Username";
src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap
+1
View File
@@ -26,6 +26,7 @@ exports[`renders username and body 1`] = `
>
<Timestamp
className="coral coral-timestamp coral-comment-timestamp"
toggleAbsolute={true}
>
1995-12-17T03:24:00.000Z
</Timestamp>
src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx
+1 -2
View File
@@ -12,12 +12,11 @@ import { FeaturedCommentContainer_story as StoryData } from "coral-stream/__gene
import { FeaturedCommentContainer_viewer as ViewerData } from "coral-stream/__generated__/FeaturedCommentContainer_viewer.graphql";
import CLASSES from "coral-stream/classes";
import HTMLContent from "coral-stream/common/HTMLContent";
import Timestamp from "coral-stream/common/Timestamp";
import {
SetCommentIDMutation,
withSetCommentIDMutation,
} from "coral-stream/mutations";
import { Box, Flex, Icon, TextLink } from "coral-ui/components";
import { Box, Flex, Icon, TextLink, Timestamp } from "coral-ui/components";
import { UserTagsContainer } from "../../Comment";
import ReactionButtonContainer from "../../Comment/ReactionButton";
src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx
+1 -1
View File
@@ -4,13 +4,13 @@ import React, { FunctionComponent } from "react";
import CLASSES from "coral-stream/classes";
import HTMLContent from "coral-stream/common/HTMLContent";
import Timestamp from "coral-stream/common/Timestamp";
import InReplyTo from "coral-stream/tabs/Comments/Comment/InReplyTo";
import {
Flex,
HorizontalGutter,
Icon,
TextLink,
Timestamp,
Typography,
} from "coral-ui/components";
src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/HistoryComment.spec.tsx.snap
+1
View File
@@ -27,6 +27,7 @@ exports[`renders correctly 1`] = `
<div>
<Timestamp
className="coral coral-myComment-timestamp"
toggleAbsolute={true}
>
2018-07-06T18:24:00.000Z
</Timestamp>
src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
+34 -12
View File
@@ -343,13 +343,24 @@ exports[`renders comment stream 1`] = `
<span
className="Box-root Box-ml-1"
/>
<time
className="RelativeTime-root Timestamp-root Box-root Box-ml-2"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text Box-root Box-ml-2"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
<div
className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
@@ -445,13 +456,24 @@ exports[`renders comment stream 1`] = `
<span
className="Box-root Box-ml-1"
/>
<time
className="RelativeTime-root Timestamp-root Box-root Box-ml-2"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text Box-root Box-ml-2"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
<div
className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
+85 -30
View File
@@ -168,13 +168,24 @@ exports[`renders permalink view 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -385,13 +396,24 @@ exports[`renders permalink view 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -600,13 +622,24 @@ exports[`renders permalink view 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -811,13 +844,24 @@ exports[`renders permalink view 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -1038,13 +1082,24 @@ exports[`renders permalink view 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
+85 -30
View File
@@ -52,13 +52,24 @@ exports[`renders conversation thread 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-rootParent-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-rootParent-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
</div>
@@ -198,13 +209,24 @@ exports[`renders conversation thread 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -428,13 +450,24 @@ exports[`shows more of this conversation 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -650,13 +683,24 @@ exports[`shows more of this conversation 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -865,13 +909,24 @@ exports[`shows more of this conversation 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
+136 -48
View File
@@ -65,13 +65,24 @@ exports[`cancel edit 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -256,13 +267,24 @@ exports[`edit a comment and handle server error: edit form 1`] = `
Markus
</span>
</div>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div
@@ -433,13 +455,24 @@ exports[`edit a comment: edit form 1`] = `
Markus
</span>
</div>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div
@@ -610,13 +643,24 @@ exports[`edit a comment: optimistic response 1`] = `
Markus
</span>
</div>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div
@@ -829,13 +873,24 @@ exports[`edit a comment: render comment with edit button 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -1062,13 +1117,24 @@ exports[`edit a comment: server response 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<div
className="EditedMarker-root coral coral-comment-edited"
>
@@ -1304,13 +1370,24 @@ exports[`shows expiry message: edit form closed 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -1495,13 +1572,24 @@ exports[`shows expiry message: edit time expired 1`] = `
Markus
</span>
</div>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div
src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
+34 -12
View File
@@ -75,13 +75,24 @@ exports[`renders comment stream with load more button 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -275,13 +286,24 @@ exports[`renders comment stream with load more button 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
+17 -6
View File
@@ -65,13 +65,24 @@ exports[`post a comment: optimistic response 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
+136 -48
View File
@@ -65,13 +65,24 @@ exports[`post a reply: open reply form 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -497,13 +508,24 @@ exports[`post a reply: optimistic response 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -750,13 +772,24 @@ exports[`renders comment stream 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -974,13 +1007,24 @@ exports[`renders comment stream 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -1225,13 +1269,24 @@ exports[`renders comment stream 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -1476,13 +1531,24 @@ exports[`renders comment stream 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -1727,13 +1793,24 @@ exports[`renders comment stream 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -1978,13 +2055,24 @@ exports[`renders comment stream 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
+34 -12
View File
@@ -65,13 +65,24 @@ exports[`post a reply: open reply form 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -453,13 +464,24 @@ exports[`post a reply: optimistic response 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+34 -12
View File
@@ -342,13 +342,24 @@ exports[`renders comment stream with community guidelines 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -542,13 +553,24 @@ exports[`renders comment stream with community guidelines 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
+68 -24
View File
@@ -74,13 +74,24 @@ exports[`renders reply list 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -306,13 +317,24 @@ exports[`renders reply list 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -533,13 +555,24 @@ exports[`renders reply list 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -762,13 +795,24 @@ exports[`renders reply list 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
+34 -12
View File
@@ -358,13 +358,24 @@ exports[`renders comment stream 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -563,13 +574,24 @@ exports[`renders comment stream 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
+17 -6
View File
@@ -74,13 +74,24 @@ exports[`renders comment stream 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
+17 -6
View File
@@ -65,13 +65,24 @@ exports[`renders deepest comment with link 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
+34 -12
View File
@@ -75,13 +75,24 @@ exports[`renders app with comment stream 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
@@ -275,13 +286,24 @@ exports[`renders app with comment stream 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
>
<time
className="RelativeTime-root Timestamp-root coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div>
src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
+34 -12
View File
@@ -22,13 +22,24 @@ exports[`renders profile 1`] = `
</h1>
</div>
<div>
<time
className="RelativeTime-root Timestamp-root coral coral-myComment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-myComment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<div
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
@@ -72,13 +83,24 @@ exports[`renders profile 1`] = `
</h1>
</div>
<div>
<time
className="RelativeTime-root Timestamp-root coral coral-myComment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text coral coral-myComment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<div
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
src/core/client/ui/components/AbsoluteTime/AbsoluteTime.css
+2
View File
@@ -0,0 +1,2 @@
.root {
}
src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx
+33
View File
@@ -0,0 +1,33 @@
import { useCoralContext } from "coral-framework/lib/bootstrap";
import { PropTypesOf } from "coral-ui/types";
import React, { FunctionComponent, useMemo } from "react";
import { Typography } from "coral-ui/components";
interface Props {
date: string;
className?: string;
}
const AbsoluteTime: FunctionComponent<Props> = ({ date, className }) => {
const { locales } = useCoralContext();
const formatted = useMemo(() => {
const formatter = new Intl.DateTimeFormat(locales, {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "2-digit",
});
return formatter.format(new Date(date));
}, [locales, date]);
return (
<Typography className={className} variant="timestamp">
{formatted}
</Typography>
);
};
export default AbsoluteTime;
export type AbsoluteTimeProps = PropTypesOf<typeof AbsoluteTime>;
src/core/client/ui/components/AbsoluteTime/index.ts
+1
View File
@@ -0,0 +1 @@
export { default, AbsoluteTimeProps } from "./AbsoluteTime";
src/core/client/stream/common/Timestamp/Timestamp.css → src/core/client/ui/components/Timestamp/Timestamp.css
+4
View File
@@ -1,3 +1,7 @@
.root {
cursor: default;
}
.text {
composes: timestamp from "coral-ui/shared/typography.css";
}
src/core/client/admin/components/ModerateCard/Timestamp.spec.tsx → src/core/client/ui/components/Timestamp/Timestamp.spec.tsx
View File
src/core/client/ui/components/Timestamp/Timestamp.tsx
+42
View File
@@ -0,0 +1,42 @@
import cn from "classnames";
import React, { FunctionComponent, useCallback, useState } from "react";
import { AbsoluteTime, BaseButton, RelativeTime } from "coral-ui/components";
import styles from "./Timestamp.css";
export interface TimestampProps {
className?: string;
children: string;
toggleAbsolute?: boolean;
}
const Timestamp: FunctionComponent<TimestampProps> = props => {
const [showAbsolute, setShowAbsolute] = useState(false);
const toggleShowAbsolute = useCallback(() => {
if (props.toggleAbsolute) {
setShowAbsolute(!showAbsolute);
}
}, [showAbsolute, setShowAbsolute]);
return (
<BaseButton className={styles.root} onClick={toggleShowAbsolute}>
{showAbsolute ? (
<AbsoluteTime
date={props.children}
className={cn(styles.text, props.className)}
/>
) : (
<RelativeTime
className={cn(styles.text, props.className)}
date={props.children}
/>
)}
</BaseButton>
);
};
Timestamp.defaultProps = {
toggleAbsolute: true,
};
export default Timestamp;
src/core/client/ui/components/Timestamp/__snapshots__/Timestamp.spec.tsx.snap
+13
View File
@@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
className="Timestamp-root"
onClick={[Function]}
>
<ForwardRef(forwardRef)
className="Timestamp-text"
date="1995-12-17T03:24:00.000Z"
/>
</ForwardRef(forwardRef)>
`;
src/core/client/stream/common/Timestamp/index.ts → src/core/client/ui/components/Timestamp/index.ts
View File
src/core/client/ui/components/index.ts
+2
View File
@@ -1,3 +1,4 @@
export { default as AbsoluteTime } from "./AbsoluteTime";
export { default as BaseButton } from "./BaseButton";
export { default as Button } from "./Button";
export { default as Backdrop } from "./Backdrop";
@@ -27,6 +28,7 @@ export { Tab, TabBar, TabContent, TabPane } from "./Tabs";
export { StepBar, Step } from "./Steps";
export { SelectField, Option, OptGroup } from "./SelectField";
export { default as TextLink } from "./TextLink";
export { default as Timestamp } from "./Timestamp";
export { default as CheckBox } from "./CheckBox";
export { default as RadioButton } from "./RadioButton";
export { default as Delay } from "./Delay";