Merge pull request #1776 from coralproject/ui-components

[next] UI Components

package-lock.json

@@ -16496,9 +16496,9 @@
       "dev": true
     },
     "popper.js": {
-      "version": "1.14.3",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
-      "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU=",
+      "version": "1.14.4",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.4.tgz",
+      "integrity": "sha1-juwdj/AqWjoVLdQ0FKFce3n9abY=",
       "dev": true
     },
     "portfinder": {

package.json

@@ -174,7 +174,7 @@
     "react-dev-utils": "6.0.0-next.3e165448",
     "react-dom": "^16.4.0",
     "react-final-form": "^3.6.4",
-    "react-popper": "^1.0.0-beta.6",
+    "react-popper": "^1.0.0",
     "react-relay": "github:coralproject/patched#react-relay",
     "react-responsive": "^5.0.0",
     "react-test-renderer": "^16.4.1",

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

@@ -0,0 +1,34 @@
+.root {
+  composes: bodyCopy from "talk-ui/shared/typography.css";
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-unit);
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+}
+
+.colorRegular {
+  background-color: var(--palette-grey-lightest);
+  border-color: var(--palette-grey-light);
+  color: var(--palette-text-primary);
+}
+
+.colorPrimary {
+  background-color: var(--palette-primary-lightest);
+  border-color: var(--palette-primary-light);
+  color: var(--palette-text-primary);
+}
+
+.colorError {
+  background-color: var(--palette-error-lightest);
+  border-color: var(--palette-error-light);
+  color: var(--palette-text-primary);
+}
+
+.fullWidth {
+  display: flex;
+  width: 100%;
+}

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

@@ -0,0 +1,23 @@
+---
+name: CallOut
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import CallOut from './CallOut'
+import Flex from '../Flex'
+
+# CallOut
+
+## Basic Use
+<Playground>
+  <Flex itemGutter direction="column">
+    <CallOut>This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
+    <CallOut color="primary">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
+    <CallOut color="error">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
+    <CallOut color="error">The email address or password you entered is incorrect. Try again</CallOut>
+    <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
+  </Flex>
+</Playground>
+
+

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

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

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

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

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="CallOut-root CallOut-colorError custom"
+>
+  Hello World
+</div>
+`;

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

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

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

@@ -0,0 +1,3 @@
+.root {
+  display: block;
+}

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

@@ -0,0 +1,19 @@
+---
+name: InputLabel
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import InputLabel from './InputLabel.tsx'
+import Flex from '../Flex'
+
+# InputLabel
+
+## Basic Use
+<Playground>
+  <Flex itemGutter direction="column">
+    <InputLabel>Well... Hello there.</InputLabel>
+  </Flex>
+</Playground>
+
+

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

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

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

@@ -0,0 +1,36 @@
+import cn from "classnames";
+import React, { ReactNode } from "react";
+import { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import Typography from "../Typography";
+import * as styles from "./InputLabel.css";
+
+export interface InputLabelProps {
+  /**
+   * The content of the component.
+   */
+  children?: ReactNode;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+}
+
+const InputLabelProps: StatelessComponent<InputLabelProps> = props => {
+  const { className, children, classes, ...rest } = props;
+
+  const rootClassName = cn(classes.root, className);
+
+  return (
+    <Typography className={rootClassName} variant="inputLabel" {...rest}>
+      {children}
+    </Typography>
+  );
+};
+
+const enhanced = withStyles(styles)(InputLabelProps);
+export default enhanced;

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<label
+  className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root custom"
+>
+  Hello
+</label>
+`;

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

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

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

@@ -1,8 +1,24 @@
 .root {
-  composes: textField from "talk-ui/shared/typography.css";
-  background: var(--palette-common-white);
-  border: 1px solid var(--palette-grey-lighter);
+  composes: inputText placeholderPseudo from "talk-ui/shared/typography.css";
+  position: relative;
+  display: block;
+  padding: calc(0.5 * var(--spacing-unit));
   box-sizing: border-box;
   border-radius: var(--round-corners);
-  padding: calc(0.5 * var(--spacing-unit));
+}
+
+.colorRegular {
+  background-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 var(--palette-error-darkest);
+}
+
+.fullWidth {
+  width: 100%;
 }

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

