orcs-design-system 3.2.4 → 3.2.6

package/es/components/ButtonGroup/ButtonGroup.stories.js

@@ -1,56 +1,57 @@
 import React from "react";
 import Box from "../Box";
 import { ButtonGroupContainer, ButtonGroupItem } from ".";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/ButtonGroup",
   component: ButtonGroupContainer
 };
-export var defaultButtonGroup = function defaultButtonGroup() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "white",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(ButtonGroupContainer, {
+export const defaultButtonGroup = () => /*#__PURE__*/_jsx(Box, {
+  bg: "white",
+  p: "r",
+  children: /*#__PURE__*/_jsxs(ButtonGroupContainer, {
     controlLabel: "View:",
-    labelDark: true
-  }, /*#__PURE__*/React.createElement(ButtonGroupItem, {
-    name: "viewMode",
-    label: "Chapters",
-    value: "Chapters view"
-  }), /*#__PURE__*/React.createElement(ButtonGroupItem, {
-    name: "viewMode",
-    label: "Groups",
-    value: "Groups view",
-    checked: true
-  }), /*#__PURE__*/React.createElement(ButtonGroupItem, {
-    name: "viewMode",
-    label: "Constraints",
-    value: "Constraints view"
-  })));
-};
+    labelDark: true,
+    children: [/*#__PURE__*/_jsx(ButtonGroupItem, {
+      name: "viewMode",
+      label: "Chapters",
+      value: "Chapters view"
+    }), /*#__PURE__*/_jsx(ButtonGroupItem, {
+      name: "viewMode",
+      label: "Groups",
+      value: "Groups view",
+      checked: true
+    }), /*#__PURE__*/_jsx(ButtonGroupItem, {
+      name: "viewMode",
+      label: "Constraints",
+      value: "Constraints view"
+    })]
+  })
+});
 defaultButtonGroup.story = {
   name: "Default button group"
 };
-export var invertedButtonGroup = function invertedButtonGroup() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyDark",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(ButtonGroupContainer, {
-    controlLabel: "View:"
-  }, /*#__PURE__*/React.createElement(ButtonGroupItem, {
-    name: "viewMode",
-    label: "Chapters",
-    value: "Chapters view"
-  }), /*#__PURE__*/React.createElement(ButtonGroupItem, {
-    name: "viewMode",
-    label: "Groups",
-    value: "Groups view",
-    checked: true
-  }), /*#__PURE__*/React.createElement(ButtonGroupItem, {
-    name: "viewMode",
-    label: "Constraints",
-    value: "Constraints view"
-  })));
-};
+export const invertedButtonGroup = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyDark",
+  p: "r",
+  children: /*#__PURE__*/_jsxs(ButtonGroupContainer, {
+    controlLabel: "View:",
+    children: [/*#__PURE__*/_jsx(ButtonGroupItem, {
+      name: "viewMode",
+      label: "Chapters",
+      value: "Chapters view"
+    }), /*#__PURE__*/_jsx(ButtonGroupItem, {
+      name: "viewMode",
+      label: "Groups",
+      value: "Groups view",
+      checked: true
+    }), /*#__PURE__*/_jsx(ButtonGroupItem, {
+      name: "viewMode",
+      label: "Constraints",
+      value: "Constraints view"
+    })]
+  })
+});
 invertedButtonGroup.story = {
   name: "Inverted button group"
 };

package/es/components/ButtonGroup/ButtonGroupItem.stories.js

@@ -1,23 +1,21 @@
 import React from "react";
 import Box from "../Box";
 import { ButtonGroupItem } from ".";
+import { jsx as _jsx } from "react/jsx-runtime";
 export default {
   title: "Components/ButtonGroupItem",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      bg: "greyDark",
-      p: "r"
-    }, storyFn());
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    bg: "greyDark",
+    p: "r",
+    children: storyFn()
+  })],
   component: ButtonGroupItem
 };
