orcs-design-system 3.2.4 → 3.2.6

package/es/components/Modal/index.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "overflow", "onClose", "theme", "visible", "overlayID", "modalID", "headerContent", "footerContent"];
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
@@ -13,98 +9,80 @@ import Icon from "../Icon";
 import Button from "../Button";
 import Flex from "../Flex";
 import Box from "../Box";
-var scaleIn = keyframes(["0%{transform:scale(0);}100%{transform:scale(1);}"]);
-var fadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
-var Overlay = styled(Flex).withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const scaleIn = keyframes(["0%{transform:scale(0);}100%{transform:scale(1);}"]);
+const fadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
+const Overlay = styled(Flex).withConfig({
   displayName: "Modal__Overlay",
   componentId: "sc-1v5puuo-0"
 })(["position:fixed;background:rgba(0,0,0,0.7);top:0;right:0;bottom:0;left:0;margin:0;opacity:0;transition:all 300ms ease-in-out;opacity:1;z-index:900;visibility:visible;animation:300ms ", " ease-in-out;justify-content:center;align-items:center;"], fadeIn);
-var Container = styled(Box).withConfig({
+const Container = styled(Box).withConfig({
   displayName: "Modal__Container",
   componentId: "sc-1v5puuo-1"
-})(["position:relative;z-index:9001;animation:300ms ", " ease-in-out,300ms ", " ease-in-out;display:flex;flex-direction:column;resize:both;overflow:", ";"], fadeIn, scaleIn, function (props) {
-  return props.overflow === "visible" ? "visible" : "hidden";
-});
-var CloseButton = styled(Button).withConfig({
+})(["position:relative;z-index:9001;animation:300ms ", " ease-in-out,300ms ", " ease-in-out;display:flex;flex-direction:column;resize:both;overflow:", ";"], fadeIn, scaleIn, props => props.overflow === "visible" ? "visible" : "hidden");
+const CloseButton = styled(Button).withConfig({
   displayName: "Modal__CloseButton",
   componentId: "sc-1v5puuo-2"
-})(function (props) {
-  return css({
-    position: "absolute",
-    top: "s",
-    right: "s",
-    bg: "transparent",
-    color: themeGet("colors.greyDark")(props),
-    borderColor: "transparent",
-    "&:hover": {
-      bg: themeGet("colors.greyLighter")(props),
-      borderColor: themeGet("colors.greyLighter")(props)
-    },
-    "&:focus": {
-      outline: "0",
-      boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.black20")(props)
-    }
-  });
-});
-var HeaderContent = styled.div.withConfig({
+})(props => css({
+  position: "absolute",
+  top: "s",
+  right: "s",
+  bg: "transparent",
+  color: themeGet("colors.greyDark")(props),
+  borderColor: "transparent",
+  "&:hover": {
+    bg: themeGet("colors.greyLighter")(props),
+    borderColor: themeGet("colors.greyLighter")(props)
+  },
+  "&:focus": {
+    outline: "0",
+    boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.black20")(props)
+  }
+}));
+const HeaderContent = styled.div.withConfig({
   displayName: "Modal__HeaderContent",
   componentId: "sc-1v5puuo-3"
-})(["display:flex;align-items:flex-start;justify-content:space-between;width:100%;padding-bottom:", ";border-bottom:solid 1px ", ";flex:0 0 auto;"], function (props) {
-  return themeGet("space.r")(props);
-}, function (props) {
-  return themeGet("colors.greyLighter")(props);
-});
-var FooterContent = styled.div.withConfig({
+})(["display:flex;align-items:flex-start;justify-content:space-between;width:100%;padding-bottom:", ";border-bottom:solid 1px ", ";flex:0 0 auto;"], props => themeGet("space.r")(props), props => themeGet("colors.greyLighter")(props));
+const FooterContent = styled.div.withConfig({
   displayName: "Modal__FooterContent",
   componentId: "sc-1v5puuo-4"
-})(["display:flex;align-items:flex-start;justify-content:space-between;width:100%;padding-top:", ";border-top:solid 1px ", ";flex:0 0 auto;"], function (props) {
-  return themeGet("space.r")(props);
-}, function (props) {
-  return themeGet("colors.greyLighter")(props);
-});
-var ScrollableContent = styled.div.withConfig({
+})(["display:flex;align-items:flex-start;justify-content:space-between;width:100%;padding-top:", ";border-top:solid 1px ", ";flex:0 0 auto;"], props => themeGet("space.r")(props), props => themeGet("colors.greyLighter")(props));
+const ScrollableContent = styled.div.withConfig({
   displayName: "Modal__ScrollableContent",
   componentId: "sc-1v5puuo-5"
-})(["--scrollbar-size:8px;--scrollbar-minlength:30px;--scrollbar-ff-width:thin;--scrollbar-track-color:rgba(0,0,0,0.05);--scrollbar-color:rgba(0,0,0,0.2);--scrollbar-color-hover:rgba(0,0,0,0.35);--scrollbar-color-active:rgba(0,0,0,0.5);height:100%;flex:1 1 auto;overflow-y:", ";margin-top:", ";-webkit-overflow-scrolling:touch;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:var(--scrollbar-ff-width);scrollbar-color:var(--scrollbar-color) var(--scrollbar-track-color);&::-webkit-scrollbar{height:var(--scrollbar-size);width:var(--scrollbar-size);}&::-webkit-scrollbar-track{background-color:var(--scrollbar-track-color);}&::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color);border-radius:4px;}&::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-color-hover);}&::-webkit-scrollbar-thumb:active{background-color:var(--scrollbar-color-active);}&::-webkit-scrollbar-thumb:vertical{min-height:var(--scrollbar-minlength);}&::-webkit-scrollbar-thumb:horizontal{min-width:var(--scrollbar-minlength);}"], function (props) {
-  return props.overflow === "visible" ? "visible" : "auto";
-}, function (props) {
-  return props.headerContent ? "0" : "20px";
-});
-var isHidden = function isHidden(el) {
-  return window.getComputedStyle(el).display === "none";
-};
-var Modal = function Modal(_ref) {
-  var children = _ref.children,
-    width = _ref.width,
-    height = _ref.height,
-    maxWidth = _ref.maxWidth,
-    maxHeight = _ref.maxHeight,
-    minWidth = _ref.minWidth,
-    minHeight = _ref.minHeight,
-    overflow = _ref.overflow,
-    onClose = _ref.onClose,
-    theme = _ref.theme,
-    visible = _ref.visible,
-    overlayID = _ref.overlayID,
-    modalID = _ref.modalID,
-    headerContent = _ref.headerContent,
-    footerContent = _ref.footerContent,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    lastActiveElement = _useState2[0],
-    setLastActiveElement = _useState2[1];
-  var ariaLabel = useMemo(function () {
+})(["--scrollbar-size:8px;--scrollbar-minlength:30px;--scrollbar-ff-width:thin;--scrollbar-track-color:rgba(0,0,0,0.05);--scrollbar-color:rgba(0,0,0,0.2);--scrollbar-color-hover:rgba(0,0,0,0.35);--scrollbar-color-active:rgba(0,0,0,0.5);height:100%;flex:1 1 auto;overflow-y:", ";margin-top:", ";-webkit-overflow-scrolling:touch;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:var(--scrollbar-ff-width);scrollbar-color:var(--scrollbar-color) var(--scrollbar-track-color);&::-webkit-scrollbar{height:var(--scrollbar-size);width:var(--scrollbar-size);}&::-webkit-scrollbar-track{background-color:var(--scrollbar-track-color);}&::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color);border-radius:4px;}&::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-color-hover);}&::-webkit-scrollbar-thumb:active{background-color:var(--scrollbar-color-active);}&::-webkit-scrollbar-thumb:vertical{min-height:var(--scrollbar-minlength);}&::-webkit-scrollbar-thumb:horizontal{min-width:var(--scrollbar-minlength);}"], props => props.overflow === "visible" ? "visible" : "auto", props => props.headerContent ? "0" : "20px");
+const isHidden = el => window.getComputedStyle(el).display === "none";
+const Modal = _ref => {
+  let {
+    children,
+    width,
+    height,
+    maxWidth,
+    maxHeight,
+    minWidth,
+    minHeight,
+    overflow,
+    onClose,
+    theme,
+    visible,
+    overlayID,
+    modalID,
+    headerContent,
+    footerContent,
+    ...restProps
+  } = _ref;
+  const [lastActiveElement, setLastActiveElement] = useState(null);
+  const ariaLabel = useMemo(() => {
     if (restProps.ariaLabel) {
       return restProps.ariaLabel;
     } else if (typeof headerContent === "string") {
       return headerContent;
     }
   }, [restProps.ariaLabel, headerContent]);
-  var focusLastActiveElement = useCallback(function () {
+  const focusLastActiveElement = useCallback(() => {
     if (!lastActiveElement) return;
     if (lastActiveElement !== null && lastActiveElement !== void 0 && lastActiveElement.dataset.actionMenuId && isHidden(lastActiveElement === null || lastActiveElement === void 0 ? void 0 : lastActiveElement.parentNode)) {
-      var actionMenu = document.getElementById(lastActiveElement.dataset.actionMenuId);
+      const actionMenu = document.getElementById(lastActiveElement.dataset.actionMenuId);
       actionMenu.focus();
     } else {
       lastActiveElement.focus();
@@ -112,7 +90,7 @@ var Modal = function Modal(_ref) {
   }, [lastActiveElement]);
 
   // On becoming visible focus the top
-  useEffect(function () {
+  useEffect(() => {
     if (visible && !lastActiveElement) {
       // Keep track of last clicked element to refocus to after dialog closes
       setLastActiveElement(document.activeElement);
@@ -123,83 +101,97 @@ var Modal = function Modal(_ref) {
       focusLastActiveElement();
     }
   }, [visible, focusLastActiveElement, lastActiveElement]);
-  useEffect(function () {
+  useEffect(() => {
     if (!visible) return;
 
     /* Adding onClick handler on the Overlay does not work.
      * So we add a global listener and check if the element clicked is the
      * overlay vida overlayID.
      */
-    var handler = function handler(e) {
+    const handler = e => {
       if (e.target.id === overlayID) {
         onClose();
       }
     };
-    var eventTypes = ["touchstart", "click"];
-    eventTypes.map(function (type) {
+    const eventTypes = ["touchstart", "click"];
+    eventTypes.map(type => {
       window.addEventListener(type, handler, true);
     });
-    return function () {
-      eventTypes.map(function (type) {
+    return () => {
+      eventTypes.map(type => {
         window.removeEventListener(type, handler, true);
       });
     };
   }, [visible, onClose, overlayID]);
   if (!visible) return null;
-  var component = /*#__PURE__*/React.createElement(Overlay, _extends({
+  const component = /*#__PURE__*/_jsx(Overlay, {
     alignItems: "center",
     justifyContent: "center",
-    id: overlayID
-  }, restProps), visible && /*#__PURE__*/React.createElement(FocusTrap, {
-    focusTrapOptions: {
-      onDeactivate: onClose
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-label": ariaLabel
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    maxWidth: maxWidth,
-    maxHeight: maxHeight,
-    minWidth: minWidth,
-    minHeight: minHeight,
-    overflow: overflow,
-    borderRadius: "2",
-    bg: "white",
-    p: "r",
-    id: modalID
-  }, headerContent ? /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(Box, {
-    mr: "xl",
-    width: "100%"
-  }, headerContent), /*#__PURE__*/React.createElement(CloseButton, {
-    onClick: onClose,
-    className: "modal-close",
-    small: true,
-    px: "6px",
-    "aria-label": "Close dialog"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "times"],
-    color: "greyDark",
-    size: "lg"
-  }))) : /*#__PURE__*/React.createElement(CloseButton, {
-    onClick: onClose,
-    className: "modal-close",
-    small: true,
-    px: "6px",
-    "aria-label": "Close dialog"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "times"],
-    color: "greyDark",
-    size: "lg"
-  })), /*#__PURE__*/React.createElement(ScrollableContent, {
-    headerContent: headerContent,
-    overflow: overflow
-  }, children), footerContent && /*#__PURE__*/React.createElement(FooterContent, null, footerContent)))));
-  return /*#__PURE__*/ReactDOM.createPortal(theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component, document.body);
+    id: overlayID,
+    ...restProps,
+    children: visible && /*#__PURE__*/_jsx(FocusTrap, {
+      focusTrapOptions: {
+        onDeactivate: onClose
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        children: /*#__PURE__*/_jsxs(Container, {
+          width: width,
+          height: height,
+          maxWidth: maxWidth,
+          maxHeight: maxHeight,
+          minWidth: minWidth,
+          minHeight: minHeight,
+          overflow: overflow,
+          borderRadius: "2",
+          bg: "white",
+          p: "r",
+          id: modalID,
+          children: [headerContent ? /*#__PURE__*/_jsxs(HeaderContent, {
+            children: [/*#__PURE__*/_jsx(Box, {
+              mr: "xl",
+              width: "100%",
+              children: headerContent
+            }), /*#__PURE__*/_jsx(CloseButton, {
+              onClick: onClose,
+              className: "modal-close",
+              small: true,
+              px: "6px",
+              "aria-label": "Close dialog",
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: ["fas", "times"],
+                color: "greyDark",
+                size: "lg"
+              })
+            })]
+          }) : /*#__PURE__*/_jsx(CloseButton, {
+            onClick: onClose,
+            className: "modal-close",
+            small: true,
+            px: "6px",
+            "aria-label": "Close dialog",
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: ["fas", "times"],
+              color: "greyDark",
+              size: "lg"
+            })
+          }), /*#__PURE__*/_jsx(ScrollableContent, {
+            headerContent: headerContent,
+            overflow: overflow,
+            children: children
+          }), footerContent && /*#__PURE__*/_jsx(FooterContent, {
+            children: footerContent
+          })]
+        })
+      })
+    })
+  });
+  return /*#__PURE__*/ReactDOM.createPortal(theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component, document.body);
 };
 Modal.propTypes = {
   /** Specifies the children of the Modal */

package/es/components/Notification/Notification.stories.js

@@ -2,80 +2,81 @@ import React from "react";
 import Notification from ".";
 import Spacer from "../Spacer";
 import Box from "../Box";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Notification",
   component: Notification,
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      p: "r",
-      height: "250px"
-    }, storyFn());
-  }]
-};
-export var basicNotification = function basicNotification() {
-  return /*#__PURE__*/React.createElement(Notification, {
-    icon: ["fas", "share-square"]
-  }, "Default notification message for messages that are not super important, e.g. Link shared.");
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    p: "r",
+    height: "250px",
+    children: storyFn()
+  })]
 };
