Background:
We have a JS module providing the basic behaviour for copy to clipboard (amd/src/copy_to_clipboard.js). We also now have several places using this module to provide copy to clipboard type functionality. Right now that's:

• LTI provider/enrol_lti (in the "Tool registration" section of the "Publish as LTI tool" admin settings)
• Calendar (once you've generated an export URL)
• Soon to be included in the tool index page in the LTI provider - see MDL-73815.

This JS module doesn't stipulate the full behavior of such elements and, as such, we now have some variation in implementations.

Scope:
This issue is about investigating whether we can create a standard component (in the component library) that will handle all our current cases and serve as a template for extension for the more advanced cases (see notes on Dynamic registration usage below). The following should be considered:

1. Looks. The copy button is an icon in LTI whereas it's text in the calendar. Icons can be more easily added and take up less real estate when multiple actions are attached to the URL, as in the "Dynamic registration" use case in LTI. There's also a difference between the borders between the two right now, with LTI using a border that matches the text field, and calendar using no border on the button.
2. Event (focus) handing. Currently, I believe enrol_lti does a better job of this than calendar because it allows auto selection of text on either click or tab focus, and allows for mouse based selection of a substring by simply clicking the field again (or using the keyboard).This behaves just like the GitHub copy repository URL element does and that seems fairly intuitive. The calendar, however, doesn't provide a clean implementation of focus, with different behavior being seen for tab vs click focus events. Focus is also something that may need to be handled one way for a URL and another way for a different type of text being copied to the clipboard and that must be considered too.
3. The LTI use cases include dynamic registration, where the URL can be deleted and where there is a second icon to use to do this. This kind of thing needs consideration too. While we're not likely going to need this delete action anywhere else right now, we need to make sure the eventual component doesn't make this kind of use case -  one where we have multiple actions attached to the element - worse from a UX/UI standpoint.

Some examples of similar "Add to component library" type issues: MDL-73436 and MDL-73334.