orcs-design-system 3.2.4 → 3.2.6

package/es/components/HeaderSimple/HeaderSimple.stories.js

@@ -1,38 +1,34 @@
 import React from "react";
 import HeaderSimple from ".";
 import TextInput from "../TextInput";
+import { jsx as _jsx } from "react/jsx-runtime";
 export default {
   title: "Components/HeaderSimple",
   component: HeaderSimple
 };
-export var defaultHeader = function defaultHeader() {
-  return /*#__PURE__*/React.createElement(HeaderSimple, {
-    appName: "App Name",
-    userName: "Michael",
-    avatarSource: "https://api.dicebear.com/7.x/personas/svg?seed=mike",
-    avatarAlt: "Avatar for Michael",
-    currentWorskapce: "Org Design Workspace"
-  });
-};
+export const defaultHeader = () => /*#__PURE__*/_jsx(HeaderSimple, {
+  appName: "App Name",
+  userName: "Michael",
+  avatarSource: "https://api.dicebear.com/7.x/personas/svg?seed=mike",
+  avatarAlt: "Avatar for Michael",
+  currentWorskapce: "Org Design Workspace"
+});
 defaultHeader.storyName = "Default Header";
-export var headerWithSearch = function headerWithSearch() {
-  return /*#__PURE__*/React.createElement(HeaderSimple, {
-    variant: "search",
-    appName: "App Name",
-    userName: "Michael",
-    avatarSource: "https://api.dicebear.com/7.x/personas/svg?seed=mike",
-    avatarAlt: "Avatar for Michael",
-    currentWorskapce: "Org Design Workspace",
-    searchComponent: /*#__PURE__*/React.createElement(TextInput, {
-      fullWidth: true,
-      id: "search",
-      key: "search",
-      type: "text",
-      placeholder: "Search for...",
-      iconRight: ["fas", "search"]
-    })
-  });
-};
+export const headerWithSearch = () => /*#__PURE__*/_jsx(HeaderSimple, {
+  variant: "search",
+  appName: "App Name",
+  userName: "Michael",
+  avatarSource: "https://api.dicebear.com/7.x/personas/svg?seed=mike",
+  avatarAlt: "Avatar for Michael",
+  currentWorskapce: "Org Design Workspace",
+  searchComponent: /*#__PURE__*/_jsx(TextInput, {
+    fullWidth: true,
+    id: "search",
+    type: "text",
+    placeholder: "Search for...",
+    iconRight: ["fas", "search"]
+  }, "search")
+});
 headerWithSearch.storyName = "Header with search";
 defaultHeader.__docgenInfo = {
   "description": "",

package/es/components/HeaderSimple/index.js

@@ -7,32 +7,27 @@ import Flex, { FlexItem } from "../Flex";
 import { Small } from "../Typography";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
-var Bar = styled("header").attrs(function (props) {
-  return {
-    "data-testid": props.dataTestId
-  };
-}).withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Bar = styled("header").attrs(props => ({
+  "data-testid": props.dataTestId
+})).withConfig({
   displayName: "HeaderSimple__Bar",
   componentId: "sc-1mo6hwx-0"
-})(function (props) {
-  return {
-    height: themeGet("appScale.navBarSize")(props)
-  };
-}, function (props) {
-  return css({
-    width: "100%",
-    zIndex: 12,
-    position: "sticky",
-    top: "0",
-    display: "flex",
-    alignItems: "center",
-    py: 0,
-    px: 4,
-    bg: themeGet("colors.black")(props)
-  });
-}, variant({
+})(props => ({
+  height: themeGet("appScale.navBarSize")(props)
+}), props => css({
+  width: "100%",
+  zIndex: 12,
+  position: "sticky",
+  top: "0",
+  display: "flex",
+  alignItems: "center",
+  py: 0,
+  px: 4,
+  bg: themeGet("colors.black")(props)
+}), variant({
   variants: {
-    "default": {
+    default: {
       width: "5px",
       height: "5px",
       backgroundColor: "#fff",
@@ -45,19 +40,17 @@ var Bar = styled("header").attrs(function (props) {
     }
   }
 }), space);
-var AppName = styled("div").withConfig({
+const AppName = styled("div").withConfig({
   displayName: "HeaderSimple__AppName",
   componentId: "sc-1mo6hwx-1"
-})(function (props) {
-  return css({
-    display: "flex",
-    alignItems: "center",
-    fontSize: themeGet("fontSizes.3")(props),
-    color: themeGet("colors.white")(props)
-  });
-}, variant({
+})(props => css({
+  display: "flex",
+  alignItems: "center",
+  fontSize: themeGet("fontSizes.3")(props),
+  color: themeGet("colors.white")(props)
+}), variant({
   variants: {
-    "default": {
+    default: {
       width: "5px",
       height: "5px",
       backgroundColor: "#fff",
@@ -70,7 +63,7 @@ var AppName = styled("div").withConfig({
     }
   }
 }), space);
-var SearchContainer = styled("div").withConfig({
+const SearchContainer = styled("div").withConfig({
   displayName: "HeaderSimple__SearchContainer",
   componentId: "sc-1mo6hwx-2"
 })(css({
@@ -84,41 +77,53 @@ var SearchContainer = styled("div").withConfig({
 /**
  * Header component for top of app.
  **/
-var HeaderSimple = function HeaderSimple(_ref) {
-  var appName = _ref.appName,
-    userName = _ref.userName,
-    avatarSource = _ref.avatarSource,
-    avatarAlt = _ref.avatarAlt,
-    searchComponent = _ref.searchComponent,
-    dataTestId = _ref.dataTestId,
-    variant = _ref.variant,
-    currentWorkspace = _ref.currentWorkspace,
-    logo = _ref.logo;
-  return /*#__PURE__*/React.createElement(Bar, {
+const HeaderSimple = _ref => {
+  let {
+    appName,
+    userName,
+    avatarSource,
+    avatarAlt,
+    searchComponent,
+    dataTestId,
+    variant,
+    currentWorkspace,
+    logo
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Bar, {
     dataTestId: dataTestId,
-    variant: variant
-  }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center"
-  }, logo && /*#__PURE__*/React.createElement(FlexItem, null, logo), /*#__PURE__*/React.createElement(Flex, {
-    flexDirection: "column",
-    justifyContent: "center"
-  }, /*#__PURE__*/React.createElement(AppName, {
-    variant: variant
-  }, appName), currentWorkspace && /*#__PURE__*/React.createElement(Small, {
-    color: "white",
-    fontSize: "0",
-    display: ["none", "none", "none", "block"]
-  }, currentWorkspace))), searchComponent && /*#__PURE__*/React.createElement(SearchContainer, null, searchComponent), /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center",
-    ml: "auto",
-    display: searchComponent ? ["none", "none", "none", "flex"] : "flex"
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    type: "inverted",
-    sizing: "small",
-    title: userName,
-    image: avatarSource,
-    imageAlt: avatarAlt
-  })));
+    variant: variant,
+    children: [/*#__PURE__*/_jsxs(Flex, {
+      alignItems: "center",
+      children: [logo && /*#__PURE__*/_jsx(FlexItem, {
+        children: logo
+      }), /*#__PURE__*/_jsxs(Flex, {
+        flexDirection: "column",
+        justifyContent: "center",
+        children: [/*#__PURE__*/_jsx(AppName, {
+          variant: variant,
+          children: appName
+        }), currentWorkspace && /*#__PURE__*/_jsx(Small, {
+          color: "white",
+          fontSize: "0",
+          display: ["none", "none", "none", "block"],
+          children: currentWorkspace
+        })]
+      })]
+    }), searchComponent && /*#__PURE__*/_jsx(SearchContainer, {
+      children: searchComponent
+    }), /*#__PURE__*/_jsx(Flex, {
+      alignItems: "center",
+      ml: "auto",
+      display: searchComponent ? ["none", "none", "none", "flex"] : "flex",
+      children: /*#__PURE__*/_jsx(Avatar, {
+        type: "inverted",
+        sizing: "small",
+        title: userName,
+        image: avatarSource,
+        imageAlt: avatarAlt
+      })
+    })]
+  });
 };
 HeaderSimple.propTypes = {
   /** Logo for app. Preferably an svg logo */

package/es/components/Icon/Icon.stories.js

@@ -5,112 +5,113 @@ import { far } from "@fortawesome/free-regular-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import Box from "../Box";
 import Flex from "../Flex";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 library.add(far, fas);
 export default {
   title: "Components/Icon",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      p: "3"
-    }, /*#__PURE__*/React.createElement(Flex, {
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    p: "3",
+    children: /*#__PURE__*/_jsx(Flex, {
       alignItems: "center",
-      justifyContent: "space-around"
-    }, storyFn()));
-  }],
+      justifyContent: "space-around",
+      children: storyFn()
+    })
+  })],
   component: Icon
 };
-export var defaultIcon = function defaultIcon() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+export const defaultIcon = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "angle-down"],
     title: "Down"
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "plus"],
     title: "Plus"
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/_jsx(Icon, {
     icon: ["far", "user"],
     title: "User"
-  }));
-};
-export var colouredIcon = function colouredIcon() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+  })]
+});
+export const colouredIcon = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "angle-down"],
     color: "primaryDark",
     title: "Down"
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "plus"],
     color: "successDark",
     title: "Plus"
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/_jsx(Icon, {
     icon: ["far", "user"],
     color: "dangerDark",
     title: "User"
-  }));
-};
-export var iconSize = function iconSize() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+  })]
+});
+export const iconSize = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "plus"],
     size: "sm",
     title: "Plus"
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "plus"],
     size: "rg",
     title: "Plus"
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "plus"],
     size: "lg",
     title: "Plus"
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "plus"],
     size: "2x",
     title: "Plus"
