Use MarginTopSnippet

Author: nicolasfont

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

@@ -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/styles.css

@@ -1,4 +1,4 @@
-.snippet {
+.margin-top-snippet {
   margin-top: 10px;
 }
 

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

@@ -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/blankslate.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 {

packages/visual-stack-docs/src/containers/Components/Docs/button-with-dropdown.js

@@ -1,7 +1,7 @@
 import * as R from 'ramda';
 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 { Button } from '@cjdev/visual-stack/lib/components/Button';
 
 /* s1:start */

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import './button.css';
 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';
 import {
   AccountIcon,

packages/visual-stack-docs/src/containers/Components/Docs/card.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';
 /* s2:start */
 import Card from '@cjdev/visual-stack/lib/components/Card';
 /* s2:end */

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

@@ -4,7 +4,7 @@ import { Box } from '@cjdev/visual-stack';
 import { Chip } from '@cjdev/visual-stack';
 /* s2:end */
 import { Panel, Body } from '@cjdev/visual-stack/lib/components/Panel';
-import { Demo, Snippet } from '../../../components/Demo';
+import { Demo, MarginTopSnippet as Snippet } from '../../../components/Demo';
 
 export default () => (
   <Demo srcFile="/samples/src/containers/Components/Docs/chip.js">

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

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { Body, Panel, Header } from '@cjdev/visual-stack/lib/components/Panel';
-import { CollapsiblePanel, PureCollapsiblePanel } from '@cjdev/visual-stack/lib/components/CollapsiblePanel';
+import {
+  CollapsiblePanel,
+  PureCollapsiblePanel,
+} from '@cjdev/visual-stack/lib/components/CollapsiblePanel';
 import './collapsiblepanel.css';
 import {
   FieldContent,
@@ -9,7 +12,7 @@ import {
   ChoiceInput,
   Field,
 } from '@cjdev/visual-stack/lib/components/Form';
-import { Demo, Snippet } from '../../../components/Demo';
+import { Demo, MarginTopSnippet as Snippet } from '../../../components/Demo';
 import SVG from 'react-inlinesvg';
 import sampleIconPath from './reporting.svg';
 import { useState } from 'react';
@@ -19,27 +22,30 @@ const SampleIcon = () => {
 };
 
 export default () => {
-
-  const [ collapsed, setCollapsed ] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
 
   return (
     <Demo srcFile="/samples/src/containers/Components/Docs/collapsiblepanel.js">
       {snippets => (
         <Panel>
           <Header>Collapsible Panels</Header>
           <Body paddingSize="none">
-
             {/* s1:start */}
-            <PureCollapsiblePanel onChange={setCollapsed} collapsed={collapsed} title="Pure Collapsible Panel">
-              <div>Use the PureCollapsiblePanel if you want to manage the 'collapsed' state yourself.  Unlike CollapsiblePanel, it
-                does not keep track of the state itself and merely calls you back with the state via 'onChange' when a
-                user clicks on it.
+            <PureCollapsiblePanel
+              onChange={setCollapsed}
+              collapsed={collapsed}
+              title="Pure Collapsible Panel"
+            >
+              <div>
+                Use the PureCollapsiblePanel if you want to manage the
+                'collapsed' state yourself. Unlike CollapsiblePanel, it does not
+                keep track of the state itself and merely calls you back with
+                the state via 'onChange' when a user clicks on it.
               </div>
             </PureCollapsiblePanel>
             {/* s1:end */}
             <Snippet tag="s1" src={snippets} />
 
-
             {/* s2:start */}
             <CollapsiblePanel
               title={
@@ -159,7 +165,6 @@ export default () => {
             </CollapsiblePanel>
             {/* s5:end */}
             <Snippet tag="s5" src={snippets} />
-
           </Body>
         </Panel>
       )}

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

@@ -1,7 +1,7 @@
 import React, { useState } 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 { DateTime } from 'luxon';