From e1dc50a494f3c36de9b2a037489c122391963469 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 17 Aug 2018 09:18:02 -0300
Subject: [PATCH] Updated docs

---
 src/docs/forms.mdx | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx
index 547d33701..2fe5dc191 100644
--- a/src/docs/forms.mdx
+++ b/src/docs/forms.mdx
@@ -10,9 +10,7 @@ Let's build some forms! We will use the following compoenents `InputLabel`, `Typ
 ### Examples
 
 import { Playground, PropsTable } from 'docz'
-import { InputLabel, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'
-
-# InputLabel
+import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'
 
 ## Simple Form
 <Playground>
@@ -57,13 +55,46 @@ import { InputLabel, ValidationMessage, TextField, InputDescription, Flex, Butto
     </FormField>
 
     <FormField>
-      <InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
+      <InputLabel defaultValue="something.com">Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
       <TextField/>
       <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
     </FormField>
 
 
+    <FormField>
+      <InputLabel>Password</InputLabel>
+      <InputDescription>Must be at least 8 characters</InputDescription>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel>Confirm Password</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
+  </Flex>
+</Playground>
+
+## Simple Form with CallOut
+
+<Playground>
+  <Flex itemGutter direction="column">
+    <Typography variant="heading1">Sign up to join the conversation</Typography>
+    <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
+    <FormField>
+      <InputLabel>Email Address</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel defaultValue="something.com">Username</InputLabel>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
+      <TextField/>
+    </FormField>
+
+
     <FormField>
       <InputLabel>Password</InputLabel>
       <InputDescription>Must be at least 8 characters</InputDescription>