docs(panel): updates React docs for Panel

* fix(panel): moves items into variables to fix storybook looping issue

* docs(panel): updates Panel docs for React

* docs(panel): removes note for divider label and adds periods to prop descriptions

* docs(panel): refactors stories and adds canvas control support

* docs(panel): adds link to grid templates and updates text for panel row

docs/app/views/examples/components/panel/_preview.html.erb

@@ -56,7 +56,7 @@ Ut elementum id leo ac fringilla.
 
 <h3>Body</h3>
 
-There are a few for the panel body container.
+There are a few options for the panel body container.
 
 <h4>Panel Block</h4>
 

packages/sage-react/lib/Panel/Panel.jsx

@@ -72,10 +72,16 @@ Panel.defaultProps = {
 };
 
 Panel.propTypes = {
+  /** Renders any content passed within. */
   children: PropTypes.node,
+  /** CSS class that will be applied to the outermost container. */
   className: PropTypes.string,
+  /** Removes padding on both top and bottom of the Panel. */
   clearPaddingBoth: PropTypes.bool,
+  /** Removes padding on the bottom of the Panel. */
   clearPaddingBottom: PropTypes.bool,
+  /** Removes padding on the top of the Panel. */
   clearPaddingTop: PropTypes.bool,
+  /** Setting this to true will display a loading spinner within the Panel. */
   loading: PropTypes.bool,
 };