orcs-design-system 3.2.4 → 3.2.6

package/es/components/Notification/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 = ["icon", "colour", "floating", "children", "top", "right", "bottom", "left", "centered", "closable", "onDismiss", "theme", "iconProps", "loading"];
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
@@ -11,57 +7,52 @@ import { css } from "@styled-system/css";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import { space, layout, position, variant, compose } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
-var NotificationStyles = compose(space, layout, position);
-var NotificationWrapper = styled("div").withConfig({
-  shouldForwardProp: shouldForwardProp,
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const NotificationStyles = compose(space, layout, position);
+const NotificationWrapper = styled("div").withConfig({
+  shouldForwardProp,
   displayName: "Notification__NotificationWrapper",
   componentId: "sc-1p26rkq-0"
-}).attrs(function (props) {
-  return {
-    className: props.notifClass
-  };
-})(function (props) {
-  return css({
-    position: "relative",
-    color: themeGet("colors.white")(props),
-    fontSize: themeGet("fontSizes.1")(props),
-    fontWeight: themeGet("fontWeights.2")(props),
-    px: "s",
-    py: "s",
-    cursor: "default",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-start",
-    borderRadius: themeGet("radii.1")(props),
-    bg: themeGet("colors.primaryDark")(props),
-    "&.floating": {
-      zIndex: "13",
-      position: "fixed"
+}).attrs(props => ({
+  className: props.notifClass
+}))(props => css({
+  position: "relative",
+  color: themeGet("colors.white")(props),
+  fontSize: themeGet("fontSizes.1")(props),
+  fontWeight: themeGet("fontWeights.2")(props),
+  px: "s",
+  py: "s",
+  cursor: "default",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  borderRadius: themeGet("radii.1")(props),
+  bg: themeGet("colors.primaryDark")(props),
+  "&.floating": {
+    zIndex: "13",
+    position: "fixed"
+  },
+  "&.centered": {
+    left: "50%",
+    transform: "translateX(-50%)",
+    right: "auto"
+  }
+}), props => variant({
+  prop: "colour",
+  variants: {
+    success: {
+      bg: themeGet("colors.successDark")(props)
     },
-    "&.centered": {
-      left: "50%",
-      transform: "translateX(-50%)",
-      right: "auto"
-    }
-  });
-}, function (props) {
-  return variant({
-    prop: "colour",
-    variants: {
-      success: {
-        bg: themeGet("colors.successDark")(props)
-      },
-      danger: {
-        bg: themeGet("colors.dangerDark")(props)
-      },
-      warning: {
-        bg: themeGet("colors.warningLight")(props),
-        color: themeGet("colors.black80")(props)
-      },
-      "default": {}
-    }
-  });
-}, variant({
+    danger: {
+      bg: themeGet("colors.dangerDark")(props)
+    },
+    warning: {
+      bg: themeGet("colors.warningLight")(props),
+      color: themeGet("colors.black80")(props)
+    },
+    default: {}
+  }
+}), variant({
   variants: {
     success: {
       bg: themeGet("colors.successDark")
@@ -73,73 +64,66 @@ var NotificationWrapper = styled("div").withConfig({
       bg: themeGet("colors.warningLight"),
       color: themeGet("colors.black80")
     },
-    "default": {
+    default: {
       bg: themeGet("colors.primaryDark")
     }
   }
 }), NotificationStyles);
-var NotificationContent = styled("p").withConfig({
+const NotificationContent = styled("p").withConfig({
   displayName: "Notification__NotificationContent",
   componentId: "sc-1p26rkq-1"
-})(function (props) {
-  return css({
-    lineHeight: themeGet("fontSizes.3")(props),
-    pr: props.closable === false ? "0" : "s"
-  });
-});
-var CloseButton = styled("button").withConfig({
+})(props => css({
+  lineHeight: themeGet("fontSizes.3")(props),
+  pr: props.closable === false ? "0" : "s"
+}));
+const CloseButton = styled("button").withConfig({
   displayName: "Notification__CloseButton",
   componentId: "sc-1p26rkq-2"
-})(function (props) {
-  return css({
-    appearance: "none",
-    bg: "transparent",
-    p: "0",
-    paddingLeft: "1",
-    paddingRight: "1",
-    border: "none",
-    ml: "auto",
-    cursor: "pointer",
-    opacity: "0.7",
-    transition: themeGet("transition.transitionDefault")(props),
-    color: themeGet("colors.white")(props),
-    "&:hover, &:focus": {
-      outline: "0",
-      opacity: "1"
-    }
-  });
-});
-var NotificationIcon = styled(Icon).withConfig({
+})(props => css({
+  appearance: "none",
+  bg: "transparent",
+  p: "0",
+  paddingLeft: "1",
+  paddingRight: "1",
+  border: "none",
+  ml: "auto",
+  cursor: "pointer",
+  opacity: "0.7",
+  transition: themeGet("transition.transitionDefault")(props),
+  color: themeGet("colors.white")(props),
+  "&:hover, &:focus": {
+    outline: "0",
+    opacity: "1"
+  }
+}));
+const NotificationIcon = styled(Icon).withConfig({
   displayName: "Notification__NotificationIcon",
   componentId: "sc-1p26rkq-3"
-})(function (props) {
-  return css({
-    color: props.colour === "warning" ? themeGet("colors.black80")(props) : themeGet("colors.white")(props),
-    fontSize: themeGet("fontSizes.2")(props),
-    mr: "s"
-  });
-});
+})(props => css({
+  color: props.colour === "warning" ? themeGet("colors.black80")(props) : themeGet("colors.white")(props),
+  fontSize: themeGet("fontSizes.2")(props),
+  mr: "s"
+}));
 export default function Notification(_ref) {
-  var icon = _ref.icon,
-    colour = _ref.colour,
-    floating = _ref.floating,
-    children = _ref.children,
-    top = _ref.top,
-    right = _ref.right,
-    bottom = _ref.bottom,
-    left = _ref.left,
-    centered = _ref.centered,
-    closable = _ref.closable,
-    onDismiss = _ref.onDismiss,
-    theme = _ref.theme,
-    iconProps = _ref.iconProps,
-    loading = _ref.loading,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    dismissed = _useState2[0],
-    handleDismiss = _useState2[1];
-  var onToggle = function onToggle() {
+  let {
+    icon,
+    colour,
+    floating,
+    children,
+    top,
+    right,
+    bottom,
+    left,
+    centered,
+    closable,
+    onDismiss,
+    theme,
+    iconProps,
+    loading,
+    ...props
+  } = _ref;
+  const [dismissed, handleDismiss] = useState(false);
+  const onToggle = () => {
     if (!dismissed) {
       handleDismiss(true);
       if (onDismiss) {
@@ -149,7 +133,7 @@ export default function Notification(_ref) {
       handleDismiss(false);
     }
   };
-  var notifClass;
+  let notifClass;
   if (floating) {
     if (centered) {
       notifClass = "floating centered";
@@ -162,7 +146,7 @@ export default function Notification(_ref) {
   if (dismissed) {
     return null;
   }
-  var component = /*#__PURE__*/React.createElement(NotificationWrapper, _extends({
+  const component = /*#__PURE__*/_jsxs(NotificationWrapper, {
     colour: colour,
     floating: floating,
     top: top,
@@ -172,29 +156,35 @@ export default function Notification(_ref) {
     centered: centered,
     iconProps: iconProps,
     notifClass: notifClass,
-    role: "alert"
-  }, props), icon && /*#__PURE__*/React.createElement(NotificationIcon, _extends({
-    colour: colour,
-    icon: icon
-  }, iconProps)), loading && /*#__PURE__*/React.createElement(Loading, {
-    small: true,
-    inverted: colour != "warning",
-    mr: "s"
-  }), /*#__PURE__*/React.createElement(NotificationContent, {
-    closable: closable
-  }, children), closable && /*#__PURE__*/React.createElement(CloseButton, {
-    className: "close-button",
-    tabIndex: "0",
-    onClick: onToggle,
-    "aria-label": "Close Notification"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "times"],
-    size: "lg",
-    color: colour === "warning" ? "black80" : "white"
-  })));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    role: "alert",
+    ...props,
+    children: [icon && /*#__PURE__*/_jsx(NotificationIcon, {
+      colour: colour,
+      icon: icon,
+      ...iconProps
+    }), loading && /*#__PURE__*/_jsx(Loading, {
+      small: true,
+      inverted: colour != "warning",
+      mr: "s"
+    }), /*#__PURE__*/_jsx(NotificationContent, {
+      closable: closable,
+      children: children
+    }), closable && /*#__PURE__*/_jsx(CloseButton, {
+      className: "close-button",
+      tabIndex: "0",
+      onClick: onToggle,
+      "aria-label": "Close Notification",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "times"],
+        size: "lg",
+        color: colour === "warning" ? "black80" : "white"
+      })
+    })]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Notification.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),

package/es/components/Popover/Popover.stories.js

@@ -5,132 +5,164 @@ import Box from "../Box";
 import Grid from "../Grid";
 import Flex from "../Flex";
 import StyledLink from "../StyledLink";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default {
   title: "Components/Popover",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      p: "6"
-    }, /*#__PURE__*/React.createElement(Flex, {
-      justifyContent: "space-around"
-    }, storyFn()));
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    p: "6",
+    children: /*#__PURE__*/_jsx(Flex, {
+      justifyContent: "space-around",
+      children: storyFn()
+    })
+  })],
   component: Popover
 };
-export var defaultPopover = function defaultPopover() {
-  return /*#__PURE__*/React.createElement(Popover, {
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, null, "Hover Me!"));
-};
+export const defaultPopover = () => /*#__PURE__*/_jsx(Popover, {
+  text: "Description that explains child element",
+  children: /*#__PURE__*/_jsx(Button, {
+    children: "Hover Me!"
+  })
+});
 defaultPopover.storyName = "Default";
-export var direction = function direction() {
-  return /*#__PURE__*/React.createElement(Grid, {
-    gridTemplateColumns: "1fr 1fr 1fr",
-    gridAutoFlow: "row",
-    gridGap: "r",
-    alignItems: "center",
-    justifyContent: "center"
-  }, /*#__PURE__*/React.createElement(Popover, {
+export const direction = () => /*#__PURE__*/_jsxs(Grid, {
+  gridTemplateColumns: "1fr 1fr 1fr",
+  gridAutoFlow: "row",
+  gridGap: "r",
+  alignItems: "center",
+  justifyContent: "center",
+  children: [/*#__PURE__*/_jsx(Popover, {
     direction: "topLeft",
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, {
-    width: "125px"
-  }, "Top left")), /*#__PURE__*/React.createElement(Popover, {
+    text: "Description that explains child element",
+    children: /*#__PURE__*/_jsx(Button, {
+      width: "125px",
+      children: "Top left"
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
     direction: "top",
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, {
-    width: "125px"
-  }, "Top")), /*#__PURE__*/React.createElement(Popover, {
+    text: "Description that explains child element",
+    children: /*#__PURE__*/_jsx(Button, {
+      width: "125px",
+      children: "Top"
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
     direction: "topRight",
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, {
-    width: "125px"
-  }, "Top right")), /*#__PURE__*/React.createElement(Popover, {
+    text: "Description that explains child element",
+    children: /*#__PURE__*/_jsx(Button, {
+      width: "125px",
+      children: "Top right"
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
     direction: "left",
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, {
-    width: "125px"
-  }, "Left")), /*#__PURE__*/React.createElement(Box, {
+    text: "Description that explains child element",
+    children: /*#__PURE__*/_jsx(Button, {
+      width: "125px",
+      children: "Left"
+    })
+  }), /*#__PURE__*/_jsx(Box, {
     width: "125px",
     bg: "greyLighter",
     m: "auto"
-  }), /*#__PURE__*/React.createElement(Popover, {
+  }), /*#__PURE__*/_jsx(Popover, {
     direction: "right",
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, {
-    width: "125px"
-  }, "Right")), /*#__PURE__*/React.createElement(Popover, {
+    text: "Description that explains child element",
+    children: /*#__PURE__*/_jsx(Button, {
+      width: "125px",
+      children: "Right"
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
     direction: "bottomLeft",
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, {
-    width: "125px"
-  }, "Bottom left")), /*#__PURE__*/React.createElement(Popover, {
+    text: "Description that explains child element",
+    children: /*#__PURE__*/_jsx(Button, {
+      width: "125px",
+      children: "Bottom left"
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
     direction: "bottom",
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, {
-    width: "125px"
-  }, "Bottom")), /*#__PURE__*/React.createElement(Popover, {
+    text: "Description that explains child element",
+    children: /*#__PURE__*/_jsx(Button, {
+      width: "125px",
+      children: "Bottom"
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
     direction: "bottomRight",
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, {
-    width: "125px"
-  }, "Bottom right")));
-};
+    text: "Description that explains child element",
+    children: /*#__PURE__*/_jsx(Button, {
+      width: "125px",
+      children: "Bottom right"
+    })
+  })]
+});
 direction.storyName = "Direction";
-export var specifiedWidth = function specifiedWidth() {
-  return /*#__PURE__*/React.createElement(Popover, {
+export const specifiedWidth = () => /*#__PURE__*/_jsx(Popover, {
+  text: "Description that explains child element",
+  width: "240px",
+  children: /*#__PURE__*/_jsx(Button, {
+    children: "Hover Me"
+  })
+});
+export const textAlignment = () => /*#__PURE__*/_jsx(Popover, {
+  textAlign: "center",
+  text: "Centered description that explains child element",
+  children: /*#__PURE__*/_jsx(Button, {
+    children: "Hover Me"
+  })
+});
+export const DisplayInlineBlock = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Popover, {
     text: "Description that explains child element",
-    width: "240px"
-  }, /*#__PURE__*/React.createElement(Button, null, "Hover Me"));
-};
-export var textAlignment = function textAlignment() {
-  return /*#__PURE__*/React.createElement(Popover, {
-    textAlign: "center",
-    text: "Centered description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, null, "Hover Me"));
-};
-export var DisplayInlineBlock = function DisplayInlineBlock() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, {
+    inlineBlock: true,
+    children: /*#__PURE__*/_jsx(Button, {
+      children: "Inline Block Set"
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
     text: "Description that explains child element",
-    inlineBlock: true
-  }, /*#__PURE__*/React.createElement(Button, null, "Inline Block Set")), /*#__PURE__*/React.createElement(Popover, {
+    inlineBlock: true,
+    children: /*#__PURE__*/_jsx(Button, {
+      children: "Inline Block Set"
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
     text: "Description that explains child element",
-    inlineBlock: true
-  }, /*#__PURE__*/React.createElement(Button, null, "Inline Block Set")), /*#__PURE__*/React.createElement(Popover, {
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, null, "Not Inline")), /*#__PURE__*/React.createElement(Popover, {
+    children: /*#__PURE__*/_jsx(Button, {
+      children: "Not Inline"
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
     direction: "top",
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, null, "Not Inline")));
-};
-export var tooltipExample = function tooltipExample() {
-  return /*#__PURE__*/React.createElement(Popover, {
-    text: "This tooltip helps explain stuff",
-    direction: "top",
-    variant: "tooltip"
-  });
-};
+    text: "Description that explains child element",
+    children: /*#__PURE__*/_jsx(Button, {
+      children: "Not Inline"
+    })
+  })]
+});
+export const tooltipExample = () => /*#__PURE__*/_jsx(Popover, {
+  text: "This tooltip helps explain stuff",
+  direction: "top",
+  variant: "tooltip"
+});
 tooltipExample.storyName = "Tooltip Example";
-export var tooltipWithLinkExample = function tooltipWithLinkExample() {
-  return /*#__PURE__*/React.createElement(Popover, {
-    text: /*#__PURE__*/React.createElement("span", null, "Test tooltip with a", " ", /*#__PURE__*/React.createElement(StyledLink, {
+export const tooltipWithLinkExample = () => /*#__PURE__*/_jsx(Popover, {
+  text: /*#__PURE__*/_jsxs("span", {
+    children: ["Test tooltip with a", " ", /*#__PURE__*/_jsx(StyledLink, {
       href: "https://www.teamform.co",
-      target: "_blank"
-    }, "link to TeamForm")),
-    arialLabel: "Link to TeamForm",
-    direction: "right",
-    variant: "tooltip",
-    enableSelectAll: false
-  });
-};
+      target: "_blank",
+      children: "link to TeamForm"
+    })]
+  }),
+  arialLabel: "Link to TeamForm",
+  direction: "right",
+  variant: "tooltip",
+  enableSelectAll: false
+});
 tooltipWithLinkExample.storyName = "Tooltip with link Example";
-export var keepInViewExample = function keepInViewExample() {
-  return /*#__PURE__*/React.createElement(Flex, {
-    justifyContent: "flex-end",
-    width: "100%"
-  }, /*#__PURE__*/React.createElement(Popover, {
-    text: "Description that explains child element"
-  }, /*#__PURE__*/React.createElement(Button, null, "Hover Me!")));
-};
+export const keepInViewExample = () => /*#__PURE__*/_jsx(Flex, {
+  justifyContent: "flex-end",
+  width: "100%",
+  children: /*#__PURE__*/_jsx(Popover, {
+    text: "Description that explains child element",
+    children: /*#__PURE__*/_jsx(Button, {
+      children: "Hover Me!"
+    })
+  })
+});
 keepInViewExample.storyName = "Keep In View Example";
 defaultPopover.__docgenInfo = {
   "description": "",