Merge pull request #332 from cjdev/box-v2

Box v2

Author: JackMarx

CHANGELOG.md

@@ -1,4 +1,10 @@
+# Upcoming
 
+## Updates
+
+- Box: move out of experimental. Experimental version is kept for backward compatibility but deprecated. Will be removed in a future release.
+- Box: rename spacing props values from "default" to "medium".
+- Box: update Box docs.
 
 # 7.1.3
 - Update to CONTRIBUTING.md about installing lerna.
@@ -12,6 +18,7 @@
 # 7.1.2
 
 ## New Component
+
 - Add TopNav component
 
 # 7.1.1

packages/visual-stack-docs/package-lock.json

@@ -23,6 +23,16 @@ export const Snippet = ({ tag, src }) => {
   );
 };
 
+export const MarginTopSnippet = ({ tag, src }) => {
+  const srcTag = R.view(R.lensPath([tag]))(src);
+  if (!srcTag) return null;
+  return (
+    <div className="snippet margin-top-snippet">
+      <pre>{trimLeadingWhiteSpace(src[tag]).join('\n')}</pre>
+    </div>
+  );
+};
+
 export class Demo extends React.Component {
   constructor(props) {
     super(props);

packages/visual-stack-docs/src/components/Demo/index.js

@@ -1,7 +1,15 @@
-.snippet {
+.snippet pre {
+  margin: 0;
+}
+
+.margin-top-snippet {
   margin-top: 10px;
 }
 
+.margin-top-snippet pre {
+  margin: 0 0 1.6rem;
+}
+
 .inline-snippet {
   margin: 0;
 }

packages/visual-stack-docs/src/components/Demo/styles.css

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Body, Header, Panel } from '@cjdev/visual-stack/lib/components/Panel';
-import { Demo, Snippet } from '../../../components/Demo';
+import { Demo, MarginTopSnippet as Snippet } from '../../../components/Demo';
 import { Button } from '@cjdev/visual-stack/lib/components/Button';
 /* s1:start */
 import { openAlert, closeAlert } from '@cjdev/visual-stack-redux';

packages/visual-stack-docs/src/containers/Components/Docs/alert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Panel, Body } from '@cjdev/visual-stack/lib/components/Panel';
-import { Demo, Snippet } from '../../../components/Demo';
+import { Demo, MarginTopSnippet as Snippet } from '../../../components/Demo';
 /* s1:start */
 import { Badge } from '@cjdev/visual-stack';
 /* s1:end */

packages/visual-stack-docs/src/containers/Components/Docs/badge.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Panel, Body, Header } from '@cjdev/visual-stack/lib/components/Panel';
-import { Demo, Snippet } from '../../../components/Demo';
+import { Demo, MarginTopSnippet as Snippet } from '../../../components/Demo';
 import IconExample from 'mdi-react/BlurIcon';
 
 import {