Component/preview

packages/styleguide/src/components/Preview/Preview.docs.mdx

@@ -1,5 +1,5 @@
 import { md } from './../../utils/';
-import { Preview, ComponentDocs, CodeJSX } from './../';
+import { Preview, ComponentDocs, CodeJSX, Code } from './../';
 import PreviewForDocs from './Preview';
 import InteractForDOcs from './Interact';
 import { Bar, BarItem } from './../Bar';
@@ -108,6 +108,16 @@ is used to generate JSX in code example. To overide options of this library, use
   This is HTML string
 </Preview>
 
+### Preview Layout
+
+<Preview hasLayoutPreview code={<Preview hasLayoutPreview />}>
+  <p>Preview a layout component behaviour by apllying special styles.</p>
+  <p>Lighter Styleguide supports <Code>.grid</Code> and <Code>.bar</Code>, other layout components should by styled manually in your app.</p>
+  <div class="grid">
+    <div class="grid__col" />
+  </div>
+</Preview>
+
 ### Preview interactiveProps
 
 `interactiveProps` are used as a pipe for sending special props to Interactive elements renderer. 

packages/styleguide/src/components/Preview/Preview.js

@@ -64,6 +64,8 @@ class Preview extends Component {
     isInteractive: bool,
     /** Props for interactive component */
     interactiveProps: object,
+    /** Visual grid preview */
+    hasLayoutPreview: bool,
     /** Enable fullscreen toggle */
     enableFullscreen: bool,
   };
@@ -158,13 +160,20 @@ class Preview extends Component {
       isInteractive,
       interactiveProps,
       html,
+      hasLayoutPreview,
       enableFullscreen,
       ...other
     } = this.props;
 
     const { previewBackground } = this.state;
 
-    const classes = cx(CLASS_ROOT, className);
+    const classes = cx(
+      CLASS_ROOT,
+      {
+        'layout-preview': hasLayoutPreview,
+      },
+      className
+    );
     const wrapperClasses = cx('preview-wrapper', {
       'is-fullscreen': this.state.isFullscreen,
     });
@@ -366,6 +375,26 @@ const StyledPreview = styled.div`
 `;
 
 const StyledCard = styled(Card)`
+  &.layout-preview {
+    .grid,
+    .bar {
+      position: relative;
+      z-index: 0;
+      padding: 0.5em 0;
+      background-color: rgba(0, 0, 0, 0.08);
+      border: 1px solid rgba(0, 0, 0, 0.15);
+    }
+    .bar__item,
+    .grid__col,
+    *[class*='grid__col\-\-'] {
+      position: relative;
+      min-height: 1em;
+      line-height: 1.5;
+      background-color: rgba(0, 0, 0, 0.1);
+      background-clip: content-box;
+    }
+  }
+
   .is-fullscreen & {
     flex: 1 1 auto;
     margin-bottom: 0;

packages/styleguide/src/components/Preview/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import './style';
 
 import { ThemeConsumer } from 'styled-components';