"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.External = exports.RegularWithButton = exports.Regular = exports.default = void 0;

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

var _README = _interopRequireDefault(require("./README.mdx"));

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

var _ = require(".");

var _MainNavigationItem = _interopRequireDefault(require("../MainNavigationItem"));

var _SubNavigation = require("../SubNavigation");

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

var _Search = _interopRequireDefault(require("../Search"));

var _Link = _interopRequireDefault(require("../Link"));

var _User = _interopRequireDefault(require("../User"));

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

var _default = {
  title: 'Components/Navigations/MainNavigation',
  component: _.MainNavigation,
  subcomponents: {
    MainNavigationExternal: _.MainNavigationExternal
  },
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: _README.default,
    previewWidth: 'full'
  }
};
exports.default = _default;

var Regular = function Regular(args) {
  return /*#__PURE__*/_react.default.createElement(_.MainNavigation, args, function (_ref) {
    var onChangeSub = _ref.onChangeSub;
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
      href: "http://communities.wfp.org",
      target: "_blank"
    }, "Section 1")), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, {
      subNavigation: /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigation, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationHeader, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationTitle, null, "The Title"), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationLink, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
        small: true
      }, "The SubPage Link")), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationFilter, null, /*#__PURE__*/_react.default.createElement(_Search.default, {
        small: true,
        id: "search-2",
        labelText: "Filter",
        placeHolderText: "Filter list"
      }))), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationContent, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationList, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationGroup, {
        title: "First List",
        columns: 1
      }, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationItem, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
        href: "https://go.docs.wfp.org",
        target: "_blank"
      }, "Lorem Ipsum et jomen"))))))
    }, /*#__PURE__*/_react.default.createElement(_Link.default, {
      href: "http://manuals.wfp.org",
      target: "_blank"
    }, "Section 2")), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
      href: "https://go.docs.wfp.org",
      target: "_blank"
    }, "Section 3")), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
      href: "http://opweb.wfp.org",
      target: "_blank"
    }, "Section 4")), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, null, /*#__PURE__*/_react.default.createElement(_Search.default, {
      kind: "main",
      id: "search-2",
      placeHolderText: "Search",
      onChange: (0, _addonActions.action)('onChange')
    })), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, {
      className: "wfp--main-navigation__user",
      subNavigation: /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigation, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationHeader, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationTitle, null, "Welcome Lorem!"), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationLink, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
        kind: "secondary",
        small: true
      }, "Logout"))), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationContent, null, "Additional content can be placed here.", /*#__PURE__*/_react.default.createElement("br", null), "Demo for internal close action:", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
        onClick: function onClick() {
          return onChangeSub('close');
        }
      }, "Close Menu")))
    }, /*#__PURE__*/_react.default.createElement(_User.default, {
      ellipsis: true,
      name: "Max Mustermann long name",
      missingImage: "letter"
    })), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, {
      className: "wfp--main-navigation__user",
      subNavigation: /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigation, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationHeader, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationTitle, null, "Choose language")), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationContent, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationList, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationGroup, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationItem, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
        href: "#"
      }, "English")), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationItem, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
        href: "#"
      }, "French ", /*#__PURE__*/_react.default.createElement("i", null, "(fran\xE7ais)"))), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationItem, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
        href: "#"
      }, "German ", /*#__PURE__*/_react.default.createElement("i", null, "(deutsch)")))))))
    }, /*#__PURE__*/_react.default.createElement("span", null, "EN")));
  });
};

exports.Regular = Regular;
var description = "\nYou can customize the content by using `BannerNavigation`.\n";

