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

Optimizely's Component Library.

import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, text, boolean as _boolean, select } from "@storybook/addon-knobs";
import Code from "../Code";
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 = storiesOf("Informational|Code", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.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.createElement(Code, {
    hasCopyButton: _boolean("hasCopyButton", true),
    isHighlighted: _boolean("isHighlighted", true),
    testSection: "my-code-box",
    type: select("type", {
      inline: "inline",
      block: "block"
    }, "block"),
    language: select("language", langOptions, "js")
  }, 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.createElement("div", null, React.createElement(Code, {
    copyButtonStyle: "none",
    copyButtonUsesTextLabel: false,
    hasCopyButton: _boolean("hasCopyButton", true),
    isHighlighted: true,
    testSection: "my-code-box",
    type: select("type", {
      inline: "inline",
      block: "block"
    }, "block"),
    language: select("language", langOptions, "js")
  }, text("code", "var foo = `bar`; var bat = `baz`; var withAReallyReallyLongName = `a value with a really really long string`")), React.createElement(Code, {
    copyButtonStyle: "highlight",
    copyButtonUsesTextLabel: _boolean("copyButtonUsesTextLabel", true),
    hasCopyButton: _boolean("hasCopyButton", true),
    isHighlighted: true,
    testSection: "my-code-box",
    type: select("type", {
      inline: "inline",
      block: "block"
    }, "block"),
    language: select("language", langOptions, "js")
  }, text("code", "var foo = `bar`; var bat = `baz`; var withAReallyReallyLongName = `a value with a really really long string`")));
}).add("With wrapping", function () {
  return React.createElement(Code, {
    copyButtonStyle: "none",
    copyButtonUsesTextLabel: _boolean("copyButtonUsesTextLabel", false),
    hasCopyButton: _boolean("hasCopyButton", true),
    isHighlighted: true,
    testSection: "my-code-box",
    type: select("type", {
      inline: "inline",
      block: "block"
    }, "block"),
    language: select("language", langOptions, "js"),
    shouldWrap: _boolean("shouldWrap", true)
  }, text("code", "HEYTA1WOHOOjQ2N2YxNDgxLWEzZjEtNDkwNi05OTRhLWMxN2FjJhYWU0ZjozNzUzNmMi00MjUyLTRkZjEtYjhjNy1iMzE1YmEyMj1234567890"));
});