enable inline story to show information in one screen

Author: stomita

.storybook/config.js

@@ -1,10 +1,14 @@
 import 'babel-polyfill';
 import svg4everybody from 'svg4everybody';
-import { configure, setAddon } from '@kadira/storybook';
-import infoAddon from '@kadira/react-storybook-addon-info';
+import { configure, setAddon, addDecorator } from '@kadira/storybook';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
 import { setAssetRoot } from '../src/scripts/util';
+import wrapContent from './wrapContent';
+import infoAddonWithDefaultOptions from './infoAddonWithDefaultOptions';
 
-setAddon(infoAddon);
+setAddon(infoAddonWithDefaultOptions);
+addDecorator(withKnobs);
+addDecorator(wrapContent());
 
 if (/\.sbook\.io/.test(location.hostname)) {
   // As storybook hub cannot host the static files, use the externally hosted SLDS assets (CORS enabled)

.storybook/head.html

@@ -12,7 +12,10 @@
 })();
 </script>
 <style>
-body {
-  padding: 16px 56px 16px 16px;
+.content-wrapper {
+  padding: 16px;
+}
+.content-wrapper > div > div:nth-child(2) {
+  padding: 16px;
 }
 </style>

.storybook/infoAddonWithDefaultOptions.js

@@ -0,0 +1,28 @@
+import infoAddon from '@kadira/react-storybook-addon-info';
+
+const defaultOptions = {
+  inline: true,
+  styles(stylesheet) {
+    return {
+      ...stylesheet,
+      jsxInfoContent: {
+        borderTop: '1px solid rgb(238, 238, 238)',
+        marginTop: '25px',
+      },
+      infoPage: {
+        padding: '16px',
+      },
+      infoContent: {
+        marginTop: '10px',
+        borderTop: '1px solid rgb(238, 238, 238)',
+        padding: '16px 0',
+      },
+    };
+  },
+};
+
+export default {
+  addWithInfo(storyName, info, storyFn, options) {
+    return infoAddon.addWithInfo.call(this, storyName, info, storyFn, { ...defaultOptions, ...options });
+  },
+};

.storybook/wrapContent.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import classnames from 'classnames';
+
+export default function wrapContent(className) {
+  return story => (
+    <div className={ classnames('content-wrapper', className) }>{ story() }</div>
+  );
+}

package.json

@@ -49,8 +49,8 @@
     "uuid": "^2.0.2"
   },
   "devDependencies": {
-    "@kadira/react-storybook-addon-info": "^3.3.0",
-    "@kadira/storybook": "^2.35.1",
+    "@kadira/react-storybook-addon-info": "^3.4.0",
+    "@kadira/storybook": "^2.35.3",
     "@kadira/storybook-addon-knobs": "^1.7.1",
     "@kadira/storyshots": "^2.1.0",
     "@salesforce-ux/design-system": "^2.2.1",