feat(kcopy): reskin component [KHCP-9663] (#1925)

* chore(sandbox): setup component sandbox [KHCP-9663] * feat(kcopy): reskin component [KHCP-9663] * fix(kcard): add comment [KHCP-9663] * chore(kcopy): sandbox tweaks [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): address Pr feedback [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): minor tweak [KHCP-9663] * chore(sandbox): minor fix [KHCP-9663]
Kong · Jan 15, 2024 · 5395907 · 5395907
1 parent e131d42
commit 5395907
Show file tree

Hide file tree

Showing 8 changed files with 288 additions and 123 deletions.
diff --git a/docs/components/copy.md b/docs/components/copy.md
@@ -14,6 +14,73 @@ KCopy is a component that displays provided text and allows a user to copy it to
 
 The copyable text.
 
+### format
+
+Determines the display format of the copyable text. The component can take the following `format` values:
+
+- `default`
+- `hidden`
+- `redacted`
+- `deleted`
+
+#### default
+
+Displays regular copyable text.
+
+<KCopy :text="text" />
+
+```html
+<KCopy :text="text" />
+```
+
+#### hidden
+
+Displays just a copy button without text.
+
+<KCopy
+  format="hidden"
+  :text="text"
+/>
+
+```html
+<KCopy
+  format="hidden"
+  :text="text"
+/>
+```
+
+#### redacted
+
+Displays `*****`.
+
+<KCopy
+  format="redacted"
+  :text="text"
+/>
+
+```html
+<KCopy
+  format="redacted"
+  :text="text"
+/>
+```
+
+#### deleted
+
+Displays `*<first-5-chars-of-copyable-text>`.
+
+<KCopy
+  format="deleted"
+  :text="text"
+/>
+
+```html
+<KCopy
+  format="deleted"
+  :text="text"
+/>
+```
+
 ### badge
 
 Whether or not to display as a badge. Defaults to `false`.
@@ -38,14 +105,14 @@ Text displayed before the copyable text when `badge` is true.
 
 <KCopy
   badge
-  badge-label="Id"
+  badge-label="Service ID:"
   :text="text"
 />
 
 ```html
 <KCopy
   badge
-  badge-label="Id"
+  badge-label="Service ID:"
   :text="text"
 />
 ```
@@ -92,14 +159,16 @@ If the `badgeLabel` prop has a value, then the copy tooltip text is `Copy {badge
 <KCopy
   :text="text"
   badge 
-  badge-label="ID:" 
+  badge-label="Service ID:"
+  copy-tooltip="Copy to clipboard"
 />
 
 ```html
 <KCopy
   :text="text"
   badge 
-  badge-label="ID:" 
+  badge-label="Service ID:"
+  copy-tooltip="Copy to clipboard"
 />
 ```
 
@@ -127,61 +196,12 @@ Tooltip text displayed on successful copy. Defaults to `Copied!`.
 
 ### monospace
 
-An indicator of whether the copyable text has `JetBrains Mono` font or not. Defaults to `true`, but `false` if `badge` is `true`.
-
-### format
-
-Determines the display format of the copyable text. The component can take the following `format` values:
+When `badge` is `true`, use this prop to control whether the copyable text has `JetBrains Mono` font or not. Defaults to `false`.
 
-- `default`: displays regular copyable text
-- `hidden`: displays just a copy button without text
-- `redacted`: displays `*****`
-- `deleted`: displays `*<first-5-chars-of-copyable-text>`
-
-#### default
-<KCopy :text="text" />
+<KCopy badge monospace :text="text" />
 
 ```html
-<KCopy :text="text" />
-```
-
-#### hidden
-<KCopy
-  format="hidden"
-  :text="text"
-/>
-
-```html
-<KCopy
-  format="hidden"
-  :text="text"
-/>
-```
-
-#### redacted
-<KCopy
-  format="redacted"
-  :text="text"
-/>
-
-```html
-<KCopy
-  format="redacted"
-  :text="text"
-/>
-```
-
-#### deleted
-<KCopy
-  format="deleted"
-  :text="text"
-/>
-
-```html
-<KCopy
-  format="deleted"
-  :text="text"
-/>
+<KCopy badge monospace :text="text" />
 ```
 
 <script setup lang="ts">

diff --git a/sandbox/index.ts b/sandbox/index.ts
@@ -22,6 +22,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KCard', to: { name: 'card' } },
   { name: 'KCatalog', to: { name: 'catalog' } },
   { name: 'KCheckbox', to: { name: 'checkbox' } },
+  { name: 'KCopy', to: { name: 'copy' } },
   { name: 'KDropdown', to: { name: 'dropdown' } },
   { name: 'KInput', to: { name: 'input' } },
   { name: 'KInputSwitch', to: { name: 'inputswitch' } },

diff --git a/sandbox/pages/SandboxCopy.vue b/sandbox/pages/SandboxCopy.vue
@@ -0,0 +1,106 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KCopy"
+  >
+    <div class="kcopy-sandbox">
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="text">
+        <KCopy :text="uuid1" />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="badge">
+        <KCopy
+          badge
+          :text="uuid1"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="badgeLabel">
+        <KCopy
+          badge
+          badge-label="Service ID:"
+          :text="uuid1"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="truncate">
+        <KCopy
+          :text="uuid1"
+          truncate
+        />
+        <KCopy
+          badge
+          :text="uuid1"
+          truncate
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="truncationLimit">
+        <KCopy
+          :text="uuid1"
+          truncate
+          :truncation-limit="5"
+        />
+        <KCopy
+          badge
+          :text="uuid1"
+          truncate
+          :truncation-limit="5"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="copyTooltip">
+        <KCopy
+          copy-tooltip="Click to copy successfully"
+          :text="uuid1"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="textTooltip">
+        <KCopy
+          :text="uuid1"
+          text-tooltip="Text hover tooltip"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="successTooltip">
+        <KCopy
+          success-tooltip="Successfully copied"
+          :text="uuid1"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="monospace">
+        <KCopy
+          :monospace="false"
+          :text="uuid1"
+        />
+        <KCopy
+          badge
+          monospace
+          :text="uuid1"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="format">
+        <KCopy :text="uuid1" />
+        <KCopy
+          format="hidden"
+          :text="uuid1"
+        />
+        <KCopy
+          format="redacted"
+          :text="uuid1"
+        />
+        <KCopy
+          format="deleted"
+          :text="uuid1"
+        />
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+
+const uuid1: string = '2cf64827-6c70-4116-906b-4c9aae83fc4a'
+</script>
diff --git a/sandbox/router/sandbox-routes.ts b/sandbox/router/sandbox-routes.ts
@@ -44,6 +44,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Checkbox Sandbox' },
     component: () => import('../pages/SandboxCheckbox.vue'),
   },
+  {
+    path: '/copy',
+    name: 'copy',
+    meta: { title: 'Copy Sandbox' },
+    component: () => import('../pages/SandboxCopy.vue'),
+  },
   {
     path: '/dropdown',
     name: 'dropdown',