-export var defaultButtonGroupItem = function defaultButtonGroupItem() {
-  return /*#__PURE__*/React.createElement(ButtonGroupItem, {
-    name: "viewMode",
-    label: "Chapters",
-    value: "Chapters view"
-  });
-};
+export const defaultButtonGroupItem = () => /*#__PURE__*/_jsx(ButtonGroupItem, {
+  name: "viewMode",
+  label: "Chapters",
+  value: "Chapters view"
+});
 defaultButtonGroupItem.story = {
   name: "Default button group item"
 };

package/es/components/ButtonGroup/index.js

@@ -1,123 +1,127 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "theme", "controlLabel", "labelDark"];
 import PropTypes from "prop-types";
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
 import Flex from "../Flex/";
 import { css } from "@styled-system/css";
-var ButtonGroupControlLabel = styled("div").withConfig({
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ButtonGroupControlLabel = styled("div").withConfig({
   displayName: "ButtonGroup__ButtonGroupControlLabel",
   componentId: "sc-g7627n-0"
-})(function (props) {
-  return css({
-    color: props.labelDark ? themeGet("colors.greyDark") : themeGet("colors.white")(props),
-    fontSize: themeGet("fontSizes.1")(props),
-    fontWeight: themeGet("fontWeights.1")(props),
-    marginRight: themeGet("space.3")(props)
-  });
-});
-var ButtonGroupWrapper = styled("div").withConfig({
+})(props => css({
+  color: props.labelDark ? themeGet("colors.greyDark") : themeGet("colors.white")(props),
+  fontSize: themeGet("fontSizes.1")(props),
+  fontWeight: themeGet("fontWeights.1")(props),
+  marginRight: themeGet("space.3")(props)
+}));
+const ButtonGroupWrapper = styled("div").withConfig({
   displayName: "ButtonGroup__ButtonGroupWrapper",
   componentId: "sc-g7627n-1"
-})(function (props) {
-  return css({
-    display: "flex",
-    alignItems: "center",
-    background: themeGet("colors.greyDarker")(props),
-    borderRadius: themeGet("radii.2")(props),
-    padding: "4px",
-    height: themeGet("appScale.inputHeightDefault")(props)
-  });
-});
-var ButtonGroupRadio = styled.input.attrs({
+})(props => css({
+  display: "flex",
+  alignItems: "center",
+  background: themeGet("colors.greyDarker")(props),
+  borderRadius: themeGet("radii.2")(props),
+  padding: "4px",
+  height: themeGet("appScale.inputHeightDefault")(props)
+}));
+const ButtonGroupRadio = styled.input.attrs({
   type: "radio"
 }).withConfig({
   displayName: "ButtonGroup__ButtonGroupRadio",
   componentId: "sc-g7627n-2"
-})(function (props) {
-  return css({
-    opacity: "0",
-    position: "absolute",
-    margin: "0",
-    zIndex: "-1",
-    width: "0",
-    height: "0",
-    overflow: "hidden",
-    pointerEvents: "none",
-    "&:checked + label": {
-      cursor: "default",
-      color: themeGet("colors.greyDarker")(props),
-      backgroundColor: themeGet("colors.white")(props),
-      "&:hover": {
-        backgroundColor: themeGet("colors.white")(props)
-      }
+})(props => css({
+  opacity: "0",
+  position: "absolute",
+  margin: "0",
+  zIndex: "-1",
+  width: "0",
+  height: "0",
+  overflow: "hidden",
+  pointerEvents: "none",
+  "&:checked + label": {
+    cursor: "default",
+    color: themeGet("colors.greyDarker")(props),
+    backgroundColor: themeGet("colors.white")(props),
+    "&:hover": {
+      backgroundColor: themeGet("colors.white")(props)
     }
-  });
-});
-var ButtonGroupLabel = styled("label").withConfig({
+  }
+}));
+const ButtonGroupLabel = styled("label").withConfig({
   displayName: "ButtonGroup__ButtonGroupLabel",
   componentId: "sc-g7627n-3"
-})(function (props) {
-  return css({
-    height: "100%",
-    borderRadius: themeGet("radii.2")(props),
-    display: "flex",
-    alignItems: "center",
-    padding: "0 ".concat(themeGet("space.3")(props)),
-    transition: themeGet("transition.transitionDefault")(props),
-    fontSize: themeGet("fontSizes.1")(props),
-    fontWeight: themeGet("fontWeights.2")(props),
-    cursor: props.checked ? "default" : "pointer",
-    color: props.checked ? themeGet("colors.greyDarker")(props) : themeGet("colors.white")(props),
-    backgroundColor: props.checked ? themeGet("colors.white")(props) : "#5e686d",
-    "&:hover": {
-      backgroundColor: props.checked ? themeGet("colors.white")(props) : themeGet("colors.primary")(props)
-    },
-    "&:not(:last-of-type)": {
-      marginRight: "4px"
-    }
-  });
-});
+})(props => css({
+  height: "100%",
+  borderRadius: themeGet("radii.2")(props),
+  display: "flex",
+  alignItems: "center",
+  padding: "0 ".concat(themeGet("space.3")(props)),
+  transition: themeGet("transition.transitionDefault")(props),
+  fontSize: themeGet("fontSizes.1")(props),
+  fontWeight: themeGet("fontWeights.2")(props),
+  cursor: props.checked ? "default" : "pointer",
+  color: props.checked ? themeGet("colors.greyDarker")(props) : themeGet("colors.white")(props),
+  backgroundColor: props.checked ? themeGet("colors.white")(props) : "#5e686d",
+  "&:hover": {
+    backgroundColor: props.checked ? themeGet("colors.white")(props) : themeGet("colors.primary")(props)
+  },
+  "&:not(:last-of-type)": {
+    marginRight: "4px"
+  }
+}));
 
 /** To do: look at renaming this to ButtonGroup, add a container component that can accept space and layout props */
 
-export var ButtonGroupContainer = function ButtonGroupContainer(_ref) {
-  var children = _ref.children,
-    theme = _ref.theme,
-    controlLabel = _ref.controlLabel,
-    labelDark = _ref.labelDark,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(Flex, _extends({
-    alignItems: "center"
-  }, props), controlLabel && /*#__PURE__*/React.createElement(ButtonGroupControlLabel, {
-    labelDark: labelDark
-  }, controlLabel), /*#__PURE__*/React.createElement(ButtonGroupWrapper, null, children));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+export const ButtonGroupContainer = _ref => {
+  let {
+    children,
+    theme,
+    controlLabel,
+    labelDark,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsxs(Flex, {
+    alignItems: "center",
+    ...props,
+    children: [controlLabel && /*#__PURE__*/_jsx(ButtonGroupControlLabel, {
+      labelDark: labelDark,
+      children: controlLabel
+    }), /*#__PURE__*/_jsx(ButtonGroupWrapper, {
+      children: children
+    })]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 };
-export var ButtonGroupItem = function ButtonGroupItem(_ref2) {
-  var label = _ref2.label,
-    name = _ref2.name,
-    value = _ref2.value,
-    checked = _ref2.checked,
-    onChange = _ref2.onChange,
-    theme = _ref2.theme;
-  var component = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonGroupRadio, {
-    id: label,
-    name: name,
-    value: value,
-    checked: checked,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(ButtonGroupLabel, {
-    checked: checked,
-    htmlFor: label
-  }, label));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+export const ButtonGroupItem = _ref2 => {
+  let {
+    label,
+    name,
+    value,
+    checked,
+    onChange,
+    theme
+  } = _ref2;
+  const component = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ButtonGroupRadio, {
+      id: label,
+      name: name,
+      value: value,
+      checked: checked,
+      onChange: onChange
+    }), /*#__PURE__*/_jsx(ButtonGroupLabel, {
+      checked: checked,
+      htmlFor: label,
+      children: label
+    })]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 };
 ButtonGroupContainer.propTypes = {
   children: PropTypes.node,

package/es/components/Card/Card.stories.js

@@ -7,105 +7,137 @@ import Icon from "../Icon";
 import Flex from "../Flex";
 import Button from "../Button";
 import Card from ".";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Card",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      bg: "greyLightest",
-      p: "r"
-    }, storyFn());
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    bg: "greyLightest",
+    p: "r",
+    children: storyFn()
+  })],
   component: Card
 };
