orcs-design-system 3.2.4 → 3.2.6

package/es/components/StatusDot/StatusDot.stories.js

@@ -5,104 +5,117 @@ import Flex from "../Flex";
 import Spacer from "../Spacer";
 import Icon from "../Icon";
 import Popover from "../Popover";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/StatusDot",
   component: StatusDot
 };
-export var defaultStatusDot = function defaultStatusDot() {
-  return /*#__PURE__*/React.createElement(Box, {
-    p: "l"
-  }, /*#__PURE__*/React.createElement(Flex, {
+export const defaultStatusDot = () => /*#__PURE__*/_jsx(Box, {
+  p: "l",
+  children: /*#__PURE__*/_jsx(Flex, {
     justifyContent: "center",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Popover, {
-    direction: "top",
-    text: "New approvals received",
-    textAlign: "center",
-    width: "170px"
-  }, /*#__PURE__*/React.createElement(StatusDot, null))));
-};
+    alignItems: "center",
+    children: /*#__PURE__*/_jsx(Popover, {
+      direction: "top",
+      text: "New approvals received",
+      textAlign: "center",
+      width: "170px",
+      children: /*#__PURE__*/_jsx(StatusDot, {})
+    })
+  })
+});
 defaultStatusDot.storyName = "Default";
-export var colour = function colour() {
-  return /*#__PURE__*/React.createElement(Box, {
-    p: "l"
-  }, /*#__PURE__*/React.createElement(Flex, {
+export const colour = () => /*#__PURE__*/_jsx(Box, {
+  p: "l",
+  children: /*#__PURE__*/_jsx(Flex, {
     justifyContent: "center",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    m: "xxs"
-  }, /*#__PURE__*/React.createElement(Popover, {
-    direction: "top",
-    text: "Team has a dedicated Product Owner. STATUS: Met",
-    textAlign: "left",
-    width: "250px"
-  }, /*#__PURE__*/React.createElement(StatusDot, {
-    variant: "success"
-  })), /*#__PURE__*/React.createElement(Popover, {
-    direction: "top",
-    text: "Team members are in less than 3 locations. STATUS: Not enough data",
-    textAlign: "left",
-    width: "250px"
-  }, /*#__PURE__*/React.createElement(StatusDot, {
-    variant: "warning"
-  })), /*#__PURE__*/React.createElement(Popover, {
-    direction: "top",
-    text: "Team has a dedicated Engineering Lead. STATUS: Not met",
-    textAlign: "left",
-    width: "250px"
-  }, /*#__PURE__*/React.createElement(StatusDot, {
-    variant: "danger"
-  })))));
-};
-export var withIcon = function withIcon() {
-  return /*#__PURE__*/React.createElement(Box, {
-    p: "l"
-  }, /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    children: /*#__PURE__*/_jsxs(Spacer, {
+      m: "xxs",
+      children: [/*#__PURE__*/_jsx(Popover, {
+        direction: "top",
+        text: "Team has a dedicated Product Owner. STATUS: Met",
+        textAlign: "left",
+        width: "250px",
+        children: /*#__PURE__*/_jsx(StatusDot, {
+          variant: "success"
+        })
+      }), /*#__PURE__*/_jsx(Popover, {
+        direction: "top",
+        text: "Team members are in less than 3 locations. STATUS: Not enough data",
+        textAlign: "left",
+        width: "250px",
+        children: /*#__PURE__*/_jsx(StatusDot, {
+          variant: "warning"
+        })
+      }), /*#__PURE__*/_jsx(Popover, {
+        direction: "top",
+        text: "Team has a dedicated Engineering Lead. STATUS: Not met",
+        textAlign: "left",
+        width: "250px",
+        children: /*#__PURE__*/_jsx(StatusDot, {
+          variant: "danger"
+        })
+      })]
+    })
+  })
+});
+export const withIcon = () => /*#__PURE__*/_jsx(Box, {
+  p: "l",
+  children: /*#__PURE__*/_jsx(Flex, {
     justifyContent: "center",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    m: "xxs"
-  }, /*#__PURE__*/React.createElement(Popover, {
-    direction: "top",
-    text: "Target met",
-    textAlign: "center",
-    width: "110px"
-  }, /*#__PURE__*/React.createElement(StatusDot, {
-    variant: "success",
-    icon: true
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "check"],
-    color: "white",
-    size: "xs",
-    transform: "up-2"
-  }))), /*#__PURE__*/React.createElement(Popover, {
-    direction: "top",
-    text: "Under allocated",
-    textAlign: "center",
-    width: "110px"
-  }, /*#__PURE__*/React.createElement(StatusDot, {
-    variant: "warning",
-    icon: true
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "exclamation"],
-    color: "white",
-    size: "xs",
-    transform: "up-2"
-  }))), /*#__PURE__*/React.createElement(Popover, {
-    direction: "top",
-    text: "Over allocated",
-    textAlign: "center",
-    width: "110px"
-  }, /*#__PURE__*/React.createElement(StatusDot, {
-    variant: "danger",
-    icon: true
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "bell"],
-    color: "white",
-    size: "xs",
-    transform: "up-2"
-  }))))));
-};
+    alignItems: "center",
+    children: /*#__PURE__*/_jsxs(Spacer, {
+      m: "xxs",
+      children: [/*#__PURE__*/_jsx(Popover, {
+        direction: "top",
+        text: "Target met",
+        textAlign: "center",
+        width: "110px",
+        children: /*#__PURE__*/_jsx(StatusDot, {
+          variant: "success",
+          icon: true,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "check"],
+            color: "white",
+            size: "xs",
+            transform: "up-2"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Popover, {
+        direction: "top",
+        text: "Under allocated",
+        textAlign: "center",
+        width: "110px",
+        children: /*#__PURE__*/_jsx(StatusDot, {
+          variant: "warning",
+          icon: true,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "exclamation"],
+            color: "white",
+            size: "xs",
+            transform: "up-2"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Popover, {
+        direction: "top",
+        text: "Over allocated",
+        textAlign: "center",
+        width: "110px",
+        children: /*#__PURE__*/_jsx(StatusDot, {
+          variant: "danger",
+          icon: true,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "bell"],
+            color: "white",
+            size: "xs",
+            transform: "up-2"
+          })
+        })
+      })]
+    })
+  })
+});
 defaultStatusDot.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/StatusDot/index.js