+export const basicNotification = () => /*#__PURE__*/_jsx(Notification, {
+  icon: ["fas", "share-square"],
+  children: "Default notification message for messages that are not super important, e.g. Link shared."
+});
 basicNotification.storyName = "Basic";
-export var colourNotification = function colourNotification() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "r"
-  }, /*#__PURE__*/React.createElement(Notification, {
+export const colourNotification = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "r",
+  children: [/*#__PURE__*/_jsx(Notification, {
     colour: "success",
-    icon: ["fas", "check-circle"]
-  }, "Green notification for good/successful notifications, e.g. Details updated successfully!"), /*#__PURE__*/React.createElement(Notification, {
+    icon: ["fas", "check-circle"],
+    children: "Green notification for good/successful notifications, e.g. Details updated successfully!"
+  }), /*#__PURE__*/_jsx(Notification, {
     colour: "warning",
-    icon: ["fas", "exclamation-triangle"]
-  }, "Yellow warning notification e.g. This may take a few minutes to update."), /*#__PURE__*/React.createElement(Notification, {
+    icon: ["fas", "exclamation-triangle"],
+    children: "Yellow warning notification e.g. This may take a few minutes to update."
+  }), /*#__PURE__*/_jsx(Notification, {
     colour: "danger",
-    icon: ["fas", "exclamation-circle"]
-  }, "Red error notification e.g. Update failed! Please try again."));
-};
+    icon: ["fas", "exclamation-circle"],
+    children: "Red error notification e.g. Update failed! Please try again."
+  })]
+});
 colourNotification.storyName = "Alternate Colours";
