@pingux/astro 1.2.0-alpha.8 → 1.3.0

package/lib/cjs/components/NavBar/NavBar.stories.js

@@ -30,10 +30,6 @@ var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIc
 
 var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
 
-var _NavBarSection = _interopRequireDefault(require("../NavBarSection"));
-
-var _NavBar = _interopRequireDefault(require("./NavBar"));
-
 var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
@@ -42,7 +38,9 @@ var _default = {
   title: 'NavBar',
   component: 'NavBar',
   subcomponents: {
-    NavBarSection: _NavBarSection["default"]
+    NavBarSection: _index.NavBarSection,
+    NavBarItemLink: _index.NavBarItemLink,
+    NavBarItemButton: _index.NavBarItemButton
   }
 };
 exports["default"] = _default;
@@ -130,108 +128,56 @@ var logo = (0, _react2.jsx)("svg", {
   fill: "white"
 }));
 var data = [{
-  icon: _GlobeIcon["default"],
-  key: 'Overview',
-  heading: 'Overview',
-  children: [(0, _react2.jsx)(_index.Link, {
-    key: "Overview Link Users",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
-    href: "https://pingidentity.com/"
-  }, "Users"), (0, _react2.jsx)(_index.Link, {
-    key: "Overview Link Roles",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
-    href: "https://pingidentity.com/"
-  }, "A roles title that is really really really really long")]
-}, {
   icon: _ViewDashboardIcon["default"],
   key: 'Dashboard',
   heading: 'Dashboard',
-  children: [(0, _react2.jsx)(_index.Link, {
+  children: [(0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Dashboard Link Group",
+    id: "Dashboard Link Group",
     variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
     href: "https://pingidentity.com/"
-  }, "Group"), (0, _react2.jsx)(_index.Link, {
+  }, "Group"), (0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Dashboard Link Populations",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Dashboard Link Populations",
     href: "https://pingidentity.com/"
   }, "Populations")]
 }, {
   icon: _AccountMultipleIcon["default"],
   key: 'Identities',
   heading: 'Identities',
-  children: [(0, _react2.jsx)(_index.Link, {
+  children: [(0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Identities Link Users",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Identities Link Users",
     href: "https://pingidentity.com/"
-  }, "Users"), (0, _react2.jsx)(_index.Link, {
+  }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Identities Link Group",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Identities Link Group",
     href: "https://pingidentity.com/"
   }, "Group")]
 }, {
   icon: _TransitConnectionVariantIcon["default"],
   key: 'Connections',
   heading: 'Connections',
-  children: [(0, _react2.jsx)(_index.Link, {
+  children: [(0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Connection Link Users",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Connection Link Users",
     href: "https://pingidentity.com/"
-  }, "Users"), (0, _react2.jsx)(_index.Link, {
+  }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Connections Link Group",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Connections Link Group",
     href: "https://pingidentity.com/"
   }, "Group")]
 }, {
   icon: _EmoticonHappyOutlineIcon["default"],
   key: 'Experiences',
   heading: 'Experiences',
-  children: [(0, _react2.jsx)(_index.Link, {
+  children: [(0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Experiences Link Attributes",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Experiences Link Attributes",
     href: "https://pingidentity.com/"
-  }, "Attributes"), (0, _react2.jsx)(_index.Link, {
+  }, "Attributes"), (0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Experiences Link Roles",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Experiences Link Roles",
     href: "https://pingidentity.com/"
   }, "Roles")]
 }];
@@ -239,441 +185,102 @@ var secondData = [{
   icon: _FingerprintIcon["default"],
   key: 'MFA',
   heading: 'MFA',
-  children: [(0, _react2.jsx)(_index.Button, {
-    key: "MFA Button Users",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    id: "MFA Button Users",
+    key: "MFA Button Users"
   }, "Users"), {
     isSubTitle: true,
     subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_index.Button, {
+  }, (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "MFA Button Group",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
-  }, "Group")]
+    id: "MFA Button Group"
+  }, "Group Test")]
 }, {
   icon: _ScaleBalanceIcon["default"],
   key: 'Risk',
   heading: 'Risk',
-  children: [(0, _react2.jsx)(_index.Button, {
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Risk Button Users",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Risk Button Users"
   }, "Users"), {
     isSubTitle: true,
     subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_index.Button, {
+  }, (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Risk Button Group",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Risk Button Group"
   }, "Group")]
 }, {
   icon: Verify,
   key: 'Verify',
   heading: 'Verify',
-  children: [(0, _react2.jsx)(_index.Button, {
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Verify Button Users",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Verify Button Users"
   }, "Users"), {
     isSubTitle: true,
     subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_index.Button, {
+  }, (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Verify Button Group",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Verify Button Group"
   }, "Group")]
 }, {
   icon: Credentials,
   key: 'Credentials',
   heading: 'Credentials',
-  children: [(0, _react2.jsx)(_index.Button, {
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Credentials Button Users",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Credentials Button Users"
   }, "Users"), {
     isSubTitle: true,
     subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_index.Button, {
+  }, (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Credentials Button Group",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Credentials Button Group"
   }, "Group")]
 }];
 var thirdData = [{
   icon: _EarthIcon["default"],
   key: 'Environment',
   heading: 'Environment title that is so long, it wraps',
-  children: [(0, _react2.jsx)(_index.Button, {
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Earth Button Users",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
-  }, "Users"), (0, _react2.jsx)(_index.Button, {
+    id: "Earth Button Users"
+  }, "Users"), (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Earth Button Group",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Earth Button Group"
   }, "Group")]
 }];
 
 var Default = function Default() {
-  return (// const data = [
-    //   {
-    //     icon: GlobeIcon,
-    //     key: 'Overview',
-    //     heading: 'Overview',
-    //     children: [
-    //       <Link
-    //         key="Overview Link Users"
-    //         variant="buttons.navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //         href="https://pingidentity.com/"
-    //       >
-    //         Users
-    //       </Link>,
-    //       <Link
-    //         key="Overview Link Roles"
-    //         variant="buttons.navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //         href="https://pingidentity.com/"
-    //       >
-    //         A roles title that is really really really really long
-    //       </Link>,
-    //     ],
-    //   },
-    //   {
-    //     icon: ViewDashboard,
-    //     key: 'Dashboard',
-    //     heading: 'Dashboard',
-    //     children: [
-    //       <Link
-    //         key="Dashboard Link Group"
-    //         variant="buttons.navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //         href="https://pingidentity.com/"
-    //       >
-    //         Group
-    //       </Link>,
-    //       <Link
-    //         key="Dashboard Link Populations"
-    //         variant="buttons.navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //         href="https://pingidentity.com/"
-    //       >
-    //         Populations
-    //       </Link>,
-    //     ],
-    //   },
-    //   {
-    //     icon: AccountMultiple,
-    //     key: 'Identities',
-    //     heading: 'Identities',
-    //     children: [
-    //       <Link
-    //         key="Identities Link Users"
-    //         variant="buttons.navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //         href="https://pingidentity.com/"
-    //       >
-    //         Users
-    //       </Link>,
-    //       <Link
-    //         key="Identities Link Group"
-    //         variant="buttons.navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //         href="https://pingidentity.com/"
-    //       >
-    //         Group
-    //       </Link>,
-    //     ],
-    //   },
-    //   {
-    //     icon: TransitConnection,
-    //     key: 'Connections',
-    //     heading: 'Connections',
-    //     children: [
-    //       <Link
-    //         key="Connection Link Users"
-    //         variant="buttons.navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //         href="https://pingidentity.com/"
-    //       >
-    //         Users
-    //       </Link>,
-    //       <Link
-    //         key="Connections Link Group"
-    //         variant="buttons.navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //         href="https://pingidentity.com/"
-    //       >
-    //         Group
-    //       </Link>,
-    //     ],
-    //   },
-    //   {
-    //     icon: EmoticonHappy,
-    //     key: 'Experiences',
-    //     heading: 'Experiences',
-    //     children: [
-    //       <Link
-    //         key="Experiences Link Attributes"
-    //         variant="buttons.navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //         href="https://pingidentity.com/"
-    //       >
-    //         Attributes
-    //       </Link>,
-    //       <Link
-    //         key="Experiences Link Roles"
-    //         variant="buttons.navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //         href="https://pingidentity.com/"
-    //       >
-    //         Roles
-    //       </Link>,
-    //     ],
-    //   },
-    // ];
-    // const secondData = [
-    //   {
-    //     icon: Fingerprint,
-    //     key: 'MFA',
-    //     heading: 'MFA',
-    //     children: [
-    //       <Button
-    //         key="MFA Button Users"
-    //         variant="navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //       >
-    //         Users
-    //       </Button>,
-    //       {
-    //         isSubTitle: true,
-    //         subTitle: 'PingOne Services',
-    //       },
-    //       <Button
-    //         key="MFA Button Group"
-    //         variant="navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //       >
-    //         Group
-    //       </Button>,
-    //     ],
-    //   },
-    //   {
-    //     icon: ScaleBalance,
-    //     key: 'Risk',
-    //     heading: 'Risk',
-    //     children: [
-    //       <Button
-    //         key="Risk Button Users"
-    //         variant="navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //       >
-    //         Users
-    //       </Button>,
-    //       {
-    //         isSubTitle: true,
-    //         subTitle: 'PingOne Services',
-    //       },
-    //       <Button
-    //         key="Risk Button Group"
-    //         variant="navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //       >
-    //         Group
-    //       </Button>,
-    //     ],
-    //   },
-    //   {
-    //     icon: Verify,
-    //     key: 'Verify',
-    //     heading: 'Verify',
-    //     children: [
-    //       <Button
-    //         key="Verify Button Users"
-    //         variant="navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //       >
-    //         Users
-    //       </Button>,
-    //       {
-    //         isSubTitle: true,
-    //         subTitle: 'PingOne Services',
-    //       },
-    //       <Button
-    //         key="Verify Button Group"
-    //         variant="navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //       >
-    //         Group
-    //       </Button>,
-    //     ],
-    //   },
-    //   {
-    //     icon: Verify,
-    //     key: 'Credentials',
-    //     heading: 'Credentials',
-    //     children: [
-    //       <Button
-    //         key="Credentials Button Users"
-    //         variant="navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //       >
-    //         Users
-    //       </Button>,
-    //       {
-    //         isSubTitle: true,
-    //         subTitle: 'PingOne Services',
-    //       },
-    //       <Button
-    //         key="Credentials Button Group"
-    //         variant="navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //       >
-    //         Group
-    //       </Button>,
-    //     ],
-    //   },
-    // ];
-    // const thirdData = [
-    //   {
-    //     icon: Earth,
-    //     key: 'Environment',
-    //     heading: 'Environment title that is so long, it wraps',
-    //     children: [
-    //       <Button
-    //         key="Earth Button Users"
-    //         variant="navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //       >
-    //         Users
-    //       </Button>,
-    //       <Button
-    //         key="Earth Button Group"
-    //         variant="navItemButton"
-    //         sx={{
-    //           paddingLeft: '45px',
-    //           paddingRight: '45px',
-    //         }}
-    //       >
-    //         Group
-    //       </Button>,
-    //     ],
-    //   },
-    // ];
-    (0, _react2.jsx)(_NavBar["default"], null, (0, _react2.jsx)(_index.Box, {
-      sx: {
-        padding: '15px'
-      }
-    }, (0, _react2.jsx)(_index.Link, {
-      href: "https://pingidentity.com",
-      target: "_blank",
-      "aria-label": "home link"
-    }, logo)), (0, _react2.jsx)(_index.Separator, {
-      sx: {
-        mt: '10px',
-        mb: '10px'
-      }
-    }), (0, _react2.jsx)(_index.Box, {
-      variant: "boxes.navBarSectionContainer"
-    }, (0, _react2.jsx)(_NavBarSection["default"], {
-      items: data,
-      hasSeparator: true
-    }), (0, _react2.jsx)(_NavBarSection["default"], {
-      items: secondData,
-      hasSeparator: true,
-      title: "PingOne Services"
-    }), (0, _react2.jsx)(_NavBarSection["default"], {
-      items: thirdData
-    })))
-  );
+  return (0, _react2.jsx)(_index.NavBar, {
+    defaultSelectedKeys: ['Dashboard Link Group']
+  }, (0, _react2.jsx)(_index.Box, {
+    padding: "md"
+  }, (0, _react2.jsx)(_index.Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "home link"
+  }, logo)), (0, _react2.jsx)(_index.Separator, {
+    marginTop: "lg",
+    marginBottom: "sm"
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl"
+  }, (0, _react2.jsx)(_index.NavBarItem, {
+    id: "Overview",
+    key: "Overview",
+    text: "Overview",
+    icon: _GlobeIcon["default"]
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: data,
+    hasSeparator: true
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: secondData,
+    hasSeparator: true,
+    title: "PingOne Services"
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: thirdData
+  })));
 };
 
 exports.Default = Default;