diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
index 695ee1ed64a9..0d223212c13d 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
@@ -7,51 +7,50 @@
import React from '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';
+import mdx from './CodeSnippet.mdx';
-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),
- }),
- 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'),
- }),
+export default {
+ title: 'CodeSnippet',
+ component: CodeSnippet,
+ decorators: [withKnobs],
+ parameters: {
+ docs: {
+ page: mdx,
+ },
+ },
};
+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 = () => (
+
+
+
+
+);
+
const lightPropMessage = (
The snippet container should never be the same color as the page background.
@@ -72,134 +71,33 @@ const lightPropMessage = (
);
-export default {
- title: 'CodeSnippet',
- decorators: [withKnobs],
-
- parameters: {
- component: CodeSnippet,
-
- subcomponents: {
- CodeSnippetSkeleton,
- },
- },
-};
-
-export const Inline = () => (
-
- {props.inline().light && lightPropMessage}
-
- {'node -v'}
-
-
-);
-
-Inline.storyName = 'inline';
-
-Inline.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.
- `,
- },
-};
-
-export const SingleLine = () => (
-
- {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!'
- }
+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 = () => (
+
+ {props().light && lightPropMessage}
+
+ {props().type === 'multi'
+ ? `@mixin grid-container {
+ width: 100%;
+ padding-right: padding(mobile);
+ padding-left: padding(mobile);
+}`
+ : 'node -v'}
);
-
-SingleLine.storyName = 'single line';
-
-SingleLine.parameters = {
- info: {
- text: `
- Code snippets are small blocks of reusable code that can be inserted in a code file.
-
- The Code style is for larger, multi-line code snippets.
- `,
- },
-};
-
-export const MultiLine = () => {
- const multilineProps = props.multiline();
- return (
-
- {multilineProps.light && lightPropMessage}
-
- {`@mixin grid-container {
-width: 100%;
-padding-right: padding(mobile);
-padding-left: padding(mobile);
-
-@include breakpoint(bp--xs--major) {
-padding-right: padding(xs);
-padding-left: padding(xs);
-}
-}
-
-$z-indexes: (
-modal : 9000,
-overlay : 8000,
-dropdown : 7000,
-header : 6000,
-footer : 5000,
-hidden : - 1,
-overflowHidden: - 1,
-floating: 10000
-);`}
-
-
-
- {`@mixin grid-container {
-width: 100%;
-padding-right: padding(mobile);
-padding-left: padding(mobile);
-
-@include breakpoint(bp--xs--major) {
-padding-right: padding(xs);
-}
-}`}
-
-
- );
-};
-
-MultiLine.storyName = 'multi line';
-
-MultiLine.parameters = {
- info: {
- text: `
- Code snippets are small blocks of reusable code that can be inserted in a code file.
-
- The Terminal style is for single-line .
- `,
- },
-};
-
-export const Skeleton = () => (
-
-
-
-
-);
-
-Skeleton.storyName = 'skeleton';
-
-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
new file mode 100644
index 000000000000..2c922e410423
--- /dev/null
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx
@@ -0,0 +1,78 @@
+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](#multi-line)
+- [Single-line](#single-line)
+- [Light variant](#light-variant)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+## Overview
+
+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
+
+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
+
+
+
+## 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/CodeSnippet/CodeSnippet.stories.mdx)