feat(CodeSnippet): allow copy button to be optional (#6505)

* feat(CodeSnippet): allow copy button to be hidden * docs(CodeSnippet): add hideCopyButton knob * chore: update snapshots * fix(code-snippet): reduce padding when copy button is hidden * fix(code-snippet): prevent height changes in inline snippet * fix(code-snippet): remove border rule and override
carbon-design-system · Jul 28, 2020 · ad4d9a2 · ad4d9a2
1 parent 58af072
commit ad4d9a2
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 14 deletions.
diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -94,15 +94,31 @@
     padding: 0 $spacing-03;
   }
 
+  .#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy {
+    display: inline-block;
+
+    &:hover {
+      background-color: $ui-01;
+      cursor: auto;
+    }
+  }
+
   // Single Line Snippet
   .#{$prefix}--snippet--single {
     @include bx--snippet;
 
     min-width: rem(320px);
     max-width: rem(760px);
     height: $carbon--spacing-08;
-    padding: 0 $carbon--spacing-08 0 0;
-    border: none;
+    padding-right: $carbon--spacing-08;
+  }
+
+  .#{$prefix}--snippet--single.#{$prefix}--snippet--no-copy {
+    padding: 0;
+
+    &::after {
+      right: $carbon--spacing-05;
+    }
   }
 
   .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
@@ -144,7 +160,6 @@
     min-width: rem(320px);
     max-width: 100%;
     padding: $carbon--spacing-05;
-    border: none;
   }
 
   //closed snippet container
@@ -171,6 +186,12 @@
     overflow-x: scroll;
   }
 
+  .#{$prefix}--snippet--multi.#{$prefix}--snippet--no-copy
+    .#{$prefix}--snippet-container
+    pre {
+    padding-right: 0;
+  }
+
   // expanded pre
   .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
     .#{$prefix}--snippet-container

diff --git a/packages/components/src/components/code-snippet/_mixins.scss b/packages/components/src/components/code-snippet/_mixins.scss
@@ -17,5 +17,4 @@
   width: 100%;
   max-width: rem(600px);
   background: $snippet-background-color;
-  border: 1px solid $snippet-border-color;
 }
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -286,6 +286,9 @@ Map {
       "feedback": Object {
         "type": "string",
       },
+      "hideCopyButton": Object {
+        "type": "bool",
+      },
       "light": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
@@ -21,6 +21,7 @@ const props = {
       'ARIA label for the snippet/copy button (copyLabel)',
       'copyable code snippet'
     ),
+    hideCopyButton: boolean('Hide copy button (hideCopyButton)', false),
   }),
   single: () => ({
     light: boolean('Light variant (light)', false),
@@ -33,6 +34,7 @@ const props = {
       'ARIA label of the container (ariaLabel)',
       'Container label'
     ),
+    hideCopyButton: boolean('Hide copy button (hideCopyButton)', false),
     onClick: action('onClick'),
   }),
   multiline: () => ({
@@ -46,6 +48,7 @@ const props = {
       'Text for "show less" button (showLessText)',
       'Show less'
     ),
+    hideCopyButton: boolean('Hide copy button (hideCopyButton)', false),
     onClick: action('onClick'),
   }),
 };

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -30,6 +30,7 @@ function CodeSnippet({
   light,
   showMoreText,
   showLessText,
+  hideCopyButton,
   ...rest
 }) {
   const [expandedCode, setExpandedCode] = useState(false);
@@ -52,11 +53,20 @@ function CodeSnippet({
     [`${prefix}--snippet--${type}`]: type,
     [`${prefix}--snippet--expand`]: expandedCode,
     [`${prefix}--snippet--light`]: light,
+    [`${prefix}--snippet--no-copy`]: hideCopyButton,
   });
 
   const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
 
   if (type === 'inline') {
+    if (hideCopyButton) {
+      return (
+        <span className={codeSnippetClasses}>
+          <code id={uid}>{children}</code>
+        </span>
+      );
+    }
+
     return (
       <Copy
         {...rest}
@@ -81,11 +91,13 @@ function CodeSnippet({
           <pre ref={codeContentRef}>{children}</pre>
         </code>
       </div>
-      <CopyButton
-        onClick={onClick}
-        feedback={feedback}
-        iconDescription={copyButtonDescription}
-      />
+      {!hideCopyButton && (
+        <CopyButton
+          onClick={onClick}
+          feedback={feedback}
+          iconDescription={copyButtonDescription}
+        />
+      )}
       {shouldShowMoreLessBtn && (
         <Button
           kind="ghost"
@@ -168,6 +180,11 @@ CodeSnippet.propTypes = {
    * typically used for inline snippet to display an alternate color
    */
   light: PropTypes.bool,
+
+  /**
+   * Specify whether or not a copy button should be used/rendered.
+   */
+  hideCopyButton: PropTypes.bool,
 };
 
 CodeSnippet.defaultProps = {

diff --git a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js
@@ -16,11 +16,15 @@ const { prefix } = settings;
 
 describe('Code Snippet', () => {
   describe('Renders as expected', () => {
-    const snippet = shallow(
-      <CodeSnippet className="some-class" type="single">
-        {'node -v'}
-      </CodeSnippet>
-    );
+    let snippet;
+
+    beforeEach(() => {
+      snippet = shallow(
+        <CodeSnippet className="some-class" type="single">
+          {'node -v'}
+        </CodeSnippet>
+      );
+    });
 
     it('should use the appropriate snippet class', () => {
       expect(snippet.hasClass(`${prefix}--snippet`)).toEqual(true);
@@ -34,6 +38,12 @@ describe('Code Snippet', () => {
     it('should all for custom classes to be applied', () => {
       expect(snippet.hasClass('some-class')).toEqual(true);
     });
+
+    it('should allow hiding of the copy button', () => {
+      expect(snippet.find(CopyButton).length).toBe(1);
+      snippet.setProps({ hideCopyButton: true });
+      expect(snippet.find(CopyButton).length).toBe(0);
+    });
   });
 
   describe('Triggers appropriate events', () => {