optimizely-oui/dist/js/components/Code/Code.story.js

Optimizely's Component Library.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _addonKnobs = require("@storybook/addon-knobs");

var _Code = _interopRequireDefault(require("../Code"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var langOptions = {
  cs: "cs",
  css: "css",
  diff: "diff",
  html: "html",
  java: "java",
  javascript: "javascript",
  js: "js",
  jsx: "jsx",
  markdown: "markdown",
  md: "md",
  objectivec: "objectivec",
  php: "php",
  python: "python",
  ruby: "ruby",
  scss: "scss",
  swift: "swift"
};
var stories = (0, _react2.storiesOf)("Informational|Code", module);
stories.addDecorator(_addonKnobs.withKnobs).addDecorator(function (story) {
  return _react["default"].createElement("div", {
    id: "root-preview"
  }, story());
}).addParameters({
  knobs: {
    // Allows users to paste JSX into the text knobs (e.g. `<MyComponent>`)
    // w/o it getting rewritten as `&lt;MyComponent&gt`;
    escapeHTML: false
  }
});
stories.add("Default", function () {
  return _react["default"].createElement(_Code["default"], {
    hasCopyButton: (0, _addonKnobs["boolean"])("hasCopyButton", true),
    isHighlighted: (0, _addonKnobs["boolean"])("isHighlighted", true),
    testSection: "my-code-box",
    type: (0, _addonKnobs.select)("type", {
      inline: "inline",
      block: "block"
    }, "block"),
    language: (0, _addonKnobs.select)("language", langOptions, "js")
  }, (0, _addonKnobs.text)("code", "var foo = `bar`;\nvar bat = `baz`; var withAReallyReallyLongName = `a value with a really really long string`"));
}).add("With styled copy button", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement(_Code["default"], {
    copyButtonStyle: "none",
    copyButtonUsesTextLabel: false,
    hasCopyButton: (0, _addonKnobs["boolean"])("hasCopyButton", true),
    isHighlighted: true,
    testSection: "my-code-box",
    type: (0, _addonKnobs.select)("type", {
      inline: "inline",
      block: "block"
    }, "block"),
    language: (0, _addonKnobs.select)("language", langOptions, "js")
  }, (0, _addonKnobs.text)("code", "var foo = `bar`; var bat = `baz`; var withAReallyReallyLongName = `a value with a really really long string`")), _react["default"].createElement(_Code["default"], {
    copyButtonStyle: "highlight",
    copyButtonUsesTextLabel: (0, _addonKnobs["boolean"])("copyButtonUsesTextLabel", true),
    hasCopyButton: (0, _addonKnobs["boolean"])("hasCopyButton", true),
    isHighlighted: true,
    testSection: "my-code-box",
    type: (0, _addonKnobs.select)("type", {
      inline: "inline",
      block: "block"
    }, "block"),
    language: (0, _addonKnobs.select)("language", langOptions, "js")
  }, (0, _addonKnobs.text)("code", "var foo = `bar`; var bat = `baz`; var withAReallyReallyLongName = `a value with a really really long string`")));
}).add("With wrapping", function () {
  return _react["default"].createElement(_Code["default"], {
    copyButtonStyle: "none",
    copyButtonUsesTextLabel: (0, _addonKnobs["boolean"])("copyButtonUsesTextLabel", false),
    hasCopyButton: (0, _addonKnobs["boolean"])("hasCopyButton", true),
    isHighlighted: true,
    testSection: "my-code-box",
    type: (0, _addonKnobs.select)("type", {
      inline: "inline",
      block: "block"
    }, "block"),
    language: (0, _addonKnobs.select)("language", langOptions, "js"),
    shouldWrap: (0, _addonKnobs["boolean"])("shouldWrap", true)
  }, (0, _addonKnobs.text)("code", "HEYTA1WOHOOjQ2N2YxNDgxLWEzZjEtNDkwNi05OTRhLWMxN2FjJhYWU0ZjozNzUzNmMi00MjUyLTRkZjEtYjhjNy1iMzE1YmEyMj1234567890"));
});