Merge pull request #335 from IBM/code-snippet-wrap-text

feat(code-snippet): add wrapText prop

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

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

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

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