orcs-design-system 3.2.4 → 3.2.6

package/es/components/SideNav/NavItem.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from "react";
 import styled, { css as styledCss } from "styled-components";
 import { css } from "@styled-system/css";
@@ -9,155 +5,149 @@ import { themeGet } from "@styled-system/theme-get";
 import PropTypes from "prop-types";
 import Icon from "../Icon";
 import Popover from "../Popover";
-var sharedNavItemStyles = styledCss(["cursor:pointer;padding:", ";text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:flex;align-items:center;justify-content:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";&:hover,&:focus{color:", ";path{fill:", ";}}@media screen and (max-width:900px){width:auto;max-height:30px;height:30px;}&:focus{outline:0;color:", ";path{fill:", ";}}"], themeGet("space.s"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"));
-var variantActiveStyles = {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sharedNavItemStyles = styledCss(["cursor:pointer;padding:", ";text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:flex;align-items:center;justify-content:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";&:hover,&:focus{color:", ";path{fill:", ";}}@media screen and (max-width:900px){width:auto;max-height:30px;height:30px;}&:focus{outline:0;color:", ";path{fill:", ";}}"], themeGet("space.s"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"));
+const variantActiveStyles = {
   expandableItem: styledCss(["color:", ";path{fill:", ";}:after{height:100%;position:absolute;right:calc(-", " - 2px);content:\"\";border-right:3px solid ", ";z-index:5;}@media screen and (max-width:900px){:after{border-top:3px solid ", ";border-right:none;top:-", ";right:0;width:100%;}}"], themeGet("colors.primary"), themeGet("colors.primary"), themeGet("space.r"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("space.r")),
-  "default": styledCss(["background-color:", ";path{fill:", ";}&:hover,&:focus{path{fill:", ";}}&:focus{path{fill:", ";}}"], themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.white"), themeGet("colors.white"))
+  default: styledCss(["background-color:", ";path{fill:", ";}&:hover,&:focus{path{fill:", ";}}&:focus{path{fill:", ";}}"], themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.white"), themeGet("colors.white"))
 };
-var getActiveStyles = function getActiveStyles(props) {
+const getActiveStyles = props => {
   if (!props.active) return "";
   if (props["aria-expanded"]) {
     return variantActiveStyles.expandableItem;
   }
-  return variantActiveStyles["default"];
+  return variantActiveStyles.default;
 };
-var SideNavItemLink = styled.div.withConfig({
+const SideNavItemLink = styled.div.withConfig({
   displayName: "NavItem__SideNavItemLink",
   componentId: "sc-hkm2u8-0"
 })(["& > a{", " ", "}"], sharedNavItemStyles, getActiveStyles);
-var SideNavItem = styled("button").withConfig({
+const SideNavItem = styled("button").withConfig({
   displayName: "NavItem__SideNavItem",
   componentId: "sc-hkm2u8-1"
 })(["", " ", ""], sharedNavItemStyles, getActiveStyles);
-var BadgeNumber = styled("div").withConfig({
+const BadgeNumber = styled("div").withConfig({
   displayName: "NavItem__BadgeNumber",
   componentId: "sc-hkm2u8-2"
-})(function (props) {
-  return css({
-    position: "absolute",
-    height: "16px",
-    width: "16px",
-    bg: themeGet("colors.danger")(props),
-    fontSize: "1rem",
-    fontWeight: themeGet("fontWeights.2")(props),
-    color: themeGet("colors.white")(props),
-    borderRadius: "50%",
-    top: "0",
-    right: "0",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  });
-});
-var BadgeDot = styled("div").withConfig({
+})(props => css({
+  position: "absolute",
+  height: "16px",
+  width: "16px",
+  bg: themeGet("colors.danger")(props),
+  fontSize: "1rem",
+  fontWeight: themeGet("fontWeights.2")(props),
+  color: themeGet("colors.white")(props),
+  borderRadius: "50%",
+  top: "0",
+  right: "0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}));
+const BadgeDot = styled("div").withConfig({
   displayName: "NavItem__BadgeDot",
   componentId: "sc-hkm2u8-3"
-})(function (props) {
-  return css({
-    position: "absolute",
-    height: "8px",
-    width: "8px",
-    bg: themeGet("colors.primary")(props),
-    borderRadius: "50%",
-    top: "2px",
-    right: "0"
-  });
-});
-var SideNavItemPopover = styled(Popover).withConfig({
+})(props => css({
+  position: "absolute",
+  height: "8px",
+  width: "8px",
+  bg: themeGet("colors.primary")(props),
+  borderRadius: "50%",
+  top: "2px",
+  right: "0"
+}));
+const SideNavItemPopover = styled(Popover).withConfig({
   displayName: "NavItem__SideNavItemPopover",
   componentId: "sc-hkm2u8-4"
-})(function (props) {
-  return css({
-    height: "30px",
-    marginBottom: props.bottomAligned ? "0" : "s",
-    marginTop: props.bottomAligned ? "s" : "0",
-    "@media screen and (min-width: 900px)": {
-      ":nth-child(1 of .bottom-aligned) ": {
-        marginTop: props.bottomAligned && "auto"
-      }
-    },
+})(props => css({
+  height: "30px",
+  marginBottom: props.bottomAligned ? "0" : "s",
+  marginTop: props.bottomAligned ? "s" : "0",
+  "@media screen and (min-width: 900px)": {
+    ":nth-child(1 of .bottom-aligned) ": {
+      marginTop: props.bottomAligned && "auto"
+    }
+  },
+  "&:hover,&:focus-within": {
+    "& .popoverText": {
+      opacity: "1",
+      zIndex: "100",
+      visibility: "visible",
+      pointerEvents: "auto",
+      display: "initial"
+    }
+  },
+  "&:focus-within": {
+    "& .popoverText": {
+      opacity: props.active ? "0" : "1",
+      zIndex: props.active ? "-100" : "100",
+      visibility: props.active ? "hidden" : "visible",
+      pointerEvents: props.active ? "none" : "auto",
+      display: props.active ? "none" : "initial"
+    }
+  },
+  "@media screen and (max-width: 900px)": {
+    width: "auto",
+    marginBottom: "0",
+    marginTop: "0",
     "&:hover,&:focus-within": {
       "& .popoverText": {
-        opacity: "1",
-        zIndex: "100",
-        visibility: "visible",
-        pointerEvents: "auto",
-        display: "initial"
-      }
-    },
-    "&:focus-within": {
-      "& .popoverText": {
-        opacity: props.active ? "0" : "1",
-        zIndex: props.active ? "-100" : "100",
-        visibility: props.active ? "hidden" : "visible",
-        pointerEvents: props.active ? "none" : "auto",
-        display: props.active ? "none" : "initial"
-      }
-    },
-    "@media screen and (max-width: 900px)": {
-      width: "auto",
-      marginBottom: "0",
-      marginTop: "0",
-      "&:hover,&:focus-within": {
-        "& .popoverText": {
-          opacity: "0",
-          zIndex: "-100",
-          visibility: "hidden",
-          pointerEvents: "none",
-          justifyContent: "space-around",
-          display: "none"
-        }
+        opacity: "0",
+        zIndex: "-100",
+        visibility: "hidden",
+        pointerEvents: "none",
+        justifyContent: "space-around",
+        display: "none"
       }
     }
-  });
-});
-var NavItem = function NavItem(_ref) {
-  var item = _ref.item,
-    Component = _ref.Component,
-    isActive = _ref.isActive,
-    handleItemClick = _ref.handleItemClick,
-    navItemRefs = _ref.navItemRefs;
+  }
+}));
+const NavItem = _ref => {
+  let {
+    item,
+    Component,
+    isActive,
+    handleItemClick,
+    navItemRefs
+  } = _ref;
   // Use the ternary operator to render the appropriate component based on actionType
-  var accessibilityProps = _objectSpread(_objectSpread({}, item.actionType === "component" && {
-    "aria-expanded": isActive ? "true" : "false"
-  }), {}, {
+  const accessibilityProps = {
+    ...(item.actionType === "component" && {
+      "aria-expanded": isActive ? "true" : "false"
+    }),
     "aria-label": item.name
-  });
-  return /*#__PURE__*/React.createElement(SideNavItemPopover, {
+  };
+  return /*#__PURE__*/_jsx(SideNavItemPopover, {
     className: item.bottomAligned && "bottom-aligned",
     text: item.name,
     textAlign: "center",
     width: "124px",
     active: isActive,
-    bottomAligned: item.bottomAligned
-  }, item.actionType === "link" ? /*#__PURE__*/React.createElement(SideNavItemLink, {
-    key: item.index,
-    active: isActive,
     bottomAligned: item.bottomAligned,
-    onClick: function onClick() {
-      return handleItemClick(item);
-    },
-    ref: function ref(el) {
-      return navItemRefs.current[item.index] = el;
-    }
-  }, /*#__PURE__*/React.createElement(Component, {
-    item: item
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["far", item.iconName]
-  }))) : /*#__PURE__*/React.createElement(SideNavItem, _extends({
-    key: item.index,
-    active: isActive,
-    onClick: function onClick() {
-      return handleItemClick(item);
-    },
-    bottomAligned: item.bottomAligned
-  }, accessibilityProps, {
-    ref: function ref(el) {
-      return navItemRefs.current[item.index] = el;
-    }
-  }), item.badgeNumber && /*#__PURE__*/React.createElement(BadgeNumber, null, item.badgeNumber), item.badgeDot && /*#__PURE__*/React.createElement(BadgeDot, null), /*#__PURE__*/React.createElement(Icon, {
-    icon: ["far", item.iconName]
-  })));
+    children: item.actionType === "link" ? /*#__PURE__*/_jsx(SideNavItemLink, {
+      active: isActive,
+      bottomAligned: item.bottomAligned,
+      onClick: () => handleItemClick(item),
+      ref: el => navItemRefs.current[item.index] = el,
+      children: /*#__PURE__*/_jsx(Component, {
+        item: item,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["far", item.iconName]
+        })
+      })
+    }, item.index) : /*#__PURE__*/_jsxs(SideNavItem, {
+      active: isActive,
+      onClick: () => handleItemClick(item),
+      bottomAligned: item.bottomAligned,
+      ...accessibilityProps,
+      ref: el => navItemRefs.current[item.index] = el,
+      children: [item.badgeNumber && /*#__PURE__*/_jsx(BadgeNumber, {
+        children: item.badgeNumber
+      }), item.badgeDot && /*#__PURE__*/_jsx(BadgeDot, {}), /*#__PURE__*/_jsx(Icon, {
+        icon: ["far", item.iconName]
+      })]
+    }, item.index)
+  });
 };
 NavItem.propTypes = {
   item: PropTypes.object,

package/es/components/SideNav/SideNav.stories.js

@@ -9,47 +9,58 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import Flex from "../Flex";
 import Spacer from "../Spacer/index";
 import Card from "../Card/index";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 library.add(far);
 export default {
   title: "Components/SideNav",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      minHeight: "450px"
-    }, storyFn());
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    minHeight: "450px",
+    children: storyFn()
+  })],
   component: SideNav
 };
-var makeLinkComponent = function makeLinkComponent(path) {
-  return function (_ref) {
-    var children = _ref.children,
-      item = _ref.item;
-    return /*#__PURE__*/React.createElement(Link, {
-      to: path,
-      "aria-label": item.name
-    }, children);
-  };
+const makeLinkComponent = path => _ref => {
+  let {
+    children,
+    item
+  } = _ref;
+  return /*#__PURE__*/_jsx(Link, {
+    to: path,
+    "aria-label": item.name,
+    children: children
+  });
 };
-var makePanelComponent = function makePanelComponent(name, children) {
-  return function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(H5, {
+const makePanelComponent = (name, children) => () => {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(H5, {
       fontWeight: "bold",
-      mb: "r"
-    }, name), /*#__PURE__*/React.createElement(P, null, name, " content"), children);
-  };
+      mb: "r",
+      children: name
+    }), /*#__PURE__*/_jsxs(P, {
+      children: [name, " content"]
+    }), children]
+  });
 };
-var Teams = function Teams() {
-  var params = useParams();
-  return /*#__PURE__*/React.createElement("div", null, "Team ", params.teamId, " route");
+const Teams = () => {
+  const params = useParams();
+  return /*#__PURE__*/_jsxs("div", {
+    children: ["Team ", params.teamId, " route"]
+  });
 };
-var PageCard = function PageCard(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/React.createElement(Spacer, {
-    px: "r"
-  }, /*#__PURE__*/React.createElement(Card, null, children));
+const PageCard = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Spacer, {
+    px: "r",
+    children: /*#__PURE__*/_jsx(Card, {
+      children: children
+    })
+  });
 };
-var SideBarWithConfig = function SideBarWithConfig() {
-  var location = useLocation();
-  var items = [{
+const SideBarWithConfig = () => {
+  const location = useLocation();
+  const items = [{
     iconName: "building",
     name: "Home",
     component: makeLinkComponent("/"),
@@ -114,14 +125,13 @@ var SideBarWithConfig = function SideBarWithConfig() {
     name: "Browse teams",
     large: true,
     // Specify large if you want the expanded sidebar to be wider
-    component: makePanelComponent("BrowseTeams", /*#__PURE__*/React.createElement(Flex, {
-      flexDirection: "column"
-    }, ["Team 1", "Team 2", "Team 3"].map(function (team) {
-      return /*#__PURE__*/React.createElement(Link, {
+    component: makePanelComponent("BrowseTeams", /*#__PURE__*/_jsx(Flex, {
+      flexDirection: "column",
+      children: ["Team 1", "Team 2", "Team 3"].map(team => /*#__PURE__*/_jsx(Link, {
         to: "/teams/".concat(team),
-        key: team
-      }, team);
-    }))),
+        children: team
+      }, team))
+    })),
     actionType: "component" // Use 'component' for a component
   }, {
     iconName: "cog",
@@ -152,31 +162,48 @@ var SideBarWithConfig = function SideBarWithConfig() {
     name: "Logout",
     bottomAligned: true,
     // Specify bottomAligned if this item should appear at bottom of SideNav
-    onClick: function onClick() {
-      return alert("Logout function");
-    },
+    onClick: () => alert("Logout function"),
     // Specify the onClick function for the button
     actionType: "button" // Use 'button' for a button with onClick event
   }
   // Add more items as needed...
   ];
-  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(SideNav, {
-    items: items,
-    sideNavHeight: "500px"
-  }), /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
-    exact: true,
-    path: "/"
-  }, /*#__PURE__*/React.createElement(PageCard, null, /*#__PURE__*/React.createElement("div", null, "Home"))), /*#__PURE__*/React.createElement(Route, {
-    path: "/profile"
-  }, /*#__PURE__*/React.createElement(PageCard, null, /*#__PURE__*/React.createElement("div", null, "Profile route"))), /*#__PURE__*/React.createElement(Route, {
-    path: "/teams/:teamId"
-  }, /*#__PURE__*/React.createElement(PageCard, null, /*#__PURE__*/React.createElement(Teams, null))), /*#__PURE__*/React.createElement(Redirect, {
-    from: "/iframe.html",
-    to: "/"
-  })));
+  return /*#__PURE__*/_jsxs(Flex, {
+    children: [/*#__PURE__*/_jsx(SideNav, {
+      items: items,
+      sideNavHeight: "500px"
+    }), /*#__PURE__*/_jsxs(Switch, {
+      children: [/*#__PURE__*/_jsx(Route, {
+        exact: true,
+        path: "/",
+        children: /*#__PURE__*/_jsx(PageCard, {
+          children: /*#__PURE__*/_jsx("div", {
+            children: "Home"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Route, {
+        path: "/profile",
+        children: /*#__PURE__*/_jsx(PageCard, {
+          children: /*#__PURE__*/_jsx("div", {
+            children: "Profile route"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Route, {
+        path: "/teams/:teamId",
+        children: /*#__PURE__*/_jsx(PageCard, {
+          children: /*#__PURE__*/_jsx(Teams, {})
+        })
+      }), /*#__PURE__*/_jsx(Redirect, {
+        from: "/iframe.html",
+        to: "/"
+      })]
+    })]
+  });
 };
-export var SidebarNavigation = function SidebarNavigation() {
-  return /*#__PURE__*/React.createElement(Router, null, /*#__PURE__*/React.createElement(SideBarWithConfig, null));
+export const SidebarNavigation = () => {
+  return /*#__PURE__*/_jsx(Router, {
+    children: /*#__PURE__*/_jsx(SideBarWithConfig, {})
+  });
 };
 SidebarNavigation.storyName = "Sidebar Navigation";
 SidebarNavigation.__docgenInfo = {