Option to turn off `Show code` & `Hide code` in the preview panel

Is your feature request related to a problem? Please describe

1. I’m creating ‘Design Tokens’ documentation page on Storybook.
2. I’m creating a story representing a group of ‘Design tokens’, which isn’t the best looking code to preview, as it isn’t useful to the consumer to read or consume. See below:

E.g. () => { return ( <div css={{ maxWidth: 1080, margin: '20px auto' }}> <Table heads={Heading} rows={Object.keys(weight100).map((key) => ({ token: borders.100.${key}, value: weight100[key], example: weight100[key], }))} columnDecorations={{ example: DecorateSwatch, token: DecorateToken, }} showPagination={false} /> </div> ); }

1. On the ‘Docs’ tab, I’m displaying the output, however consumers can expand the ‘show code’ panel, and view the setup code [see above], which isn’t required nor helpful to the consumer of the design system.
2. I want to hide the ‘show code’ & ‘hide code’ functionality in this instance

Describe the solution you’d like

Configuration to hide this panel:

Describe alternatives you’ve considered

Are you able to assist to bring the feature to reality? Most likely not, happy to try.

Any help will be much appreciated.

[tklives]

I’ll leave this here in case it can be of help to anyone else, because I’ve been unable to find anything about this.

If you don’t want the “Show/Hide Code” button to appear, just don’t wrap your <Story> in a <Canvas> element.

<Story name="Cool bro">
  <RadComponent />
</Story>

Then what renders is just your component without the border/shadow/button/etc., and it is still accessible from the left nav.

Right, wrong, or otherwise, this has worked for me!

[robstarbuck]

My current fix for this is:

<Canvas withSource="none">
  ...
</Canvas>

@shilman Thanks but your link now returns a 404