Storybook: How to use addon-notes in combination with CSF stories?

[daviddelusenet]

I'm using both the most recent version of storybook and the addon-notes addon.

However, I can't get the notes the work with my stories written in the CSF format.

Example of one of my stories:

import ErrorMessage from './ErrorMessage';
import React from 'react';
import { text } from '@storybook/addon-knobs';

export default { title: 'atoms/ErrorMessage' };

export const Configurable = () => (
    <ErrorMessage>
        {text('Error message', 'Everything is broken, help!')}
    </ErrorMessage>
);

So how would I add notes to this story?

[daviddelusenet]

I figured it out. You should set the notes key inside of the parameters object:

import ErrorMessage from './ErrorMessage';
import React from 'react';
import test from './test.md';
import { text } from '@storybook/addon-knobs';

export default {
    parameters: {
        notes: test,
    },
    title: 'atoms/ErrorMessage',
};

export const Configurable = () => (
    <ErrorMessage>
        {text('Error message', 'Everything is broken, help!')}
    </ErrorMessage>
);

[patrick-radulian]

Have you found out whether there's any way to supply a separate note per story?
Using the parameters field sets the notes for all stories of that component, which is pretty limiting.
Any ideas?

[daviddelusenet]

@patrick-radulian nope, we're just using the solution mentioned above, sorry 😞

[patrick-radulian]

Thanks for the quick reply - will keep digging and notify if I find something useful.