- {
- '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)