import { Story, ArgTypes, Canvas, Meta } from '@storybook/addon-docs/blocks';
import CodeSnippet from '../CodeSnippet';
import * as CodeSnippetStories from './CodeSnippet.stories';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Meta isTemplate />

# CodeSnippet

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/CodeSnippet)
&nbsp;|&nbsp;
[Usage guidelines](https://www.carbondesignsystem.com/components/code-snippet/usage)
&nbsp;|&nbsp;
[Accessibility](https://www.carbondesignsystem.com/components/code-snippet/accessibility)

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
- [Inline](#inline)
- [Multi-line](#multi-line)
- [Single-line](#single-line)
- [Skeleton state](#skeleton-state)
- [Component API](#component-api)
- [Migration notes](#migration-notes)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## 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/).

<Canvas
  of={CodeSnippetStories.Inline}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(CodeSnippetStories.Inline),
    },
  ]}
/>

## Inline

Inline code snippets are used for distinguishing a symbol, variable, function
name or similar small piece of code from its surrounding text.

<Canvas
  of={CodeSnippetStories.Inline}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(CodeSnippetStories.Inline),
    },
  ]}
/>

## 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. There is an option to wrap the lines displayed if the
lines are longer than the container.

<Canvas
  of={CodeSnippetStories.Multiline}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(CodeSnippetStories.Multiline),
    },
  ]}
/>

## 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.

<Canvas
  of={CodeSnippetStories.Singleline}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(CodeSnippetStories.Singleline),
    },
  ]}
/>

## 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.

<Canvas
  of={CodeSnippetStories.Skeleton}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(CodeSnippetStories.Skeleton),
    },
  ]}
/>

## Component API

<ArgTypes />

## Migration notes

- `copyLabel` has been deprecated in favor of `ariaLabel`.

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/CodeSnippet/CodeSnippet.mdx)
