From 7d8c0aa3e3c144c264a9cccf2829e6a82c370076 Mon Sep 17 00:00:00 2001 From: emyarod Date: Mon, 13 Jan 2020 11:54:53 -0600 Subject: [PATCH] refactor(CopyButton): inherit Copy component (#5006) * refactor(CopyButton): inherit Copy component * refactor(code-snippet): unnest rules * test(CopyButton): full mount for button props test * docs(CodeSnippet): change default story feedback text --- .../code-snippet/_code-snippet.scss | 29 ++++----- .../CodeSnippet/CodeSnippet-story.js | 12 ++-- .../components/CopyButton/CopyButton-test.js | 9 ++- .../src/components/CopyButton/CopyButton.js | 62 ++----------------- 4 files changed, 33 insertions(+), 79 deletions(-) diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss index 1580e8bbaa8c..93232bfcb225 100644 --- a/packages/components/src/components/code-snippet/_code-snippet.scss +++ b/packages/components/src/components/code-snippet/_code-snippet.scss @@ -66,23 +66,24 @@ display: none; } @include tooltip--placement('icon', 'bottom', 'center'); + } - &.#{$prefix}--copy-btn--animating::before, - &.#{$prefix}--copy-btn--animating .#{$prefix}--copy-btn__feedback { - display: block; - } + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating::before, + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating + .#{$prefix}--copy-btn__feedback { + display: block; + } - &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out::before, - &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out - .#{$prefix}--copy-btn__feedback { - animation: $duration--fast-02 motion(standard, productive) hide-feedback; - } + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out::before, + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out + .#{$prefix}--copy-btn__feedback { + animation: $duration--fast-02 motion(standard, productive) hide-feedback; + } - &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in::before, - &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in - .#{$prefix}--copy-btn__feedback { - animation: $duration--fast-02 motion(standard, productive) show-feedback; - } + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in::before, + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in + .#{$prefix}--copy-btn__feedback { + animation: $duration--fast-02 motion(standard, productive) show-feedback; } .#{$prefix}--snippet--inline code { diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index 873c1cd9f1b3..3423cbcaaac0 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -15,7 +15,7 @@ import CodeSnippetSkeleton from './CodeSnippet.Skeleton'; const props = { inline: () => ({ light: boolean('Light variant (light)', false), - feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'), + feedback: text('Feedback text (feedback)', 'Copied to clipboard'), onClick: action('onClick'), copyLabel: text( 'ARIA label for the snippet/copy button (copyLabel)', @@ -24,7 +24,7 @@ const props = { }), single: () => ({ light: boolean('Light variant (light)', false), - feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'), + feedback: text('Feedback text (feedback)', 'Copied to clipboard'), copyButtonDescription: text( 'Copy icon description (copyButtonDescription)', 'copyable code snippet' @@ -37,7 +37,7 @@ const props = { }), multiline: () => ({ light: boolean('Light variant (light)', false), - feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'), + feedback: text('Feedback text (feedback)', 'Copied to clipboard'), showMoreText: text( 'Text for "show more" button (showMoreText)', 'Show more' @@ -86,7 +86,7 @@ storiesOf('CodeSnippet', module) info: { text: ` Code snippets are small blocks of reusable code that can be inserted in a code file. - + The Inline style is for code used within a block of text. `, }, @@ -108,7 +108,7 @@ storiesOf('CodeSnippet', module) info: { text: ` Code snippets are small blocks of reusable code that can be inserted in a code file. - + The Code style is for larger, multi-line code snippets. `, }, @@ -165,7 +165,7 @@ $z-indexes: ( info: { text: ` Code snippets are small blocks of reusable code that can be inserted in a code file. - + The Terminal style is for single-line . `, }, diff --git a/packages/react/src/components/CopyButton/CopyButton-test.js b/packages/react/src/components/CopyButton/CopyButton-test.js index 335215674062..1728d271ebfd 100644 --- a/packages/react/src/components/CopyButton/CopyButton-test.js +++ b/packages/react/src/components/CopyButton/CopyButton-test.js @@ -31,11 +31,14 @@ describe('CopyButton', () => { }); describe('Renders button props as expected', () => { - const wrapper = shallow(); + let wrapper; + + beforeEach(() => { + wrapper = mount(); + }); it('Renders children as expected', () => { - expect(wrapper.is('button')).toBe(true); - expect(wrapper.hasClass(`${prefix}--copy-btn`)).toBe(true); + expect(wrapper.find('button').hasClass(`${prefix}--copy-btn`)).toBe(true); expect(wrapper.find(`.${prefix}--copy-btn__feedback`).length).toBe(1); expect(wrapper.find(Copy16).length).toBe(1); }); diff --git a/packages/react/src/components/CopyButton/CopyButton.js b/packages/react/src/components/CopyButton/CopyButton.js index 9631e70cbd5c..b85bf6944572 100644 --- a/packages/react/src/components/CopyButton/CopyButton.js +++ b/packages/react/src/components/CopyButton/CopyButton.js @@ -6,73 +6,23 @@ */ import PropTypes from 'prop-types'; -import React, { useState, useEffect, useCallback } from 'react'; +import React from 'react'; import classnames from 'classnames'; -import debounce from 'lodash.debounce'; import { settings } from 'carbon-components'; import { Copy16 } from '@carbon/icons-react'; +import Copy from '../Copy'; const { prefix } = settings; -export default function CopyButton({ - iconDescription, - className, - feedback, - feedbackTimeout, - onAnimationEnd, - onClick, - ...other -}) { - const [animation, setAnimation] = useState(''); - const classNames = classnames(`${prefix}--copy-btn`, className, { - [`${prefix}--copy-btn--animating`]: animation, - [`${prefix}--copy-btn--${animation}`]: animation, - }); - const handleFadeOut = useCallback( - debounce(() => { - setAnimation('fade-out'); - }, feedbackTimeout), - [feedbackTimeout] - ); - const handleClick = useCallback( - event => { - setAnimation('fade-in'); - onClick(event); - handleFadeOut(); - }, - [onClick, handleFadeOut] - ); - const handleAnimationEnd = event => { - if (event.animationName === 'hide-feedback') { - setAnimation(''); - } - if (onAnimationEnd) { - onAnimationEnd(event); - } - }; - - useEffect( - () => () => { - handleFadeOut.cancel(); - }, - [handleFadeOut] - ); - +export default function CopyButton({ iconDescription, className, ...other }) { return ( - + ); }