"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithoutToPropResultsInAButtonLookingLikeALink = exports.WithUnderline = exports.WithTypographyPrimaryAsType = exports.WithDisplay = exports.WithDisabledPropResultsInADisabledButtonLookingLikeALink = exports.WithColor = exports.FullServerRedirectLinkWithItsDefaultValues = exports.ExternalLinkWithRelAndTargetOverriden = exports.ExternalLinkWithItsDefaultValues = exports.DefaultUsage = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _addonActions = require("@storybook/addon-actions");
var _reactRouter = require("react-router");
var _ = require("../..");
var _ReactRouterLinkHelper = require("../../common/Links/ReactRouterLinkHelper");
var _Display = require("../../common/Display");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Molecules / Link',
  parameters: {
    component: _.Link
  }
};
var ExampleBlackBackground = _styledComponents.default.div.withConfig({
  displayName: "Linkstories__ExampleBlackBackground",
  componentId: "sc-6q09pr-0"
})(["background:", ";"], function (p) {
  return p.theme.color.backgroundDark;
});
var View = function View() {
  var location = (0, _reactRouter.useLocation)();
  return _react.default.createElement("pre", null, _react.default.createElement("code", null, JSON.stringify(location, null, 2)));
};
var DefaultUsage = exports.DefaultUsage = {
  render: function render() {
    return _react.default.createElement(_ReactRouterLinkHelper.Provider, null, _react.default.createElement(_.Typography, {
      type: "secondary",
      weight: "bold"
    }, _react.default.createElement(_.Link, {
      to: "/route1",
      onClick: (0, _addonActions.action)('clicked')
    }, "Link1")), _react.default.createElement(_.Typography, {
      type: "secondary",
      weight: "bold"
    }, _react.default.createElement(_.Link, {
      to: "/route2",
      onClick: (0, _addonActions.action)('clicked')
    }, "Link2")), _react.default.createElement(_reactRouter.Routes, null, _react.default.createElement(_reactRouter.Route, {
      path: "/:id",
      element: _react.default.createElement(View, null)
    })));
  },
  name: 'Default usage'
};
var WithTypographyPrimaryAsType = exports.WithTypographyPrimaryAsType = {
  render: function render() {
    return _react.default.createElement(_ReactRouterLinkHelper.Provider, null, _react.default.createElement(_.Typography, {
      type: "primary",
      weight: "bold"
    }, _react.default.createElement(_.Link, {
      to: "/route1",
      onClick: (0, _addonActions.action)('clicked')
    }, "Link1")), _react.default.createElement(_.Typography, {
      type: "primary",
      weight: "bold"
    }, _react.default.createElement(_.Link, {
      to: "/route2",
      onClick: (0, _addonActions.action)('clicked')
    }, "Link2")), _react.default.createElement(_reactRouter.Routes, null, _react.default.createElement(_reactRouter.Route, {
      path: "/:id",
      element: _react.default.createElement(View, null)
    })));
  },
  name: 'With typography primary as type'
};
var ExternalLinkWithItsDefaultValues = exports.ExternalLinkWithItsDefaultValues = {
  render: function render() {
    return _react.default.createElement(_ReactRouterLinkHelper.Provider, null, _react.default.createElement(_.Typography, {
      type: "secondary",
      weight: "bold"
    }, _react.default.createElement(_.Link, {
      to: "https://example.com",
      onClick: (0, _addonActions.action)('clicked'),
      external: true
    }, "Example external link")));
  },
  name: 'External link with its default values'
};
var FullServerRedirectLinkWithItsDefaultValues = exports.FullServerRedirectLinkWithItsDefaultValues = {
  render: function render() {
    return _react.default.createElement(_ReactRouterLinkHelper.Provider, null, _react.default.createElement(_.Typography, {
      type: "secondary",
      weight: "bold"
    }, _react.default.createElement(_.Link, {
      to: "https://example.com",
      onClick: (0, _addonActions.action)('clicked'),
      fullServerRedirect: true
    }, "Example full server redirect link")));
  },
  name: 'Full server redirect link with its default values'
};
var ExternalLinkWithRelAndTargetOverriden = exports.ExternalLinkWithRelAndTargetOverriden = {
  render: function render() {
    return _react.default.createElement(_ReactRouterLinkHelper.Provider, null, _react.default.createElement(_.Typography, {
      type: "secondary",
      weight: "bold"
    }, _react.default.createElement(_.Link, {
      to: "https://example.com",
      onClick: (0, _addonActions.action)('clicked'),
      rel: "nofollow",
      target: "_self",
      external: true
    }, "Example external link")));
  },
  name: 'External link with rel and target overriden'
};
var WithDisabledPropResultsInADisabledButtonLookingLikeALink = exports.WithDisabledPropResultsInADisabledButtonLookingLikeALink = {
  render: function render() {
    return _react.default.createElement(_ReactRouterLinkHelper.Provider, null, _react.default.createElement(_.Typography, {
      type: "secondary",
      weight: "bold"
    }, _react.default.createElement(_.Link, {
      onClick: (0, _addonActions.action)('clicked'),
      disabled: true
    }, "Link")));
  },
  name: 'With disabled prop results in a disabled button looking like a link'
};
var WithoutToPropResultsInAButtonLookingLikeALink = exports.WithoutToPropResultsInAButtonLookingLikeALink = {
  render: function render() {
    return _react.default.createElement(_ReactRouterLinkHelper.Provider, null, _react.default.createElement(_.Typography, {
      type: "secondary",
      weight: "bold"
    }, _react.default.createElement(_.Link, {
      onClick: (0, _addonActions.action)('clicked')
    }, "Link")));
  },
  name: 'Without to prop results in a button looking like a link'
};
var WithColor = exports.WithColor = {
  render: function render() {
    return _react.default.createElement(_ReactRouterLinkHelper.Provider, null, _react.default.createElement(_Display.Display, {
      items: [{
        title: 'Black',
        component: _react.default.createElement(_.Typography, {
          type: "primary"
        }, _react.default.createElement(_.Link, {
          color: "black",
          to: "https://example.com",
          external: true,
          onClick: (0, _addonActions.action)('clicked')
        }, "Link"))
      }, {
        title: 'Blue',
        component: _react.default.createElement(_.Typography, {
          type: "primary"
        }, _react.default.createElement(_.Link, {
          color: "blue",
          to: "https://example.com",
          external: true,
          onClick: (0, _addonActions.action)('clicked')
        }, "Link"))
      }, {
        title: 'Inherit',
        component: _react.default.createElement(ExampleBlackBackground, null, _react.default.createElement(_.Typography, {
          type: "primary",
          color: function color(t) {
            return t.color.textLight;
          }
        }, _react.default.createElement(_.Link, {
          color: "inherit",
          to: "https://example.com",
          external: true,
          onClick: (0, _addonActions.action)('clicked')
        }, "Link")))
      }]
    }));
  },
  name: 'With color prop'
};
var WithDisplay = exports.WithDisplay = {
  render: function render() {
    return _react.default.createElement(_ReactRouterLinkHelper.Provider, null, _react.default.createElement(_Display.Display, {
      items: [{
        title: 'Link',
        component: _react.default.createElement(_.Typography, {
          type: "primary"
        }, _react.default.createElement(_.Link, {
          display: "block",
          to: "https://example.com",
          external: true,
          onClick: (0, _addonActions.action)('clicked')
        }, "Link"))
      }, {
        title: 'Button',
        component: _react.default.createElement(_.Typography, {
          type: "primary"
        }, _react.default.createElement(_.Link, {
          display: "block",
          onClick: (0, _addonActions.action)('clicked')
        }, "Link"))
      }]
    }));
  },
  name: 'With display prop'
};
var WithUnderline = exports.WithUnderline = {
  render: function render() {
    return _react.default.createElement(_ReactRouterLinkHelper.Provider, null, _react.default.createElement(_Display.Display, {
      items: [{
        title: 'Link',
        component: _react.default.createElement(_.Typography, {
          type: "primary"
        }, _react.default.createElement(_.Link, {
          to: "https://example.com",
          external: true,
          underlined: true,
          onClick: (0, _addonActions.action)('clicked')
        }, "Link"))
      }, {
        title: 'Button',
        component: _react.default.createElement(_.Typography, {
          type: "primary"
        }, _react.default.createElement(_.Link, {
          onClick: (0, _addonActions.action)('clicked'),
          underlined: true
        }, "Link"))
      }]
    }));
  }
};