docs(CodeSnippet): Update snippet docs (#8242)

* docs(CodeSnippet): start refactoring CodeSnippet storybook page * docs(CodeSnippet): add prop names to knobs * docs(CodeSnippet): change feedback text Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Apr 6, 2021 · 4c1b7b0 · 4c1b7b0
1 parent fc3abf0
commit 4c1b7b0
Showing 1 changed file with 83 additions and 35 deletions.
diff --git 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,44 +20,87 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      escapeHTML: false,
+    },
   },
 };
 
-const props = () => ({
-  type: select(
-    'Type (type)',
-    {
-      inline: 'inline',
-      'single line': 'single',
-      'multiple line': 'multi',
-    },
-    'inline'
+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 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'),
+  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'),
   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
   ),
 });
@@ -75,7 +112,7 @@ export const inline = () => (
 );
 
 export const multiline = () => (
-  <CodeSnippet {...props()} type="multi" feedback="Copied to clipboard">
+  <CodeSnippet type="multi" feedback="Copied to clipboard">
     {`  "scripts": {
     "build": "lerna run build --stream --prefix --npm-client yarn",
     "ci-check": "carbon-cli ci-check",
@@ -145,14 +182,25 @@ const lightPropMessage = (
 export const playground = () => (
   <div className={props().light ? 'bx--tile' : ''}>
     {props().light && lightPropMessage}
-    <CodeSnippet {...props()}>
-      {props().type === 'multi'
-        ? `@mixin grid-container {
-  width: 100%;
-  padding-right: padding(mobile);
-  padding-left: padding(mobile);
-}`
-        : 'node -v'}
+    <br />
+    <h4>Inline snippet</h4>
+    <br />
+    <CodeSnippet type="inline" {...props()}>
+      {snippetText().inline}
+    </CodeSnippet>
+    <br />
+    <br />
+    <h4>Single-line snippet</h4>
+    <br />
+    <CodeSnippet type="single" {...props()}>
+      {snippetText().single}
+    </CodeSnippet>
+
+    <br />
+    <h4>Multi-line snippet</h4>
+    <br />
+    <CodeSnippet type="multi" {...props()}>
+      {snippetText().multi}
     </CodeSnippet>
   </div>
 );