app/assets/stylesheets/components/api-key.scss

.api-key {

  &-key {
    font-family: monospace;
    display: block;
    margin-bottom: 10px;
  }

  &-button-show {
    @include button($grey-3);
  }

  &-button-copy {
    @include button($grey-3);
  }

}
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			`.api-key {`

			`&-key {`
			`font-family: monospace;`
			`display: block;`
			`margin-bottom: 10px;`
			`}`

			`&-button-show {`
			`@include button($grey-3);`
			`}`

			`&-button-copy {`
			`@include button($grey-3);`
			`}`

			`}`