-export var basicCard = function basicCard() {
-  return /*#__PURE__*/React.createElement(Card, {
-    title: "Card title",
-    subtitle: "Subtitle"
-  }, /*#__PURE__*/React.createElement(P, {
-    marginBottom: 4
-  }, "Card content lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."), /*#__PURE__*/React.createElement(StyledLink, {
+export const basicCard = () => /*#__PURE__*/_jsxs(Card, {
+  title: "Card title",
+  subtitle: "Subtitle",
+  children: [/*#__PURE__*/_jsx(P, {
+    marginBottom: 4,
+    children: "Card content lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+  }), /*#__PURE__*/_jsx(StyledLink, {
     "aria-label": "Card title - Learn More",
     href: "#",
-    bold: true
-  }, "Learn more"));
-};
+    bold: true,
+    children: "Learn more"
+  })]
+});
 basicCard.story = {
   name: "Basic card"
 };
-export var alternateCard = function alternateCard() {
-  return /*#__PURE__*/React.createElement(Card, {
-    alternate: true,
-    icon: ["fas", "building"],
-    title: "Works for",
-    subtitle: "18"
-  }, /*#__PURE__*/React.createElement(P, null, "This is an alternate style card that supports an icon and moves the subtitle to the right of the title, rather than underneath it."));
-};
+export const alternateCard = () => /*#__PURE__*/_jsx(Card, {
+  alternate: true,
+  icon: ["fas", "building"],
+  title: "Works for",
+  subtitle: "18",
+  children: /*#__PURE__*/_jsx(P, {
+    children: "This is an alternate style card that supports an icon and moves the subtitle to the right of the title, rather than underneath it."
+  })
+});
 alternateCard.story = {
   name: "Alternate card"
 };