@@ -1,51 +1,49 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["icon", "children"];
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { space, layout, color, compose, variant } from "styled-system";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
-var StatusDotStyles = compose(space, layout, color);
-var StatusDotItem = styled("div").withConfig({
+import { jsx as _jsx } from "react/jsx-runtime";
+const StatusDotStyles = compose(space, layout, color);
+const StatusDotItem = styled("div").withConfig({
   displayName: "StatusDot__StatusDotItem",
   componentId: "sc-1esxq7c-0"
-})(function (props) {
-  return css({
-    width: props.icon ? "18px" : "10px",
-    height: props.icon ? "18px" : "10px",
-    borderRadius: "50%",
-    bg: themeGet("colors.secondary")(props),
-    fontSize: themeGet("fontSizes.0")(props),
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    lineHeight: "0"
-  });
-}, function (props) {
-  return variant({
-    variants: {
-      "default": {},
-      success: {
-        bg: themeGet("colors.success")(props)
-      },
-      warning: {
-        bg: themeGet("colors.warning")(props)
-      },
-      danger: {
-        bg: themeGet("colors.danger")(props)
-      }
+})(props => css({
+  width: props.icon ? "18px" : "10px",
+  height: props.icon ? "18px" : "10px",
+  borderRadius: "50%",
+  bg: themeGet("colors.secondary")(props),
+  fontSize: themeGet("fontSizes.0")(props),
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  lineHeight: "0"
+}), props => variant({
+  variants: {
+    default: {},
+    success: {
+      bg: themeGet("colors.success")(props)
+    },
+    warning: {
+      bg: themeGet("colors.warning")(props)
+    },
+    danger: {
+      bg: themeGet("colors.danger")(props)
     }
-  });
-}, StatusDotStyles);
+  }
+}), StatusDotStyles);
 export default function StatusDot(_ref) {
-  var icon = _ref.icon,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(StatusDotItem, _extends({}, props, {
-    icon: icon
-  }), children);
+  let {
+    icon,
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StatusDotItem, {
+    ...props,
+    icon: icon,
+    children: children
+  });
 }
 StatusDot.propTypes = {
   /** Specifies StatusDot colour. Colours are taken from the standard design system colours. */

package/es/components/StyledLink/StyledLink.stories.js

@@ -4,59 +4,60 @@ import Box from "../Box";
 import Flex from "../Flex";
 import Spacer from "../Spacer";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/StyledLink",
   component: StyledLink,
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      p: "r"
-    }, storyFn());
-  }]
-};
-export var defaultStyledLink = function defaultStyledLink() {
-  return /*#__PURE__*/React.createElement(StyledLink, {
-    href: "#"
-  }, "Styled Link");
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    p: "r",
+    children: storyFn()
+  })]
 };
