feat(docz-theme-default): add options to the props component

[ivan-dalmet]

Proposition

With the version 1.0 of Docz, the display of props with the <Props> component is a little rough.
(https://spectrum.chat/docz/general/please-bring-back-the-props-table-ui~7ebcbebf-137f-43fe-91f1-e4de8e8e0e2a)

The idea is to provide a more clean way to display props out of the box.

I introduce 3 new props for the <Props> component:

Prop	Type	Description
isRaw	boolean	Display props as now in Docz
isToggle	boolean	Allow to collapse props
title	node	Display a title before the props (this is also the title for the toggle)

I also introduce 2 colors in the default theme: propsText & propsBg.

It's my first time with CSS in JS and styled-components so feel free to challenge the code ;)

So the result looks like that:

Code	<Props of={Button} />
Result

Code	<Props of={Button} isRaw />
Result

Code	<Props of={Button} isToggle title="⚛️ Button props" />
Result

Dark mode render

Responsive render

Todo

• Update documentation

Pre-merge checklist

• Review the Code
• Review the CSS (it's my first time with CSS in JS)

Feel free to say if it's not a good idea or if this can be done with a better way ;)

[pedronauck]

Awesome @ivan-dalmet, I'm reviewing this in order to merge it, thanks!

[drewlustro]

Fantastic!

[crazyxhz]

If a prop is required and has a default value, it has some style issue. Besides can we display a title row like: propName / type/ defaultValue/ description / isRequired instead of the less obvious "=xxx" syntax?