fix(copy-button): use new clipboard functions

[ju-Skinner]

we still have a fallback to use execCommand for legacy browser support

JIRA Ticket: DSS-388

Description

It was discovered that the copy-button was not working in certain browsers (versions). The code implemented here addresses both current versions and legacy version support which falls back to using execCommand('copy').

Testing in sage-lib

1. Navigate to the Copy Button component on the documentation site.
2. In each browser, Chrome (v111 and v112), Safari, and Firefox confirm that the functionality behaves as expected.

Testing in kajabi-products

1. (HIGH) Copy button is broken in Chrome version 112 or higher. Please check with all major browsers
   • Navigate here, under Account Details, scroll to API Credentials under and confirm the copy-button
   • Navigate here and click "Set up authenticator". Once you enter your password, you should see a copy button under the QR code. Confirm that it functions as expected.

[pixelflips]

Seems to be working properly in Blink/Chromium browsers, but getting an error message in the toast for Webkit(Safari) and Gecko(FF).

Chrome 111 - Works
Chrome Beta 113 - Works
Chrome Canary 114 - Works
Edge 112 - Works
Firefox 112 - Error Message
Safari 16.4 - Error Message
Safari Tech Preview 168 - Error Message

[ju-Skinner]

Seems to be working properly in Blink/Chromium browsers, but getting an error message in the toast for Webkit(Safari) and Gecko(FF).

Chrome 111 - Works Chrome Beta 113 - Works Chrome Canary 114 - Works Edge 112 - Works Firefox 112 - Error Message Safari 16.4 - Error Message Safari Tech Preview 168 - Error Message

@pixelflips Can you provide a bit more details about the Safari browser you tested with, please? I tested with my local version of Safari (16.4.1) and it works as expected. See the loom video for reference.

I will download Firefox and see what's going on there.

EDIT:

I was able to reproduce both failures in Safari and Firefox. It occurs when you use localhost:4000 as the server address. If you notice in my loom video I am using sage-design-system.kajabi.test/ which is a developer trick leveraging puma dev to forward to localhost and specific port (4000 in this case).

Let me dig in more as to why this fails when using localhost

[pixelflips]

🔥 Rechecked all the same browsers as before and all is working as expected now. Great work!

[teenwolfblitzer]

👍 LGTM

Not related to this work: as a follow-up we may want the examples to differ in their text. Having the same repeated string makes it tricky to tell which button you've used.