From 48bd19f75ec166fba283fffc2b4fdd4c89d513b5 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 16:48:37 -0700
Subject: [PATCH] feat(code-snippet): add wrapText prop

---
 COMPONENT_INDEX.md                        |  1 +
 docs/src/pages/components/CodeSnippet.svx | 12 ++++++++++++
 src/CodeSnippet/CodeSnippet.svelte        | 14 ++++++++++++--
 types/index.d.ts                          |  7 +++++++
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 7d722f42..a5e20b8b 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -611,6 +611,7 @@ import { CodeSnippet } from "carbon-components-svelte";
 | code                  | <code>string</code>                                  | --            |
 | expanded              | <code>boolean</code>                                 | false         |
 | hideCopyButton        | <code>boolean</code>                                 | false         |
+| wrapText              | <code>boolean</code>                                 | false         |
 | light                 | <code>boolean</code>                                 | false         |
 | skeleton              | <code>boolean</code>                                 | false         |
 | copyButtonDescription | <code>string</code>                                  | --            |
diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index 59eb202b..7b6c8252 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -19,6 +19,12 @@ export function add(a: number, b: number) {
 export function subtract(a: number, b: number) {
   return a - b;
 }`;
+
+let comment = `
+> \`carbon-components-svelte\` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
+
+> A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
+`
 </script>
 
 <InlineNotification svx-ignore lowContrast title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
@@ -39,6 +45,12 @@ export function subtract(a: number, b: number) {
 
 <CodeSnippet type="multi" {code} hideCopyButton />
 
+### Wrap text
+
+Note that `wrapText` only applies to the `"multi"` type.
+
+<CodeSnippet wrapText type="multi" code="{comment}" />
+
 ### Skeleton
 
 <CodeSnippet skeleton />
\ No newline at end of file
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 3bf611ff..0061cb84 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -24,6 +24,13 @@
    */
   export let hideCopyButton = false;
 
+  /**
+   * Set to `true` to wrap the text
+   * Note that `type` must be "multi"
+   * @type {boolean} [wrapText=false]
+   */
+  export let wrapText = false;
+
   /**
    * Set to `true` to enable the light variant
    * @type {boolean} [light=false]
@@ -121,7 +128,8 @@
           {type === 'inline' && 'bx--btn--copy'}
           {expanded && 'bx--snippet--expand'}
           {light && 'bx--snippet--light'}
-          {hideCopyButton && 'bx--snippet--no-copy'}"
+          {hideCopyButton && 'bx--snippet--no-copy'}
+          {wrapText && 'bx--snippet--wraptext'}"
         {...$$restProps}
       >
         <code id="{id}">
@@ -138,7 +146,8 @@
           {type === 'inline' && 'bx--btn--copy'}
           {expanded && 'bx--snippet--expand'}
           {light && 'bx--snippet--light'}
-          {hideCopyButton && 'bx--snippet--no-copy'}"
+          {hideCopyButton && 'bx--snippet--no-copy'}
+          {wrapText && 'bx--snippet--wraptext'}"
         {...$$restProps}
         on:click
         on:mouseover
@@ -157,6 +166,7 @@
       class:bx--snippet--expand="{expanded}"
       class:bx--snippet--light="{light}"
       class:bx--snippet--no-copy="{hideCopyButton}"
+      class:bx--snippet--wraptext="{wrapText}"
       {...$$restProps}
       class="{type && `bx--snippet--${type}`} {$$restProps.class}"
       on:mouseover
diff --git a/types/index.d.ts b/types/index.d.ts
index 5b2e8b1c..38423c34 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -387,6 +387,13 @@ export class CodeSnippet extends CarbonSvelteComponent {
      */
     hideCopyButton?: boolean;
 
+    /**
+     * Set to `true` to wrap the text
+     * Note that `type` must be "multi"
+     * @default false
+     */
+    wrapText?: boolean;
+
     /**
      * Set to `true` to enable the light variant
      * @default false