var sourcecode = function sourcecode(type) {
  return "import { Button,User, Search } from \"@wfp/ui\";\n  import {\n    MainNavigationExternal,\n    MainNavigationItem,\n    SubNavigation,\n    SubNavigationHeader,\n    SubNavigationTitle,\n    SubNavigationLink,\n    SubNavigationContent,\n    SubNavigationFilter,\n    SubNavigationList,\n    SubNavigationGroup,\n    SubNavigationItem\n  } from \"@wfp/ui\";\n\n  const Navigation = () => {\n    return (\n      <MainNavigation >\n\n      <MainNavigationItem>\n        <Link href=\"http://communities.wfp.org\" target=\"_blank\">\n          Section 1\n        </Link>\n      </MainNavigationItem>\n      <MainNavigationItem\n          subNavigation={\n          <SubNavigation>\n              <SubNavigationHeader>\n              <SubNavigationTitle>The Title</SubNavigationTitle>\n              <SubNavigationLink>\n                  <Button small>The SubPage Link</Button>\n              </SubNavigationLink>\n\n              <SubNavigationFilter>\n                  <Search\n                  small\n                  id=\"search-2\"\n                  labelText=\"Filter\"\n                  placeHolderText=\"Filter list\"\n                  onChange={() => {\n                      alert('Apply Filter');\n                  }}\n                  />\n              </SubNavigationFilter>\n              </SubNavigationHeader>\n              <SubNavigationContent>\n              <SubNavigationList>\n                  <SubNavigationGroup title=\"First List\" columns>\n                  <SubNavigationItem>\n                      <Link href=\"https://go.docs.wfp.org\" target=\"_blank\">\n                      Lorem Ipsum et jomen\n                      </Link>\n                  </SubNavigationItem>\n                  </SubNavigationGroup>\n              </SubNavigationList>\n              </SubNavigationContent>\n          </SubNavigation>\n          }>\n          <Link href=\"http://manuals.wfp.org\" target=\"_blank\">\n          Section2\n          </Link>\n      </MainNavigationItem>\n      <MainNavigationItem>\n        <Link href=\"https://go.docs.wfp.org\" target=\"_blank\">\n          Section 3\n        </Link>\n      </MainNavigationItem>\n      <MainNavigationItem>\n          ".concat(type, "\n      </MainNavigationItem>\n      <MainNavigationItem>\n          <Search\n          kind=\"main\"\n          id=\"search-2\"\n          placeHolderText=\"Search\"\n          />\n      </MainNavigationItem>\n      <MainNavigationItem\n          className=\"wfp--main-navigation__user\"\n          subNavigation={\n          <SubNavigation>\n              <SubNavigationHeader>\n              <SubNavigationTitle>Welcome Lorem!</SubNavigationTitle>\n              <SubNavigationLink>\n                  <Button kind=\"secondary\" small>\n                  Logout\n                  </Button>\n              </SubNavigationLink>\n              </SubNavigationHeader>\n              <SubNavigationContent>\n              Additional content can be placed here.\n              <br />\n              Demo for internal close action:{' '}\n              <Link >Close Menu</Link>\n              </SubNavigationContent>\n          </SubNavigation>\n          }>\n          <User\n          ellipsis\n          name=\"Max Mustermann long name\"\n          missingImage=\"letter\"\n          />\n      </MainNavigationItem>\n      <MainNavigationItem\n          className=\"wfp--main-navigation__user\"\n          subNavigation={\n          <SubNavigation>\n              <SubNavigationHeader>\n              <SubNavigationTitle>Choose language</SubNavigationTitle>\n              </SubNavigationHeader>\n              <SubNavigationContent>\n              <SubNavigationList>\n                  <SubNavigationGroup>\n                  <SubNavigationItem>\n                      <Link href=\"#\">English</Link>\n                  </SubNavigationItem>\n                  <SubNavigationItem>\n                      <Link href=\"#\">\n                      French <i>(fran\xE7ais)</i>\n                      </Link>\n                  </SubNavigationItem>\n                  <SubNavigationItem>\n                      <Link href=\"#\">\n                      German <i>(deutsch)</i>\n                      </Link>\n                  </SubNavigationItem>\n                  </SubNavigationGroup>\n              </SubNavigationList>\n              </SubNavigationContent>\n          </SubNavigation>\n          }>\n          <span>EN</span>\n      </MainNavigationItem>\n      )\n    }\n\n  export default Navigation;\n  ");
};

Regular.story = {
  parameters: {
    docs: {
      storyDescription: description,
      source: {
        code: sourcecode("<Link href=\"http://opweb.wfp.org\" target=\"_blank\">\n            Section 4\n          </Link>")
      }
    }
  }
};

var RegularWithButton = function RegularWithButton(args) {
  return /*#__PURE__*/_react.default.createElement(_.MainNavigation, args, function (_ref2) {
    var onChangeSub = _ref2.onChangeSub;
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
      href: "http://communities.wfp.org",
      target: "_blank"
    }, "Section 1")), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, {
      subNavigation: /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigation, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationHeader, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationTitle, null, "The Title"), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationLink, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
        small: true
      }, "The SubPage Link")), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationFilter, null, /*#__PURE__*/_react.default.createElement(_Search.default, {
        small: true,
        id: "search-2",
        labelText: "Filter",
        placeHolderText: "Filter list"
      }))), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationContent, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationList, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationGroup, {
        title: "First List",
        columns: 1
      }, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationItem, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
        href: "https://go.docs.wfp.org",
        target: "_blank"
      }, "Lorem Ipsum et jomen"))))))
    }, /*#__PURE__*/_react.default.createElement(_Link.default, {
      href: "http://manuals.wfp.org",
      target: "_blank"
    }, "Section 2")), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
      href: "https://go.docs.wfp.org",
      target: "_blank"
    }, "Section 3")), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
      kind: "navigation",
      type: "button"
    }, "Button")), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, null, /*#__PURE__*/_react.default.createElement(_Search.default, {
      kind: "main",
      id: "search-2",
      placeHolderText: "Search",
      onChange: (0, _addonActions.action)('onChange')
    })), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, {
      className: "wfp--main-navigation__user",
      subNavigation: /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigation, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationHeader, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationTitle, null, "Welcome Lorem!"), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationLink, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
        kind: "secondary",
        small: true
      }, "Logout"))), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationContent, null, "Additional content can be placed here.", /*#__PURE__*/_react.default.createElement("br", null), "Demo for internal close action:", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
        onClick: function onClick() {
          return onChangeSub('close');
        }
      }, "Close Menu")))
    }, /*#__PURE__*/_react.default.createElement(_User.default, {
      ellipsis: true,
      name: "Max Mustermann long name",
      missingImage: "letter"
    })), /*#__PURE__*/_react.default.createElement(_MainNavigationItem.default, {
      className: "wfp--main-navigation__user",
      subNavigation: /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigation, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationHeader, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationTitle, null, "Choose language")), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationContent, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationList, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationGroup, null, /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationItem, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
        href: "#"
      }, "English")), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationItem, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
        href: "#"
      }, "French ", /*#__PURE__*/_react.default.createElement("i", null, "(fran\xE7ais)"))), /*#__PURE__*/_react.default.createElement(_SubNavigation.SubNavigationItem, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
        href: "#"
      }, "German ", /*#__PURE__*/_react.default.createElement("i", null, "(deutsch)")))))))
    }, /*#__PURE__*/_react.default.createElement("span", null, "EN")));
  });
};

