From ec9febba2327b9a57b6351f91a20107929e918ad Mon Sep 17 00:00:00 2001 From: emyarod Date: Tue, 19 Jan 2021 10:21:11 -0800 Subject: [PATCH] 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 --- .../code-snippet/_code-snippet.scss | 29 ++++++++++--- .../__snapshots__/PublicAPI-test.js.snap | 3 ++ .../CodeSnippet/CodeSnippet-story.js | 43 ++++++++++--------- .../src/components/CodeSnippet/CodeSnippet.js | 11 ++++- .../CodeSnippet/__tests__/CodeSnippet-test.js | 5 +++ 5 files changed, 64 insertions(+), 27 deletions(-) diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss index 74a479a1823d..fc98b7186cfc 100644 --- a/packages/components/src/components/code-snippet/_code-snippet.scss +++ b/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; } diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index b25bb42c6604..05722820b224 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/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", }, diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index dc952cbaee4f..73ff34c25bce 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/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 = () => ( {'node -v'} @@ -97,27 +119,6 @@ const lightPropMessage = ( ); -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 = () => (
{props().light && lightPropMessage} diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js index 38452e82f232..e15daeedbcac 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.js +++ b/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({
@@ -169,6 +171,7 @@ function CodeSnippet({ )} {!hideCopyButton && ( setExpandedCode(!expandedCode)}> {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 */ diff --git a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js index 553afc14698e..0cec5c2aa193 100644 --- a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js +++ b/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', () => {