-  }));
-};
-export var invertedIcons = function invertedIcons() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyDarker",
-    width: "100%"
-  }, /*#__PURE__*/React.createElement(Flex, {
+  })]
+});
+export const invertedIcons = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyDarker",
+  width: "100%",
+  children: /*#__PURE__*/_jsxs(Flex, {
     alignItems: "center",
-    justifyContent: "space-around"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "angle-down"],
-    inverse: true,
-    title: "Down"
-  }), /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "plus"],
-    inverse: true,
-    title: "Plus"
-  }), /*#__PURE__*/React.createElement(Icon, {
-    icon: ["far", "user"],
-    inverse: true,
-    title: "User"
-  })));
-};
-export var animatedIcons = function animatedIcons() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+    justifyContent: "space-around",
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: ["fas", "angle-down"],
+      inverse: true,
+      title: "Down"
+    }), /*#__PURE__*/_jsx(Icon, {
+      icon: ["fas", "plus"],
+      inverse: true,
+      title: "Plus"
+    }), /*#__PURE__*/_jsx(Icon, {
+      icon: ["far", "user"],
+      inverse: true,
+      title: "User"
+    })]
+  })
+});
+export const animatedIcons = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "angle-down"],
     spin: true,
     title: "Spinning arrow"
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "plus"],
     pulse: true,
     title: "Spinning plus"
