Implement Timestamp

Merge branch 'next' into timestamp

Fix test and translations

Merge branch 'timestamp' of github.com:coralproject/talk into timestamp

* 'timestamp' of github.com:coralproject/talk:
  Fix test and translations
  Implement Timestamp

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

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

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

@@ -0,0 +1,15 @@
+---
+name: Timestamp
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import Timestamp from './Timestamp'
+
+# Timestamp
+
+## Basic usage
+<Playground>
+  <Timestamp date={`2018-07-04T12:14:14.564Z`} />
+</Playground>
+

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

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

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

@@ -0,0 +1,41 @@
+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 "./Timestamp.css";
+
+interface InnerProps {
+  date: string;
+  live?: boolean;
+  classes: typeof styles;
+  className?: string;
+}
+
+const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
+  new Date(timestamp).toISOString();
+
+class Timestamp extends React.Component<InnerProps> {
+  public render() {
+    const { date, classes, live, className } = this.props;
+    return (
+      <UIContext.Consumer>
+        {({ timeagoFormatter }) => (
+          <TimeAgo
+            date={date}
+            className={cn(className, classes.root)}
+            live={live}
+            formatter={timeagoFormatter || defaultFormatter}
+          />
+        )}
+      </UIContext.Consumer>
+    );
+  }
+}
+
+const enhanced = withStyles(styles)(Timestamp);
+export type TimestampProps = PropTypesOf<typeof enhanced>;
+export default enhanced;

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`uses default formatter 1`] = `
+<time
+  className="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="root"
+  dateTime="2108-12-17T06:24:00.000Z"
+  title="2108-12-17T06:24:00.000Z"
+>
+  My Formatter
+</time>
+`;

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

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

src/core/client/ui/components/UIContext/UIContext.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Formatter } from "react-timeago";
+
+export interface UIContext {
+  timeagoFormatter: Formatter;
+}
+
+const UIContext = React.createContext<UIContext>({} as any);
+
+export default UIContext;

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

@@ -0,0 +1 @@
+export { default } from "./UIContext";

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

@@ -2,3 +2,5 @@ export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
 export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
+export { default as Timestamp } from "./Timestamp";
+export { default as UIContext } from "./UIContext";