diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index 83d622d29729..2a2f58b148be 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -56,51 +56,53 @@ const multiSnippet = `"scripts": { "@babel/runtime": "^7.10.0", "@commitlint/cli": "^8.3.5",`; -const shortSnippet = `yarn add carbon-components@latest carbon-components-react@latest - @carbon/icons-react@latest carbon-icons@latest`; +const shortSnippet = `yarn add carbon-components@latest carbon-components-react@latest @carbon/icons-react@latest carbon-icons@latest`; const inlineSnippet = `node -v`; +const snippetText = () => ({ + inline: text('Text to be displayed in the inline CodeSnippet', inlineSnippet), + single: text( + 'Text to be displayed in the single-line CodeSnippet', + shortSnippet + ), + multi: text( + 'Text to be displayed in the multi-line CodeSnippet', + multiSnippet + ), +}); + const props = () => ({ disabled: boolean('Disabled (disabled)', false), light: boolean('Light variant (light)', false), feedback: text('Feedback text (feedback)', 'Copied to clipboard'), - feedbackTimeout: number('Feedback text timout (feedbackTimeout)', 2000), - showMoreText: text('Text for "show more" button', 'Show more'), - showLessText: text('Text for "show less" button', 'Show less'), + feedbackTimeout: number('Feedback text timeout (feedbackTimeout)', 2000), + showMoreText: text('Text for "show more" button (showMoreText)', 'Show more'), + showLessText: text('Text for "show less" button (showLessText)', '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'), + copyButtonDescription: text( + 'Copy button title (copyButtonDescription)', + 'Copy code snippet' + ), + ariaLabel: text('ARIA label (ariaLabel)', 'Container label'), wrapText: boolean('Wrap text (wrapText)', true), maxCollapsedNumberOfRows: number( - 'maxCollapsedNumberOfRows: Specify the maximum number of rows to be shown when in collapsed view', + 'Maximum number of rows to be shown when collapsed (maxCollapsedNumberOfRows)', 15 ), maxExpandedNumberOfRows: number( - 'maxExpandedNumberOfRows: Specify the maximum number of rows to be shown when in expanded view', + 'Maximum number of rows to be shown when expanded (maxExpandedNumberOfRows)', 0 ), minCollapsedNumberOfRows: number( - 'minCollapsedNumberOfRows: Specify the minimum number of rows to be shown when in collapsed view', + 'Minimum number of rows to be shown when collapsed (minCollapsedNumberOfRows)', 3 ), minExpandedNumberOfRows: number( - 'minExpandedNumberOfRows: Specify the minimum number of rows to be shown when in expanded view', + 'Minimum number of rows to be shown when expanded (minExpandedNumberOfRows)', 16 ), - snippetTextInline: text( - 'Text to be displayed in the inline CodeSnippet', - inlineSnippet - ), - snippetTextSingle: text( - 'Text to be displayed in the inline CodeSnippet', - shortSnippet - ), - snippetTextMulti: text( - 'Text to be displayed in the inline CodeSnippet', - multiSnippet - ), }); export const inline = () => ( @@ -110,7 +112,7 @@ export const inline = () => ( ); export const multiline = () => ( - + {` "scripts": { "build": "lerna run build --stream --prefix --npm-client yarn", "ci-check": "carbon-cli ci-check", @@ -184,21 +186,21 @@ export const playground = () => (

Inline snippet


- {props().snippetTextInline} + {snippetText().inline}

Single-line snippet


- {props().snippetTextSingle} + {snippetText().single}

Multi-line snippet


- {props().snippetTextMulti} + {snippetText().multi} );