orcs-design-system 3.2.4 → 3.2.6

package/es/components/SideNav/index.js

@@ -1,8 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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, { useRef, useState, useEffect } from "react";
 import styled from "styled-components";
 import { css } from "@styled-system/css";
@@ -12,25 +7,25 @@ import Icon from "../Icon";
 import Popover from "../Popover";
 import Divider from "../Divider";
 import NavItem from "./NavItem";
-var SMALL_SCREEN_BREAKPOINT = 900;
-var SideNavWrapper = styled("div").withConfig({
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SMALL_SCREEN_BREAKPOINT = 900;
+const SideNavWrapper = styled("div").withConfig({
   displayName: "SideNav__SideNavWrapper",
   componentId: "sc-1heo0i9-0"
-})(function (props) {
-  return css(_defineProperty({
-    bg: themeGet("colors.white")(props),
-    color: themeGet("colors.greyDarkest")(props),
-    minHeight: props.sideNavHeight,
-    height: props.sideNavHeight,
-    maxWidth: "max-content",
-    fontFamily: themeGet("fonts.main")(props),
-    borderRadius: themeGet("radii.2")(props),
-    border: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
-    boxShadow: themeGet("shadows.boxDefault")(props),
-    display: "flex",
-    alignItems: "stretch",
-    alignContent: "stretch"
-  }, "@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)"), {
+})(props => css({
+  bg: themeGet("colors.white")(props),
+  color: themeGet("colors.greyDarkest")(props),
+  minHeight: props.sideNavHeight,
+  height: props.sideNavHeight,
+  maxWidth: "max-content",
+  fontFamily: themeGet("fonts.main")(props),
+  borderRadius: themeGet("radii.2")(props),
+  border: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
+  boxShadow: themeGet("shadows.boxDefault")(props),
+  display: "flex",
+  alignItems: "stretch",
+  alignContent: "stretch",
+  ["@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)")]: {
     borderRadius: "0",
     width: "100%",
     height: "auto",
@@ -43,120 +38,115 @@ var SideNavWrapper = styled("div").withConfig({
     left: "0",
     zIndex: "6",
     flexDirection: "column-reverse"
-  }));
-});
-var SideNavItems = styled("div").withConfig({
+  }
+}));
+const SideNavItems = styled("div").withConfig({
   displayName: "SideNav__SideNavItems",
   componentId: "sc-1heo0i9-1"
-})(function (props) {
-  return css(_defineProperty({
-    minWidth: themeGet("appScale.navBarSize")(props),
-    minHeight: "inherit",
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    padding: "r",
-    alignItems: "center",
-    justifyContent: "flex-start",
-    textAlign: "center",
-    position: "relative"
-  }, "@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)"), {
+})(props => css({
+  minWidth: themeGet("appScale.navBarSize")(props),
+  minHeight: "inherit",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  padding: "r",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  textAlign: "center",
+  position: "relative",
+  ["@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)")]: {
     height: "calc(".concat(themeGet("space.r")(props), " * 2 + 30px)"),
     flexDirection: "row",
     justifyContent: "space-around",
     alignItems: "center"
-  }));
-});
-var PanelControlTooltip = styled(Popover).withConfig({
+  }
+}));
+const PanelControlTooltip = styled(Popover).withConfig({
   displayName: "SideNav__PanelControlTooltip",
   componentId: "sc-1heo0i9-2"
-})(function (props) {
-  return css(_defineProperty(_defineProperty({
-    alignSelf: "center",
-    position: props.hideExpandedControl ? "absolute" : "relative",
-    right: props.hideExpandedControl ? "r" : "initial",
-    top: "r",
-    display: props.hideExpandedControl ? "block" : "none !important",
-    borderTop: props.hideExpandedControl ? "none" : "solid 1px",
-    borderTopColor: themeGet("colors.greyLighter")(props),
-    paddingTop: props.hideExpandedControl ? "0" : "r",
-    width: props.hideExpandedControl ? "auto" : "100%",
-    justifyContent: "center",
-    "&:focus": {
-      outline: "0"
-    }
-  }, "@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)"), {
+})(props => css({
+  alignSelf: "center",
+  position: props.hideExpandedControl ? "absolute" : "relative",
+  right: props.hideExpandedControl ? "r" : "initial",
+  top: "r",
+  display: props.hideExpandedControl ? "block" : "none !important",
+  borderTop: props.hideExpandedControl ? "none" : "solid 1px",
+  borderTopColor: themeGet("colors.greyLighter")(props),
+  paddingTop: props.hideExpandedControl ? "0" : "r",
+  width: props.hideExpandedControl ? "auto" : "100%",
+  justifyContent: "center",
+  "&:focus": {
+    outline: "0"
+  },
+  ["@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)")]: {
     border: "none"
-  }), "& .popoverText", {
+  },
+  "& .popoverText": {
     marginTop: props.hideExpandedControl ? "0" : "s"
-  }));
-});
-var PanelControl = styled("button").withConfig({
+  }
+}));
+const PanelControl = styled("button").withConfig({
   displayName: "SideNav__PanelControl",
   componentId: "sc-1heo0i9-3"
-})(function (props) {
-  return css({
-    borderRadius: "50%",
-    width: "20px",
-    height: "20px",
-    background: themeGet("colors.greyLighter")(props),
-    color: themeGet("colors.greyDarker")(props),
-    fontSize: "1.2rem",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    border: "none"
-  });
-});
-var SideNavExpanded = styled("div").withConfig({
+})(props => css({
+  borderRadius: "50%",
+  width: "20px",
+  height: "20px",
+  background: themeGet("colors.greyLighter")(props),
+  color: themeGet("colors.greyDarker")(props),
+  fontSize: "1.2rem",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  border: "none"
+}));
+const SideNavExpanded = styled("div").withConfig({
   displayName: "SideNav__SideNavExpanded",
   componentId: "sc-1heo0i9-4"
-})(function (props) {
-  return css(_defineProperty({
-    position: "relative",
-    display: props.active ? "block" : "none",
-    minWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
-    maxWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
-    height: "inherit",
-    overflowY: "auto",
-    padding: "r",
-    borderLeft: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
-    "&:focus": {
-      outline: "0"
-    }
-  }, "@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)"), {
+})(props => css({
+  position: "relative",
+  display: props.active ? "block" : "none",
+  minWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
+  maxWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
+  height: "inherit",
+  overflowY: "auto",
+  padding: "r",
+  borderLeft: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
+  "&:focus": {
+    outline: "0"
+  },
+  ["@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)")]: {
     width: "100%",
     minWidth: "initial",
     maxWidth: "initial",
     borderLeft: "none",
     borderBottom: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
     height: "calc(" + themeGet("appScale.sidebarMobileHeight")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")"
-  }));
-});
-var SideNav = function SideNav(_ref) {
-  var items = _ref.items,
-    sideNavHeight = _ref.sideNavHeight;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    expandedItem = _useState2[0],
-    setExpandedItem = _useState2[1];
+  }
+}));
+const SideNav = _ref => {
+  let {
+    items,
+    sideNavHeight
+  } = _ref;
+  const [expandedItem, setExpandedItem] = useState(null);
 
   // Initialize a ref for SideNavExpanded
-  var expandedRef = useRef(null);
-  var navItemRefs = useRef({});
-  var firstExpandedItemByDefault = items.findIndex(function (item) {
-    return item.isExpandedByDefault && !item.hide;
-  });
-  useEffect(function () {
+  const expandedRef = useRef(null);
+  const navItemRefs = useRef({});
+  const firstExpandedItemByDefault = items.findIndex(item => item.isExpandedByDefault && !item.hide);
+  useEffect(() => {
     if (firstExpandedItemByDefault >= 0) {
       setExpandedItem(firstExpandedItemByDefault);
     }
   }, [firstExpandedItemByDefault]);
-  var handleItemClick = function handleItemClick(item) {
-    var itemIndex = item.index,
-      actionType = item.actionType,
-      onButtonClick = item.onClick;
+  const handleItemClick = item => {
+    const {
+      index: itemIndex,
+      actionType,
+      onClick: onButtonClick
+    } = item;
     if (actionType === "link" || actionType === "button") {
       setExpandedItem(null);
       onButtonClick && onButtonClick(item);
@@ -167,107 +157,93 @@ var SideNav = function SideNav(_ref) {
   };
 
   // Split items into two arrays based on the bottomAligned prop
-  var allItems = items.map(function (item, index) {
-    return _objectSpread(_objectSpread({}, item), {}, {
-      index: index
-    });
-  });
-  var topAlignedItems = allItems.filter(function (item) {
-    return !item.bottomAligned && !item.pageSpecific;
-  });
-  var pageSpecificItems = allItems.filter(function (item) {
-    return !item.bottomAligned && item.pageSpecific;
-  });
-  var bottomAlignedItems = allItems.filter(function (item) {
-    return item.bottomAligned;
-  });
-  var _useState3 = useState(window.innerWidth),
-    _useState4 = _slicedToArray(_useState3, 2),
-    windowWidth = _useState4[0],
-    setWindowWidth = _useState4[1];
-  var isSmallScreen = windowWidth < SMALL_SCREEN_BREAKPOINT;
-  var handleResize = function handleResize() {
+  const allItems = items.map((item, index) => ({
+    ...item,
+    index
+  }));
+  const topAlignedItems = allItems.filter(item => !item.bottomAligned && !item.pageSpecific);
+  const pageSpecificItems = allItems.filter(item => !item.bottomAligned && item.pageSpecific);
+  const bottomAlignedItems = allItems.filter(item => item.bottomAligned);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const isSmallScreen = windowWidth < SMALL_SCREEN_BREAKPOINT;
+  const handleResize = () => {
     setWindowWidth(window.innerWidth);
   };
-  var debounceResize = function debounceResize() {
-    return setTimeout(handleResize, 300);
-  }; // Wrap in a function
+  const debounceResize = () => setTimeout(handleResize, 300); // Wrap in a function
 
-  useEffect(function () {
-    return function () {
-      return clearTimeout(handleResize);
-    };
+  useEffect(() => {
+    return () => clearTimeout(handleResize);
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     window.addEventListener("resize", debounceResize);
-    return function () {
-      return window.removeEventListener("resize", debounceResize);
-    };
+    return () => window.removeEventListener("resize", debounceResize);
   });
 
   // Use a useEffect to focus on the expanded item
-  useEffect(function () {
+  useEffect(() => {
     if (expandedItem !== null && expandedRef.current) {
       expandedRef.current.focus();
     }
   }, [expandedItem]);
-  var handleBlur = function handleBlur(item) {
+  const handleBlur = item => {
     handleItemClick(item);
   };
-  var orderedItems = [].concat(_toConsumableArray(topAlignedItems), _toConsumableArray(pageSpecificItems), _toConsumableArray(bottomAlignedItems));
-  var renderItem = function renderItem(item, index) {
+  const orderedItems = [...topAlignedItems, ...pageSpecificItems, ...bottomAlignedItems];
+  const renderItem = (item, index) => {
     if (item.hide) {
       return null;
     }
-    var Component = item.component;
-    var Item = /*#__PURE__*/React.createElement(NavItem, {
-      key: item.index,
+    const Component = item.component;
+    const Item = /*#__PURE__*/_jsx(NavItem, {
       item: item,
       Component: Component,
       isActive: item.actionType === "link" ? item.isActive : expandedItem == item.index,
       handleItemClick: handleItemClick,
       navItemRefs: navItemRefs
-    });
+    }, item.index);
     if (item.pageSpecific && !orderedItems[index - 1].pageSpecific) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-        light: true,
-        mt: "s",
-        mb: "r",
-        display: ["none", "none", "none", "block"]
-      }), Item);
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Divider, {
+          light: true,
+          mt: "s",
+          mb: "r",
+          display: ["none", "none", "none", "block"]
+        }), Item]
+      });
     }
     return Item;
   };
-  return /*#__PURE__*/React.createElement(SideNavWrapper, {
-    sideNavHeight: sideNavHeight
-  }, /*#__PURE__*/React.createElement(SideNavItems, null, orderedItems.map(renderItem)), allItems.map(function (item, index) {
-    if (item.actionType !== "component") return null;
-    if (index !== expandedItem || item.hide) return null;
-    return /*#__PURE__*/React.createElement(SideNavExpanded, {
-      key: item.name,
-      ref: expandedRef,
-      tabIndex: "0",
-      sideNavHeight: sideNavHeight,
-      active: expandedItem,
-      large: item.large
-    }, item.component(), /*#__PURE__*/React.createElement(PanelControlTooltip, {
-      width: "80px",
-      textAlign: "center",
-      hideExpandedControl: true,
-      direction: "left",
-      text: "Hide panel"
-    }, /*#__PURE__*/React.createElement(PanelControl, {
-      onClick: function onClick() {
-        return handleItemClick(item);
-      },
-      "aria-label": "toggle panel",
-      onBlur: function onBlur() {
-        return handleBlur(item);
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      icon: ["fas", isSmallScreen ? "chevron-down" : "chevron-left"]
-    }))));
-  }));
+  return /*#__PURE__*/_jsxs(SideNavWrapper, {
+    sideNavHeight: sideNavHeight,
+    children: [/*#__PURE__*/_jsx(SideNavItems, {
+      children: orderedItems.map(renderItem)
+    }), allItems.map((item, index) => {
+      if (item.actionType !== "component") return null;
+      if (index !== expandedItem || item.hide) return null;
+      return /*#__PURE__*/_jsxs(SideNavExpanded, {
+        ref: expandedRef,
+        tabIndex: "0",
+        sideNavHeight: sideNavHeight,
+        active: expandedItem,
+        large: item.large,
+        children: [item.component(), /*#__PURE__*/_jsx(PanelControlTooltip, {
+          width: "80px",
+          textAlign: "center",
+          hideExpandedControl: true,
+          direction: "left",
+          text: "Hide panel",
+          children: /*#__PURE__*/_jsx(PanelControl, {
+            onClick: () => handleItemClick(item),
+            "aria-label": "toggle panel",
+            onBlur: () => handleBlur(item),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: ["fas", isSmallScreen ? "chevron-down" : "chevron-left"]
+            })
+          })
+        })]
+      }, item.name);
+    })]
+  });
 };
 SideNav.propTypes = {
   sideNavHeight: PropTypes.string.isRequired,

package/es/components/Sidebar/Sidebar.stories.js

@@ -2,6 +2,7 @@ import React from "react";
 import Sidebar, { SidebarTabs, SidebarTab, SidebarPanels, SidebarPanel, SidebarClose } from ".";
 import Icon from "../Icon";
 import Box from "../Box";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Sidebar",
   component: Sidebar,
@@ -12,39 +13,55 @@ export default {
     SidebarPanel: SidebarPanel
   }
 };
-export var defaultSidebar = function defaultSidebar() {
-  return /*#__PURE__*/React.createElement(Sidebar, null, /*#__PURE__*/React.createElement(SidebarTabs, null, /*#__PURE__*/React.createElement(SidebarTab, {
-    active: true,
-    badge: "3",
-    ariaLabel: "Messages"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "filter"],
-    size: "lg"
-  })), /*#__PURE__*/React.createElement(SidebarTab, {
-    ariaLabel: "Preferences"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "cog"],
-    size: "lg"
-  })), /*#__PURE__*/React.createElement(SidebarTab, {
-    bottomAligned: true,
-    ariaLabel: "Info"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "info-circle"],
-    size: "lg"
-  }))), /*#__PURE__*/React.createElement(SidebarPanels, null, /*#__PURE__*/React.createElement(SidebarClose, {
-    title: "Close Sidebar"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "angle-left"]
-  })), /*#__PURE__*/React.createElement(SidebarPanel, {
-    active: true
-  }, /*#__PURE__*/React.createElement(Box, {
-    p: "r"
-  }, "Sidebar content tab one blah blah lorem ipsum dolor sit amet.")), /*#__PURE__*/React.createElement(SidebarPanel, null, /*#__PURE__*/React.createElement(Box, {
-    p: "r"
-  }, "Sidebar content tab two blah blah lorem ipsum dolor sit amet.")), /*#__PURE__*/React.createElement(SidebarPanel, null, /*#__PURE__*/React.createElement(Box, {
-    p: "r"
-  }, "Information about company and app (app version etc.) goes here."))));
-};
+export const defaultSidebar = () => /*#__PURE__*/_jsxs(Sidebar, {
+  children: [/*#__PURE__*/_jsxs(SidebarTabs, {
+    children: [/*#__PURE__*/_jsx(SidebarTab, {
+      active: true,
+      badge: "3",
+      ariaLabel: "Messages",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "filter"],
+        size: "lg"
+      })
+    }), /*#__PURE__*/_jsx(SidebarTab, {
+      ariaLabel: "Preferences",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "cog"],
+        size: "lg"
+      })
+    }), /*#__PURE__*/_jsx(SidebarTab, {
+      bottomAligned: true,
+      ariaLabel: "Info",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "info-circle"],
+        size: "lg"
+      })
+    })]
+  }), /*#__PURE__*/_jsxs(SidebarPanels, {
+    children: [/*#__PURE__*/_jsx(SidebarClose, {
+      title: "Close Sidebar",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "angle-left"]
+      })
+    }), /*#__PURE__*/_jsx(SidebarPanel, {
+      active: true,
+      children: /*#__PURE__*/_jsx(Box, {
+        p: "r",
+        children: "Sidebar content tab one blah blah lorem ipsum dolor sit amet."
+      })
+    }), /*#__PURE__*/_jsx(SidebarPanel, {
+      children: /*#__PURE__*/_jsx(Box, {
+        p: "r",
+        children: "Sidebar content tab two blah blah lorem ipsum dolor sit amet."
+      })
+    }), /*#__PURE__*/_jsx(SidebarPanel, {
+      children: /*#__PURE__*/_jsx(Box, {
+        p: "r",
+        children: "Information about company and app (app version etc.) goes here."
+      })
+    })]
+  })]
+});
 defaultSidebar.storyName = "Default";
 defaultSidebar.__docgenInfo = {
   "description": "",