@pingux/astro 1.2.0-alpha.8 → 1.3.0

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

@@ -8,15 +8,15 @@ import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
 import Fingerprint from 'mdi-react/FingerprintIcon';
 import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
 import Earth from 'mdi-react/EarthIcon';
-import NavBarSection from '../NavBarSection';
-import NavBar from './NavBar';
-import { Separator, Box, Link, Button } from '../../index';
+import { Separator, Box, Link, NavBar, NavBarSection, NavBarItemButton, NavBarItemLink, NavBarItem } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'NavBar',
   component: 'NavBar',
   subcomponents: {
-    NavBarSection: NavBarSection
+    NavBarSection: NavBarSection,
+    NavBarItemLink: NavBarItemLink,
+    NavBarItemButton: NavBarItemButton
   }
 };
 
@@ -104,108 +104,56 @@ var logo = ___EmotionJSX("svg", {
 }));
 
 var data = [{
-  icon: GlobeIcon,
-  key: 'Overview',
-  heading: 'Overview',
-  children: [___EmotionJSX(Link, {
-    key: "Overview Link Users",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
-    href: "https://pingidentity.com/"
-  }, "Users"), ___EmotionJSX(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: ViewDashboard,
   key: 'Dashboard',
   heading: 'Dashboard',
-  children: [___EmotionJSX(Link, {
+  children: [___EmotionJSX(NavBarItemLink, {
     key: "Dashboard Link Group",
+    id: "Dashboard Link Group",
     variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
     href: "https://pingidentity.com/"
-  }, "Group"), ___EmotionJSX(Link, {
+  }, "Group"), ___EmotionJSX(NavBarItemLink, {
     key: "Dashboard Link Populations",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Dashboard Link Populations",
     href: "https://pingidentity.com/"
   }, "Populations")]
 }, {
   icon: AccountMultiple,
   key: 'Identities',
   heading: 'Identities',
-  children: [___EmotionJSX(Link, {
+  children: [___EmotionJSX(NavBarItemLink, {
     key: "Identities Link Users",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Identities Link Users",
     href: "https://pingidentity.com/"
-  }, "Users"), ___EmotionJSX(Link, {
+  }, "Users"), ___EmotionJSX(NavBarItemLink, {
     key: "Identities Link Group",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Identities Link Group",
     href: "https://pingidentity.com/"
   }, "Group")]
 }, {
   icon: TransitConnection,
   key: 'Connections',
   heading: 'Connections',
-  children: [___EmotionJSX(Link, {
+  children: [___EmotionJSX(NavBarItemLink, {
     key: "Connection Link Users",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Connection Link Users",
     href: "https://pingidentity.com/"
-  }, "Users"), ___EmotionJSX(Link, {
+  }, "Users"), ___EmotionJSX(NavBarItemLink, {
     key: "Connections Link Group",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Connections Link Group",
     href: "https://pingidentity.com/"
   }, "Group")]
 }, {
   icon: EmoticonHappy,
   key: 'Experiences',
   heading: 'Experiences',
-  children: [___EmotionJSX(Link, {
+  children: [___EmotionJSX(NavBarItemLink, {
     key: "Experiences Link Attributes",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Experiences Link Attributes",
     href: "https://pingidentity.com/"
-  }, "Attributes"), ___EmotionJSX(Link, {
+  }, "Attributes"), ___EmotionJSX(NavBarItemLink, {
     key: "Experiences Link Roles",
-    variant: "buttons.navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    },
+    id: "Experiences Link Roles",
     href: "https://pingidentity.com/"
   }, "Roles")]
 }];
@@ -213,438 +161,99 @@ var secondData = [{
   icon: Fingerprint,
   key: 'MFA',
   heading: 'MFA',
-  children: [___EmotionJSX(Button, {
-    key: "MFA Button Users",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+  children: [___EmotionJSX(NavBarItemButton, {
+    id: "MFA Button Users",
+    key: "MFA Button Users"
   }, "Users"), {
     isSubTitle: true,
     subTitle: 'PingOne Services'
-  }, ___EmotionJSX(Button, {
+  }, ___EmotionJSX(NavBarItemButton, {
     key: "MFA Button Group",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
-  }, "Group")]
+    id: "MFA Button Group"
+  }, "Group Test")]
 }, {
   icon: ScaleBalance,
   key: 'Risk',
   heading: 'Risk',
-  children: [___EmotionJSX(Button, {
+  children: [___EmotionJSX(NavBarItemButton, {
     key: "Risk Button Users",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Risk Button Users"
   }, "Users"), {
     isSubTitle: true,
     subTitle: 'PingOne Services'
-  }, ___EmotionJSX(Button, {
+  }, ___EmotionJSX(NavBarItemButton, {
     key: "Risk Button Group",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Risk Button Group"
   }, "Group")]
 }, {
   icon: Verify,
   key: 'Verify',
   heading: 'Verify',
-  children: [___EmotionJSX(Button, {
+  children: [___EmotionJSX(NavBarItemButton, {
     key: "Verify Button Users",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Verify Button Users"
   }, "Users"), {
     isSubTitle: true,
     subTitle: 'PingOne Services'
-  }, ___EmotionJSX(Button, {
+  }, ___EmotionJSX(NavBarItemButton, {
     key: "Verify Button Group",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Verify Button Group"
   }, "Group")]
 }, {
   icon: Credentials,
   key: 'Credentials',
   heading: 'Credentials',
-  children: [___EmotionJSX(Button, {
+  children: [___EmotionJSX(NavBarItemButton, {
     key: "Credentials Button Users",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Credentials Button Users"
   }, "Users"), {
     isSubTitle: true,
     subTitle: 'PingOne Services'
-  }, ___EmotionJSX(Button, {
+  }, ___EmotionJSX(NavBarItemButton, {
     key: "Credentials Button Group",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Credentials Button Group"
   }, "Group")]
 }];
 var thirdData = [{
   icon: Earth,
   key: 'Environment',
   heading: 'Environment title that is so long, it wraps',
-  children: [___EmotionJSX(Button, {
+  children: [___EmotionJSX(NavBarItemButton, {
     key: "Earth Button Users",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
-  }, "Users"), ___EmotionJSX(Button, {
+    id: "Earth Button Users"
+  }, "Users"), ___EmotionJSX(NavBarItemButton, {
     key: "Earth Button Group",
-    variant: "navItemButton",
-    sx: {
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }
+    id: "Earth Button Group"
   }, "Group")]
 }];
 export 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>,
-    //     ],
-    //   },
-    // ];
-    ___EmotionJSX(NavBar, null, ___EmotionJSX(Box, {
-      sx: {
-        padding: '15px'
-      }
-    }, ___EmotionJSX(Link, {
-      href: "https://pingidentity.com",
-      target: "_blank",
-      "aria-label": "home link"
-    }, logo)), ___EmotionJSX(Separator, {
-      sx: {
-        mt: '10px',
-        mb: '10px'
-      }
-    }), ___EmotionJSX(Box, {
-      variant: "boxes.navBarSectionContainer"
-    }, ___EmotionJSX(NavBarSection, {
-      items: data,
-      hasSeparator: true
-    }), ___EmotionJSX(NavBarSection, {
-      items: secondData,
-      hasSeparator: true,
-      title: "PingOne Services"
-    }), ___EmotionJSX(NavBarSection, {
-      items: thirdData
-    })))
-  );
+  return ___EmotionJSX(NavBar, {
+    defaultSelectedKeys: ['Dashboard Link Group']
+  }, ___EmotionJSX(Box, {
+    padding: "md"
+  }, ___EmotionJSX(Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "home link"
+  }, logo)), ___EmotionJSX(Separator, {
+    marginTop: "lg",
+    marginBottom: "sm"
+  }), ___EmotionJSX(Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl"
+  }, ___EmotionJSX(NavBarItem, {
+    id: "Overview",
+    key: "Overview",
+    text: "Overview",
+    icon: GlobeIcon
+  }), ___EmotionJSX(NavBarSection, {
+    items: data,
+    hasSeparator: true
+  }), ___EmotionJSX(NavBarSection, {
+    items: secondData,
+    hasSeparator: true,
+    title: "PingOne Services"
+  }), ___EmotionJSX(NavBarSection, {
+    items: thirdData
+  })));
 };