feature: copyable field option

[Nevelito]

Description

The copyable option enables users to copy the field's value to their clipboard. When set to true, a clipboard icon appears when hovering over the field value, allowing easy copying. This feature can be particularly useful for fields such as unique identifiers, URLs, or other text-based content that users may frequently need to copy.

Fixes #2769

copyable.mp4

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
  • copyable docs.avohq.io#330
• I have added tests that prove my fix is effective or that my feature works

[codeclimate]

Code Climate has analyzed commit ecab4d5 and detected 0 issues on this pull request.

View more on Code Climate.

[KamilMilewski]

We changed quite a lot in existing components or added new ones. Should we cover those changes with specs?

[Paul-Bob]

Thank you for all your effort here, @Nevelito!

I've been testing it locally, and it's already working as expected.

Let's make some visual adjustments and apply the same design used in the Docs (check it here).

Specifically:

• Display the empty clipboard on hover, without the text.
• After a click, display the same clipboard with a checkmark inside it.

Later, we could add a title to the icon and display it on hover.

I've also included some comments about the code.

Let me know if you have any questions.

[Paul-Bob]

We changed quite a lot in existing components or added new ones. Should we cover those changes with specs?

Let's do a system spec at the end that tests the copyable functionality, not component specific.

[Paul-Bob]

Let's use the configurations that https://www.stimulus-components.com/docs/stimulus-clipboard already supports

[Paul-Bob]

I think this can be configured with data-clipboard-success-duration-value

From: https://www.stimulus-components.com/docs/stimulus-clipboard

[Nevelito]

It is not that easy, It works with data-clipboard-success-content-value (this work only with plain text) , we want to show another object so we can not probably use data-clipboard-success-duration-value. I tried use that but it do not work.

[Paul-Bob]

Thank you for this contribution @Nevelito it's looking great!

I just pushed some commits to complete the PR.

[Paul-Bob]

TODO:

• add tool-tip
• add localization key for copy
• Docs