Chore: update styleguidist

[arielsalminen]

Taking a proper look now

[arielsalminen]

Adding notes here as I notice things. Firstly, I see many styles are broken now. As we don’t have visual regression tests it’s probably easiest to compare to live example here: https://vueds.com/example/#/Elements/Button

A few things that are broken:

• Sidebar “logo”
• The expansion of selected items in sidebar does not work correctly now
• The code previews have incorrect text styles
• The table styles are a little broken in component views.
• All in all though these shouldn’t be too big thing to fix.

Current state (in this pull):

Previously:

[arielsalminen]

@elevatebart I went through your changes and added some comments. Let me know how do you want to proceed forward. Happy to help and also do the release once we have everything working.

[elevatebart]

Hello @viljamis

Thank you so much for this review, it has been a long-awaited update.

Regarding the sidebar:

• Sidebar "logo"

Updating the logo color should be easy to fix

• The expansion of selected items in sidebar does not work correctly now

In my experience and research, closing a section while opening another tends to create unexpected behaviors. Users click on an item and it goes away. Collapsing it then becomes harder. This exact question was asked on ux.stackexchange.com and is the reason I made this choice for styleguidist (documentation of the new option). Do you think I should make another option in vsg to close every open section when another opens?

• The code previews have incorrect text styles

Are you talking about typography, colors, spacing, font-size? I abandoned CodeMirror (too heavy) for a lighter editor and I need to figure out the proper styles to try to match what was before. I might never get there.

• The table styles are a little broken in component views

Could you be a bit more specific about what is broken here? I will double-check myself but you might have something very clear in mind.

Thank you for all the feedback, Yours

[elevatebart]

I made the changes to most of the design, Waiting for your call on the accordion feature.

Bart

[elevatebart]

@viljamis I believe I am now all done. The accordion is back online, tokens are now hidden, the editor looks the same as before. Should be ready for delivery,

Bart

[MaximeCouasnon]

@elevatebart

• There is still a "Time new Roman"-like font on the editor when Consolas is not installed (that is, on any platform except Windows). Updating to vue-styleguidist 4.23.0 fixes this (see https://github.com/vue-styleguidist/vue-styleguidist/commit/909a47f9d888d9f1411ef63ed1b5a62f602823e6)

• 90% width for the "description" column is too large for this project, maybe 50% should be better?

We can see both these points on the following screenshot:

[elevatebart]

Thank you @MaximeCouasnon,

I'll update styleguidist. Regarding the width, it actually depends on the with of your screen. Maybe media queries would be helpful here.

@viljamis what do you think?