Improve docs CodeBlock to display ShowCode and Copy button as icons

[ti10le]

Description

We need a possibility to display our components with decent small showCode and copyCode icons under the component preview. See here: marigold prototype Design with styles We have to extend/change the current ActionTypes in CodeBlock.tsx with an option to handle this. We have to decide in which way the code should be shown under the displayed components.

Context

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

Use Cases

We implement the current marigold prototype and use this new feature to display components

Consequences

We can create and improve our component pages like in the prototype

[sebald]

Not quite sure what you want to do here 😐

[ti10le]

[sebald]

Don't get why we blindly should implement this. How does this work with other components?

Buttons w/o labels are bad design ☹️

[sebald]

Also: the design of the page doesn't really work for an arbitrary theme. What if they don't have primary, secondary and tertiary buttons?

[ti10le]

If we implement this I would of course implement it to work for every single component. Just display the icon instead if ShowCode and CopyCode button. But we talk to Andres first about this part of the prototype.

[sebald]

I meant how does this look for other components. I am not talking about the implementation.

[ti10le]

e.g. like this:

[sebald]

Okay... I didn't meant literally. What I'm implying is that this design only makes sense die the button because (like your example showed) most components don't have different states.

[ti10le]

Yes but I was confused because this has nothing to do with variants.

[sebald]

Yes but I was confused because this has nothing to do with variants.

This was a comment at the whole page. We can not show certain variants because themes nicht not have them

[ti10le]

Updated Prototype design:

• The box under the preview means that you have only the box from that component you've clicked <> code. (If the Preview has more that one component like in the button example)
• Show code box only you have clicked code. We want to show only things the user want to see.
• you can copy with one of the copy buttons
• you can also copy if box is closed