optimizely-oui/dist/js/components/ManagerSideNav/ManagerSideNav.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("../Switch/index.js"));

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

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

var stories = (0, _react2.storiesOf)("Experimental|ManagerSideNav", 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(_index["default"], null, _react["default"].createElement(_index["default"].Header, {
    hasBackLink: true,
    backLinkHref: "#features",
    backLinkText: "Features",
    backLinkOnClick: (0, _addonActions.action)("Back link was clicked"),
    usesMonospaceStyling: true,
    projectName: "CTP Bank - Full Stack",
    title: "recurring_deposit",
    friendlyTitle: "Recurring Deposit"
  }, _react["default"].createElement(_index["default"].HeaderDetails, {
    items: [{
      label: "Created by",
      value: "Sophia Hernandez"
    }]
  })), _react["default"].createElement(_index["default"].NavList, {
    label: "Rules"
  }, _react["default"].createElement(_index["default"].NavItem, {
    isActive: true,
    testSection: "prod-item",
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("Dev item was clicked"),
      href: "#"
    }, _react["default"].createElement("p", {
      className: "flush line--tight"
    }, "Production"), _react["default"].createElement("p", {
      className: "micro muted flush line--tight"
    }, "Primary environment")),
    rightContent: _react["default"].createElement(_index2["default"], {
      ariaLabel: "Turn feature on in Production",
      elementId: "prod-toggle",
      checked: true,
      onClick: (0, _addonActions.action)("Toggled Prod Switch")
    })
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    testSection: "dev-item",
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("Dev item was clicked"),
      href: "#dev"
    }, _react["default"].createElement("p", {
      className: "flush line--tight"
    }, "Development"), _react["default"].createElement("p", {
      className: "micro muted flush line--tight"
    }, "Environment")),
    rightContent: _react["default"].createElement(_index2["default"], {
      ariaLabel: "Turn feature on in Development",
      elementId: "dev-toggle",
      checked: false,
      onClick: (0, _addonActions.action)("Toggled Development Switch")
    })
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    testSection: "dev-item",
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("Long item was clicked"),
      href: "#long"
    }, _react["default"].createElement("p", {
      className: "flush line--tight"
    }, "Another environment with a very long name"), _react["default"].createElement("p", {
      className: "micro muted flush line--tight"
    }, "Environment")),
    rightContent: _react["default"].createElement(_index2["default"], {
      ariaLabel: "Turn feature on in Another Environment",
      elementId: "long-toggle",
      checked: false,
      onClick: (0, _addonActions.action)("Toggled Long environment Switch")
    })
  })), _react["default"].createElement(_index["default"].NavList, {
    label: "Flag Setup"
  }, _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("Default variables item was clicked"),
      href: "#default-variables"
    }, "Default Variables")
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("Variations item was clicked"),
      href: "#variations"
    }, "Variations")
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("History item was clicked"),
      href: "#history"
    }, "History")
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("Settings item was clicked"),
      href: "#settings"
    }, "Settings")
  })));
}).add("Simple (no sections)", function () {
  return _react["default"].createElement(_index["default"], null, _react["default"].createElement(_index["default"].Header, {
    hasBackLink: true,
    backLinkHref: "#features",
    backLinkText: "Features",
    backLinkOnClick: (0, _addonActions.action)("Back link was clicked"),
    usesMonospaceStyling: true,
    projectName: "CTP Bank - Full Stack",
    title: "recurring_deposit",
    friendlyTitle: "Recurring Deposit"
  }, _react["default"].createElement(_index["default"].HeaderDetails, {
    items: [{
      label: "Created by",
      value: "Sophia Hernandez"
    }]
  })), _react["default"].createElement(_index["default"].NavList, null, _react["default"].createElement(_index["default"].NavItem, {
    isActive: true,
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("Default variables item was clicked"),
      href: "#default-variables"
    }, "Default Variables")
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("Variations item was clicked"),
      href: "#variations"
    }, "Variations")
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("History item was clicked"),
      href: "#history"
    }, "History")
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("Settings item was clicked"),
      href: "#settings"
    }, "Settings")
  })));
}).add("With a custom link (like a React Router Link)", function () {
  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("p", null, "Using the classes", _react["default"].createElement("em", null, _react["default"].createElement("code", null, " oui-manager-side-nav__custom-link ")), "and", _react["default"].createElement("code", null, _react["default"].createElement("em", null, " oui-manager-side-nav__custom-link--active")), ", you can use a custom link for the nav item content and get consistent styling"), _react["default"].createElement(_index["default"], null, _react["default"].createElement(_index["default"].Header, {
    hasBackLink: true,
    backLinkHref: "#features",
    backLinkText: "Features",
    backLinkOnClick: (0, _addonActions.action)("Back link was clicked"),
    usesMonospaceStyling: true,
    projectName: "CTP Bank - Full Stack",
    title: "recurring_deposit",
    friendlyTitle: "Recurring Deposit"
  }, _react["default"].createElement(_index["default"].HeaderDetails, {
    items: [{
      label: "Created by",
      value: "Sophia Hernandez"
    }]
  })), _react["default"].createElement(_index["default"].NavList, null, _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("Default variables item was clicked"),
      href: "#default-variables"
    }, "Default Variables")
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement("a", {
      href: "www.google.com",
      className: "oui-manager-side-nav__custom-link"
    }, "I am a custom link")
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement("a", {
      href: "www.google.com",
      className: "oui-manager-side-nav__custom-link oui-manager-side-nav__custom-link--active"
    }, "I am an active custom link")
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("History item was clicked"),
      href: "#history"
    }, "History")
  }), _react["default"].createElement(_index["default"].NavItem, {
    isActive: false,
    leftContent: _react["default"].createElement(_index3["default"], {
      isFullWidth: true,
      onClick: (0, _addonActions.action)("Settings item was clicked"),
      href: "#settings"
    }, "Settings")
  }))));
});