optimizely-oui/dist/js/components/Link/Link.story.js

Optimizely's Component Library.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _addonActions = require("@storybook/addon-actions");

var _addonKnobs = require("@storybook/addon-knobs");

var _reactOuiIcons = _interopRequireDefault(require("react-oui-icons"));

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

var _Button = _interopRequireDefault(require("../Button"));

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

var stories = (0, _react2.storiesOf)("Navigation|Link", 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("ul", null, _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: (0, _addonKnobs.text)("href", "http://google.com"),
    isDisabled: (0, _addonKnobs["boolean"])("isDisabled", false),
    style: (0, _addonKnobs.select)("style", {
      "default": "default",
      dark: "dark",
      muted: "muted",
      "bad-news": "bad-news",
      reverse: "reverse"
    }, "default")
  }, (0, _addonKnobs.text)("children", "Link"))));
}).add("New window", function () {
  return _react["default"].createElement("ul", null, _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: (0, _addonKnobs.text)("href", "http://google.com"),
    newWindow: (0, _addonKnobs["boolean"])("newWindow", true),
    style: (0, _addonKnobs.select)("style", {
      "default": "default",
      dark: "dark",
      muted: "muted",
      "bad-news": "bad-news",
      reverse: "reverse"
    }, "default")
  }, (0, _addonKnobs.text)("children", "Link"))));
}).add("All links", function () {
  return _react["default"].createElement("ul", null, _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    isDisabled: (0, _addonKnobs["boolean"])("isDisabled", false),
    onClick: (0, _addonActions.action)("click blocklist item home")
  }, (0, _addonKnobs.text)("default", "Link"))), _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    isDisabled: (0, _addonKnobs["boolean"])("isDisabled", false),
    style: "dark"
  }, (0, _addonKnobs.text)("dark", "Link Dark"))), _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    isDisabled: (0, _addonKnobs["boolean"])("isDisabled", false),
    style: "muted"
  }, (0, _addonKnobs.text)("muted", "Link Muted"))), _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    isDisabled: (0, _addonKnobs["boolean"])("isDisabled", false),
    style: "bad-news"
  }, (0, _addonKnobs.text)("bad-news", "Link Bad News"))), _react["default"].createElement("li", {
    className: "background--brand"
  }, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    isDisabled: (0, _addonKnobs["boolean"])("isDisabled", false),
    style: "reverse"
  }, (0, _addonKnobs.text)("reverse", "Link Reverse"))), _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    isDisabled: (0, _addonKnobs["boolean"])("isDisabled", false),
    isFullWidth: (0, _addonKnobs["boolean"])("isFullWidth", true)
  }, (0, _addonKnobs.text)("full width", "Link with isFullWidth"))));
}).add("All disabled", function () {
  return _react["default"].createElement("ul", null, _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    isDisabled: true
  }, "Link")), _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    isDisabled: true,
    style: "dark"
  }, "Link Dark")), _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    isDisabled: true,
    style: "muted"
  }, "Link Muted")), _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    isDisabled: true,
    style: "bad-news"
  }, "Link Bad News")), _react["default"].createElement("li", {
    className: "background--brand"
  }, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    isDisabled: true,
    style: "reverse"
  }, "Link Reverse")));
}).add("Link that looks like a Button", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement("p", null, _react["default"].createElement("span", {
    className: "push--right"
  }, _react["default"].createElement(_reactOuiIcons["default"], {
    fill: "red",
    name: "exclamation"
  })), "Be sure to set the \xA0", _react["default"].createElement("code", {
    className: "underline"
  }, _react["default"].createElement("strong", null, "isLink")), "\xA0 prop to `true` on the inner button when using this implementation"), _react["default"].createElement(_index["default"], {
    newWindow: true,
    href: (0, _addonKnobs.text)("href", "http://google.com")
  }, _react["default"].createElement(_Button["default"], {
    isLink: (0, _addonKnobs["boolean"])("isLink", true)
  }, "Go To Google")), _react["default"].createElement(_index["default"], {
    newWindow: true,
    href: (0, _addonKnobs.text)("href", "http://google.com")
  }, _react["default"].createElement(_Button["default"], {
    style: "outline",
    isLink: true,
    leftIcon: "save",
    rightIcon: "external"
  }, "With an icon")));
}).add("Link with icon", function () {
  return _react["default"].createElement("ul", null, _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    style: (0, _addonKnobs.select)("style", {
      "default": "default",
      dark: "dark",
      muted: "muted",
      "bad-news": "bad-news",
      reverse: "reverse"
    }, "default"),
    leftIcon: "calendar",
    isDisabled: (0, _addonKnobs["boolean"])("isDisabled", false),
    onClick: (0, _addonActions.action)("click blocklist item home")
  }, (0, _addonKnobs.text)("default", "Link"))), _react["default"].createElement("li", null, _react["default"].createElement(_index["default"], {
    href: "http://google.com",
    style: (0, _addonKnobs.select)("style", {
      "default": "default",
      dark: "dark",
      muted: "muted",
      "bad-news": "bad-news",
      reverse: "reverse"
    }, "default"),
    rightIcon: "external"
  }, "External link")));
}); // storiesOf('Link (Fake)', module)
//   .addDecorator(withKnobs)
//   .addDecorator(story => (
//     <div id="root-preview">
//       {story()}
//     </div>
//   ))
//   .add('Enabled', () => {
//     return (
//       <Link>Faux Link</Link>
//     );
//   })
//   .add('Disabled', () => {
//     return (
//       <Link
//         isDisabled={ true }>
//         Faux Link
//       </Link>
//     );
//   });