@@ -4,14 +4,17 @@ menu: UI Kit
 ---
 
 import { Playground, PropsTable } from 'docz'
-import TextField from './TextField'
+import TextField from './TextField.tsx'
+import Flex from '../Flex'
 
 # TextField
 
-`TextField`
-
-## Basic usage
+## Basic Use
 <Playground>
-  <TextField value="Hallo Talk" />
+  <Flex itemGutter direction="column">
+    <TextField placeholder="This is a placeholder" />
+    <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

@@ -1,17 +1,80 @@
 import cn from "classnames";
-import React, { InputHTMLAttributes, StatelessComponent } from "react";
-
+import React from "react";
+import { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
 import * as styles from "./TextField.css";
 
-interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
-  classes?: typeof styles;
+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;
+  /**
+   * Placeholder
+   */
+  placeholder?: string;
+  /**
+   * Mark as readonly
+   */
+  readOnly?: boolean;
 }
 
-const TextField: StatelessComponent<TextFieldProps> = ({
-  className,
-  ...rest
-}) => {
-  return <input {...rest} className={cn(styles.root, className)} />;
+const TextField: StatelessComponent<TextFieldProps> = props => {
+  const {
+    className,
+    classes,
+    color,
+    fullWidth,
+    value,
+    placeholder,
+    ...rest
+  } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.colorRegular]: color === "regular",
+      [classes.colorError]: color === "error",
+      [classes.fullWidth]: fullWidth,
+    },
+    className
+  );
+
+  return (
+    <input
+      className={rootClassName}
+      placeholder={placeholder}
+      value={value}
+      {...rest}
+    />
+  );
 };
 
-export default TextField;
+TextField.defaultProps = {
+  color: "regular",
+  fullWidth: false,
+  placeholder: "",
+};
+
+const enhanced = withStyles(styles)(TextField);
+export default enhanced;

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

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

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

@@ -35,6 +35,10 @@
   composes: buttonLarge from "talk-ui/shared/typography.css";
 }
 
+.inputLabel {
+  composes: inputLabel from "talk-ui/shared/typography.css";
+}
+
 .timestamp {
   composes: timestamp from "talk-ui/shared/typography.css";
 }

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

@@ -14,6 +14,7 @@ type Variant =
   | "heading4"
   | "bodyCopy"
   | "bodyCopyBold"
+  | "inputLabel"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -132,6 +133,7 @@ Typography.defaultProps = {
     heading4: "h1",
     bodyCopy: "p",
     bodyCopyBold: "p",
+    inputLabel: "label",
     timestamp: "span",
   },
   noWrap: false,

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

@@ -0,0 +1,27 @@
+.root {
+  composes: alertMessage from "talk-ui/shared/typography.css";
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
+  box-sizing: border-box;
+  border-radius: var(--round-corners);
+  border-left-width: calc(0.5 * var(--spacing-unit));
+  border-left-style: solid;
+}
+
+.colorError {
+  background-color: var(--palette-error-light);
+  border-color: var(--palette-error-darkest);
+  color: var(--palette-common-white);
+}
+
+.fullWidth {
+  display: flex;
+  width: 100%;
+}
+
+.icon {
+  margin-right: var(--spacing-unit);
+}

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

@@ -0,0 +1,20 @@
+---
+name: ValidationMessage
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import ValidationMessage from './ValidationMessage.tsx'
+import Flex from '../Flex'
+
+# ValidationMessage
+
+## Basic Use
+<Playground>
+  <Flex itemGutter direction="column">
+    <ValidationMessage>Invalid characters. Try again</ValidationMessage>
+    <ValidationMessage fullWidth>Account with this email address already exists. Try another email. </ValidationMessage>
+  </Flex>
+</Playground>
+
+

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

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

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

