UI: code snippet component (#22518)

* VAULT-14763 make code snippet component

* export component

* add hds helper comment

ui/app/styles/components/code-snippet.scss

@@ -0,0 +1,20 @@
+.code-snippet-container {
+  background-color: $ui-gray-900;
+  display: flex;
+  justify-content: space-between;
+  border-radius: $radius-large;
+
+  code {
+    white-space: pre;
+  }
+}
+
+.code-snippet-copy-button {
+  cursor: pointer;
+  color: $ui-gray-300;
+  background: none;
+  border: none;
+  box-shadow: none;
+  min-width: auto;
+  padding: $size-11 $size-8;
+}

ui/app/styles/core.scss

@@ -59,6 +59,7 @@
 @import './components/box-radio';
 @import './components/calendar-widget';
 @import './components/codemirror';
+@import './components/code-snippet';
 @import './components/confirm';
 @import './components/console-ui-panel';
 @import './components/control-group';

ui/lib/core/addon/components/code-snippet.hbs

@@ -0,0 +1,20 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<div class="code-snippet-container">
+  <code class="text-grey-lightest">
+    {{@codeBlock}}
+  </code>
+  {{! replace with Hds::Copy::Button }}
+  <CopyButton
+    class="code-snippet-copy-button"
+    @clipboardText={{or @clipboardCode @codeBlock}}
+    @buttonType="button"
+    @success={{action (set-flash-message "Code copied!")}}
+  >
+    Copy
+    <Icon @name="clipboard-copy" aria-label="Copy" />
+  </CopyButton>
+</div>

ui/lib/core/app/components/code-snippet.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+export { default } from 'core/components/code-snippet';