-export var colouredCards = function colouredCards() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: 4
-  }, /*#__PURE__*/React.createElement(Card, {
+export const colouredCards = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: 4,
+  children: [/*#__PURE__*/_jsx(Card, {
     alternate: true,
     icon: ["fas", "map-marker-alt"],
     title: "Locations",
     subtitle: "57",
-    colour: "primary"
-  }, /*#__PURE__*/React.createElement(P, null, "This is an alternate style card that supports a coloured border, an icon and moves the subtitle to the right of the title, rather than underneath it.")), /*#__PURE__*/React.createElement(Card, {
+    colour: "primary",
+    children: /*#__PURE__*/_jsx(P, {
+      children: "This is an alternate style card that supports a coloured border, an icon and moves the subtitle to the right of the title, rather than underneath it."
+    })
+  }), /*#__PURE__*/_jsx(Card, {
     alternate: true,
     icon: ["fas", "address-card"],
     title: "Roles",
     subtitle: "Here is a subtitle",
-    colour: "success"
-  }, /*#__PURE__*/React.createElement(P, null, "This is an alternate style card that supports a coloured border, an icon and moves the subtitle to the right of the title, rather than underneath it.")), /*#__PURE__*/React.createElement(Card, {
+    colour: "success",
+    children: /*#__PURE__*/_jsx(P, {
+      children: "This is an alternate style card that supports a coloured border, an icon and moves the subtitle to the right of the title, rather than underneath it."
+    })
+  }), /*#__PURE__*/_jsx(Card, {
     alternate: true,
     icon: ["fas", "user"],
     title: "4,539 People",
     changeValue: "No change",
-    colour: "warning"
-  }, /*#__PURE__*/React.createElement(P, null, "This is an alternate style card that supports a coloured border, an icon and shows a delta change.")), /*#__PURE__*/React.createElement(Card, {
+    colour: "warning",
+    children: /*#__PURE__*/_jsx(P, {
+      children: "This is an alternate style card that supports a coloured border, an icon and shows a delta change."
+    })
+  }), /*#__PURE__*/_jsx(Card, {
     alternate: true,
     icon: ["fas", "chart-pie"],
     title: "12 Divisions",
     changeValue: "2 (-1%)",
     changeIcon: "arrowDown",
-    colour: "danger"
-  }, /*#__PURE__*/React.createElement(P, null, "This is an alternate style card that supports a coloured border, an icon and shows a delta change.")), /*#__PURE__*/React.createElement(Card, {
+    colour: "danger",
+    children: /*#__PURE__*/_jsx(P, {
+      children: "This is an alternate style card that supports a coloured border, an icon and shows a delta change."
+    })
+  }), /*#__PURE__*/_jsx(Card, {
     alternate: true,
     icon: ["fas", "users"],
     title: "289 Teams",
     changeValue: "9 (+2%)",
     changeIcon: "arrowUp",
-    colour: "greyDark"
-  }, /*#__PURE__*/React.createElement(P, null, "This is an alternate style card that supports a coloured border, an icon and shows a delta change.")));
-};
+    colour: "greyDark",
+    children: /*#__PURE__*/_jsx(P, {
+      children: "This is an alternate style card that supports a coloured border, an icon and shows a delta change."
+    })
+  })]
+});
 colouredCards.story = {
   name: "Coloured cards"
 };
