search

alphagov / govuk-design-system-backlog

GOV.UK Design System Community Backlog
31 stars 2 forks source link

Copy Button #249

Open DJlumb opened 2 years ago

DJlumb commented 2 years ago

What

The component is a button that is already being used in the design system to copy a piece of code. I am proposing to re-purpose this and use it as a component for use to copy pieces of text, links or codes. image

Why

It should be included in the design system for a number of reasons. Firstly it is widely used outside of the GOVUK ecosystem to copy voucher codes in Ecommerce so it's a familiar action for users and expected behavior. Also it's useful for the convenience of copying a piece of text to save time particularly on mobile where it enhances the experience at times when it can be cumbersome to copy a piece of code. Accessibility is another factor also whereby people with low dexterity and partially sighted users can tab through using screen readers to copy a piece of text which is a lot easier than using voice commands to instruct the curser to highlight and then copy a piece of text.

Having been used this on our service for 8-9 months there has been requests from other services to use it such as the agents team who have requested and been sent the code to be used on this page and in other areas where a link is needed to be copied image

It would also be useful for all other areas of government whereby a code needs to be copied or a link/piece of text is copied.

The code is already being used successfully in our service and has tested very well with users for those who copy the text to their notes or onto an email - It's also tested well with mobile users. Also as most licence applications on going online now that they will be able to copy this directly into their application. image

This doesn't exist currently in GDS as a component but does exist to copy a piece of code so hopefully this should aid development.

Example of where it is used image

Anything else

The button has tested very well in all our applicant UR rounds and is currently being used in our live service which went live on the 4th April https://www.gov.uk/guidance/complete-a-tax-check-for-a-taxi-private-hire-or-scrap-metal-licence We found that this tested very well in our UR in applicant Rounds. It was always received well and benefitted the user. image ( user research )

This is how it could be included in code <div class="govuk-!-margin-top-2"> {{ copyButtonMacro.copyButton({ clip: '266RLRTK6', copyContent: 'Copy your tax check code', copiedContent: 'Tax check code copied' }) }} </div>

Alexed93 commented 1 year ago

Any progress on this one folks? Hoping to implement a similar button within a MoJ project, but the grey styling isn't testing well (it's not obvious enough!).