From e4ce8729fde726ed933d231a2eb5e252af229bc1 Mon Sep 17 00:00:00 2001
From: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
Date: Tue, 22 Aug 2023 16:36:51 -0700
Subject: [PATCH] UI: code snippet component (#22518)

* VAULT-14763 make code snippet component

* export component

* add hds helper comment
---
 ui/app/styles/components/code-snippet.scss    | 20 +++++++++++++++++++
 ui/app/styles/core.scss                       |  1 +
 ui/lib/core/addon/components/code-snippet.hbs | 20 +++++++++++++++++++
 ui/lib/core/app/components/code-snippet.js    |  6 ++++++
 4 files changed, 47 insertions(+)
 create mode 100644 ui/app/styles/components/code-snippet.scss
 create mode 100644 ui/lib/core/addon/components/code-snippet.hbs
 create mode 100644 ui/lib/core/app/components/code-snippet.js

diff --git a/ui/app/styles/components/code-snippet.scss b/ui/app/styles/components/code-snippet.scss
new file mode 100644
index 0000000000..05c4e85c37
--- /dev/null
+++ b/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;
+}
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index 045e0fe211..a18b9a0778 100644
--- a/ui/app/styles/core.scss
+++ b/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';
diff --git a/ui/lib/core/addon/components/code-snippet.hbs b/ui/lib/core/addon/components/code-snippet.hbs
new file mode 100644
index 0000000000..05c85ea731
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ui/lib/core/app/components/code-snippet.js b/ui/lib/core/app/components/code-snippet.js
new file mode 100644
index 0000000000..5a7fa66007
--- /dev/null
+++ b/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';