[EuiEmptyPrompt] Add more guidelines

[elizabetdev]

Summary

This PR adds more usages guidelines for the EuiEmptyPrompt. You can find the page for reviewing here: https://eui.elastic.co/pr_5409/#/display/empty-prompt/guidelines.

Guidelines

There were some discussions that can be found on this google doc that lead to some decisions.

Panel color picker

The panel color picker is a component where based on the selection of a use case and a page template a panel color is recommended.

I used to have an example for "completed tasks" but I removed it. I couldn't think of a good example. But if anyone has a good example, I'm happy to add it. @gchaps do you have a good example of this use case?

Initially, alternatives were also shown but I simplified to only show one recommendation.

The "Default with multiple panels" page template option gets disabled for:

• No permission
• Page not found
• Loading

Guide Section component

The guide section component was improved so it can receive JS strings. We could only pass RAW js files that were imported like require('!!raw-loader!..). This way I can use the guide section to preview the result of the panel color picker.

I'm using a component react-element-to-jsx-string to transform generated react components to a JSX string and this is passed to the demo js tab.

But... I found a weird issue. It doesn't work well when deployed. As we can see the deployed version gets some weird tags. 😬

It was recommended to use react-view but I found it difficult to achieve what I was achieving with react-element-to-jsx-string. @thompsongl can you help me with this task?

Checklist

• Check against all themes for compatibility in both light and dark modes
• [ ] Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs and playground toggles
• Added documentation
• [ ] Checked Code Sandbox works for any docs examples
• [ ] Added or updated jest and cypress tests
• [ ] Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• [ ] A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[elizabetdev]

@gchaps thanks for (re)reviewing the text. 🎉

For the following highlighted text I need an opinion. We have a specific UI in Kibana to handle no data scenarios. I think it's important to mention that this UI exists.

Yesterday, I talked with @chandlerprall about this and we agreed that is important to indicate when we have specific components in Kibana so that consumers know about their existence and use them.

@cchaos @gchaps does this text sound ok?

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/

[cchaos]

👍 Great idea! We could also link to this docs page in the Kibana repo: https://github.com/elastic/kibana/blob/main/dev_docs/tutorials/kibana_page_template.mdx

I thought about linking to the new docs site, but because it's still under dev and behind a login, I think we'll want a public link. Once the new docs site is live, we can point there instead.

[gchaps]

LGTM

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5409/