+export const defaultStyledLink = () => /*#__PURE__*/_jsx(StyledLink, {
+  href: "#",
+  children: "Styled Link"
+});
 defaultStyledLink.storyName = "Default";
-export var targetStyledLink = function targetStyledLink() {
-  return /*#__PURE__*/React.createElement(StyledLink, {
-    href: "#",
-    target: "_blank"
-  }, "Targeted Link");
-};
+export const targetStyledLink = () => /*#__PURE__*/_jsx(StyledLink, {
+  href: "#",
+  target: "_blank",
+  children: "Targeted Link"
+});
 targetStyledLink.storyName = "Targeted";
-export var boldStyledLink = function boldStyledLink() {
-  return /*#__PURE__*/React.createElement(StyledLink, {
-    href: "#",
-    bold: true
-  }, "Bold Link");
-};
+export const boldStyledLink = () => /*#__PURE__*/_jsx(StyledLink, {
+  href: "#",
+  bold: true,
+  children: "Bold Link"
+});
 boldStyledLink.storyName = "Bold";
-export var invertedStyledLink = function invertedStyledLink() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyDarkest",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    justifyContent: "center"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    mx: "r"
-  }, /*#__PURE__*/React.createElement(StyledLink, {
-    href: "#",
-    white: true
-  }, "White navigation link on dark background"), /*#__PURE__*/React.createElement(StyledLink, {
-    href: "#",
-    white: true,
-    active: true,
-    bold: true
-  }, "Active/selected bold navigation link"), /*#__PURE__*/React.createElement(StyledLink, {
-    href: "#",
-    white: true,
-    bold: true
-  }, "Bold inverted link"))));
-};
+export const invertedStyledLink = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyDarkest",
+  p: "r",
+  children: /*#__PURE__*/_jsx(Flex, {
+    justifyContent: "center",
+    children: /*#__PURE__*/_jsxs(Spacer, {
+      mx: "r",
+      children: [/*#__PURE__*/_jsx(StyledLink, {
+        href: "#",
+        white: true,
+        children: "White navigation link on dark background"
+      }), /*#__PURE__*/_jsx(StyledLink, {
+        href: "#",
+        white: true,
+        active: true,
+        bold: true,
+        children: "Active/selected bold navigation link"
+      }), /*#__PURE__*/_jsx(StyledLink, {
+        href: "#",
+        white: true,
+        bold: true,
+        children: "Bold inverted link"
+      })]
+    })
+  })
+});
 invertedStyledLink.storyName = "Inverted";
