optimizely-oui/dist/js/components/Toolbar/Toolbar.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 _addonActions = require("@storybook/addon-actions");

var _index = _interopRequireDefault(require("./index.js"));

var _index2 = _interopRequireDefault(require("../Dropdown/index.js"));

var _index3 = _interopRequireDefault(require("../Button/index.js"));

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

var envData = [{
  title: "Development"
}, {
  title: "Staging"
}, {
  title: "Production"
}];
var statusData = [{
  title: "Running"
}, {
  title: "Active"
}, {
  title: "Paused"
}];
var stories = (0, _react2.storiesOf)("Experimental|Toolbar", module);
stories.addDecorator(_addonKnobs.withKnobs).addDecorator(function (story) {
  return _react["default"].createElement("div", {
    id: "root-preview",
    style: {
      height: "300px"
    }
  }, story());
});
stories.add("Default", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement(_index["default"], null, _react["default"].createElement(_index["default"].Left, null, _react["default"].createElement(_index["default"].Link, {
    href: "www.google.com",
    label: "Link"
  })), _react["default"].createElement(_index["default"].Right, null, _react["default"].createElement(_index["default"].Link, {
    isDisabled: true,
    href: "www.google.com",
    label: "Disabled Link"
  }), _react["default"].createElement(_index["default"].Link, {
    href: "www.google.com",
    label: "Enabled Link"
  }), _react["default"].createElement(_index["default"].Button, {
    onClick: (0, _addonActions.action)("Saying hi!"),
    label: "Button"
  }))));
}).add("Without style options (no border, shadow, and/or padding)", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement("p", {
    className: "style--italic"
  }, "With style set to \"bare\" = no box-shadow or bottom border"), _react["default"].createElement(_index["default"], {
    toolbarStyle: ["bare"]
  }, _react["default"].createElement(_index["default"].Left, null, _react["default"].createElement(_index["default"].Link, {
    href: "www.google.com",
    label: "Link"
  })), _react["default"].createElement(_index["default"].Right, null, _react["default"].createElement(_index["default"].Link, {
    isDisabled: true,
    href: "www.google.com",
    label: "Disabled Link"
  }), _react["default"].createElement(_index["default"].Link, {
    href: "www.google.com",
    label: "Enabled Link"
  }), _react["default"].createElement(_index["default"].Button, {
    onClick: (0, _addonActions.action)("Saying hi!"),
    label: "Button"
  }))), _react["default"].createElement("p", {
    className: "push-double--top style--italic"
  }, "With style set to \"bare\" and \"tight\" = no extra padding around the toolbar"), _react["default"].createElement(_index["default"], {
    toolbarStyle: ["bare", "tight"]
  }, _react["default"].createElement(_index["default"].Left, null, _react["default"].createElement(_index["default"].Link, {
    href: "www.google.com",
    label: "Link"
  })), _react["default"].createElement(_index["default"].Right, null, _react["default"].createElement(_index["default"].Link, {
    isDisabled: true,
    href: "www.google.com",
    label: "Disabled Link"
  }), _react["default"].createElement(_index["default"].Link, {
    href: "www.google.com",
    label: "Enabled Link"
  }), _react["default"].createElement(_index["default"].Button, {
    onClick: (0, _addonActions.action)("Saying hi!"),
    label: "Button"
  }))));
}).add("With Dropdowns and styled Buttons", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement(_index["default"], {
    toolbarStyle: ["bare"]
  }, _react["default"].createElement(_index["default"].Left, null, _react["default"].createElement(_index2["default"], {
    buttonContent: {
      label: "Environment",
      content: "Production"
    },
    style: "plain",
    arrowIcon: "down"
  }, _react["default"].createElement(_index2["default"].Contents, null, envData.map(function (item, index) {
    return _react["default"].createElement(_index2["default"].ListItem, {
      key: index,
      role: "option"
    }, _react["default"].createElement(_index2["default"].BlockLink, {
      value: item.title,
      onClick: (0, _addonActions.action)("click on complex item")
    }, _react["default"].createElement(_index2["default"].BlockLinkText, {
      text: item.title
    }), _react["default"].createElement(_index2["default"].BlockLinkSecondaryText, {
      secondaryText: item.description
    })));
  }))), _react["default"].createElement(_index2["default"], {
    buttonContent: {
      label: "Status",
      content: "Active"
    },
    style: "plain",
    arrowIcon: "down"
  }, _react["default"].createElement(_index2["default"].Contents, null, envData.map(function (item, index) {
    return _react["default"].createElement(_index2["default"].ListItem, {
      key: index,
      role: "option"
    }, _react["default"].createElement(_index2["default"].BlockLink, {
      value: item.title,
      onClick: (0, _addonActions.action)("click on complex item")
    }, _react["default"].createElement(_index2["default"].BlockLinkText, {
      text: item.title
    }), _react["default"].createElement(_index2["default"].BlockLinkSecondaryText, {
      secondaryText: item.description
    })));
  }))), _react["default"].createElement(_index2["default"], {
    buttonContent: {
      label: "Rule Type",
      content: "Any"
    },
    style: "plain",
    arrowIcon: "down"
  }, _react["default"].createElement(_index2["default"].Contents, null, statusData.map(function (item, index) {
    return _react["default"].createElement(_index2["default"].ListItem, {
      key: index,
      role: "option"
    }, _react["default"].createElement(_index2["default"].BlockLink, {
      value: item.title,
      onClick: (0, _addonActions.action)("click on complex item")
    }, _react["default"].createElement(_index2["default"].BlockLinkText, {
      text: item.title
    })));
  })))), _react["default"].createElement(_index["default"].Right, null, _react["default"].createElement(_index3["default"], {
    style: "highlight",
    onClick: (0, _addonActions.action)("Saying hi!")
  }, "Create New"))));
});