feat(code-snippet): support disabled state for single and multi-line types

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                                                                                |

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",

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.

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;
           }}"

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 />

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"