+
+ )
+ }
+}
+
+ContextBox.propTypes = {
+ children: React.PropTypes.node.isRequired,
+ showCaret: React.PropTypes.bool,
+ animate: React.PropTypes.bool,
+ position: React.PropTypes.oneOf(['above', 'below', 'left', 'right'])
+}
+
+ContextBox.defaultProps = {
+ animate: true,
+ showCaret: false,
+ position: 'top'
+}
+
+export default ContextBox
diff --git a/lib/components/ContextBox/__examples__/example-image.jpg b/lib/components/ContextBox/__examples__/example-image.jpg
new file mode 100644
index 0000000000..032f609224
Binary files /dev/null and b/lib/components/ContextBox/__examples__/example-image.jpg differ
diff --git a/lib/components/ContextBox/__examples__/examples.css b/lib/components/ContextBox/__examples__/examples.css
new file mode 100644
index 0000000000..e3b2128561
--- /dev/null
+++ b/lib/components/ContextBox/__examples__/examples.css
@@ -0,0 +1,28 @@
+.container {
+ position: relative;
+ min-height: 100px;
+}
+.context {
+ position: absolute;
+ top: 0; left: 0;
+}
+.text {
+ padding: 18px;
+ text-align: center;
+ font-size: 12px;
+ color: #888;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ max-width: 300px;
+}
+.image {
+ max-width: 300px;
+ max-height: 300px;
+ overflow: hidden;
+ margin: 4px;
+ box-sizing: border-box;
+ border-radius: 3px;
+}
+.image img {
+ display: block;
+}
diff --git a/lib/components/ContextBox/__examples__/index.js b/lib/components/ContextBox/__examples__/index.js
new file mode 100644
index 0000000000..34619a7d49
--- /dev/null
+++ b/lib/components/ContextBox/__examples__/index.js
@@ -0,0 +1,89 @@
+import React from 'react'
+import ReactDom from 'react-dom'
+import ContextBox from '../index'
+
+import styles from './examples.css'
+
+import image from './example-image.jpg'
+
+const Examples = React.createClass({
+ render () {
+ return (
+
+ { this.props.children }
+
+
+
+ )
+ }
+})
+
+ReactDom.render(
+
+
+
+
+
+
+
+
+
+
+ Context box with no caret and top animation
+
+
+
+
+
+
+
+
+
+
+ Context box with left caret and left animation
+
+
+
+
+
+
+
+
+
+
+ Context box with right caret and right animation
+
+
+
+
+
+
+
+
+
+
+ Context box with top caret and top animation
+
+
+
+
+
+
+
+
+
+
+ Context box with bottom caret and bottom animation
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Context box with top animation and caret, containing an image
+
+
+
+ )
+ }
+})
+
+ReactDom.render(