Rename Timestamp to RelativeTime

src/core/client/ui/components/RelativeTime/RelativeTime.css

@@ -0,0 +1,4 @@
+.root {
+  composes: body1 from "talk-ui/shared/typography.css";
+  background-color: transparent;
+}

src/core/client/ui/components/RelativeTime/RelativeTime.mdx

@@ -0,0 +1,17 @@
+---
+name: RelativeTime
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import RelativeTime from './RelativeTime'
+
+# RelativeTime
+
+Renders relative time until given `date`.
+
+## Basic usage
+<Playground>
+  <RelativeTime date="2018-07-04T12:14"
+    formatter={(value, unit, suffix, timestamp) => "".concat(value, " ", unit, " ", suffix)} />
+</Playground>

src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+import UIContext from "../UIContext";
+import RelativeTime from "./RelativeTime";
+
+it("uses default formatter", () => {
+  const props = {
+    date: new Date("December 17, 2108 03:24:00").toISOString(),
+  };
+  const tree = create(<RelativeTime {...props} />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it("uses formatter from context", () => {
+  const context: any = {
+    timeagoFormatter: () => "My Context Formatter",
+  };
+  const props = {
+    date: new Date("December 17, 2108 03:24:00").toISOString(),
+  };
+  const tree = create(
+    <UIContext.Provider value={context}>
+      <RelativeTime {...props} />
+    </UIContext.Provider>
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it("uses formatter from props", () => {
+  const props = {
+    date: new Date("December 17, 2108 03:24:00").toISOString(),
+    formatter: () => "My Props Formatter",
+  };
+  const tree = create(<RelativeTime {...props} />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/core/client/ui/components/RelativeTime/RelativeTime.tsx

@@ -0,0 +1,42 @@
+import cn from "classnames";
+import React from "react";
+import TimeAgo, { Formatter } from "react-timeago";
+
+import { UIContext } from "talk-ui/components";
+import { withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import * as styles from "./RelativeTime.css";
+
+interface InnerProps {
+  date: string;
+  live?: boolean;
+  classes: typeof styles;
+  className?: string;
+  formatter?: Formatter;
+}
+
+const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
+  new Date(timestamp).toISOString();
+
+class RelativeTime extends React.Component<InnerProps> {
+  public render() {
+    const { date, classes, live, className, formatter } = this.props;
+    return (
+      <UIContext.Consumer>
+        {({ timeagoFormatter }) => (
+          <TimeAgo
+            date={date}
+            className={cn(className, classes.root)}
+            live={live}
+            formatter={timeagoFormatter || formatter || defaultFormatter}
+          />
+        )}
+      </UIContext.Consumer>
+    );
+  }
+}
+
+const enhanced = withStyles(styles)(RelativeTime);
+export type RelativeTimeProps = PropTypesOf<typeof enhanced>;
+export default enhanced;

src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`uses default formatter 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2108-12-17T06:24:00.000Z"
+  title="2108-12-17T06:24:00.000Z"
+>
+  2108-12-17T06:24:00.000Z
+</time>
+`;
+
+exports[`uses formatter from context 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2108-12-17T06:24:00.000Z"
+  title="2108-12-17T06:24:00.000Z"
+>
+  My Context Formatter
+</time>
+`;
+
+exports[`uses formatter from props 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2108-12-17T06:24:00.000Z"
+  title="2108-12-17T06:24:00.000Z"
+>
+  My Context Formatter
+</time>
+`;

src/core/client/ui/components/RelativeTime/index.ts

@@ -0,0 +1,2 @@
+export * from "./RelativeTime";
+export { default } from "./RelativeTime";