Fix: Do not lowercase nested keys of example settings object, pass pr…

…ops to Preview component

docs/Documenting.md

@@ -51,7 +51,13 @@ Styleguidist will look for any `Readme.md` or `ComponentName.md` files in the co
     <Button size="large">Push Me</Button>
     ```
 
-    You can disable an editor by passing a `noeditor` modifier:
+    You can add a custom props to an example wrapper:
+
+    ```js { "props": { "className": "checks" } }
+    <Button>I’m transparent!</Button>
+    ```
+
+    Or disable an editor by passing a `noeditor` modifier:
 
     ```jsx noeditor
     <Button>Push Me</Button>

examples/basic/src/components/Button/Button.css

@@ -8,3 +8,9 @@
 	vertical-align: middle;
 	cursor: pointer;
 }
+
+.checks {
+	background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%), linear-gradient(-45deg, #f5f5f5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f5f5f5 75%), linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
+	background-size: 16px 16px;
+	background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+}

examples/basic/src/components/Button/Readme.md

@@ -18,7 +18,13 @@ Fenced code blocks with `js`, `jsx` or `javascript` languages are rendered as a
 <Button>Push Me</Button>
 ```
 
-You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor````):
+You can add a custom props to an example wrapper (```` ```js { "props": { "className": "checks" } }````):
+
+```js { "props": { "className": "checks" } }
+<Button>I’m transparent!</Button>
+```
+
+Or disable an editor by passing a `noeditor` modifier (```` ```js noeditor````):
 
 ```jsx noeditor
 <Button>Push Me</Button>

loaders/examples-loader.js

@@ -30,6 +30,7 @@ function examplesLoader(source) {
 	const updateExample = config.updateExample
 		? props => config.updateExample(props, this.resourcePath)
 		: undefined;
+
 	// Load examples
 	const examples = chunkify(source, updateExample);
 

loaders/utils/parseExample.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const consts = require('../../scripts/consts');
-const keysToLowerCaseDeep = require('./keysToLowerCaseDeep');
+const lowercaseKeys = require('lowercase-keys');
 
 const splitLangAndModifiers = header => {
 	const m = (header || '').match(/(\w*)(?: (.*))?/);
@@ -49,7 +49,7 @@ module.exports = function parseExample(content, header, updateExample) {
 		example = updateExample(example);
 	}
 
-	example.settings = keysToLowerCaseDeep(example.settings);
+	example.settings = lowercaseKeys(example.settings);
 
 	return example;
 };

package.json

@@ -64,6 +64,7 @@
     "listify": "^1.0.0",
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.4",
+    "lowercase-keys": "^1.0.0",
     "markdown-to-jsx": "^5.4.2",
     "minimist": "^1.2.0",
     "pretty-format": "^20.0.3",

src/rsg-components/Playground/Playground.js

@@ -80,6 +80,7 @@ export default class Playground extends Component {
 			<PlaygroundRenderer
 				name={name}
 				preview={preview}
+				previewProps={settings.props || {}}
 				tabButtons={
 					<Slot
 						name="exampleTabButtons"

src/rsg-components/Playground/Playground.spec.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Playground from './Playground';
 import '../../styles/setupjss';
 import slots, { EXAMPLE_TAB_CODE_EDITOR } from '../slots';
-import { PlaygroundRenderer } from './PlaygroundRenderer';
+import { PlaygroundRenderer, styles } from './PlaygroundRenderer';
 
 const evalInContext = a =>
 	new Function('require', 'const React = require("react");' + a).bind(null, require); // eslint-disable-line no-new-func
@@ -122,9 +122,10 @@ it('showcode option in example settings should overwrite style guide config opti
 it('renderer should render preview', () => {
 	const actual = shallow(
 		<PlaygroundRenderer
-			classes={{}}
+			classes={classes(styles)}
 			name="name"
 			preview={<div>preview</div>}
+			previewProps={{ className: 'pizza', title: 'salami' }}
 			tabButtons={<div>tab buttons</div>}
 			tabBody={<div>tab body</div>}
 			toolbar={<div>toolbar</div>}

src/rsg-components/Playground/PlaygroundRenderer.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ space, color, borderRadius }) => ({
+export const styles = ({ space, color, borderRadius }) => ({
 	root: {
 		marginBottom: space[4],
 	},
@@ -20,10 +21,19 @@ const styles = ({ space, color, borderRadius }) => ({
 	},
 });
 
-export function PlaygroundRenderer({ classes, name, preview, tabButtons, tabBody, toolbar }) {
+export function PlaygroundRenderer({
+	classes,
+	name,
+	preview,
+	previewProps,
+	tabButtons,
+	tabBody,
+	toolbar,
+}) {
+	const { className, ...props } = previewProps;
 	return (
 		<div className={classes.root}>
-			<div className={classes.preview} data-preview={name}>
+			<div className={cx(classes.preview, className)} {...props} data-preview={name}>
 				{preview}
 			</div>
 			<div className={classes.controls}>
@@ -45,6 +55,7 @@ PlaygroundRenderer.propTypes = {
 	classes: PropTypes.object.isRequired,
 	name: PropTypes.string.isRequired,
 	preview: PropTypes.node.isRequired,
+	previewProps: PropTypes.object.isRequired,
 	tabButtons: PropTypes.node.isRequired,
 	tabBody: PropTypes.node.isRequired,
 	toolbar: PropTypes.node.isRequired,

src/rsg-components/Playground/__snapshots__/Playground.spec.js.snap

@@ -1,21 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renderer should render preview 1`] = `
-<div>
+<div
+  className="root"
+>
   <div
+    className="preview pizza"
     data-preview="name"
+    title="salami"
   >
     <div>
       preview
     </div>
   </div>
-  <div>
+  <div
+    className="controls"
+  >
     <div>
       <div>
         tab buttons
       </div>
     </div>
-    <div>
+    <div
+      className="toolbar"
+    >
       <div>
         toolbar
       </div>
@@ -38,6 +46,7 @@ exports[`should render component renderer 1`] = `
       evalInContext={[Function]}
     />
   }
+  previewProps={Object {}}
   tabBody={
     <Slot
       name="exampleTabs"