-  }));
-};
-export var transformsAndRotations = function transformsAndRotations() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+  })]
+});
+export const transformsAndRotations = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "coffee"],
     rotation: "270",
     title: "Coffee"
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "user"],
     flip: "vertical",
     title: "User"
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/_jsx(Icon, {
     icon: ["fas", "certificate"],
     transform: "grow-8 up-10",
     title: "Certificate"
-  }));
-};
+  })]
+});
 defaultIcon.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Icon/index.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["border", "mask", "fixedWidth", "inverse", "flip", "icon", "listitem", "pull", "pulse", "rotation", "size", "spin", "symbol", "transform", "color", "theme", "title"];
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
@@ -19,9 +16,9 @@ import { space, color, typography, compose } from "styled-system";
  *
  * To get started you can import the icons into Font Awesome library. Alternatively if you want to use their full icon set you need to purchase a PRO plan from Font awesome, and can install the full pro icon packages in your app. See the readme here for more details on how to use and install PRO: <https://github.com/orchestrated-io/orcs-design-system>
  */
-
-var IconStyles = compose(space, color, typography);
-var IconWrapper = styled("span").withConfig({
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconStyles = compose(space, color, typography);
+const IconWrapper = styled("span").withConfig({
   displayName: "Icon__IconWrapper",
   componentId: "sc-xeqnbo-0"
 })(css({
@@ -29,46 +26,51 @@ var IconWrapper = styled("span").withConfig({
   display: "inline-block"
 }), IconStyles);
 export default function Icon(_ref) {
-  var border = _ref.border,
-    mask = _ref.mask,
-    fixedWidth = _ref.fixedWidth,
-    inverse = _ref.inverse,
-    flip = _ref.flip,
-    icon = _ref.icon,
-    listitem = _ref.listitem,
-    pull = _ref.pull,
-    pulse = _ref.pulse,
-    rotation = _ref.rotation,
-    size = _ref.size,
-    spin = _ref.spin,
-    symbol = _ref.symbol,
-    transform = _ref.transform,
-    color = _ref.color,
-    theme = _ref.theme,
-    title = _ref.title,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(IconWrapper, _extends({
-    color: color
-  }, props), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    border: border,
-    mask: mask,
-    fixedWidth: fixedWidth,
-    inverse: inverse,
-    flip: flip,
-    listitem: listitem,
-    pull: pull,
-    rotation: rotation,
-    icon: icon,
-    pulse: pulse,
-    size: size,
-    spin: spin,
-    symbol: symbol,
-    transform: transform,
-    title: title && "Icon-".concat(title)
-  }));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+  let {
+    border,
+    mask,
+    fixedWidth,
+    inverse,
+    flip,
+    icon,
+    listitem,
+    pull,
+    pulse,
+    rotation,
+    size,
+    spin,
+    symbol,
+    transform,
+    color,
+    theme,
+    title,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsx(IconWrapper, {
+    color: color,
+    ...props,
+    children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+      border: border,
+      mask: mask,
+      fixedWidth: fixedWidth,
+      inverse: inverse,
+      flip: flip,
+      listitem: listitem,
+      pull: pull,
+      rotation: rotation,
+      icon: icon,
+      pulse: pulse,
+      size: size,
+      spin: spin,
+      symbol: symbol,
+      transform: transform,
+      title: title && "Icon-".concat(title)
+    })
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Icon.propTypes = {
   /** Colours the icon using colours from the system colour palette */

package/es/components/Loading/Loading.stories.js

@@ -2,56 +2,49 @@ import React from "react";
 import Loading from ".";
 import Spacer from "../Spacer";
 import Box from "../Box";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Loading",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      p: "r"
-    }, storyFn());
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    p: "r",
+    children: storyFn()
+  })],
   component: Loading
 };
