consul

History

John Cowen ff88fcdb39 ui: Ensure CopyableCode copy icon/button is fully clickable (#14016 ) * ui: Ensure CopyableCode copy icon/button is fully clickable * Give it a 40px height also		2022-08-04 13:30:52 +01:00
..
README.mdx	…
index.hbs	…
index.scss	ui: Ensure CopyableCode copy icon/button is fully clickable (#14016 )	2022-08-04 13:30:52 +01:00

README.mdx

# CopyableCode

CopyableCode is used to display code that is likely to be copied by the user.

It also has an option to obfuscate the code, that is then toggleable by the user.

Text within the component is formatted using a `<pre>` tag.

```hbs preview-template
<figure>
  <figcaption>Without obfuscation</figcaption>
  <CopyableCode
    @value="-----BEGIN CERTIFICATE-----
  MIIH/TCCBeWgAwIBAgIQaBYE3/M08XHYCnNVmcFBcjANBgkqhkiG9w0BAQsFADBy
  MQswCQYDVQQGEwJVUzEOMAwGA1UECAwFVGV4YXMxEDAOBgNVBAcMB0hvdXN0b24x
  ETAPBgNVBAoMCFNTTCBDb3JwMS4wLAYDVQQDDCVTU0wuY29tIEVWIFNTTCBJbnRl
  -----END CERTIFICATE-----"
    @name="Name of thing that gets copied e.g. Certificate"
  />
</figure>
```

```hbs preview-template
<figure>
  <figcaption>With obfuscation</figcaption>
  <CopyableCode
    @obfuscated={{true}}
    @value="-----BEGIN CERTIFICATE-----
  MIIH/TCCBeWgAwIBAgIQaBYE3/M08XHYCnNVmcFBcjANBgkqhkiG9w0BAQsFADBy
  MQswCQYDVQQGEwJVUzEOMAwGA1UECAwFVGV4YXMxEDAOBgNVBAcMB0hvdXN0b24x
  ETAPBgNVBAoMCFNTTCBDb3JwMS4wLAYDVQQDDCVTU0wuY29tIEVWIFNTTCBJbnRl
  -----END CERTIFICATE-----"
    @name="Certificate"
  />
</figure>
```

### Arguments

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `String` | | The code to display/be copied |
| `name` | `String` | | The 'Name' of the thing to be displayed and copied. Mainly used for giving feedback to the user. |
| `obfuscated` | `boolean` | | Whether to obfuscate the value until the user clicks to view |

### See

- [Template Source Code](./index.hbs)

---