exports.RegularWithButton = RegularWithButton;
RegularWithButton.story = {
  parameters: {
    docs: {
      storyDescription: "MainMavigation example with button option",
      source: {
        code: sourcecode("<Button kind=\"navigation\" type=\"button\">\n            Button\n          </Button>")
      }
    }
  }
};

var External = function External(args) {
  return /*#__PURE__*/_react.default.createElement(_.MainNavigationExternal, args, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
    className: "wfp--main-navigation-ext__site-link"
  }, /*#__PURE__*/_react.default.createElement("a", null, "First link")), /*#__PURE__*/_react.default.createElement("li", {
    className: "wfp--main-navigation-ext__site-link"
  }, /*#__PURE__*/_react.default.createElement("a", null, "Second link"))));
};

exports.External = External;

var Languages = function Languages() {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
    className: "wfp--language-ext__dropdown-option"
  }, /*#__PURE__*/_react.default.createElement("a", null, "English")), /*#__PURE__*/_react.default.createElement("li", {
    className: "wfp--language-ext__dropdown-option"
  }, /*#__PURE__*/_react.default.createElement("a", null, "French")), /*#__PURE__*/_react.default.createElement("li", {
    className: "wfp--language-ext__dropdown-option"
  }, /*#__PURE__*/_react.default.createElement("a", null, "Spanish")));
};

var UserDropdownDetails = function UserDropdownDetails() {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
    className: "wfp--user-ext__profile-item"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "wfp--user-ext__profile-label"
  }, "Email:"), /*#__PURE__*/_react.default.createElement("span", {
    className: "wfp--user-ext__profile-value"
  }, /*#__PURE__*/_react.default.createElement(_Link.default, {
    inline: true
  }, "user@wfp.com"))), /*#__PURE__*/_react.default.createElement("li", {
    className: "wfp--user-ext__profile-item"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "wfp--user-ext__profile-label"
  }, "Job title:"), /*#__PURE__*/_react.default.createElement("span", {
    className: "wfp--user-ext__profile-value"
  }, "Supply chain")), /*#__PURE__*/_react.default.createElement("li", {
    className: "wfp--user-ext__profile-item"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "wfp--user-ext__profile-label"
  }, "Country:"), /*#__PURE__*/_react.default.createElement("span", {
    className: "wfp--user-ext__profile-value"
  }, "Somalia")), /*#__PURE__*/_react.default.createElement("li", {
    className: "wfp--user-ext__profile-item"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "wfp--user-ext__profile-label"
  }, "Organization:"), /*#__PURE__*/_react.default.createElement("span", {
    className: "wfp--user-ext__profile-value"
  }, "The United Nations World food Programme (WFP)")), /*#__PURE__*/_react.default.createElement("div", {
    className: "wfp--user-ext__profile-actions"
  }, /*#__PURE__*/_react.default.createElement(_Link.default, {
    className: "wfp--user-ext__profile-edit",
    inline: true
  }, "Edit profile"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    kind: "secondary",
    small: true
  }, "Log out")));
};

External.args = {
  productName: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Product ", /*#__PURE__*/_react.default.createElement("br", null), " Name"),
  languageList: /*#__PURE__*/_react.default.createElement(Languages, null),
  userDetails: /*#__PURE__*/_react.default.createElement(UserDropdownDetails, null),
  username: 'Max Mustermann'
}; // Increase the size of the story's wrapper to show the mobile menu

var externalStoryStyles = {
  height: '400px'
};
External.story = {
  parameters: {
    docs: {
      storyDescription: 'Add a description'
    }
  },
  decorators: [function (Story) {
    return /*#__PURE__*/_react.default.createElement("div", {
      style: externalStoryStyles
    }, /*#__PURE__*/_react.default.createElement(Story, null));
  }]
};