From 3dde418398caac3b646f634c00c2890e2d78eb1b Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 22 Jan 2021 14:38:26 -0800
Subject: [PATCH] feat(code-snippet): support disabled state for single and
 multi-line types

---
 COMPONENT_INDEX.md                        |  1 +
 docs/src/COMPONENT_API.json               | 10 ++++++++++
 docs/src/pages/components/CodeSnippet.svx |  8 ++++++++
 src/CodeSnippet/CodeSnippet.svelte        | 11 ++++++++++-
 tests/CodeSnippet.test.svelte             |  2 +-
 types/CodeSnippet/CodeSnippet.d.ts        |  7 +++++++
 6 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 1587b43e..2c751434 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -496,6 +496,7 @@ None.
 | type                  | <code>let</code> | No       | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code>                            | Set the type of code snippet                                                                                               |
 | code                  | <code>let</code> | No       | <code>string</code>                                  | --                                               | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;) |
 | hideCopyButton        | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to hide the copy button                                                                                      |
+| disabled              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types                                    |
 | wrapText              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to wrap the text<br />Note that `type` must be "multi"                                                       |
 | light                 | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the light variant                                                                                  |
 | skeleton              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to display the skeleton state                                                                                |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index d54605c9..946a6ece 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1949,6 +1949,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` for the disabled variant\nOnly applies to the \"single\", \"multi\" types",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "wrapText",
           "kind": "let",
diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index b5d2ce11..aa4294b6 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -47,6 +47,14 @@ let comment = `
 
 <CodeSnippet type="multi" {code} hideCopyButton />
 
+### Disabled
+
+The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
+
+<CodeSnippet disabled>yarn add -D carbon-components-svelte</CodeSnippet>
+<br />
+<CodeSnippet disabled type="multi" code="{comment}" />
+
 ### Wrapped text
 
 `wrapText` only applies to the `"multi"` type.
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 53b5a66c..3741cc73 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -18,6 +18,12 @@
   /** Set to `true` to hide the copy button */
   export let hideCopyButton = false;
 
+  /**
+   * Set to `true` for the disabled variant
+   * Only applies to the "single", "multi" types
+   */
+  export let disabled = false;
+
   /**
    * Set to `true` to wrap the text
    * Note that `type` must be "multi"
@@ -149,6 +155,7 @@
       class:bx--snippet--single="{type === 'single'}"
       class:bx--snippet--inline="{type === 'inline'}"
       class:bx--snippet--multi="{type === 'multi'}"
+      class:bx--snippet--disabled="{type !== 'inline' && disabled}"
       {...$$restProps}
       on:mouseover
       on:mouseenter
@@ -156,7 +163,7 @@
     >
       <div
         role="{type === 'single' ? 'textbox' : undefined}"
-        tabindex="{type === 'single' ? '0' : undefined}"
+        tabindex="{type === 'single' && !disabled ? '0' : undefined}"
         aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
         class:bx--snippet-container="{true}"
       >
@@ -168,6 +175,7 @@
       </div>
       {#if !hideCopyButton}
         <CopyButton
+          disabled="{disabled}"
           feedback="{feedback}"
           feedbackTimeout="{feedbackTimeout}"
           iconDescription="{copyButtonDescription}"
@@ -180,6 +188,7 @@
           kind="ghost"
           size="small"
           class="bx--snippet-btn--expand"
+          disabled="{disabled}"
           on:click="{() => {
             expanded = !expanded;
           }}"
diff --git a/tests/CodeSnippet.test.svelte b/tests/CodeSnippet.test.svelte
index ecc342ea..c7c14389 100644
--- a/tests/CodeSnippet.test.svelte
+++ b/tests/CodeSnippet.test.svelte
@@ -47,4 +47,4 @@ export function subtract(a: number, b: number) {
 
 <CodeSnippet skeleton />
 
-<CodeSnippet type="multi" skeleton />
+<CodeSnippet type="multi" disabled skeleton />
diff --git a/types/CodeSnippet/CodeSnippet.d.ts b/types/CodeSnippet/CodeSnippet.d.ts
index b1e1f2b4..2d31d91c 100644
--- a/types/CodeSnippet/CodeSnippet.d.ts
+++ b/types/CodeSnippet/CodeSnippet.d.ts
@@ -25,6 +25,13 @@ export interface CodeSnippetProps {
    */
   hideCopyButton?: boolean;
 
+  /**
+   * Set to `true` for the disabled variant
+   * Only applies to the "single", "multi" types
+   * @default false
+   */
+  disabled?: boolean;
+
   /**
    * Set to `true` to wrap the text
    * Note that `type` must be "multi"