@@ -0,0 +1,54 @@
+import cn from "classnames";
+import React from "react";
+import { ReactNode, StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import Icon from "../Icon";
+import * as styles from "./ValidationMessage.css";
+
+export interface ValidationMessageProps {
+  /**
+   * The content of the component.
+   */
+  children: ReactNode;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /*
+  * If set renders a full width message
+  */
+  fullWidth?: boolean;
+}
+
+const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
+  const { className, classes, fullWidth, children, ...rest } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    classes.colorError,
+    {
+      [classes.fullWidth]: fullWidth,
+    },
+    className
+  );
+
+  return (
+    <div className={rootClassName} {...rest}>
+      <Icon size="sm" className={classes.icon}>
+        warning
+      </Icon>
+      {children}
+    </div>
+  );
+};
+
+ValidationMessage.defaultProps = {
+  fullWidth: false,
+};
+
+const enhanced = withStyles(styles)(ValidationMessage);
+export default enhanced;

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="ValidationMessage-root ValidationMessage-colorError custom"
+>
+  <span
+    className="Icon-root ValidationMessage-icon Icon-sm"
+  >
+    warning
+  </span>
+  Hello World
+</div>
+`;

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

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

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

@@ -3,11 +3,14 @@ export { default as Button } from "./Button";
 export { default as ButtonIcon } from "./Button/ButtonIcon";
 export { default as Typography } from "./Typography";
 export { default as Popover } from "./Popover";
-export { default as TextField } from "./TextField";
 export { default as RelativeTime } from "./RelativeTime";
 export { default as UIContext, UIContextProps } from "./UIContext";
 export { default as Flex } from "./Flex";
 export { default as MatchMedia } from "./MatchMedia";
 export { default as TrapFocus } from "./TrapFocus";
+export { default as ValidationMessage } from "./ValidationMessage";
+export { default as InputLabel } from "./InputLabel";
+export { default as TextField } from "./TextField";
+export { default as CallOut } from "./CallOut";
 export { default as ClickOutside } from "./ClickOutside";
 export { default as Popup } from "./Popup";

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

@@ -59,33 +59,34 @@
 .heading1 {
   font-size: calc(24rem / var(--rem-base));
   font-weight: var(--font-weight-medium);
-  font-family: "Manuale";
+  font-family: var(--font-family-serif);
   line-height: calc(32em / 24);
-  letter-spacing: calc(0.2em / 16);
+  letter-spacing: calc(0.2em / 24);
   color: var(--palette-text-primary);
 }
 
 .heading2 {
   font-size: calc(20rem / var(--rem-base));
   font-weight: var(--font-weight-medium);
-  font-family: "Manuale";
+  font-family: var(--font-family-serif);
   line-height: calc(24em / 20);
+  letter-spacing: calc(0.2em / 20);
   color: var(--palette-text-primary);
 }
 
 .heading3 {
   font-size: calc(18rem / var(--rem-base));
   font-weight: var(--font-weight-medium);
-  font-family: "Manuale";
+  font-family: var(--font-family-serif);
   line-height: calc(20em / 18);
-  letter-spacing: calc(0.2em / 16);
+  letter-spacing: calc(0.2em / 18);
   color: var(--palette-text-primary);
 }
 
 .heading4 {
   font-size: calc(16rem / var(--rem-base));
   font-weight: var(--font-weight-medium);
-  font-family: "Manuale";
+  font-family: var(--font-family-serif);
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
   color: var(--palette-text-primary);
@@ -94,7 +95,7 @@
 .bodyCopy {
   font-size: calc(16rem / var(--rem-base));
   font-weight: var(--font-weight-regular);
-  font-family: "Source Sans Pro";
+  font-family: var(--font-family-sans-serif);
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
   color: var(--palette-text-primary);
@@ -107,36 +108,72 @@
 
 .button {
   color: var(--palette-text-secondary);
-  font-family: "Source Sans Pro";
+  font-family: var(--font-family-sans-serif);
   font-weight: var(--font-weight-medium);
-  font-size: 14px;
-  line-height: calc(18em / 16);
-  letter-spacing: calc(0.57em / 16);
+  font-size: calc(14rem / var(--rem-base));
+  line-height: calc(18em / 14);
+  letter-spacing: calc(0.57em / 14);
 }
 
 .buttonLarge {
   color: var(--palette-text-secondary);
-  font-family: "Source Sans Pro";
+  font-family: var(--font-family-sans-serif);
   font-weight: var(--font-weight-medium);
-  font-size: 16px;
+  font-size: calc(16rem / var(--rem-base));
   line-height: calc(20em / 16);
   letter-spacing: calc(0.57em / 16);
 }
 
 .timestamp {
   color: var(--palette-text-secondary);
-  font-family: "Source Sans Pro";
+  font-family: var(--font-family-sans-serif);
   font-weight: var(--font-weight-medium);
-  font-size: 14px;
-  line-height: calc(18em / 16);
-  letter-spacing: calc(0.2em / 16);
+  font-size: calc(14rem / var(--rem-base));
+  line-height: calc(18em / 14);
+  letter-spacing: 0;
 }
 
-.textField {
+.alertMessage {
   color: var(--palette-common-black);
-  font-family: "Source Sans Pro";
+  font-family: var(--font-family-sans-serif);
+  font-weight: var(--font-weight-medium);
+  font-size: calc(16rem / var(--rem-base));
+  line-height: calc(16em / 16);
+  letter-spacing: calc(-0.1em / 16);
+}
+
+.inputText {
   font-weight: var(--font-weight-regular);
-  font-size: 16px;
+  font-family: var(--font-family-sans-serif);
+  font-size: calc(16rem / var(--rem-base));
   line-height: calc(18em / 16);
-  letter-spacing: calc(0.57em / 16);
+  letter-spacing: calc(0.2em / 16);
+  color: var(--palette-text-primary);
+}
+
+.inputLabel {
+  font-size: calc(18rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-serif);
+  line-height: calc(18em / 18);
+  letter-spacing: calc(0.2em / 18);
+  color: var(--palette-text-primary);
+}
+
+.placeholder {
+  font-family: var(--font-family-sans-serif);
+  font-weight: var(--font-weight-regular);
+  font-size: calc(16rem / var(--rem-base));
+  line-height: calc(20em / 16);
+  letter-spacing: 0;
+  color: var(--palette-grey-lighter);
+}
+
+.placeholderPseudo::placeholder {
+  font-family: var(--font-family-sans-serif);
+  font-weight: var(--font-weight-regular);
+  font-size: calc(16rem / var(--rem-base));
+  line-height: calc(20em / 16);
+  letter-spacing: 0;
+  color: var(--palette-grey-lighter);
 }

src/core/client/ui/theme/variables.ts

@@ -64,8 +64,8 @@ const variables = {
   roundCorners: "2px",
   /* Typography */
   remBase: 16,
-  fontFamily: '"Source Sans Pro"',
-  fontSize: 16,
+  fontFamilySansSerif: '"Source Sans Pro"',
+  fontFamilySerif: '"Manuale"',
   fontWeightLight: 300,
   fontWeightRegular: 400,
   fontWeightMedium: 600,

src/docs/forms.mdx

@@ -0,0 +1,52 @@
+---
+name: Forms
+route: '/forms'
+---
+
+# Forms
+
+Let's build some forms! We will use the following compoenents `InputLabel`, `Typography`, `TextField`, `ValidationMessage`
+
+### Examples
+
+import { Playground, PropsTable } from 'docz'
+import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+
+# InputLabel
+
+## Simple Form
+<Playground>
+  <Flex itemGutter direction="column" style={{width:330}}>
+    <Typography variant="heading1">Sign up to join the conversation</Typography>
+    <InputLabel>Email Address</InputLabel>
+    <TextField fullWidth/>
+    <InputLabel>Username</InputLabel>
+    <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+    <TextField fullWidth/>
+    <InputLabel>Password</InputLabel>
+    <Typography>Must be at least 8 characters</Typography>
+    <TextField fullWidth/>
+    <InputLabel>Confirm Password</InputLabel>
+    <TextField fullWidth/>
+    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
+  </Flex>
+</Playground>
+
+## Simple Form with error
+<Playground>
+  <Flex itemGutter direction="column" style={{width:330}}>
+    <Typography variant="heading1">Sign up to join the conversation</Typography>
+    <InputLabel>Email Address</InputLabel>
+    <TextField fullWidth />
+    <InputLabel>Username</InputLabel>
+    <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+    <TextField defaultValue="something.com" color="error" fullWidth/>
+    <ValidationMessage color="error" fullWidth>Invalid characters. Try again.</ValidationMessage>
+    <InputLabel>Password</InputLabel>
+    <Typography>Must be at least 8 characters</Typography>
+    <TextField fullWidth/>
+    <InputLabel>Confirm Password</InputLabel>
+    <TextField fullWidth/>
+    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
+  </Flex>
+</Playground>