CodeSnippet: Storybook needs some lovin

[guigueb]

Summary

The CodeSnippet Storybook examples need a little work to be more clear/helpful to users. This is a storybook documentation issue.

Justification

Clients trying out CodeSnippet in the Storybook environment would like it to be more helpful.

Desired UX and success metrics

Each story should have story code showing the exact props used to create it (not deconstructed props {...props}).

Each story should have a list of knobs available for it.

• in CodeSnippet each story is a variant of CodeSnippet which works on a subset of props, we should show only the knobs that relate to the variant
• but in other components only the playground has knobs (we could go this route)

All the props in CodeSnippet should be reflected in knobs. The following props are missing... className, children, onClick.

In knobs the prop being applied should be clear. The prop Copy button title _____ doesn't clearly indicate what prop is being used. Possibly follow the other descriptions Copy button title (copyButtonDescription) ____. But I would suggest all of carbon adopt a standard...

• propNameFromTheCode: propDesciptionFromTheCode _______
• which in this case is... copyButtonDescription: Specify the description for the Copy Button ____

"Must have" functionality

Ideally, to be most helpful to clients, in all stories, not just CodeSnippet, we would show...

• the exact code used to create it, not deconstructed props (the client should be able to reproduce the example via copy/paste)
• all the knobs/props available to that story (a subset of them all it if is a variant) reflecting the default values or the values needed to show the story

Specific timeline issues / requests

anytime

Available extra resources

[tw15egan]

Yes, this component needs to be updated to match components like Accordion and Button that have variants without using knobs so that they can easily be copied, as well as a Playground variant that has all knobs available.

The knobs should also have the exact prop name in parentheses, and a short one-line description of the prop.