text: /**
   * Copyright IBM Corp. 2016, 2018
   *
   * This source code is licensed under the Apache-2.0 license found in the
   * LICENSE file in the root directory of this source tree.
   */
  import React from 'react';
  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';
  export default {
    title: 'CodeSnippet',
    component: CodeSnippet,
    decorators: [withKnobs],
    parameters: {
      docs: {
        page: mdx
      }
    }
  };
  export var inline = function inline() {
    return /*#__PURE__*/React.createElement(CodeSnippet, {
      type: "inline",
      feedback: "Copied to clipboard"
    }, 'node -v');
  };
  export var multiline = function multiline() {
    return /*#__PURE__*/React.createElement(CodeSnippet, {
      type: "multi",
      feedback: "Copied to clipboard"
    }, "@mixin grid-container {\n     width: 100%;\n     padding-right: padding(mobile);\n     padding-left: padding(mobile);");
  };
  export var singleline = function singleline() {
    return /*#__PURE__*/React.createElement(CodeSnippet, {
      type: "single",
      feedback: "Copied to clipboard"
    }, 'node -v');
  };
  export var skeleton = function skeleton() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        width: '800px'
      }
    }, /*#__PURE__*/React.createElement(CodeSnippetSkeleton, {
      type: "single",
      style: {
        marginBottom: 8
      }
    }), /*#__PURE__*/React.createElement(CodeSnippetSkeleton, {
      type: "multi"
    }));
  };
  var lightPropMessage = /*#__PURE__*/React.createElement("small", {
    style: {
      display: 'block',
      paddingBottom: '1rem'
    }
  }, "The snippet container should never be the same color as the page background.", /*#__PURE__*/React.createElement("br", null), 'Do not use the ', /*#__PURE__*/React.createElement(CodeSnippet, {
    type: "inline",
    light: true
  }, "light"), ' variant on ', /*#__PURE__*/React.createElement(CodeSnippet, {
    type: "inline",
    light: true
  }, "$ui-background"), ' or ', /*#__PURE__*/React.createElement(CodeSnippet, {
    type: "inline",
    light: true
  }, "$ui-02"), ".");
  
  var props = function props() {
    return {
      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 var playground = function playground() {
    return /*#__PURE__*/React.createElement("div", {
      className: props().light ? 'bx--tile' : '',
      style: {
        width: '800px'
      }
    }, props().light && lightPropMessage, /*#__PURE__*/React.createElement(CodeSnippet, props(), props().type === 'multi' ? "@mixin grid-container {\n  width: 100%;\n  padding-right: padding(mobile);\n  padding-left: padding(mobile);\n}" : 'node -v'));
  };