mirror of https://github.com/hashicorp/consul
06ff4228b4
* update red color variables to hds * change background red to be one step lighter * map oranges * map greens * map blues * map greys * delete themes, colours: lemon, magenta, strawberry, and vault color aliases * add unmapped rainbow colours * replace white and transparent vars, remove unused semantic vars and frame placeholders * small tweaks to improve contrast, change node health status x/check colours for non-voters to match design doc, replace semantic colour action w hds colour * add unmapped grays, remove dark theme, manually set nav bar to use dark colours * map consul pink colour * map yellows * add unmapped oranges, delete light theme * remove readme, base variables, clean up dangling colours * Start working on the nav disclosure menus * Update main-nav-horizontal dropdowns * Format template * Update box-shadow tokens * Replace --tone- usage with tokens * Update nav disabled state and panel border colour * Replace rgb usage on tile * Fix permissions modal overlay * More fixes * Replace orange-500 with amber-200 * Update badge colors * Update vertical sidebar colors * Remove top border on consul peer list ul --------- Co-authored-by: wenincode <tyler.wendlandt@hashicorp.com> |
||
|---|---|---|
| .. | ||
| README.mdx | ||
| index.hbs | ||
| index.scss | ||
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)
---