Add click to copy input and output

[jamesnw]

Original design

TODO

• Add Copy Notification
• Design

[jamesnw]

Questions for @SondraE -

• Should we add click to copy for Debug console? This would likely not copy well, and is not in the initial design
• Should the buttons go to the left or right of the version and "CSS (Compiled)"? Those weren't present in original designs
• What should the copy notification be? Ideas:
  • Reuse existing copy message banner space, but show "Copy [URL/input/css] to clipboard"
  • Show copy message banners to the left of each button- would need to consider space & position

[SondraE]

Should we add click to copy for Debug console? This would likely not copy well, and is not in the initial design

No need

Should the buttons go to the left or right of the version and "CSS (Compiled)"? Those weren't present in original designs

Let's go with the placement of the buttons in the corner of each box as you show above.

What should the copy notification be? Ideas:
Reuse existing copy message banner space, but show "Copy [URL/input/css] to clipboard"
Show copy message banners to the left of each button- would need to consider space & position

When selected, change each copy button to a checkmark for a few seconds. Also add the success message to the existing copy message banner space.

[jamesnw]

Feedback from Natalie on a PR I accidentally opened in the wrong repo 🤦 -

• Can we make the copy icon color match the text color?
• Can we add a copy icon to the "Copy URL" button in the upper right, so that that icon is consistently associated with copying everywhere it appears?

[jamesnw]

@mirisuzanne and @stacyk This is ready for design.

[netlify]

✅ Deploy Preview for sass-site-oddbird ready!

Name	Link
🔨 Latest commit	fd9d982
🔍 Latest deploy log	https://app.netlify.com/sites/sass-site-oddbird/deploys/66e09e59ffa9ac0008eb8b99
😎 Deploy Preview	https://deploy-preview-71--sass-site-oddbird.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stacyk]

@jamesnw did you want to review this before we send it on?

[stacyk]

I removed the "Click to Copy" screen reader text here since the icon is paired with actual text in the button that says "button, Copy URL" so it felt unnecessary here.

[stacyk]

I kept the message here since the state is only shown visually, this message communicates that the URL has been copied.

[stacyk]

When using the screen reader, it was really hard to distinguish between the Select to "Copy" and the word "Copied" that is read right after. They sounded the exact same to me so I added the "Code is" before the word "Copied".

[stacyk]

I updated this to "Select" instead of "click" incase someone is on a touch screen.

[jamesnw]

Moved to sass#1177