orcs-design-system 3.2.4 → 3.2.6

package/es/components/Badge/Badge.stories.js

@@ -3,58 +3,83 @@ import Box from "../Box";
 import Spacer from "../Spacer";
 import Flex from "../Flex";
 import Badge from ".";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default {
   title: "Components/Badge",
   component: Badge
 };
-export var defaultBadge = function defaultBadge() {
-  return /*#__PURE__*/React.createElement(Badge, null, "Default");
-};
+export const defaultBadge = () => /*#__PURE__*/_jsx(Badge, {
+  children: "Default"
+});
 defaultBadge.storyName = "Default";
-export var colourVariants = function colourVariants() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    flexWrap: "wrap"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    m: "1"
-  }, /*#__PURE__*/React.createElement(Badge, null, "Default"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "success"
-  }, "Success"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "warning"
-  }, "Warning"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "danger"
-  }, "Danger"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "primaryLight"
-  }, "Low priority"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "primary"
-  }, "Medium priority"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "primaryDark"
-  }, "High priority"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "secondary"
-  }, "Secondary")))), /*#__PURE__*/React.createElement(Box, {
+export const colourVariants = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Box, {
     p: "r",
-    bg: "greyDarkest"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    flexWrap: "wrap"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    m: "1"
-  }, /*#__PURE__*/React.createElement(Badge, null, "Default"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "success"
-  }, "Success"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "warning"
-  }, "Warning"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "danger"
-  }, "Danger"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "primaryLight"
-  }, "Low priority"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "primary"
-  }, "Medium priority"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "primaryDark"
-  }, "High priority"), /*#__PURE__*/React.createElement(Badge, {
-    variant: "secondary"
-  }, "Secondary")))));
-};
+    children: /*#__PURE__*/_jsx(Flex, {
+      flexWrap: "wrap",
+      children: /*#__PURE__*/_jsxs(Spacer, {
+        m: "1",
+        children: [/*#__PURE__*/_jsx(Badge, {
+          children: "Default"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "success",
+          children: "Success"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "warning",
+          children: "Warning"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "danger",
+          children: "Danger"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "primaryLight",
+          children: "Low priority"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "primary",
+          children: "Medium priority"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "primaryDark",
+          children: "High priority"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "secondary",
+          children: "Secondary"
+        })]
+      })
+    })
+  }), /*#__PURE__*/_jsx(Box, {
+    p: "r",
+    bg: "greyDarkest",
+    children: /*#__PURE__*/_jsx(Flex, {
+      flexWrap: "wrap",
+      children: /*#__PURE__*/_jsxs(Spacer, {
+        m: "1",
+        children: [/*#__PURE__*/_jsx(Badge, {
+          children: "Default"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "success",
+          children: "Success"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "warning",
+          children: "Warning"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "danger",
+          children: "Danger"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "primaryLight",
+          children: "Low priority"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "primary",
+          children: "Medium priority"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "primaryDark",
+          children: "High priority"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "secondary",
+          children: "Secondary"
+        })]
+      })
+    })
+  })]
+});
 colourVariants.storyName = "Colour variants";
 defaultBadge.__docgenInfo = {
   "description": "",

package/es/components/Badge/index.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["noWrap", "children", "theme"];
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
@@ -8,81 +5,81 @@ import { space, layout, color, compose, variant } from "styled-system";
 import { css } from "@styled-system/css";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import { themeGet } from "@styled-system/theme-get";
-var BadgeStyles = compose(space, layout, color);
-var Item = styled("span").withConfig({
-  shouldForwardProp: shouldForwardProp,
+import { jsx as _jsx } from "react/jsx-runtime";
+const BadgeStyles = compose(space, layout, color);
+const Item = styled("span").withConfig({
+  shouldForwardProp,
   displayName: "Badge__Item",
   componentId: "sc-9r75kj-0"
-}).attrs(function (props) {
-  return {
-    "data-testid": props["data-testid"] ? props["data-testid"] : null
-  };
-})(function (props) {
-  return css({
-    fontSize: themeGet("fontSizes.0")(props),
-    lineHeight: themeGet("fontSizes.1")(props),
-    fontWeight: themeGet("fontWeights.2")(props),
-    display: "inline-block",
-    position: "relative",
-    pt: themeGet("space.2")(props),
-    pb: "calc(".concat(themeGet("space.2")(props), " + 1px)"),
-    px: themeGet("space.3")(props),
-    cursor: "default",
-    borderRadius: 1,
-    color: themeGet("colors.greyDarkest")(props),
-    bg: themeGet("colors.greyLighter")(props),
-    whiteSpace: props.noWrap ? "nowrap" : "normal"
-  });
-}, function (props) {
-  return variant({
-    variants: {
-      "default": {},
-      success: {
-        color: themeGet("colors.successDarkest")(props),
-        bg: themeGet("colors.successLightest")(props)
-      },
-      successPending: {
-        color: themeGet("colors.successDark")(props),
-        bg: themeGet("colors.successEvenLighter")(props)
-      },
-      warning: {
-        color: themeGet("colors.warningDarkest")(props),
-        bg: themeGet("colors.warningLighter")(props)
-      },
-      danger: {
-        color: themeGet("colors.dangerDarkest")(props),
-        bg: themeGet("colors.dangerLightest")(props)
-      },
-      primaryLight: {
-        color: themeGet("colors.primaryDarker")(props),
-        bg: themeGet("colors.primaryLightest")(props)
-      },
-      primary: {
-        color: themeGet("colors.primaryDarkest")(props),
-        bg: themeGet("colors.primaryLighter")(props)
-      },
-      primaryDark: {
-        color: themeGet("colors.primaryDarkest")(props),
-        bg: themeGet("colors.primaryLight")(props)
-      },
-      secondary: {
-        color: themeGet("colors.secondaryDarkest")(props),
-        bg: themeGet("colors.secondaryEvenLighter")(props)
-      }
+}).attrs(props => ({
+  "data-testid": props["data-testid"] ? props["data-testid"] : null
+}))(props => css({
+  fontSize: themeGet("fontSizes.0")(props),
+  lineHeight: themeGet("fontSizes.1")(props),
+  fontWeight: themeGet("fontWeights.2")(props),
+  display: "inline-block",
+  position: "relative",
+  pt: themeGet("space.2")(props),
+  pb: "calc(".concat(themeGet("space.2")(props), " + 1px)"),
+  px: themeGet("space.3")(props),
+  cursor: "default",
+  borderRadius: 1,
+  color: themeGet("colors.greyDarkest")(props),
+  bg: themeGet("colors.greyLighter")(props),
+  whiteSpace: props.noWrap ? "nowrap" : "normal"
+}), props => variant({
+  variants: {
+    default: {},
+    success: {
+      color: themeGet("colors.successDarkest")(props),
+      bg: themeGet("colors.successLightest")(props)
+    },
+    successPending: {
+      color: themeGet("colors.successDark")(props),
+      bg: themeGet("colors.successEvenLighter")(props)
+    },
+    warning: {
+      color: themeGet("colors.warningDarkest")(props),
+      bg: themeGet("colors.warningLighter")(props)
+    },
+    danger: {
+      color: themeGet("colors.dangerDarkest")(props),
+      bg: themeGet("colors.dangerLightest")(props)
+    },
+    primaryLight: {
+      color: themeGet("colors.primaryDarker")(props),
+      bg: themeGet("colors.primaryLightest")(props)
+    },
+    primary: {
+      color: themeGet("colors.primaryDarkest")(props),
+      bg: themeGet("colors.primaryLighter")(props)
+    },
+    primaryDark: {
+      color: themeGet("colors.primaryDarkest")(props),
+      bg: themeGet("colors.primaryLight")(props)
+    },
+    secondary: {
+      color: themeGet("colors.secondaryDarkest")(props),
+      bg: themeGet("colors.secondaryEvenLighter")(props)
     }
-  });
-}, BadgeStyles);
+  }
+}), BadgeStyles);
 export default function Badge(_ref) {
-  var noWrap = _ref.noWrap,
-    children = _ref.children,
-    theme = _ref.theme,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(Item, _extends({
-    noWrap: noWrap
-  }, props), children);
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+  let {
+    noWrap,
+    children,
+    theme,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsx(Item, {
+    noWrap: noWrap,
+    ...props,
+    children: children
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Badge.propTypes = {
   /** Specifies badge colour. Colours are taken from the standard design system colours. */

package/es/components/Box/Box.stories.js

@@ -1,58 +1,74 @@
 import React from "react";
 import Box from "../Box";
 import { P } from "../Typography";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Box",
   component: Box
 };
-export var basicBox = function basicBox() {
-  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(P, null, "This is an example of the basic Box with no properties applied to it."));
-};
+export const basicBox = () => /*#__PURE__*/_jsx(Box, {
+  children: /*#__PURE__*/_jsx(P, {
+    children: "This is an example of the basic Box with no properties applied to it."
+  })
+});
 basicBox.storyName = "Default Box";
-export var borderBox = function borderBox() {
-  return /*#__PURE__*/React.createElement(Box, {
-    boxBorder: "default",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(P, null, "This is a variant of a Box with a border."));
-};
+export const borderBox = () => /*#__PURE__*/_jsx(Box, {
+  boxBorder: "default",
+  p: "r",
+  children: /*#__PURE__*/_jsx(P, {
+    children: "This is a variant of a Box with a border."
+  })
+});
 borderBox.story = {
   name: "Border Box"
 };
-export var shadow = function shadow() {
-  return /*#__PURE__*/React.createElement(Box, {
-    shadow: "default",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(P, null, "This is a variant of a Box with a slight drop shadow."));
-};
+export const shadow = () => /*#__PURE__*/_jsx(Box, {
+  shadow: "default",
+  p: "r",
+  children: /*#__PURE__*/_jsx(P, {
+    children: "This is a variant of a Box with a slight drop shadow."
+  })
+});
 shadow.story = {
   name: "Drop shadow"
 };
-export var backgroundColour = function backgroundColour() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyLightest",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(P, null, "This is a Box that has background colour set to ", /*#__PURE__*/React.createElement("code", null, "greyLightest"), "."));
-};
+export const backgroundColour = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyLightest",
+  p: "r",
+  children: /*#__PURE__*/_jsxs(P, {
+    children: ["This is a Box that has background colour set to ", /*#__PURE__*/_jsx("code", {
+      children: "greyLightest"
+    }), "."]
+  })
+});
 backgroundColour.story = {
   name: "Background colour"
 };
-export var padding = function padding() {
-  return /*#__PURE__*/React.createElement(Box, {
-    boxBorder: "default",
-    p: 6
-  }, /*#__PURE__*/React.createElement(P, null, "This is a bordered Box variant with specified padding that overrides the default padding value."));
-};
+export const padding = () => /*#__PURE__*/_jsx(Box, {
+  boxBorder: "default",
+  p: 6,
+  children: /*#__PURE__*/_jsx(P, {
+    children: "This is a bordered Box variant with specified padding that overrides the default padding value."
+  })
+});
 padding.story = {
   name: "Padding"
 };
-export var borderRadius = function borderRadius() {
-  return /*#__PURE__*/React.createElement(Box, {
-    borderRadius: 2,
-    boxBorder: "default",
-    shadow: "default",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(P, null, "This is a bordered Box variant with rounded corners.", /*#__PURE__*/React.createElement("code", null, "borderRadius"), " is taken from the ", /*#__PURE__*/React.createElement("code", null, "radii"), " array in", /*#__PURE__*/React.createElement("code", null, "systemtheme.js"), "."));
-};
+export const borderRadius = () => /*#__PURE__*/_jsx(Box, {
+  borderRadius: 2,
+  boxBorder: "default",
+  shadow: "default",
+  p: "r",
+  children: /*#__PURE__*/_jsxs(P, {
+    children: ["This is a bordered Box variant with rounded corners.", /*#__PURE__*/_jsx("code", {
+      children: "borderRadius"
+    }), " is taken from the ", /*#__PURE__*/_jsx("code", {
+      children: "radii"
+    }), " array in", /*#__PURE__*/_jsx("code", {
+      children: "systemtheme.js"
+    }), "."]
+  })
+});
 borderRadius.story = {
   name: "Rounded corners"
 };

package/es/components/Box/index.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "theme", "dataTestId"];
 import React, { forwardRef } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import { space, layout, color, border, variant, compose } from "styled-system";
@@ -8,50 +5,52 @@ import shouldForwardProp from "@styled-system/should-forward-prop";
 import { css } from "@styled-system/css";
 import PropTypes from "prop-types";
 import { themeGet } from "@styled-system/theme-get";
-var boxStyles = compose(space, layout, color, border);
-var BoxWrapper = styled("div").withConfig({
-  shouldForwardProp: shouldForwardProp,
+import { jsx as _jsx } from "react/jsx-runtime";
+const boxStyles = compose(space, layout, color, border);
+const BoxWrapper = styled("div").withConfig({
+  shouldForwardProp,
   displayName: "Box__BoxWrapper",
   componentId: "sc-jr1api-0"
-}).attrs(function (props) {
-  return {
-    "data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
-  };
-})(css({
+}).attrs(props => ({
+  "data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
+}))(css({
   width: "auto",
   display: "block",
   overflow: "visible"
 }), variant({
   prop: "shadow",
   variants: {
-    "default": {
+    default: {
       boxShadow: "boxDefault"
     }
   }
-}), function (props) {
-  return variant({
-    prop: "boxBorder",
-    variants: {
-      "default": {
-        borderStyle: "solid",
-        borderWidth: themeGet("borderWidths.1")(props),
-        borderColor: themeGet("colors.greyLighter")(props)
-      }
+}), props => variant({
+  prop: "boxBorder",
+  variants: {
+    default: {
+      borderStyle: "solid",
+      borderWidth: themeGet("borderWidths.1")(props),
+      borderColor: themeGet("colors.greyLighter")(props)
     }
-  });
-}, boxStyles);
-export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    theme = _ref.theme,
-    dataTestId = _ref.dataTestId,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(BoxWrapper, _extends({
+  }
+}), boxStyles);
+export const Box = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    theme,
+    dataTestId,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsx(BoxWrapper, {
     ref: ref,
-    dataTestId: dataTestId
-  }, props), children);
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    dataTestId: dataTestId,
+    ...props,
+    children: children
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 });
 Box.__docgenInfo = {
   "description": "",