consul

History

Chris Hut a6c990c6fe Cc 5545: Upgrade HDS packages and modifiers (#19226 ) * Upgrade @hashicorp/design-system-tokens to 1.9.0 * Upgrade @hashicorp/design-system-components to 1.8.1 * Upgrade @hashicorp/design-system-components and ember-in-viewport * Explicitly install ember-modifier@4.1.0 * rename copy-button * Fix how cleanup is done in with-copyable * Update aria-menu modifier for new structure * Update css-prop modifier to new structure * Convert did-upsert to regular class modifier * Update notification modifier for new structure * Update on-oustside modifier for new structure * Move destroy handler registration in with-copyable * Update style modifier for new structure * Update validate modifier for new structure * Guard against setting on destroyed object * Upgrade @hashicorp/design-system-components to 2.14.1 * Remove debugger * Guard against null in aria-menu * Fix undefined hash in validate addon * Upgrade ember-on-resize-modifier * Fix copy button import, missing import and array destructuring --------- Co-authored-by: wenincode <tyler.wendlandt@hashicorp.com>		2023-10-17 07:27:42 -06:00
..
README.mdx	ui: CopyableCode component (#13686 )	2022-07-07 17:42:47 +01:00
index.hbs	Cc 5545: Upgrade HDS packages and modifiers (#19226 )	2023-10-17 07:27:42 -06:00
index.scss	[COMPLIANCE] License changes (#18443 )	2023-08-11 09:12:13 -04: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)

---