From 5ff7b64a057df8570c13cb9fe183fc31918d1900 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 30 Mar 2021 16:03:57 -0400 Subject: [PATCH 1/3] docs(CodeSnippet): start refactoring CodeSnippet storybook page --- .../CodeSnippet/CodeSnippet-story.js | 94 ++++++++++++++----- 1 file changed, 70 insertions(+), 24 deletions(-) diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index 7351a0b3e4f4..83d622d29729 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -7,13 +7,7 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; -import { - withKnobs, - boolean, - text, - select, - number, -} from '@storybook/addon-knobs'; +import { withKnobs, boolean, text, number } from '@storybook/addon-knobs'; import CodeSnippet from '../CodeSnippet'; import CodeSnippetSkeleton from './CodeSnippet.Skeleton'; import mdx from './CodeSnippet.mdx'; @@ -26,19 +20,48 @@ export default { docs: { page: mdx, }, + knobs: { + escapeHTML: false, + }, }, }; +const multiSnippet = `"scripts": { + "build": "lerna run build --stream --prefix --npm-client yarn", + "ci-check": "carbon-cli ci-check", + "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", + "doctoc": "doctoc --title '## Table of Contents'", + "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'", + "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'", + "lint": "eslint actions config codemods packages", + "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", + "sync": "carbon-cli sync", + "test": "cross-env BABEL_ENV=test jest", + "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'" + }, + "resolutions": { + "react": "~16.9.0", + "react-dom": "~16.9.0", + "react-is": "~16.9.0", + "react-test-renderer": "~16.9.0" + }, + "devDependencies": { + "@babel/core": "^7.10.0", + "@babel/plugin-proposal-class-properties": "^7.7.4", + "@babel/plugin-proposal-export-default-from": "^7.7.4", + "@babel/plugin-proposal-export-namespace-from": "^7.7.4", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.10.0", + "@babel/preset-react": "^7.10.0", + "@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 inlineSnippet = `node -v`; + 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 (feedback)', 'Copied to clipboard'), @@ -66,6 +89,18 @@ const props = () => ({ 'minExpandedNumberOfRows: Specify the minimum number of rows to be shown when in expanded view', 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 = () => ( @@ -145,14 +180,25 @@ const lightPropMessage = ( export const playground = () => (
{props().light && lightPropMessage} - - {props().type === 'multi' - ? `@mixin grid-container { - width: 100%; - padding-right: padding(mobile); - padding-left: padding(mobile); -}` - : 'node -v'} +
+

Inline snippet

+
+ + {props().snippetTextInline} + +
+
+

Single-line snippet

+
+ + {props().snippetTextSingle} + + +
+

Multi-line snippet

+
+ + {props().snippetTextMulti}
); From d4443116cde03d6c8657303e5dbb9433e8faf31f Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 30 Mar 2021 16:24:53 -0400 Subject: [PATCH 2/3] docs(CodeSnippet): add prop names to knobs --- .../CodeSnippet/CodeSnippet-story.js | 56 ++++++++++--------- 1 file changed, 29 insertions(+), 27 deletions(-) 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} ); From 9679c721aad3bdeb8a0382a8d581fda2f3e0aacf Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Mon, 5 Apr 2021 11:55:15 -0400 Subject: [PATCH 3/3] docs(CodeSnippet): change feedback text --- packages/react/src/components/CodeSnippet/CodeSnippet-story.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index 2a2f58b148be..fe9fab7daaf2 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -75,7 +75,7 @@ const snippetText = () => ({ const props = () => ({ disabled: boolean('Disabled (disabled)', false), light: boolean('Light variant (light)', false), - feedback: text('Feedback text (feedback)', 'Copied to clipboard'), + feedback: text('Feedback text (feedback)', 'Copied'), 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'),