app/assets/stylesheets/components/copy-to-clipboard.scss

.copy-to-clipboard {

  position: relative;
  padding-bottom: 38px;  // height of button
  display: flex;

  &__name {
    @include bold-19;
    margin-bottom: 5px;
  }

  &__notice,
  &__value {
    font-family: monospace;
    display: block;
    padding: 0 0 10px 0;
    margin: auto 0;
  }

  &__button--show,
  &__button--copy {

    position: absolute;
    bottom: 2px;
    left: 0px;

    &:active {
      top: auto;
    }

  }

}
rename api key component to copy_to_clipboard does what it says on the tin, and is also consistent with prior art: https://components.publishing.service.gov.uk/component-guide/copy_to_clipboard 2021-08-27 17:32:06 +01:00			`.copy-to-clipboard {`
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else. 2016-01-15 10:50:10 +00:00
Don’t have copy API key button jump around It’s annoying that this button moves after you click on it. It’s happening because the API key is wrapping onto multiple lines. This commit fixes the height of the container so that it doesn’t reflow when it has less content in it. Uses a bit of flexbox to vertically centre the text. 2018-10-30 13:03:44 +00:00			`position: relative;`
			`padding-bottom: 38px; // height of button`
			`display: flex;`

Update buttons on api key pages to govuk-frontend buttons 2020-02-06 14:47:47 +00:00			`&__name {`
Add pages for create/view/revoke API keys Copying what they’ve done on GOV.UK Pay, we should let users: - generate as many keys as they want - only see the key at time of creation - give keys a name - revoke any key at any time (this should be a one way operation) And based on discussions with @minglis and @servingUpAces, the keys should be used in conjunction with some kind of service ID, which gets encrypted with the key. In other words the secret itself never gets sent over the wire. This commit adds the UI (but not the underlying API integration) for doing the above. 2016-01-19 09:55:13 +00:00			`@include bold-19;`
			`margin-bottom: 5px;`
			`}`

Change how live region works with API key JS Includes implementation of new code on Reply-to email addresses page. The existing code put the live region on the module element so the id and button were read out when the state changed. The report from the Digital Accessibility Centre (DAC) said screenreader users were confused by the content changing because it wasn't announced. These changes attempt to make the state changes clearer by: 1. moving the live region out into a separate element so we can better control what is announced 2. adding hidden text around to the button and text above (sometimes the id, sometimes the 'Copied to clipboard' text) to give more context When the id is copied to clipboard, the button changes but this is not announced as the live-region text takes precedence (due to being set to 'assertive'). Because of this, hidden text has been added in change 2 to explain what the new button does. 2020-08-19 10:47:11 +01:00			`&__notice,`
Fix styles for API key value not being applied When the component was renamed from ‘API key’ to ‘Copy to clipboard’ the class for the thing to be copied changed from `api-key__key` to `copy-to-clipboard__value`. While the CSS was updated to reflect the change from `api-key` to `copy-to-clipboard` the change from `__key` to `__value` was not made. Before: https://github.com/alphagov/notifications-admin/blob/4921e6d46e10fe8fde9671e55f43a9583884030e/app/templates/components/api-key.html After: https://github.com/alphagov/notifications-admin/blob/85f6881a5642d594797cab54c9990d40991f379a/app/templates/components/copy-to-clipboard.html This commit changes updates the CSS to reflect the latter change, so that the styles get applied properly. 2021-09-28 15:30:44 +01:00			`&__value {`
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else. 2016-01-15 10:50:10 +00:00			`font-family: monospace;`
			`display: block;`
Don’t have copy API key button jump around It’s annoying that this button moves after you click on it. It’s happening because the API key is wrapping onto multiple lines. This commit fixes the height of the container so that it doesn’t reflow when it has less content in it. Uses a bit of flexbox to vertically centre the text. 2018-10-30 13:03:44 +00:00			`padding: 0 0 10px 0;`
			`margin: auto 0;`
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else. 2016-01-15 10:50:10 +00:00			`}`

Update buttons on api key pages to govuk-frontend buttons 2020-02-06 14:47:47 +00:00			`&__button--show,`
			`&__button--copy {`
Don’t have copy API key button jump around It’s annoying that this button moves after you click on it. It’s happening because the API key is wrapping onto multiple lines. This commit fixes the height of the container so that it doesn’t reflow when it has less content in it. Uses a bit of flexbox to vertically centre the text. 2018-10-30 13:03:44 +00:00
			`position: absolute;`
			`bottom: 2px;`
Fix copy-to-clipboard button CSS In a lot of browsers, the static position is 0px anyway so there's no problem. In IE11, the button sits to the left of the paragraph above by default. Setting it in the CSS fixes the issue. 2020-10-02 14:56:49 +01:00			`left: 0px;`
Don’t have copy API key button jump around It’s annoying that this button moves after you click on it. It’s happening because the API key is wrapping onto multiple lines. This commit fixes the height of the container so that it doesn’t reflow when it has less content in it. Uses a bit of flexbox to vertically centre the text. 2018-10-30 13:03:44 +00:00
			`&:active {`
			`top: auto;`
			`}`

Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else. 2016-01-15 10:50:10 +00:00			`}`

			`}`