-export var defaultLoading = function defaultLoading() {
-  return /*#__PURE__*/React.createElement(Loading, null);
-};
+export const defaultLoading = () => /*#__PURE__*/_jsx(Loading, {});
 defaultLoading.storyName = "Default";
-export var largeLoading = function largeLoading() {
-  return /*#__PURE__*/React.createElement(Loading, {
-    large: true
-  });
-};
+export const largeLoading = () => /*#__PURE__*/_jsx(Loading, {
+  large: true
+});
 largeLoading.storyName = "Large";
-export var centeredLoading = function centeredLoading() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Loading, {
+export const centeredLoading = () => /*#__PURE__*/_jsxs(Spacer, {
+  p: "r",
+  children: [/*#__PURE__*/_jsx(Loading, {
     centered: true
-  }), /*#__PURE__*/React.createElement(Loading, {
+  }), /*#__PURE__*/_jsx(Loading, {
     large: true,
     centered: true
-  }));
-};
+  })]
+});
 centeredLoading.storyName = "Centered";
-export var colouredLoading = function colouredLoading() {
-  return /*#__PURE__*/React.createElement(Loading, {
-    large: true,
-    primary: true
-  });
-};
+export const colouredLoading = () => /*#__PURE__*/_jsx(Loading, {
+  large: true,
+  primary: true
+});
 colouredLoading.storyName = "Coloured";
-export var invertedLoading = function invertedLoading() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyDarkest",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Loading, {
-    inverted: true
-  }), /*#__PURE__*/React.createElement(Loading, {
-    large: true,
-    inverted: true
-  })));
-};
+export const invertedLoading = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyDarkest",
+  p: "r",
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    p: "r",
+    children: [/*#__PURE__*/_jsx(Loading, {
+      inverted: true
+    }), /*#__PURE__*/_jsx(Loading, {
+      large: true,
+      inverted: true
+    })]
+  })
+});
 invertedLoading.storyName = "Inverted";
 defaultLoading.__docgenInfo = {
   "description": "",