Enterprise: Improve/Refactor Example Pages

[clepore]

It would be nice to have a "View Code" link on each example that brings you to the source code for that example on Github.

Add a info icon with a popup on each sample that displays:

• Explanation about the page / example
• Version added
• link to source in github
• link to related github issues
• contains any toggles for toggling states/actions
• avoids bugs reported of misplaced buttons touching or layout issues
• not show the header but still have a way to change theme and personalization color in the popup
• not break or have to redo visual regression test (make sure tests all use no-frills)

Work initially on one and get feedback before changing all n000 of them.

Initial approach: http://master-enterprise.demo.design.infor.com/components/validation/example-multiple-errors.html

Feedback:

• [ ] Could put this data in a JSON / DB structure
• [ ] To keep the example files small would be to have it read in a .txt or .json file so the context doesn't get in the way of the example code.
• [ ] Make the icon more obvious like a text + icon
• [ ] Make the popup a slide out from the left panel instead

[tmcconechy]

When this comes up, i would volunteer for creating the structure out at least on this one.

[PilotBob]

I do see that there is now a link to the code of the example from the doc page, which is nice. ;)

[clepore]

Yeah I think it would be a good idea to do 1 just to see what we might be working with visually on the website it self. This will probably be something we'll need to discuss @kayiuho and @nickwynja on as well.

[tmcconechy]

A sample for how this could look was added to this page: http://master-enterprise.demo.design.infor.com/components/validation/example-multiple-errors.html

Looking for feedback on the dialog/approach. Adding feedback so far above.

[PilotBob]

I like it.

[clepore]

A thought to keep the example files small would be to have it read in a .txt or .json file so the context doesn't get in the way of the example code.

[kayiuho]

Where would the .txt or .json file live in this context?

[tmcconechy]

You wouldnt see it in the example it would just be behind the scenes in the code in the folder. For example a file(s) in this folder structure with it https://github.com/infor-design/enterprise/tree/master/app/views/components/validation

[nickwynja]

I think this might be better as an info panel that slides out from the right. The current behavior where the popover hangs around open when you click off it is nice because you can keep it open to follow the instructions--but keeping it open is a bit unusual for a popover.

[tmcconechy]

For future version we will do this as we refactor. But no need to keep this open. Thinking for simplicity and ability to move the data around. It will be in .md files initially next to the example