docs(Label): fix pointing docs (#537)

docs/app/Examples/elements/Label/Types/LabelPointing.js

@@ -10,7 +10,7 @@ const LabelPointing = () => (
     <Divider />
 
     <Form.Field>
-      <Label pointing below>Please enter a value</Label>
+      <Label pointing='below'>Please enter a value</Label>
       <input type='text' placeholder='Last Name' />
     </Form.Field>
     <Divider />
@@ -22,8 +22,8 @@ const LabelPointing = () => (
     <Divider />
 
     <Form.Field inline>
-      <input type='password' placeholder='Password' />
       <Label pointing='right'>Your password must be 6 characters or more</Label>
+      <input type='password' placeholder='Password' />
     </Form.Field>
   </Form>
 )

docs/app/Examples/elements/Label/Types/LabelPointingColored.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Divider, Form, Label } from 'stardust'
+
+const LabelPointing = () => (
+  <Form>
+    <Form.Field>
+      <input type='text' placeholder='First name' />
+      <Label basic color='red' pointing>Please enter a value</Label>
+    </Form.Field>
+    <Divider />
+
+    <Form.Field>
+      <Label basic color='red' pointing='below'>Please enter a value</Label>
+      <input type='text' placeholder='Last Name' />
+    </Form.Field>
+    <Divider />
+
+    <Form.Field inline>
+      <input type='text' placeholder='Username' />
+      <Label basic color='red' pointing='left'>That name is taken!</Label>
+    </Form.Field>
+    <Divider />
+
+    <Form.Field inline>
+      <Label basic color='red' pointing='right'>Your password must be 6 characters or more</Label>
+      <input type='password' placeholder='Password' />
+    </Form.Field>
+  </Form>
+)
+
+export default LabelPointing

docs/app/Examples/elements/Label/Types/index.js

@@ -19,6 +19,7 @@ const Types = () => (
       description='A label can point to content next to it'
       examplePath='elements/Label/Types/LabelPointing'
     />
+    <ComponentExample examplePath='elements/Label/Types/LabelPointingColored' />
   </ExampleSection>
 )