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

Optimizely's Component Library.

import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, boolean as _boolean, select } from "@storybook/addon-knobs";
import Token from "./index.js";
import { action } from "@storybook/addon-actions/dist/preview";
var styleOptions = {
  Primary: "primary",
  Secondary: "secondary",
  Tertiary: "tertiary",
  Error: "error"
};
var stories = storiesOf("Informational|Token", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Default", function () {
  return React.createElement("div", null, React.createElement(Token, {
    isDismissible: true,
    name: "Hello",
    style: select("style", styleOptions, "primary"),
    hasSnugWrap: _boolean("hasSnugWrap", false)
  }), React.createElement(Token, {
    name: "World",
    style: "secondary",
    hasSnugWrap: _boolean("hasSnugWrap", false)
  }));
}).add("No well", function () {
  return React.createElement("div", null, React.createElement(Token, {
    name: "Hello",
    style: "primary",
    showWell: false,
    hasSnugWrap: _boolean("hasSnugWrap", false)
  }), React.createElement(Token, {
    name: "World",
    style: "secondary",
    showWell: false,
    hasSnugWrap: _boolean("hasSnugWrap", false)
  }));
}).add("With ordering", function () {
  return React.createElement("div", null, React.createElement(Token, {
    name: "Hello",
    style: "primary",
    order: 1,
    hasSnugWrap: _boolean("hasSnugWrap", false)
  }), React.createElement(Token, {
    name: "World",
    style: "secondary",
    order: 2,
    hasSnugWrap: _boolean("hasSnugWrap", false)
  }));
}).add("Draggable", function () {
  return React.createElement("div", null, React.createElement(Token, {
    isDraggable: true,
    usesDragHandle: true,
    name: "Move me!",
    style: "secondary",
    showWell: _boolean("showWell", false)
  }), React.createElement("p", null, "See this ", React.createElement("a", {
    href: "/?path=/story/draganddrop--with-custom-drag-handle"
  }, "Drag and Drop story"), " for an example implementation"));
}).add("Draggable with Order specified", function () {
  return React.createElement(React.Fragment, null, React.createElement("div", {
    className: "push--bottom"
  }, React.createElement(Token, {
    description: "The big kids.",
    isDismissible: true,
    isDraggable: true,
    name: "Students: Grades 6-12",
    onDismiss: action("token dismissed"),
    order: 1,
    style: "primary"
  })), React.createElement("div", {
    className: "push--bottom"
  }, React.createElement(Token, {
    description: "The little kids.",
    isDismissible: true,
    isDraggable: true,
    name: "Students: Grades K-5",
    onDismiss: action("token dismissed"),
    order: 2,
    style: "secondary"
  })), React.createElement("div", {
    className: "push--bottom"
  }, React.createElement(Token, {
    description: "The little little kids.",
    isDismissible: true,
    isDraggable: true,
    name: "Students: TK",
    onDismiss: action("token dismissed"),
    order: 3,
    style: "secondary"
  })));
}).add("Dismissible", function () {
  return React.createElement(Token, {
    isDismissible: true,
    name: "Delete me!",
    style: "primary",
    onDismiss: action("token dismissed"),
    hasSnugWrap: _boolean("hasSnugWrap", false)
  });
}).add("Full width", function () {
  return React.createElement(Token, {
    isDismissible: _boolean("isDismissible", true),
    isFullWidth: _boolean("isFullWidth", true),
    name: "I'm full width!",
    onDismiss: action("token dismissed"),
    showWell: _boolean("showWell", false),
    style: "primary"
  });
}).add("Vertical ordering with no well", function () {
  return React.createElement("div", {
    className: "flex flex--column"
  }, React.createElement(Token, {
    isDraggable: true,
    usesDragHandle: true,
    name: "Move me! I'm in the first place",
    style: "secondary",
    order: 1,
    showWell: _boolean("showWell", false)
  }), React.createElement(Token, {
    isDraggable: true,
    usesDragHandle: true,
    name: "Move me! I'm in the second place",
    style: "secondary",
    order: 2,
    showWell: _boolean("showWell", false)
  }), React.createElement(Token, {
    isDraggable: true,
    usesDragHandle: true,
    name: "Move me! I'm in the last place",
    style: "secondary",
    order: 99,
    showWell: _boolean("showWell", false)
  }));
});