Update copy/paste the Vet ID button style

[lakohl]

Update the copy/paste interaction of the Vet ID button.

AC

Let the user know what the Vet ID button does.

1. On hover, display the following tool tip message: [Copy Veteran ID] in 19px type.
2. Show the Vet ID button in its gray-dark hover state.
3. On click, display the following snackbar message: [Veteran ID copied to clipboard.] in 19px type, for 1600ms.

Mock

[annienguyenUSDS]

Checking if this was already updated?

[lakohl]

The old (styleguide) version of this button is currently live in HP. This Design Issue exists to update the styling: https://github.com/department-of-veterans-affairs/appeals-design-research/issues/632

[lakohl]

Possible approach

The InVision Public Share link first provides a tooltip on hover 'Copy to clipboard', then displays a toast with the feedback 'Copied to Clipboard'.

[lakohl]

OPTIONS @annienguyenUSDS

Tooltips:

Snackbars:

1. top green:
   

2. Floating version of snackbar:
   

3. Dark version of snackbar message.
   

4. Floating dark version of snackbar message.
   

[lakohl]

Invision interaction:
https://va-gov.invisionapp.com/share/JWFT6H8R7HC

[lakohl]

[Sjones352]

@lakohl dropping [Copy Veteran ID] in 19px type to 13px is like screenshot below. I think we should drop it further down to may 10px.

[lakohl]

@Sjones352 seeing as we can only have one string of copy for both hover and click, please use this text: 'Click to copy to Clipboard'

[Sjones352]

@lakohl that's at 19px

And this is at 13px

[lakohl]

@Sjones352 Let's go with 14px Source Sans bold. My apologies for causing confusion, 'clipboard' should start with a lowercase c.