-export var complexCard = function complexCard() {
-  return /*#__PURE__*/React.createElement(Flex, {
-    justifyContent: "center"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    mx: "r"
-  }, /*#__PURE__*/React.createElement(Card, {
-    center: true
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    my: "s"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "file"],
-    size: "3x",
-    color: "greyLight"
-  }), /*#__PURE__*/React.createElement(H3, null, "Create new"), /*#__PURE__*/React.createElement(P, null, "Start with a blank slate and add your own data"), /*#__PURE__*/React.createElement(Button, null, "Start fresh"))), /*#__PURE__*/React.createElement(Card, {
-    center: true
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    my: "s"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "eye"],
-    size: "3x",
-    color: "greyLight"
-  }), /*#__PURE__*/React.createElement(H3, null, "Explore app"), /*#__PURE__*/React.createElement(P, null, "Look at pre-populated data to see app in action"), /*#__PURE__*/React.createElement(Button, null, "View example")))));
-};
+export const complexCard = () => /*#__PURE__*/_jsx(Flex, {
+  justifyContent: "center",
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    mx: "r",
+    children: [/*#__PURE__*/_jsx(Card, {
+      center: true,
+      children: /*#__PURE__*/_jsxs(Spacer, {
+        my: "s",
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "file"],
+          size: "3x",
+          color: "greyLight"
+        }), /*#__PURE__*/_jsx(H3, {
+          children: "Create new"
+        }), /*#__PURE__*/_jsx(P, {
+          children: "Start with a blank slate and add your own data"
+        }), /*#__PURE__*/_jsx(Button, {
+          children: "Start fresh"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Card, {
+      center: true,
+      children: /*#__PURE__*/_jsxs(Spacer, {
+        my: "s",
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "eye"],
+          size: "3x",
+          color: "greyLight"
+        }), /*#__PURE__*/_jsx(H3, {
+          children: "Explore app"
+        }), /*#__PURE__*/_jsx(P, {
+          children: "Look at pre-populated data to see app in action"
+        }), /*#__PURE__*/_jsx(Button, {
+          children: "View example"
+        })]
+      })
+    })]
+  })
+});
 complexCard.story = {
   name: "Complex card"
 };