Use parameters for info addon

addons/info/README.md

@@ -99,14 +99,94 @@ storiesOf('Component', module)
 
 ## Usage as decorator
 
-It is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.
+It is possible to add infos by default to all components by using a global or story decorator. 
 
 It is important to declare this decorator as **the first decorator**, otherwise it won't work well.
 
 ```js
-addDecorator((story, context) => withInfo('common info')(story)(context));
+addDecorator(withInfo);
 ```
 
+Then, you can use the `info` parameter to pass certain options to your stories. 
+This can be done per book of stories:
+
+```js
+import { storiesOf } from '@storybook/react';
+
+import Component from './Component';
+
+storiesOf('Component', module)
+  .addParameters({ 
+    info: {
+      // Your settings
+    } 
+  })
+  .add('with some emoji', () => <Component/>);
+```
+
+...or for each story individually:
+```js
+import { storiesOf } from '@storybook/react';
+
+import Component from './Component';
+
+storiesOf('Component', module)
+  .add(
+    'with some emoji', 
+    () => <Component emoji/>, 
+    { info : { inline: false, header: false } } // Make your component render inline with the additional info 
+  ) 
+  .add(
+    'with no emoji', 
+    () => <Component/>, 
+    { info: '☹️ no emojis' } // Add additional info text
+  ); 
+```
+
+...or even together:
+
+```js
+import { storiesOf } from '@storybook/react';
+
+import Component from './Component';
+
+storiesOf('Component', module)
+  .addParameters({ 
+    info: {               // Make a default for all stories in this book,
+      inline: true,       // where the components are inlined
+      styles: {
+        header: {
+          h1: {
+            color: 'red'  // and the headers of the sections are red.
+          }
+        }
+      },
+    } 
+  })
+  .add(
+    'green version', 
+    () => <Component green/>,
+    { 
+      info: { 
+        styles: { 
+          headers: { 
+            h1: { 
+              color: 'green' // Still inlined but with green headers!
+            } 
+          } 
+        } 
+      } 
+    })
+  .add(
+    'something else',
+    () => <Component different/>,
+    {
+      info: "This story has additional text added to the info!" // Still inlined and with red headers!
+    }
+  );
+```
+
+
 ## Global options
 
 To configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:

addons/info/package.json

@@ -13,6 +13,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@storybook/addons": "4.0.0-alpha.8",
     "@storybook/client-logger": "4.0.0-alpha.8",
     "@storybook/components": "4.0.0-alpha.8",
     "babel-runtime": "^6.26.0",

addons/info/src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import nestedObjectAssign from 'nested-object-assign';
+import { makeDecorator } from '@storybook/addons';
 import { logger } from '@storybook/client-logger';
 import Story from './components/Story';
 import PropTable from './components/PropTable';
@@ -82,10 +83,17 @@ function addInfo(storyFn, context, infoOptions) {
   return <Story {...props}>{storyFn(context)}</Story>;
 }
 
-export const withInfo = textOrOptions => {
-  const options = typeof textOrOptions === 'string' ? { text: textOrOptions } : textOrOptions;
-  return storyFn => context => addInfo(storyFn, context, options);
-};
+export const withInfo = makeDecorator({
+  name: 'withInfo',
+  parameterName: 'info',
+  wrapper: (getStory, context, { options, parameters }) => {
+    const storyOptions = parameters || options;
+    const infoOptions = typeof storyOptions === 'string' ? { text: storyOptions } : storyOptions;
+    const mergedOptions =
+      typeof infoOptions === 'string' ? infoOptions : Object.assign(options, infoOptions);
+    return addInfo(getStory, context, mergedOptions);
+  },
+});
 
 export { Story };
 

examples/official-storybook/stories/addon-info.stories.js

@@ -330,3 +330,39 @@ storiesOf('Addons|Info.Options.maxPropsIntoLine === 3', module).add(
     />
   ))
 );
+
+storiesOf('Addons|Info.Options.parameters', module)
+  .addDecorator(
+    withInfo({
+      styles: {
+        header: {
+          h1: {
+            color: 'green',
+          },
+        },
+      },
+    })
+  )
+  .addParameters({
+    info: {
+      text:
+        'This text should be displayed on every story and the component should be inlined between description and PropType table',
+      inline: true, // Displays info inline vs click button to view
+    },
+  })
+  .add('Using paramaters across all stories', () => <BaseButton label="Button" />)
+  .add(
+    'Overwriting and extending the parameters and options set stories-wise',
+    () => <BaseButton label="Button" />,
+    {
+      info: {
+        text: 'Label propType should be excluded',
+        excludedPropTypes: ['label'],
+      },
+    }
+  )
+  .add(
+    'Overwrite the parameters with markdown',
+    () => <BaseButton onClick={action('clicked')} label="Button" />,
+    { info: markdownDescription }
+  );

lib/core/src/client/preview/client_api.js

@@ -105,13 +105,27 @@ export default class ClientApi {
 
       const fileName = m ? m.id : null;
 
-      // Add the fully decorated getStory function.
-      this._storyStore.addStory(kind, storyName, this._decorateStory(getStory, decorators), {
-        ...this._globalParameters,
-        ...localParameters,
-        ...parameters,
-        fileName,
+      const allParam = { fileName };
+
+      [this._globalParameters, localParameters, parameters].forEach(params => {
+        if (params) {
+          Object.keys(params).forEach(key => {
+            if (typeof params[key] === 'object') {
+              allParam[key] = Object.assign({ ...allParam[key] }, params[key]);
+            } else {
+              allParam[key] = params[key];
+            }
+          });
+        }
       });
+
+      // Add the fully decorated getStory function.
+      this._storyStore.addStory(
+        kind,
+        storyName,
+        this._decorateStory(getStory, decorators),
+        allParam
+      );
       return api;
     };