Adds ability to copy EuiCodeBlock and adds snippet prop to docs

[ryankeairns]

Summary

This PR has two related objectives:

1. Add an optional 'copy' icon button to EuiCodeBlock via an isCopyable prop.
2. Add a snippet prop to GuideSection that optionally displays a new Snippet tab. This essentially allows an EUI docs user to copy code without having to wade through all the demo code in the Javascript tab. It won't be appropriate for all components, but likely for the majority. See it in action on the Code and Progress pages.

Add copy button

Works with fullscreen too

Copyable snippet

^ Something to consider is that what we provide in the snippet may be proliferated. In other words, we should likely put the preferred settings in there. The catch to that is we'd like to demonstrate some available props which, in the preferred state, commonly use the defaults. The moral of the story is to be thoughtful with what we put into the Snippet tab.

Snippets in EUI docs

By using a prop on GuideSection, we can add a snippet easily in the *_example.js file and produce consistent output (i.e. the same size, padding, copy button, etc., on the EuiCodeBlock):

const codeSource = require('!!raw-loader!./code');
const codeHtml = renderToHtml(Code);
const codeSnippet = '<EuiCode>Text to be formatted</EuiCode>';

...
    text: (
      <p>
        <EuiCode>Code</EuiCode> is for making inline code snippets that can work
        within or next to bodies of text.
      </p>
    ),
    snippet: codeSnippet,
...

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
• This required updates to Framer X components

[snide]

cc @sqren who requested a somewhat similar feature many months ago and may have interest.

[ryankeairns]

Soren also had a recent request for something like this in relation to the progress bar positioning over the header. While this specific example uses a slightly different implementation (+ an EuiCallout), it does produce a very similar solution:

[sorenlouv]

Yay! This looks so great. Very improvement, much like!

[ryankeairns]

Feedback

• Place in separate tab titled Snippet
• Think about rewording JavasScript tab (Demo code?)
• Consider which props to show/not show in that new tab

[cchaos]

I am quite excited for this new tab!

[ryankeairns]

@cchaos @chandlerprall PR has been updated and is ready for a follow-up review. Thanks!

[snide]

@ryankeairns Should we drop this docs example into a snippet now? Think the callout still makes sense though.

[ryankeairns]

@snide I have moved the fixed progress example to the Snippet tab.

It utilizes two examples in this case, separating the absolute and fixed options to emphasize when the portal may be necessary. Each example has a short comment to help clarify, similar to how Zurb Foundation documents things:

[cchaos]

@ryankeairns, Your last comment makes me think that maybe we will want to allow an array of snippets? Mainly just to separate out these different types so they each have their own copy button.

[ryankeairns]

@cchaos That would be a nice enhancement! If you don't mind, I'd like to move that to a separate/follow-up item in order to get this initial functionality out. I'm needing to dig in on some unrelated work ;)

[thompsongl]

Progress Demo HTML is empty. I don't see anything in your changes that's likely to have caused it, though

[cchaos]

LGTM, just one question about a background color

[chandlerprall]

one last nit

[chandlerprall]

beautiful :) Code changes LGTM, I tested locally and everything works as expected

[ryankeairns]