Improve docs CodeBlock actions to display demo components

[ti10le]

Description

We need a possibility to display our components as a demo like in the current marigold prototype Demo Design with styles We have to extend the current ActionTypes in CodeBlock.tsx. ```tsx ...

There should be one option to display them:

• one component alone or next to each other like in the button example
• without any bordered box around them
• without showCode button
• without copy button

Context

With this implementation we can step further to our current main target: improve the marigold docs page

Use Cases

You have to start with a 'demo' at creating a components page in marigold docs. You can implement this with this new improvement.

Consequences

We have a reusable implementation to display the marigold components

[sebald]

Can't we already do that?

[ti10le]

Only if we import them in the mdx file. I think we can make it the same as the other options with ```tsx It's not 100% necessary, we could decide today if we wanna improve CodeBlock.tsx

[sebald]

The codeblock knows about all components. We shouldn't have to import any in the MDX, regardless of the display one or multiple.

If it's in discussion, it should not have the ready label.

[ti10le]

Yes he knows about all but only if you use one of the ActionTypes. Maybe you thinking of the "Preview" type? I am thinking about an option where you display only the component like in the prototype and like I described above.

[sebald]

We pass the components to react-live . Why does the type make a difference?

I can quite follow the description because in the figma design are multiple examples 🙈

[ti10le]

The type makes the difference at how to show the components? And we can't show them right now with CodeBlock.tsx and without the points in the issue description. I refer to how to implement exactly that from the prototype.

[sebald]

What can't we show with a codeblock? 🤔

[ti10le]

A demo like this. If you take the preview ActionType in Codeblock you got a bordered box through the component und a showCode Button.