-var routes = [{
+const routes = [{
   path: "/",
   label: "React link to home",
   exact: true
@@ -67,32 +68,30 @@ var routes = [{
   path: "/cats",
   label: "React link to cats"
 }];
-export var reactLink = function reactLink() {
-  return /*#__PURE__*/React.createElement(BrowserRouter, null, routes.map(function (route) {
-    return /*#__PURE__*/React.createElement(StyledLink, {
-      key: route.path,
-      to: route.path
-    }, route.label);
-  }), /*#__PURE__*/React.createElement(Switch, null, routes.map(function (route) {
-    return /*#__PURE__*/React.createElement(Route, {
-      key: route.path,
+export const reactLink = () => /*#__PURE__*/_jsxs(BrowserRouter, {
+  children: [routes.map(route => /*#__PURE__*/_jsx(StyledLink, {
+    to: route.path,
+    children: route.label
+  }, route.path)), /*#__PURE__*/_jsx(Switch, {
+    children: routes.map(route => /*#__PURE__*/_jsx(Route, {
       path: route.path,
-      exact: route.exact
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: "100px"
-      }
-    }, "ROUTE RENDERED: ", route.label));
-  })));
-};
+      exact: route.exact,
+      children: /*#__PURE__*/_jsxs("div", {
+        style: {
+          padding: "100px"
+        },
+        children: ["ROUTE RENDERED: ", route.label]
+      })
+    }, route.path))
+  })]
+});
 reactLink.storyName = "Using react-router-dom";
-export var buttonLink = function buttonLink() {
-  return /*#__PURE__*/React.createElement(StyledLink, {
-    href: "https://teamform.co",
-    target: "_blank",
-    button: true
-  }, "Click me");
-};
+export const buttonLink = () => /*#__PURE__*/_jsx(StyledLink, {
+  href: "https://teamform.co",
+  target: "_blank",
+  button: true,
+  children: "Click me"
+});
 buttonLink.storyName = "Button";
 defaultStyledLink.__docgenInfo = {
   "description": "",

package/es/components/StyledLink/index.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "to", "button"];
 import React from "react";
 import PropTypes from "prop-types";
 import shouldForwardProp from "@styled-system/should-forward-prop";
@@ -10,44 +7,39 @@ import { space, layout, typography } from "styled-system";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
 import { ButtonLink } from "../Button";
-var styleLink = function styleLink(LinkComponent) {
-  return styled(LinkComponent).withConfig({
-    shouldForwardProp: shouldForwardProp,
-    displayName: "StyledLink",
-    componentId: "sc-1beg6q3-0"
-  }).attrs(function (props) {
-    return {
-      className: "StyledLink",
-      to: props.to,
-      target: props.target,
-      "data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
-    };
-  })(function (props) {
-    return css({
-      display: props.block ? "block" : "inline-block",
-      fontSize: props.small ? themeGet("fontSizes.1")(props) : props.large && props.iconOnly ? themeGet("fontSizes.5")(props) : props.large ? themeGet("fontSizes.3")(props) : themeGet("fontSizes.2")(props),
-      fontWeight: props.bold ? themeGet("fontWeights.2")(props) : "inherit",
-      color: props.active ? themeGet("colors.primaryLight")(props) : props.white ? themeGet("colors.white")(props) : themeGet("colors.primary")(props),
-      position: "relative",
-      textDecoration: "none",
-      cursor: "pointer",
-      transition: themeGet("transition.transitionDefault")(props),
-      "&:hover": {
-        outline: "0",
-        textDecoration: "underline"
-      },
-      "&:focus": {
-        outline: "0",
-        textDecoration: "underline"
-      }
-    });
-  }, space, layout, typography);
-};
-var Hyperlink = styleLink(styled.a.withConfig({
+import { jsx as _jsx } from "react/jsx-runtime";
+const styleLink = LinkComponent => styled(LinkComponent).withConfig({
+  shouldForwardProp,
+  displayName: "StyledLink__styleLink",
+  componentId: "sc-1beg6q3-0"
+}).attrs(props => ({
+  className: "StyledLink",
+  to: props.to,
+  target: props.target,
+  "data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
+}))(props => css({
+  display: props.block ? "block" : "inline-block",
+  fontSize: props.small ? themeGet("fontSizes.1")(props) : props.large && props.iconOnly ? themeGet("fontSizes.5")(props) : props.large ? themeGet("fontSizes.3")(props) : themeGet("fontSizes.2")(props),
+  fontWeight: props.bold ? themeGet("fontWeights.2")(props) : "inherit",
+  color: props.active ? themeGet("colors.primaryLight")(props) : props.white ? themeGet("colors.white")(props) : themeGet("colors.primary")(props),
+  position: "relative",
+  textDecoration: "none",
+  cursor: "pointer",
+  transition: themeGet("transition.transitionDefault")(props),
+  "&:hover": {
+    outline: "0",
+    textDecoration: "underline"
+  },
+  "&:focus": {
+    outline: "0",
+    textDecoration: "underline"
+  }
+}), space, layout, typography);
+const Hyperlink = styleLink(styled.a.withConfig({
   displayName: "StyledLink__Hyperlink",
   componentId: "sc-1beg6q3-1"
 })([""]));
-var ReactLink = styleLink(Link);
+const ReactLink = styleLink(Link);
 
 /**
  * This `StyledLink` component supports both standard html hyperlinks and react Link components (if using react router for example).
@@ -71,18 +63,25 @@ var ReactLink = styleLink(Link);
  *        Dashboard
  *      </HeaderLink>
  */
-var StyledLink = function StyledLink(_ref) {
-  var children = _ref.children,
-    to = _ref.to,
-    button = _ref.button,
-    props = _objectWithoutProperties(_ref, _excluded);
+const StyledLink = _ref => {
+  let {
+    children,
+    to,
+    button,
+    ...props
+  } = _ref;
   if (button) {
-    return /*#__PURE__*/React.createElement(ButtonLink, props, children);
+    return /*#__PURE__*/_jsx(ButtonLink, {
+      ...props,
+      children: children
+    });
   }
-  var LinkComponent = to ? ReactLink : Hyperlink;
-  return /*#__PURE__*/React.createElement(LinkComponent, _extends({}, props, {
-    to: to
-  }), children);
+  const LinkComponent = to ? ReactLink : Hyperlink;
+  return /*#__PURE__*/_jsx(LinkComponent, {
+    ...props,
+    to: to,
+    children: children
+  });
 };
 StyledLink.propTypes = {
   /** The content wrapped by the link component */