From d8cc0dcc17eedbcb5651aa7cd447c0613eb3dda2 Mon Sep 17 00:00:00 2001 From: Dak Date: Mon, 3 Aug 2020 20:24:11 -0500 Subject: [PATCH 1/8] docs(CodeSnippet): overhaul storybook --- .../CodeSnippet/CodeSnippet-story.js | 221 ++++++------------ 1 file changed, 66 insertions(+), 155 deletions(-) diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index 17c4c4f40c68..53593ab292ef 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -6,52 +6,26 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import { withKnobs, boolean, text } from '@storybook/addon-knobs'; +import { withKnobs, boolean, text, select } from '@storybook/addon-knobs'; import CodeSnippet from '../CodeSnippet'; import CodeSnippetSkeleton from './CodeSnippet.Skeleton'; -const props = { - inline: () => ({ - light: boolean('Light variant (light)', false), - feedback: text('Feedback text (feedback)', 'Copied to clipboard'), - onClick: action('onClick'), - copyLabel: text( - 'ARIA label for the snippet/copy button (copyLabel)', - 'copyable code snippet' - ), - hideCopyButton: boolean('Hide copy button (hideCopyButton)', false), +const props = () => ({ + type: select('Type', { + inline: 'inline', + 'single line': 'single', + 'multiple line': 'multi', }), - single: () => ({ - light: boolean('Light variant (light)', false), - feedback: text('Feedback text (feedback)', 'Copied to clipboard'), - copyButtonDescription: text( - 'Copy icon description (copyButtonDescription)', - 'copyable code snippet' - ), - ariaLabel: text( - 'ARIA label of the container (ariaLabel)', - 'Container label' - ), - hideCopyButton: boolean('Hide copy button (hideCopyButton)', false), - onClick: action('onClick'), - }), - multiline: () => ({ - light: boolean('Light variant (light)', false), - feedback: text('Feedback text (feedback)', 'Copied to clipboard'), - 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'), - }), -}; + 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'), +}); const lightPropMessage = ( @@ -73,126 +47,63 @@ const lightPropMessage = ( ); -storiesOf('CodeSnippet', module) - .addParameters({ - component: CodeSnippet, - subcomponents: { - CodeSnippetSkeleton, - }, - }) - .addDecorator(withKnobs) - .add( - 'inline', - () => ( -
- {props.inline().light && lightPropMessage} - - {'node -v'} - -
- ), - { - info: { - text: ` - Code snippets are small blocks of reusable code that can be inserted in a code file. +export default { + title: 'CodeSnippet', + decorators: [withKnobs], +}; - The Inline style is for code used within a block of text. - `, - }, - } - ) - .add( - 'single line', - () => ( -
- {props.single().light && lightPropMessage} - - { - 'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!' - } - -
- ), - { - info: { - text: ` - Code snippets are small blocks of reusable code that can be inserted in a code file. +export const codeSnippet = () => ( + + {'node -v'} + +); - The Code style is for larger, multi-line code snippets. - `, - }, - } - ) - .add( - 'multi line', - () => { - const multilineProps = props.multiline(); - return ( -
- {multilineProps.light && lightPropMessage} - - {`@mixin grid-container { - width: 100%; - padding-right: padding(mobile); - padding-left: padding(mobile); +codeSnippet.story = { + name: 'default', + parameters: { + info: { + text: ` + Code snippets are small blocks of reusable code that can be inserted in a code file. - @include breakpoint(bp--xs--major) { - padding-right: padding(xs); - padding-left: padding(xs); - } -} + The Inline style is for code used within a block of text. + `, + }, + }, +}; -$z-indexes: ( - modal : 9000, - overlay : 8000, - dropdown : 7000, - header : 6000, - footer : 5000, - hidden : - 1, - overflowHidden: - 1, - floating: 10000 -);`} - -
- - {`@mixin grid-container { +export const playground = () => ( +
+ {props().light && lightPropMessage} + + {props().type === 'multi' + ? `@mixin grid-container { width: 100%; padding-right: padding(mobile); padding-left: padding(mobile); +}` + : 'node -v'} + +
+); - @include breakpoint(bp--xs--major) { - padding-right: padding(xs); - } -}`} - -
- ); - }, - { - info: { - text: ` - Code snippets are small blocks of reusable code that can be inserted in a code file. +playground.story = { + name: 'playground', +}; - The Terminal style is for single-line . - `, - }, - } - ) - .add( - 'skeleton', - () => ( -
- - -
- ), - { - info: { - text: ` - Placeholder skeleton state to use when content is loading. - `, - }, - } - ); +export const Skeleton = () => ( +
+ + +
+); + +Skeleton.story = { + name: 'skeleton', + parameters: { + info: { + text: ` + Placeholder skeleton state to use when content is loading. + `, + }, + }, +}; From d5e6e0b45bd5012648830865c8ccc432275ddcd7 Mon Sep 17 00:00:00 2001 From: Dak Date: Thu, 6 Aug 2020 15:37:37 -0500 Subject: [PATCH 2/8] docs(CodeSnippet): add mdx doc --- .../components/CodeSnippet/CodeSnippet.mdx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 packages/react/src/components/CodeSnippet/CodeSnippet.mdx diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx new file mode 100644 index 000000000000..e81ed1d43f4c --- /dev/null +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx @@ -0,0 +1,49 @@ +import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks' +import { withKnobs, boolean, select, text } from '@storybook/addon-knobs' +import * as stories from './CodeSnippet-story.js' +import CodeSnippet from '../CodeSnippet' + + +# CodeSnippet + +## Overview +Code snippets are strings or small blocks of reusable code that can be copied and inserted in a code file. + + + + import * as stories from './CodeSnippet-story.js' + + + +There are three different types of code snippets to help cater to varied line length use cases—inline, single line, and multi-line. + +## Inline +A block of text used inline with setences or paragraphs + + + '@storybook/ad1don-docs/blocks' + + +## Single line +A single line of code. + + + + import * as stories from './CodeSnippet-story.js' + + + +## Multi line +Multiple lines of code with the ability to show more or less strings. + + + + import * as stories from './CodeSnippet-story.js' + import CodeSnippet from '../CodeSnippet' + + + +## Component API + + \ No newline at end of file From 37b864a915b0049f49b20f8da6478a0fa45525d8 Mon Sep 17 00:00:00 2001 From: Dak Date: Thu, 6 Aug 2020 17:10:35 -0500 Subject: [PATCH 3/8] docs(CodeSnippet): add mdx doc --- .../react/src/components/CodeSnippet/CodeSnippet-story.js | 7 +++++++ packages/react/src/components/CodeSnippet/CodeSnippet.mdx | 7 ++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index 53593ab292ef..8508cc8c5919 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -10,6 +10,7 @@ import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, text, select } from '@storybook/addon-knobs'; import CodeSnippet from '../CodeSnippet'; import CodeSnippetSkeleton from './CodeSnippet.Skeleton'; +import mdx from './CodeSnippet.mdx'; const props = () => ({ type: select('Type', { @@ -49,7 +50,13 @@ const lightPropMessage = ( export default { title: 'CodeSnippet', + component: CodeSnippet, decorators: [withKnobs], + parameters: { + docs: { + page: mdx, + }, + }, }; export const codeSnippet = () => ( diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx index e81ed1d43f4c..2b85141013c8 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx @@ -46,4 +46,9 @@ Multiple lines of code with the ability to show more or less strings. ## Component API - \ No newline at end of file + + +## Feedback + +Help us improve these docs by +[editing this file on GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Accordion/Accordion.stories.mdx) \ No newline at end of file From 52f756dc15a64216be86fd71a62817b2ae9443c7 Mon Sep 17 00:00:00 2001 From: Dak Date: Tue, 11 Aug 2020 16:42:00 -0500 Subject: [PATCH 4/8] docs(CodeSnippet): add components to mdx --- .../CodeSnippet/CodeSnippet-story.js | 104 +++++++----------- .../components/CodeSnippet/CodeSnippet.mdx | 39 +++---- 2 files changed, 51 insertions(+), 92 deletions(-) diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index 8508cc8c5919..9d8a4e3969c3 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -12,21 +12,29 @@ import CodeSnippet from '../CodeSnippet'; import CodeSnippetSkeleton from './CodeSnippet.Skeleton'; import mdx from './CodeSnippet.mdx'; -const props = () => ({ - type: select('Type', { - inline: 'inline', - 'single line': 'single', - 'multiple line': 'multi', - }), - 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'), -}); +export default { + title: 'CodeSnippet', + component: CodeSnippet, + decorators: [withKnobs], + parameters: { + docs: { + page: mdx, + }, + }, +}; + +export const codeSnippet = () => ( + + {'node -v'} + +); + +export const skeleton = () => ( +
+ + +
+); const lightPropMessage = ( @@ -48,35 +56,21 @@ const lightPropMessage = ( ); -export default { - title: 'CodeSnippet', - component: CodeSnippet, - decorators: [withKnobs], - parameters: { - docs: { - page: mdx, - }, - }, -}; - -export const codeSnippet = () => ( - - {'node -v'} - -); - -codeSnippet.story = { - name: 'default', - parameters: { - 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. - `, - }, - }, -}; +const props = () => ({ + type: select('Type', { + inline: 'inline', + 'single line': 'single', + 'multiple line': 'multi', + }), + 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'), +}); export const playground = () => (
@@ -92,25 +86,3 @@ export const playground = () => (
); - -playground.story = { - name: 'playground', -}; - -export const Skeleton = () => ( -
- - -
-); - -Skeleton.story = { - name: 'skeleton', - parameters: { - info: { - text: ` - Placeholder skeleton state to use when content is loading. - `, - }, - }, -}; diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx index 2b85141013c8..3f2636532897 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx @@ -7,41 +7,28 @@ import CodeSnippet from '../CodeSnippet' --> # CodeSnippet -## Overview -Code snippets are strings or small blocks of reusable code that can be copied and inserted in a code file. - - - - import * as stories from './CodeSnippet-story.js' - - +## Table of Contents -There are three different types of code snippets to help cater to varied line length use cases—inline, single line, and multi-line. +- [Overview](#overview) +- [Skeleton state](#skeleton-state) +- [Component API](#component-api) +- [Feedback](#feedback) -## Inline -A block of text used inline with setences or paragraphs +## Overview +Code snippets are strings or small blocks of reusable code that can be copied and inserted in a code file. - '@storybook/ad1don-docs/blocks' + -## Single line -A single line of code. - - - - import * as stories from './CodeSnippet-story.js' - - +## Skeleton state -## Multi line -Multiple lines of code with the ability to show more or less strings. +You can use the `CodeSnippetSkeleton` component to render a skeleton variant of an +code snippet. This is useful to display while content in your code snippet is being +fetched from an external resource like an API. - - import * as stories from './CodeSnippet-story.js' - import CodeSnippet from '../CodeSnippet' - + ## Component API From 1ba96740ae101752a44f6cc465ef2ec7d31db7e1 Mon Sep 17 00:00:00 2001 From: Dak Date: Wed, 19 Aug 2020 18:00:07 -0500 Subject: [PATCH 5/8] docs(CodeSnippet): add single, multi, inline stories --- .../CodeSnippet/CodeSnippet-story.js | 21 +++++++ .../components/CodeSnippet/CodeSnippet.mdx | 57 +++++++++++++++---- 2 files changed, 67 insertions(+), 11 deletions(-) diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index 9d8a4e3969c3..7ef3d6ae8e0a 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -29,6 +29,27 @@ export const codeSnippet = () => ( ); +export const inline = () => ( + + {'node -v'} + +); + +export const multiline = () => ( + + {`@mixin grid-container { + width: 100%; + padding-right: padding(mobile); + padding-left: padding(mobile);`} + +); + +export const singleline = () => ( + + {'node -v'} + +); + export const skeleton = () => (
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx index 3f2636532897..fb7d983d8a35 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx @@ -1,34 +1,69 @@ -import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks' -import { withKnobs, boolean, select, text } from '@storybook/addon-knobs' -import * as stories from './CodeSnippet-story.js' -import CodeSnippet from '../CodeSnippet' +import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks'; +import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; +import * as stories from './CodeSnippet-story.js'; +import CodeSnippet from '../CodeSnippet'; + # CodeSnippet ## Table of Contents - [Overview](#overview) - [Skeleton state](#skeleton-state) +- [Inline](#inline) +- [Multi-line](#multiline) +- [Single-line](#singleline) - [Component API](#component-api) - [Feedback](#feedback) ## Overview -Code snippets are strings or small blocks of reusable code that can be copied and inserted in a code file. + +Code snippets are strings or small blocks of reusable code that can be copied +and inserted in a code file. - + ## Skeleton state -You can use the `CodeSnippetSkeleton` component to render a skeleton variant of an -code snippet. This is useful to display while content in your code snippet is being -fetched from an external resource like an API. +You can use the `CodeSnippetSkeleton` component to render a skeleton variant of +an code snippet. This is useful to display while content in your code snippet is +being fetched from an external resource like an API. + + + + + +## Inline + +Inline code snippet's are used for distinguishing a symbol, variable, function +name or similar small piece of code from it's surrounding text. + + + + + +## Multi-line + +Multiple line code snippets are used for displaying code with more than one +line. They're shown in a block and useful for showing classes, functions, blocks +of styles and the like. + + + + + +## Single-line + +Single line code snippets are used when showing code that fits on one line +without wrapping. Useful for calling out terminal commands, function +invocations, expressions etc. - + ## Component API @@ -38,4 +73,4 @@ fetched from an external resource like an API. ## Feedback Help us improve these docs by -[editing this file on GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Accordion/Accordion.stories.mdx) \ No newline at end of file +[editing this file on GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Accordion/Accordion.stories.mdx) From 60cf8936bd7db7ee5f412ae6c30e29f926d10ebc Mon Sep 17 00:00:00 2001 From: Dak Date: Wed, 19 Aug 2020 18:31:34 -0500 Subject: [PATCH 6/8] docs(CodeSnippet): fix ToC bug --- .../components/CodeSnippet/CodeSnippet-story.js | 6 ++++++ .../src/components/CodeSnippet/CodeSnippet.mdx | 15 +++++++++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index 7ef3d6ae8e0a..aee973718b1d 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -57,6 +57,12 @@ export const skeleton = () => (
); +export const light = () => ( + + {'node -v'} + +); + const lightPropMessage = ( The snippet container should never be the same color as the page background. diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx index fb7d983d8a35..606840556707 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx @@ -13,8 +13,9 @@ import CodeSnippet from '../CodeSnippet'; - [Overview](#overview) - [Skeleton state](#skeleton-state) - [Inline](#inline) -- [Multi-line](#multiline) -- [Single-line](#singleline) +- [Multi-line](#multi-line) +- [Single-line](#single-line) +- [Light variant](#light-variant) - [Component API](#component-api) - [Feedback](#feedback) @@ -66,6 +67,16 @@ invocations, expressions etc. +## Light variant + +Use the light prop modifier when using a code snippet on a background other than +the UI background for that theme. The light prop changes the background color +token of the code snippet from `field-01` to `field-02`. + + + + + ## Component API From abab5bc3ae094247b077a953df8f24384c25d2df Mon Sep 17 00:00:00 2001 From: Dak Date: Thu, 20 Aug 2020 13:38:59 -0500 Subject: [PATCH 7/8] docs(CodeSnippet): add copy blurb, remove unneeded stories --- .../src/components/CodeSnippet/CodeSnippet-story.js | 12 ------------ .../react/src/components/CodeSnippet/CodeSnippet.mdx | 11 ++++++----- 2 files changed, 6 insertions(+), 17 deletions(-) diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index aee973718b1d..0d223212c13d 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -23,12 +23,6 @@ export default { }, }; -export const codeSnippet = () => ( - - {'node -v'} - -); - export const inline = () => ( {'node -v'} @@ -57,12 +51,6 @@ export const skeleton = () => ( ); -export const light = () => ( - - {'node -v'} - -); - const lightPropMessage = ( The snippet container should never be the same color as the page background. diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx index 606840556707..39898038f2f0 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx @@ -21,11 +21,12 @@ import CodeSnippet from '../CodeSnippet'; ## Overview -Code snippets are strings or small blocks of reusable code that can be copied -and inserted in a code file. +Code snippets are strings or small blocks of reusable code that are copyable. We +don't provide the copy functionality and recommend +[clipboard.js](https://clipboardjs.com/). - + ## Skeleton state @@ -74,7 +75,7 @@ the UI background for that theme. The light prop changes the background color token of the code snippet from `field-01` to `field-02`. - + ## Component API @@ -84,4 +85,4 @@ token of the code snippet from `field-01` to `field-02`. ## Feedback Help us improve these docs by -[editing this file on GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Accordion/Accordion.stories.mdx) +[editing this file on GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/CodeSnippet/CodeSnippet.stories.mdx) From 0632ea2ca0dc6630447b6052ffa85d9fe2f3a563 Mon Sep 17 00:00:00 2001 From: Dak Date: Thu, 20 Aug 2020 14:01:43 -0500 Subject: [PATCH 8/8] docs(CodenSnippet): remove light example --- .../react/src/components/CodeSnippet/CodeSnippet.mdx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx index 39898038f2f0..2c922e410423 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx @@ -68,16 +68,6 @@ invocations, expressions etc. -## Light variant - -Use the light prop modifier when using a code snippet on a background other than -the UI background for that theme. The light prop changes the background color -token of the code snippet from `field-01` to `field-02`. - - - - - ## Component API