feat(copy-button): add copy functionality

COMPONENT_INDEX.md

@@ -870,6 +870,7 @@ None.
 | Prop name       | Kind             | Reactive | Type                | Default value                    | Description                                      |
 | :-------------- | :--------------- | :------- | :------------------ | -------------------------------- | ------------------------------------------------ |
 | iconDescription | <code>let</code> | No       | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
+| text            | <code>let</code> | No       | <code>string</code> | --                               | Specify the text to copy                         |
 
 ### Slots
 
@@ -878,9 +879,10 @@ None.
 ### Events
 
 | Event name   | Type       | Detail |
-| :----------- | :-------- | :----- |
+| :----------- | :--------- | :----- |
 | click        | forwarded  | --     |
 | animationend | forwarded  | --     |
+| copy         | dispatched | --     |
 
 ## `DataTable`
 

docs/package.json

@@ -13,7 +13,6 @@
     "autoprefixer": "^10.2.3",
     "carbon-components": "10.32.0-rc.0",
     "carbon-components-svelte": "../",
-    "clipboard-copy": "^3.1.0",
     "mdsvex": "^0.8.8",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.4",

docs/src/COMPONENT_API.json

@@ -1862,12 +1862,22 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "text",
+          "kind": "let",
+          "description": "Specify the text to copy",
+          "type": "string",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [],
       "events": [
         { "type": "forwarded", "name": "click", "element": "Copy" },
-        { "type": "forwarded", "name": "animationend", "element": "Copy" }
+        { "type": "forwarded", "name": "animationend", "element": "Copy" },
+        { "type": "dispatched", "name": "copy" }
       ],
       "typedefs": [],
       "rest_props": { "type": "InlineComponent", "name": "Copy" },

docs/src/pages/components/CopyButton.svx

@@ -4,13 +4,13 @@
 </script>
 
 <InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
+  <div class="body-short-01">As of version 0.32, this component will copy the provided `code` text when clicking the button.</div>
 </InlineNotification>
 
 ### Default
 
-<CopyButton on:click />
+<CopyButton text="Carbon svelte" />
 
-### Custom feedback
+### Custom feedback text
 
-<CopyButton on:click feedback="Copied to clipboard" />
+<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />

docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte

@@ -1,8 +0,0 @@
-<script>
-  export let code = "yarn add -D carbon-component-svelte";
-
-  import { CodeSnippet } from "carbon-components-svelte";
-  import copy from "clipboard-copy";
-</script>
-
-<CodeSnippet on:click="{() => copy(code)}" code="{code}" />

docs/yarn.lock

@@ -840,6 +840,7 @@ carbon-components-svelte@../:
   version "0.31.1"
   dependencies:
     carbon-icons-svelte "^10.27.0"
+    clipboard-copy "3.2.0"
     flatpickr "4.6.9"
 
 carbon-components@10.32.0-rc.0:
@@ -946,10 +947,10 @@ cli-spinners@^2.2.0:
   resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.4.0.tgz#c6256db216b878cfba4720e719cec7cf72685d7f"
   integrity sha512-sJAofoarcm76ZGpuooaO0eDy8saEy+YoZBLjC4h8srt4jeBnkYeOgqxgsJQTpyt2LjI5PTfLJHSL+41Yu4fEJA==
 
-clipboard-copy@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.1.0.tgz#4c59030a43d4988990564a664baeafba99f78ca4"
-  integrity sha512-Xsu1NddBXB89IUauda5BIq3Zq73UWkjkaQlPQbLNvNsd5WBMnTWPNKYR6HGaySOxGYZ+BKxP2E9X4ElnI3yiPA==
+clipboard-copy@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb"
+  integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==
 
 clipboard@^2.0.0:
   version "2.0.6"

src/CopyButton/CopyButton.svelte

@@ -4,8 +4,18 @@
   /** Set the title and ARIA label for the copy button */
   export let iconDescription = "Copy to clipboard";
 
-  import { Copy } from "../Copy";
-  import Copy16 from "carbon-icons-svelte/lib/Copy16";
+  /**
+   * Specify the text to copy
+   * @type {string}
+   */
+  export let text = undefined;
+
+  import Copy from "../Copy/Copy.svelte";
+  import Copy16 from "carbon-icons-svelte/lib/Copy16/Copy16.svelte";
+  import copy from "clipboard-copy";
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <Copy
@@ -14,6 +24,12 @@
   title="{iconDescription}"
   {...$$restProps}
   on:click
+  on:click="{() => {
+    if (text !== undefined) {
+      copy(text);
+      dispatch('copy');
+    }
+  }}"
   on:animationend
 >
   <Copy16 class="bx--snippet__icon" />

types/CopyButton/CopyButton.d.ts

@@ -8,6 +8,11 @@ export interface CopyButtonProps extends CopyProps {
    * @default "Copy to clipboard"
    */
   iconDescription?: string;
+
+  /**
+   * Specify the text to copy
+   */
+  text?: string;
 }
 
 export default class CopyButton extends SvelteComponentTyped<
@@ -15,6 +20,7 @@ export default class CopyButton extends SvelteComponentTyped<
   {
     click: WindowEventMap["click"];
     animationend: WindowEventMap["animationend"];
+    copy: CustomEvent<any>;
   },
   {}
 > {}