Adding InputDescription Component

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

@@ -1,36 +1,18 @@
 ---
-name: FormField
+name: InputDescription
 menu: UI Kit
 ---
 
 import { Playground, PropsTable } from 'docz'
-import FormField from './FormField'
-import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+import { InputDescription } from '../core/client/ui/components'
 
 # Flex
 
-`FormField` is to be used with Form Components `flexbox`.
-
-## Justify content
-<Playground>
-  <FormField>
-  </FormField>
-</Playground>
+`InputDescription` is to be used with Form Components.
 
 ## Align items
 <Playground>
   <Flex alignItems="center" itemGutter>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled" size="small">Push Me</Button>
-    <Button variant="filled" size="large">Push Me</Button>
-  </Flex>
-</Playground>
-
-## Direction
-<Playground>
-  <Flex direction="column" itemGutter>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled">Push Me</Button>
+    <InputDescription>This is a description</Button>
   </Flex>
 </Playground>

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

@@ -1,43 +1,24 @@
-import cn from "classnames";
-import React, { ReactNode } from "react";
-import { StatelessComponent } from "react";
+import React, { ReactNode, StatelessComponent } from "react";
+import { Typography } from "talk-ui/components";
 
-import { withStyles } from "talk-ui/hocs";
-
-import * as styles from "./FormField.css";
-
-interface InnerProps {
+interface InputDescriptionProps {
   children: ReactNode;
-  classes: typeof styles;
   id?: string;
   className?: string;
-  itemGutter?: boolean | "half";
 }
 
-const FormField: StatelessComponent<InnerProps> = props => {
-  const { classes, className, children, itemGutter, ...rest } = props;
-
-  // TODO (bc): Use flex component once the extra div issue is solved.
+const InputDescription: StatelessComponent<InputDescriptionProps> = props => {
+  const { className, children, ...rest } = props;
   return (
-    <div
-      className={cn(
-        classes.root,
-        {
-          [classes.itemGutter]: itemGutter === true,
-          [classes.halfItemGutter]: itemGutter === "half",
-        },
-        className
-      )}
+    <Typography
+      variant="inputDescription"
+      color="textSecondary"
+      className={className}
       {...rest}
     >
       {children}
-    </div>
+    </Typography>
   );
 };
 
-FormField.defaultProps = {
-  itemGutter: true,
-};
-
-const enhanced = withStyles(styles)(FormField);
-export default enhanced;
+export default InputDescription;

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

@@ -15,3 +15,4 @@ export { default as CallOut } from "./CallOut";
 export { default as ClickOutside } from "./ClickOutside";
 export { default as Popup } from "./Popup";
 export { default as FormField } from "./FormField";
+export { default as InputDescription } from "./InputDescription";