Merge client into next (#1709)

* Merge client
* Add linting script
* Rename serve to start:development
* Move error harmonization and handling to network layer
* Show Comment Stream
* Added initial test

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

@@ -0,0 +1,78 @@
+.root {
+  composes: button from "talk-ui/shared/typography.css";
+  padding: 5px 20px;
+  border-radius: $round-corners;
+  background-color: transparent;
+  /* TODO: hover styles for the default button */
+}
+
+.fullWidth {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.primary {
+  background-color: $palette-primary-main;
+  color: #fff;
+
+  &:hover {
+    background-color: $palette-primary-light;
+  }
+
+  &:active {
+    background-color: $palette-primary-lighter;
+  }
+
+  &.invert {
+    background-color: transparent;
+    border: 1px solid $palette-primary-main;
+    color: $palette-primary-main;
+
+    &:hover {
+      border-color: $palette-primary-light;
+      color: $palette-primary-light;
+    }
+
+    &:active {
+      border-color: $palette-primary-lighter;
+      color: $palette-primary-lighter;
+    }
+  }
+}
+
+.secondary {
+  background-color: $palette-secondary-main;
+  color: #fff;
+
+  &:hover {
+    background-color: $palette-secondary-light;
+  }
+
+  &:active {
+    background-color: $palette-secondary-lighter;
+  }
+
+  &.invert {
+    background-color: transparent;
+    border: 1px solid $palette-secondary-main;
+    color: $palette-secondary-main;
+
+    &:hover {
+      border-color: $palette-secondary-light;
+      color: $palette-secondary-light;
+    }
+
+    &:active {
+      border-color: $palette-secondary-lighter;
+      color: $palette-secondary-lighter;
+    }
+  }
+}
+
+/**
+ * This seems to be the best way to target modern touch device browsers.
+ */
+@media (-moz-touch-enabled: 1), (pointer:coarse) {
+  /* TODO: Remove hover styles */
+}

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

@@ -0,0 +1,20 @@
+---
+name: Button
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import Button from './Button'
+
+# Button
+
+## Basic usage
+<Playground>
+  <Button style={{marginRight: "10px"}}>Push Me</Button>
+  <Button style={{marginRight: "10px"}} anchor>I'm an Anchor Tag</Button>
+  <Button style={{marginRight: "10px"}} primary>Primary</Button>
+  <Button style={{marginRight: "10px"}} secondary>Secondary</Button>
+  <Button style={{marginTop: "10px"}} primary fullWidth>Full Width</Button>
+  <Button style={{marginTop: "10px"}} primary invert fullWidth>Full Width Invert</Button>
+</Playground>
+

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

@@ -0,0 +1,64 @@
+import cn from "classnames";
+import { pick } from "lodash";
+import React, { ButtonHTMLAttributes } from "react";
+
+import { withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import BaseButton, { BaseButtonProps } from "../BaseButton";
+import * as styles from "./Button.css";
+
+// This should extend from BaseButton instead but we can't because of this bug
+// TODO: add bug link.
+interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles & Partial<BaseButtonProps["classes"]>;
+
+  /** If set renders a full width button */
+  fullWidth?: boolean;
+
+  /** If set renders a button with inverted borders */
+  invert?: boolean;
+
+  /** If set renders a button with primary colors */
+  primary?: boolean;
+
+  /** If set renders a button with secondary colors */
+  secondary?: boolean;
+}
+
+class Button extends React.Component<InnerProps> {
+  public render() {
+    const {
+      classes,
+      className,
+      fullWidth,
+      invert,
+      primary,
+      secondary,
+      ...rest
+    } = this.props;
+
+    const rootClassName = cn(classes.root, className, {
+      [classes.invert]: invert,
+      [classes.fullWidth]: fullWidth,
+      [classes.primary]: primary,
+      [classes.secondary]: secondary,
+    });
+
+    return (
+      <BaseButton
+        className={rootClassName}
+        classes={pick(classes, "keyboardFocus")}
+        {...rest}
+      />
+    );
+  }
+}
+
+const enhanced = withStyles(styles)(Button);
+export type ButtonProps = PropTypesOf<typeof enhanced>;
+export default enhanced;

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

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