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/BaseButton/BaseButton.css

@@ -0,0 +1,10 @@
+.root {
+  composes: buttonReset from "talk-ui/shared/buttonReset.css";
+}
+
+.keyboardFocus {
+  outline-width: 3px;
+  outline-color: Highlight;
+  outline-color: -webkit-focus-ring-color;
+  outline-style: auto;
+}

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

@@ -0,0 +1,28 @@
+---
+name: BaseButton
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import BaseButton from './BaseButton'
+
+# BaseButton
+
+`BaseButton` strips away browser specific styling and unifies the look of the `button` and the `a` tag.
+It detects a focus that came from the keyboard rather than mouse or touch and styles the button using
+the `className` provided in the `classes.keyboardFocus` property.
+
+When used as a `button` tag the default `type` is set to `button` instead of the standard `submit` in order
+to avoid unintended form submissions.
+
+## Basic usage
+<Playground>
+  <BaseButton>Push Me</BaseButton>
+</Playground>
+
+Instead of an `button` tag, we can render an `a` tag instead:
+
+<Playground>
+  <BaseButton anchor>Push Me</BaseButton>
+</Playground>
+

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

@@ -0,0 +1,61 @@
+import cn from "classnames";
+import React from "react";
+import { ButtonHTMLAttributes, StatelessComponent } from "react";
+
+import { withKeyboardFocus, withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import * as styles from "./BaseButton.css";
+
+interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** If set renders an anchor tag instead */
+  anchor?: boolean;
+
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+
+  /** This is passed by the `withKeyboardFocus` HOC */
+  keyboardFocus: boolean;
+}
+
+/**
+ * A button whose styling is stripped off to a minimum and supports
+ * keyboard focus. It is the base for our other buttons.
+ */
+const BaseButton: StatelessComponent<InnerProps> = ({
+  anchor,
+  className,
+  classes,
+  keyboardFocus,
+  type: typeProp,
+  ...rest
+}) => {
+  let Element = "button";
+  if (anchor) {
+    Element = "a";
+  }
+
+  let type = typeProp;
+  if (anchor && type) {
+    // tslint:disable:next-line: no-console
+    console.warn(
+      "BaseButton used as anchor does not support the `type` property"
+    );
+  } else if (type === undefined) {
+    // Default to button
+    type = "button";
+  }
+
+  const rootClassName = cn(classes.root, className, {
+    [classes.keyboardFocus]: keyboardFocus,
+  });
+
+  return <Element {...rest} className={rootClassName} />;
+};
+
+const enhanced = withStyles(styles)(withKeyboardFocus(BaseButton));
+export type BaseButtonProps = PropTypesOf<typeof enhanced>;
+export default enhanced;

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

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