optimizely-oui/dist/js/components/Token/Token.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 _index = _interopRequireDefault(require("./index.js"));

var _preview = require("@storybook/addon-actions/dist/preview");

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

var styleOptions = {
  Primary: "primary",
  Secondary: "secondary",
  Tertiary: "tertiary",
  Error: "error"
};
var stories = (0, _react2.storiesOf)("Informational|Token", module);
stories.addDecorator(_addonKnobs.withKnobs).addDecorator(function (story) {
  return _react["default"].createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Default", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
    isDismissible: true,
    name: "Hello",
    style: (0, _addonKnobs.select)("style", styleOptions, "primary"),
    hasSnugWrap: (0, _addonKnobs["boolean"])("hasSnugWrap", false)
  }), _react["default"].createElement(_index["default"], {
    name: "World",
    style: "secondary",
    hasSnugWrap: (0, _addonKnobs["boolean"])("hasSnugWrap", false)
  }));
}).add("No well", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
    name: "Hello",
    style: "primary",
    showWell: false,
    hasSnugWrap: (0, _addonKnobs["boolean"])("hasSnugWrap", false)
  }), _react["default"].createElement(_index["default"], {
    name: "World",
    style: "secondary",
    showWell: false,
    hasSnugWrap: (0, _addonKnobs["boolean"])("hasSnugWrap", false)
  }));
}).add("With ordering", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
    name: "Hello",
    style: "primary",
    order: 1,
    hasSnugWrap: (0, _addonKnobs["boolean"])("hasSnugWrap", false)
  }), _react["default"].createElement(_index["default"], {
    name: "World",
    style: "secondary",
    order: 2,
    hasSnugWrap: (0, _addonKnobs["boolean"])("hasSnugWrap", false)
  }));
}).add("Draggable", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
    isDraggable: true,
    usesDragHandle: true,
    name: "Move me!",
    style: "secondary",
    showWell: (0, _addonKnobs["boolean"])("showWell", false)
  }), _react["default"].createElement("p", null, "See this ", _react["default"].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["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("div", {
    className: "push--bottom"
  }, _react["default"].createElement(_index["default"], {
    description: "The big kids.",
    isDismissible: true,
    isDraggable: true,
    name: "Students: Grades 6-12",
    onDismiss: (0, _preview.action)("token dismissed"),
    order: 1,
    style: "primary"
  })), _react["default"].createElement("div", {
    className: "push--bottom"
  }, _react["default"].createElement(_index["default"], {
    description: "The little kids.",
    isDismissible: true,
    isDraggable: true,
    name: "Students: Grades K-5",
    onDismiss: (0, _preview.action)("token dismissed"),
    order: 2,
    style: "secondary"
  })), _react["default"].createElement("div", {
    className: "push--bottom"
  }, _react["default"].createElement(_index["default"], {
    description: "The little little kids.",
    isDismissible: true,
    isDraggable: true,
    name: "Students: TK",
    onDismiss: (0, _preview.action)("token dismissed"),
    order: 3,
    style: "secondary"
  })));
}).add("Dismissible", function () {
  return _react["default"].createElement(_index["default"], {
    isDismissible: true,
    name: "Delete me!",
    style: "primary",
    onDismiss: (0, _preview.action)("token dismissed"),
    hasSnugWrap: (0, _addonKnobs["boolean"])("hasSnugWrap", false)
  });
}).add("Full width", function () {
  return _react["default"].createElement(_index["default"], {
    isDismissible: (0, _addonKnobs["boolean"])("isDismissible", true),
    isFullWidth: (0, _addonKnobs["boolean"])("isFullWidth", true),
    name: "I'm full width!",
    onDismiss: (0, _preview.action)("token dismissed"),
    showWell: (0, _addonKnobs["boolean"])("showWell", false),
    style: "primary"
  });
}).add("Vertical ordering with no well", function () {
  return _react["default"].createElement("div", {
    className: "flex flex--column"
  }, _react["default"].createElement(_index["default"], {
    isDraggable: true,
    usesDragHandle: true,
    name: "Move me! I'm in the first place",
    style: "secondary",
    order: 1,
    showWell: (0, _addonKnobs["boolean"])("showWell", false)
  }), _react["default"].createElement(_index["default"], {
    isDraggable: true,
    usesDragHandle: true,
    name: "Move me! I'm in the second place",
    style: "secondary",
    order: 2,
    showWell: (0, _addonKnobs["boolean"])("showWell", false)
  }), _react["default"].createElement(_index["default"], {
    isDraggable: true,
    usesDragHandle: true,
    name: "Move me! I'm in the last place",
    style: "secondary",
    order: 99,
    showWell: (0, _addonKnobs["boolean"])("showWell", false)
  }));
});