Show "CSS" and "JS" tabs in code section

[shospodarets]

Currently only "HTML" and "Mustache" tabs are present.
But for many purposes it is needed to show CSS/JS code, e.g.:

• Widgets/Plugins
  You want to show which JS code provide to start some plugin/widget to work (e.g. tabs, accordion etc.)
• CSS to show e.g. some mixins usage

We can follow the same logic as for *.json files.
E.g., in folder "source/_patterns/00-atoms/00-global"

1. We have 00-colors.mustache content of which is shown in "Mustache" tab
2. If we create 00-colors.css file in the same folder- content of it will be shown in "CSS" tab
3. If we create 00-colors.js- content of it will be shown in "JS" tab

[bmuenzenmeyer]

Hey @MalyW this is an interesting idea and wouldn't be terribly hard to implement - though I wonder how it would package up into the finished file-states - might lead to some duplication of effort - but it could be worth it to showcase different autonomous states.

[shospodarets]

Hey @bmuenzenmeyer
I'm just preparing a Pull Request 😉

[bmuenzenmeyer]

just curious @dmolsen @bradfrost do you have any problems with extending the code viewer to these asset types? I can see a lot of value/flexability in supporting this, but I don't think this is addressed in PL PHP or the spec

[dmolsen]

This is a feature that would be handled via a plug-in in PL2. I think you can extend it in the short-term but if code-viewer.js from PL2 is used in the node version you'll have to modify how you handle the feature. Tabs aren't hardcoded.

[bradfrost]

I think it's wise to approach it as a plugin as different CSS/JS architectures would require including those partials differently.

[bmuenzenmeyer]

Implemented as https://github.com/pattern-lab/plugin-node-tab