-export var textOnlyNotification = function textOnlyNotification() {
-  return /*#__PURE__*/React.createElement(Notification, null, "Text-only notification");
-};
+export const textOnlyNotification = () => /*#__PURE__*/_jsx(Notification, {
+  children: "Text-only notification"
+});
 textOnlyNotification.storyName = "Text-only";
-export var closeDisabledNotification = function closeDisabledNotification() {
-  return /*#__PURE__*/React.createElement(Notification, {
-    closable: false
-  }, "Closing this notification is disabled, this should be used for persistent notifications e.g. Stage 1 is now locked and is read-only.");
-};
+export const closeDisabledNotification = () => /*#__PURE__*/_jsx(Notification, {
+  closable: false,
+  children: "Closing this notification is disabled, this should be used for persistent notifications e.g. Stage 1 is now locked and is read-only."
+});
 closeDisabledNotification.storyName = "Close Disabled";
-export var loadingNotification = function loadingNotification() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "r"
-  }, /*#__PURE__*/React.createElement(Notification, {
-    loading: true
-  }, "In progress notification E.g. Importing data..."), /*#__PURE__*/React.createElement(Notification, {
+export const loadingNotification = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "r",
+  children: [/*#__PURE__*/_jsx(Notification, {
     loading: true,
-    colour: "success"
-  }, "In progress notification E.g. Importing data..."), /*#__PURE__*/React.createElement(Notification, {
+    children: "In progress notification E.g. Importing data..."
+  }), /*#__PURE__*/_jsx(Notification, {
     loading: true,
-    colour: "warning"
-  }, "In progress notification E.g. Importing data..."), /*#__PURE__*/React.createElement(Notification, {
+    colour: "success",
+    children: "In progress notification E.g. Importing data..."
+  }), /*#__PURE__*/_jsx(Notification, {
     loading: true,
-    colour: "danger"
-  }, "In progress notification E.g. Importing data..."));
-};
+    colour: "warning",
+    children: "In progress notification E.g. Importing data..."
+  }), /*#__PURE__*/_jsx(Notification, {
+    loading: true,
+    colour: "danger",
+    children: "In progress notification E.g. Importing data..."
+  })]
+});
 loadingNotification.storyName = "Loading";
-export var floatingNotification = function floatingNotification() {
-  return /*#__PURE__*/React.createElement(Notification, {
-    floating: true,
-    bottom: "20px",
-    right: "20px",
-    icon: ["fas", "bell"]
-  }, "Floating notification.");
-};
+export const floatingNotification = () => /*#__PURE__*/_jsx(Notification, {
+  floating: true,
+  bottom: "20px",
+  right: "20px",
+  icon: ["fas", "bell"],
+  children: "Floating notification."
+});
 floatingNotification.storyName = "Floating";
-export var centeredNotification = function centeredNotification() {
-  return /*#__PURE__*/React.createElement(Notification, {
-    centered: true,
-    floating: true,
-    bottom: "20px"
-  }, "Centered notification");
-};
+export const centeredNotification = () => /*#__PURE__*/_jsx(Notification, {
+  centered: true,
+  floating: true,
+  bottom: "20px",
+  children: "Centered notification"
+});
 centeredNotification.storyName = "Floating and Centered";
 basicNotification.__docgenInfo = {
   "description": "",