Adding TextField

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

@@ -0,0 +1,27 @@
+.root {
+  composes: textField from "talk-ui/shared/typography.css";
+  position: relative;
+  display: inline-flex;
+  padding: 7px 10px;
+  box-sizing: border-box;
+  border-radius: 1px;
+}
+
+.colorRegular {
+  backgroun-color: var(--palette-common-white);
+  color: var(--palette-common-black);
+  border: 1px solid var(--palette-grey-light);
+}
+
+.colorError {
+  background-color: var(--palette-common-white);
+  border-color: var(--palette-error-main);
+  border: 2px solid #FA4643;
+}
+
+.fullWidth {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+

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

@@ -0,0 +1,19 @@
+---
+name: TextField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import TextField from './TextField.tsx'
+import Flex from '../Flex'
+
+## Basic Use
+<Playground>
+  <Flex itemGutter direction="column">
+    <TextField defaultValue="This is an input field" />
+    <TextField color="error" defaultValue="A TextField with an error" />
+    <TextField color="error" defaultValue="A TextField with an error" fullWidth/>
+  </Flex>
+</Playground>
+
+

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

@@ -0,0 +1,15 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import TextField from "./TextField";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof TextField> = {
+    className: "custom",
+    defaultValue: "Hello World",
+  };
+  const renderer = TestRenderer.create(<TextField {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});

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

@@ -0,0 +1,56 @@
+import cn from "classnames";
+import React from "react";
+import { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./TextField.css";
+
+export interface TextFieldProps {
+  /**
+   * The content value of the component.
+   */
+  defaultValue?: string;
+  /**
+   * The content value of the component.
+   */
+  value?: string;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /**
+   * Color of the TextField
+   */
+  color?: "regular" | "error";
+  /*
+  * If set renders a full width button
+  */
+  fullWidth?: boolean;
+}
+
+const TextField: StatelessComponent<TextFieldProps> = props => {
+  const { className, classes, color, fullWidth, value, ...rest } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.colorRegular]: color === "regular",
+      [classes.colorError]: color === "error",
+      [classes.fullWidth]: fullWidth,
+    },
+    className
+  );
+
+  return <input className={rootClassName} value={value} {...rest} />;
+};
+
+TextField.defaultProps = {
+  color: "regular",
+  fullWidth: false,
+};
+
+const enhanced = withStyles(styles)(TextField);
+export default enhanced;

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

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<input
+  className="TextField-root TextField-colorRegular custom"
+  defaultValue="Hello World"
+/>
+`;

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

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

src/core/client/ui/shared/typography.css

@@ -131,7 +131,16 @@
   color: var(--palette-common-black);
   font-family: var(--font-family);
   font-weight: var(--font-weight-medium);
-  font-size: 16px;
+  font-size: calc(16rem / var(--rem-base));
   line-height: normal;
   letter-spacing: calc(0.2em / 16);
 }
+
+.textField {
+  font-size: calc(16rem / var(--rem-base));
+  font-weight: var(--font-weight-regular);
+  font-family: var(--font-family);
+  line-height: calc(18em / 16);
+  letter-spacing: calc(0.2em / 16);
+  color: var(--palette-text-primary);
+}