feat(CodeSnippet): support disabled single and multiline snippets (#7478)

* docs(CodeSnippet): define props before calling

* docs(CodeSnippet): add disabled knob

* docs(CodeSnippet): add prop names

* test(CodeSnippet): add test for `disabled` prop

* feat(CodeSnippet): support disabled single and multiline snippets

* chore: update snapshots

* fix(CodeSnippet): remove tabindex on disabled snippet

Author: emyarod

packages/components/src/components/code-snippet/_code-snippet.scss

@@ -23,6 +23,27 @@
     @include reset;
   }
 
+  .#{$prefix}--snippet--disabled,
+  .#{$prefix}--snippet--disabled
+    .#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
+    color: $disabled-02;
+    background-color: $disabled-01;
+  }
+
+  .#{$prefix}--snippet--disabled .#{$prefix}--snippet-btn--expand:hover,
+  .#{$prefix}--snippet--disabled .#{$prefix}--copy-btn:hover {
+    color: $disabled-02;
+    background-color: $disabled-01;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--snippet--disabled .#{$prefix}--snippet__icon,
+  .#{$prefix}--snippet--disabled
+    .#{$prefix}--snippet-btn--expand
+    .#{$prefix}--icon-chevron--down {
+    fill: $disabled-02;
+  }
+
   .#{$prefix}--snippet code {
     @include type-style('code-01');
   }
@@ -319,7 +340,7 @@
   }
 
   // Show more / less button
-  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
+  .#{$prefix}--snippet-btn--expand {
     @include type-style('body-short-01');
     @include carbon--font-family('sans');
 
@@ -335,8 +356,7 @@
     border: 0;
   }
 
-  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand
-    .#{$prefix}--snippet-btn--text {
+  .#{$prefix}--snippet-btn--expand .#{$prefix}--snippet-btn--text {
     position: relative;
     top: rem(-1px);
   }
@@ -346,14 +366,13 @@
   }
 
   .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
-    margin-bottom: rem(1px);
     margin-left: $spacing-03;
     transform: rotate(0deg);
     transition: $duration--moderate-01 motion(standard, productive);
     fill: $text-01;
   }
 
-  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover {
+  .#{$prefix}--snippet-btn--expand:hover {
     color: $text-01;
     background: $hover-ui;
   }

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -356,6 +356,9 @@ Map {
       "copyLabel": Object {
         "type": "string",
       },
+      "disabled": Object {
+        "type": "bool",
+      },
       "feedback": Object {
         "type": "string",
       },

packages/react/src/components/CodeSnippet/CodeSnippet-story.js

@@ -23,6 +23,28 @@ export default {
   },
 };
 
+const props = () => ({
+  type: select(
+    'Type (type)',
+    {
+      inline: 'inline',
+      'single line': 'single',
+      'multiple line': 'multi',
+    },
+    'inline'
+  ),
+  disabled: boolean('Disabled (disabled)', false),
+  light: boolean('Light variant (light)', false),
+  feedback: text('Feedback text', 'Copied to clipboard'),
+  showMoreText: text('Text for "show more" button', 'Show more'),
+  showLessText: text('Text for "show less" button', 'Show less'),
+  hideCopyButton: boolean('Hide copy button (hideCopyButton)', false),
+  onClick: action('onClick'),
+  copyButtonDescription: text('Copy button title', 'Copy code snippet'),
+  ariaLabel: text('ARIA label', 'Container label'),
+  wrapText: boolean('Wrap text (wrapText)', true),
+});
+
 export const inline = () => (
   <CodeSnippet type="inline" feedback="Copied to clipboard">
     {'node -v'}
@@ -97,27 +119,6 @@ const lightPropMessage = (
   </small>
 );
 
-const props = () => ({
-  type: select(
-    'Type',
-    {
-      inline: 'inline',
-      'single line': 'single',
-      'multiple line': 'multi',
-    },
-    'inline'
-  ),
-  light: boolean('Light variant', false),
-  feedback: text('Feedback text', 'Copied to clipboard'),
-  showMoreText: text('Text for "show more" button', 'Show more'),
-  showLessText: text('Text for "show less" button', 'Show less'),
-  hideCopyButton: boolean('Hide copy button', false),
-  onClick: action('onClick'),
-  copyButtonDescription: text('Copy button title', 'Copy code snippet'),
-  ariaLabel: text('ARIA label', 'Container label'),
-  wrapText: boolean('Wrap text', true),
-});
-
 export const playground = () => (
   <div className={props().light ? 'bx--tile' : ''}>
     {props().light && lightPropMessage}

packages/react/src/components/CodeSnippet/CodeSnippet.js

@@ -23,6 +23,7 @@ function CodeSnippet({
   className,
   type,
   children,
+  disabled,
   feedback,
   onClick,
   ariaLabel,
@@ -110,6 +111,7 @@ function CodeSnippet({
 
   const codeSnippetClasses = classNames(className, `${prefix}--snippet`, {
     [`${prefix}--snippet--${type}`]: type,
+    [`${prefix}--snippet--disabled`]: type !== 'inline' && disabled,
     [`${prefix}--snippet--expand`]: expandedCode,
     [`${prefix}--snippet--light`]: light,
     [`${prefix}--snippet--no-copy`]: hideCopyButton,
@@ -145,7 +147,7 @@ function CodeSnippet({
       <div
         ref={codeContainerRef}
         role={type === 'single' ? 'textbox' : null}
-        tabIndex={type === 'single' ? 0 : null}
+        tabIndex={type === 'single' && !disabled ? 0 : null}
         className={`${prefix}--snippet-container`}
         aria-label={ariaLabel || copyLabel || 'code-snippet'}
         onScroll={(type === 'single' && handleScroll) || null}>
@@ -169,6 +171,7 @@ function CodeSnippet({
       )}
       {!hideCopyButton && (
         <CopyButton
+          disabled={disabled}
           onClick={onClick}
           feedback={feedback}
           iconDescription={copyButtonDescription}
@@ -179,6 +182,7 @@ function CodeSnippet({
           kind="ghost"
           size="field"
           className={`${prefix}--snippet-btn--expand`}
+          disabled={disabled}
           onClick={() => setExpandedCode(!expandedCode)}>
           <span className={`${prefix}--snippet-btn--text`}>
             {expandCodeBtnText}
@@ -223,6 +227,11 @@ CodeSnippet.propTypes = {
    */
   copyLabel: PropTypes.string,
 
+  /**
+   * Specify whether or not the CodeSnippet should be disabled
+   */
+  disabled: PropTypes.bool,
+
   /**
    * Specify the string displayed when the snippet is copied
    */

packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js

@@ -44,6 +44,11 @@ describe('Code Snippet', () => {
       snippet.setProps({ hideCopyButton: true });
       expect(snippet.find(CopyButton).length).toBe(0);
     });
+
+    it('should set disabled if one is passed via props', () => {
+      snippet.setProps({ disabled: true });
+      expect(snippet.find(`.${prefix}--snippet--disabled`).length).toBe(1);
+    });
   });
 
   describe('Triggers appropriate events', () => {