orcs-design-system 3.2.4 → 3.2.6

package/es/components/Grid/Grid.stories.js

@@ -1,72 +1,146 @@
 import React from "react";
 import Grid, { GridItem } from "../Grid";
 import Button from "../Button";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Grid",
   component: Grid
 };
-export var basicGrid = function basicGrid() {
-  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridItem, null, "1"), /*#__PURE__*/React.createElement(GridItem, null, "2"), /*#__PURE__*/React.createElement(GridItem, null, "3"), /*#__PURE__*/React.createElement(GridItem, null, "4"), /*#__PURE__*/React.createElement(GridItem, null, "5"), /*#__PURE__*/React.createElement(GridItem, null, "6"));
-};
+export const basicGrid = () => /*#__PURE__*/_jsxs(Grid, {
+  children: [/*#__PURE__*/_jsx(GridItem, {
+    children: "1"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "2"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "3"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "4"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "5"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "6"
+  })]
+});
 basicGrid.storyName = "Default Grid";
-export var backgroundColourGrid = function backgroundColourGrid() {
-  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridItem, {
-    bg: "grey"
-  }, "1"), /*#__PURE__*/React.createElement(GridItem, {
+export const backgroundColourGrid = () => /*#__PURE__*/_jsxs(Grid, {
+  children: [/*#__PURE__*/_jsx(GridItem, {
+    bg: "grey",
+    children: "1"
+  }), /*#__PURE__*/_jsx(GridItem, {
     bg: "primary",
-    color: "white"
-  }, "2"), /*#__PURE__*/React.createElement(GridItem, {
-    bg: "greyLight"
-  }, "3"), /*#__PURE__*/React.createElement(GridItem, {
-    bg: "greyDark"
-  }, "4"), /*#__PURE__*/React.createElement(GridItem, {
-    bg: "success"
-  }, "5"), /*#__PURE__*/React.createElement(GridItem, {
-    bg: "warning"
-  }, "6"));
-};
+    color: "white",
+    children: "2"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    bg: "greyLight",
+    children: "3"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    bg: "greyDark",
+    children: "4"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    bg: "success",
+    children: "5"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    bg: "warning",
+    children: "6"
+  })]
+});
 backgroundColourGrid.storyName = "With background colours";
-export var templateColumnsAndRows = function templateColumnsAndRows() {
-  return /*#__PURE__*/React.createElement(Grid, {
-    gridTemplateColumns: "repeat(3, 1fr)",
-    gridTemplateRows: "repeat(2, 1fr)",
-    bg: "greyLightest"
-  }, /*#__PURE__*/React.createElement(GridItem, null, "This Grid uses repeat and fr to specify the grid structure."), /*#__PURE__*/React.createElement(GridItem, null, "Fusce sit amet lorem lectus."), /*#__PURE__*/React.createElement(GridItem, null, "Nullam lobortis porta iaculis. "), /*#__PURE__*/React.createElement(GridItem, null, "Pellentesque fermentum elementum elit non blandit."), /*#__PURE__*/React.createElement(GridItem, null, "Etiam rhoncus ultricies lorem nec imperdiet."), /*#__PURE__*/React.createElement(GridItem, null, "Pellentesque. "));
-};
+export const templateColumnsAndRows = () => /*#__PURE__*/_jsxs(Grid, {
+  gridTemplateColumns: "repeat(3, 1fr)",
+  gridTemplateRows: "repeat(2, 1fr)",
+  bg: "greyLightest",
+  children: [/*#__PURE__*/_jsx(GridItem, {
+    children: "This Grid uses repeat and fr to specify the grid structure."
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "Fusce sit amet lorem lectus."
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "Nullam lobortis porta iaculis. "
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "Pellentesque fermentum elementum elit non blandit."
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "Etiam rhoncus ultricies lorem nec imperdiet."
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "Pellentesque. "
+  })]
+});
 templateColumnsAndRows.storyName = "Template columns and rows";
-export var widthColumnsAndRows = function widthColumnsAndRows() {
-  return /*#__PURE__*/React.createElement(Grid, {
-    gridTemplateColumns: "25% 200px auto",
-    gridTemplateRows: "25% 100px auto",
-    bg: "greyLighter"
-  }, /*#__PURE__*/React.createElement(GridItem, null, "This Grid uses widths and percentages to specify the grid structure."), /*#__PURE__*/React.createElement(GridItem, null, "Fusce sit amet lorem lectus."), /*#__PURE__*/React.createElement(GridItem, null, "Nullam lobortis porta iaculis. "), /*#__PURE__*/React.createElement(GridItem, null, "Pellentesque fermentum elementum elit non blandit."), /*#__PURE__*/React.createElement(GridItem, null, "Etiam rhoncus ultricies lorem nec imperdiet."), /*#__PURE__*/React.createElement(GridItem, null, "Pellentesque. "), /*#__PURE__*/React.createElement(GridItem, null, "Each GridItem goes down the columns first and then goes through the rows."), /*#__PURE__*/React.createElement(GridItem, null, "To change this, change the value of the gridAutoFlow property. The default value is columns."));
-};
+export const widthColumnsAndRows = () => /*#__PURE__*/_jsxs(Grid, {
+  gridTemplateColumns: "25% 200px auto",
+  gridTemplateRows: "25% 100px auto",
+  bg: "greyLighter",
+  children: [/*#__PURE__*/_jsx(GridItem, {
+    children: "This Grid uses widths and percentages to specify the grid structure."
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "Fusce sit amet lorem lectus."
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "Nullam lobortis porta iaculis. "
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "Pellentesque fermentum elementum elit non blandit."
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "Etiam rhoncus ultricies lorem nec imperdiet."
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "Pellentesque. "
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "Each GridItem goes down the columns first and then goes through the rows."
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "To change this, change the value of the gridAutoFlow property. The default value is columns."
+  })]
+});
 widthColumnsAndRows.storyName = "Width-based columns and rows";
-export var withGridItem = function withGridItem() {
-  return /*#__PURE__*/React.createElement(Grid, {
-    bg: "greyLightest"
-  }, /*#__PURE__*/React.createElement(GridItem, null, /*#__PURE__*/React.createElement(Button, null, "Default Button")), /*#__PURE__*/React.createElement(GridItem, null, /*#__PURE__*/React.createElement(Button, {
-    colour: "successDark"
-  }, "Success")), /*#__PURE__*/React.createElement(GridItem, null, /*#__PURE__*/React.createElement(Button, {
-    fullWidth: true
-  }, "Full width button")), /*#__PURE__*/React.createElement(GridItem, null, /*#__PURE__*/React.createElement("p", null, "Text-only item")));
-};
+export const withGridItem = () => /*#__PURE__*/_jsxs(Grid, {
+  bg: "greyLightest",
+  children: [/*#__PURE__*/_jsx(GridItem, {
+    children: /*#__PURE__*/_jsx(Button, {
+      children: "Default Button"
+    })
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: /*#__PURE__*/_jsx(Button, {
+      colour: "successDark",
+      children: "Success"
+    })
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: /*#__PURE__*/_jsx(Button, {
+      fullWidth: true,
+      children: "Full width button"
+    })
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Text-only item"
+    })
+  })]
+});
 withGridItem.storyName = "With GridItem";
-export var textWithGridItem = function textWithGridItem() {
-  return /*#__PURE__*/React.createElement(Grid, {
-    bg: "greyLighter"
-  }, /*#__PURE__*/React.createElement(GridItem, null, "3"), /*#__PURE__*/React.createElement(GridItem, null, "1"), /*#__PURE__*/React.createElement(GridItem, null, "4"), /*#__PURE__*/React.createElement(GridItem, null, "1"), /*#__PURE__*/React.createElement(GridItem, null, "5"), /*#__PURE__*/React.createElement(GridItem, null, "9"));
-};
+export const textWithGridItem = () => /*#__PURE__*/_jsxs(Grid, {
+  bg: "greyLighter",
+  children: [/*#__PURE__*/_jsx(GridItem, {
+    children: "3"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "1"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "4"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "1"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "5"
+  }), /*#__PURE__*/_jsx(GridItem, {
+    children: "9"
+  })]
+});
 textWithGridItem.storyName = "Text with GridItem";
-export var withoutGridItem = function withoutGridItem() {
-  return /*#__PURE__*/React.createElement(Grid, {
-    bg: "greyLightest"
-  }, /*#__PURE__*/React.createElement(Button, null, "Default Button"), /*#__PURE__*/React.createElement(Button, {
-    colour: "successDark"
-  }, "Success"), /*#__PURE__*/React.createElement(Button, {
-    fullWidth: true
-  }, "Full width button"), /*#__PURE__*/React.createElement("p", null, "Text-only item"));
-};
+export const withoutGridItem = () => /*#__PURE__*/_jsxs(Grid, {
+  bg: "greyLightest",
+  children: [/*#__PURE__*/_jsx(Button, {
+    children: "Default Button"
+  }), /*#__PURE__*/_jsx(Button, {
+    colour: "successDark",
+    children: "Success"
+  }), /*#__PURE__*/_jsx(Button, {
+    fullWidth: true,
+    children: "Full width button"
+  }), /*#__PURE__*/_jsx("p", {
+    children: "Text-only item"
+  })]
+});
 withoutGridItem.storyName = "Without GridItem";
 basicGrid.__docgenInfo = {
   "description": "",

package/es/components/Grid/index.js

@@ -1,44 +1,45 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "theme"];
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import { grid, space, layout, flex, color, compose } from "styled-system";
 import { css } from "@styled-system/css";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import PropTypes from "prop-types";
-var GridStyles = compose(space, layout, grid, flex, color);
-var GridWrapper = styled("div").withConfig({
-  shouldForwardProp: shouldForwardProp,
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridStyles = compose(space, layout, grid, flex, color);
+const GridWrapper = styled("div").withConfig({
+  shouldForwardProp,
   displayName: "Grid__GridWrapper",
   componentId: "sc-1rlajun-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({
   boxSizing: "border-box",
   display: "grid"
 }), GridStyles);
-var GridItem = styled("div").withConfig({
-  shouldForwardProp: shouldForwardProp,
+const GridItem = styled("div").withConfig({
+  shouldForwardProp,
   displayName: "Grid__GridItem",
   componentId: "sc-1rlajun-1"
-}).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({
   boxSizing: "border-box",
   minWidth: "0"
 }), GridStyles);
 export default function Grid(_ref) {
-  var children = _ref.children,
-    theme = _ref.theme,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(GridWrapper, props, children);
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+  let {
+    children,
+    theme,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsx(GridWrapper, {
+    ...props,
+    children: children
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Grid.propTypes = {
   /** Children of `Grid` are taken as node elements */

package/es/components/Header/Header.stories.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from "react";
 import { action } from "@storybook/addon-actions";
 import Header from "../Header";
@@ -8,117 +7,116 @@ import { Small } from "../Typography";
 import TextInput from "../TextInput";
 import Select from "../Select";
 import Box from "../Box";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default {
   title: "Components/Header",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      height: "500px"
-    }, storyFn());
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    height: "500px",
+    children: storyFn()
+  })],
   component: Header
 };
-export var defaultHeader = function defaultHeader() {
-  return /*#__PURE__*/React.createElement(Header, {
-    appName: "App Name",
-    userName: "Michael",
-    avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
-    clientInfo: "Tenant: ci2153 Workspace: 20k-v5 [lb5ctx]  UI_Version: 8c315c2 [4412] Backend_Version: dabc261 [3578]",
-    logoutFunction: action("clicked-logout"),
-    sideMenuContent: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, /*#__PURE__*/React.createElement(Icon, {
+export const defaultHeader = () => /*#__PURE__*/_jsxs(Header, {
+  appName: "App Name",
+  userName: "Michael",
+  avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+  clientInfo: "Tenant: ci2153 Workspace: 20k-v5 [lb5ctx]  UI_Version: 8c315c2 [4412] Backend_Version: dabc261 [3578]",
+  logoutFunction: action("clicked-logout"),
+  sideMenuContent: /*#__PURE__*/_jsxs(StyledLink, {
+    href: "#",
+    children: [/*#__PURE__*/_jsx(Icon, {
       icon: ["fas", "cog"],
       mr: "s"
-    }), "Settings"),
-    navToggleId: "defaultHeader"
-  }, /*#__PURE__*/React.createElement(StyledLink, {
+    }), "Settings"]
+  }),
+  navToggleId: "defaultHeader",
+  children: [/*#__PURE__*/_jsx(StyledLink, {
     href: "#",
     white: true,
     bold: true,
-    active: true
-  }, "Summary"), /*#__PURE__*/React.createElement(StyledLink, {
+    active: true,
+    children: "Summary"
+  }), /*#__PURE__*/_jsx(StyledLink, {
     href: "#",
     white: true,
-    bold: true
-  }, "Find"), /*#__PURE__*/React.createElement(StyledLink, {
+    bold: true,
+    children: "Find"
+  }), /*#__PURE__*/_jsx(StyledLink, {
     href: "#",
     white: true,
-    bold: true
-  }, "Visualisation"));
-};
+    bold: true,
+    children: "Visualisation"
+  })]
+});
 defaultHeader.storyName = "Default Header";
-export var headerWithSearch = function headerWithSearch() {
-  return /*#__PURE__*/React.createElement(Header, {
-    variant: "search",
-    appName: "App Name",
-    userName: "Michael",
-    avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
-    logoutFunction: action("clicked-logout"),
-    searchComponent: /*#__PURE__*/React.createElement(TextInput, {
-      fullWidth: true,
-      id: "search",
-      key: "search",
-      type: "text",
-      placeholder: "Search for...",
-      iconRight: ["fas", "search"]
-    }),
-    navToggleId: "headerWithSearch"
-  });
-};
+export const headerWithSearch = () => /*#__PURE__*/_jsx(Header, {
+  variant: "search",
+  appName: "App Name",
+  userName: "Michael",
+  avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+  logoutFunction: action("clicked-logout"),
+  searchComponent: /*#__PURE__*/_jsx(TextInput, {
+    fullWidth: true,
+    id: "search",
+    type: "text",
+    placeholder: "Search for...",
+    iconRight: ["fas", "search"]
+  }, "search"),
+  navToggleId: "headerWithSearch"
+});
 headerWithSearch.storyName = "Alternative Header with search";
-export var headerWithSearchAndLinks = function headerWithSearchAndLinks() {
-  return /*#__PURE__*/React.createElement(Header, {
-    variant: "searchAndLinks",
-    appName: "App Name",
-    userName: "Michael",
-    avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
-    logoutFunction: action("clicked-logout"),
-    searchComponent: /*#__PURE__*/React.createElement(TextInput, {
-      fullWidth: true,
-      id: "search",
-      key: "search",
-      type: "text",
-      placeholder: "Search for...",
-      iconRight: ["fas", "search"]
-    }),
-    navToggleId: "headerWithSearchAndLinks"
-  }, /*#__PURE__*/React.createElement(StyledLink, {
+export const headerWithSearchAndLinks = () => /*#__PURE__*/_jsxs(Header, {
+  variant: "searchAndLinks",
+  appName: "App Name",
+  userName: "Michael",
+  avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+  logoutFunction: action("clicked-logout"),
+  searchComponent: /*#__PURE__*/_jsx(TextInput, {
+    fullWidth: true,
+    id: "search",
+    type: "text",
+    placeholder: "Search for...",
+    iconRight: ["fas", "search"]
+  }, "search"),
+  navToggleId: "headerWithSearchAndLinks",
+  children: [/*#__PURE__*/_jsx(StyledLink, {
     href: "#",
     white: true,
-    bold: true
-  }, "Summary"), /*#__PURE__*/React.createElement(StyledLink, {
+    bold: true,
+    children: "Summary"
+  }), /*#__PURE__*/_jsx(StyledLink, {
     href: "#",
     white: true,
-    bold: true
-  }, "Teams"), /*#__PURE__*/React.createElement(StyledLink, {
+    bold: true,
+    children: "Teams"
+  }), /*#__PURE__*/_jsx(StyledLink, {
     href: "#",
     white: true,
-    bold: true
-  }, "People"), /*#__PURE__*/React.createElement(StyledLink, {
+    bold: true,
+    children: "People"
+  }), /*#__PURE__*/_jsx(StyledLink, {
     href: "#",
     white: true,
-    bold: true
-  }, "Reports"));
-};
+    bold: true,
+    children: "Reports"
+  })]
+});
 headerWithSearch.storyName = "Alternative Header with search";
-export var headerWithWorkspaceSwitching = function headerWithWorkspaceSwitching() {
-  var options = [{
+export const headerWithWorkspaceSwitching = () => {
+  const options = [{
     label: "Workspace A"
   }, {
     label: "Workspace B"
   }];
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  var _useState = useState([{
-      label: "Workspace A"
-    }]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var onChange = function onChange(value) {
+  const [selected, setSelected] = useState([{
+    label: "Workspace A"
+  }]);
+  const onChange = value => {
     setSelected(value);
   };
-  var currentWorkspace = "Workspace A";
-  var select = /*#__PURE__*/React.createElement(Select, {
+  const currentWorkspace = "Workspace A";
+  const select = /*#__PURE__*/_jsx(Select, {
     id: "WorkspaceSelect",
     "data-testid": "select-workspace-dropdown",
     placeholder: "Select a workspace",
@@ -129,18 +127,29 @@ export var headerWithWorkspaceSwitching = function headerWithWorkspaceSwitching(
     padding: "0 8px",
     inverted: true
   });
-  var internalAppLinks = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledLink, {
-    href: "#",
-    target: "_blank"
-  }, "App 1 Name", /*#__PURE__*/React.createElement(Small, null, "This is a description of other app in suite")), /*#__PURE__*/React.createElement(StyledLink, {
-    href: "#",
-    target: "_blank"
-  }, "App 2 Name", /*#__PURE__*/React.createElement(Small, null, "This is a description of other app in suite")));
-  var externalAppLinks = /*#__PURE__*/React.createElement(StyledLink, {
+  const internalAppLinks = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(StyledLink, {
+      href: "#",
+      target: "_blank",
+      children: ["App 1 Name", /*#__PURE__*/_jsx(Small, {
+        children: "This is a description of other app in suite"
+      })]
+    }), /*#__PURE__*/_jsxs(StyledLink, {
+      href: "#",
+      target: "_blank",
+      children: ["App 2 Name", /*#__PURE__*/_jsx(Small, {
+        children: "This is a description of other app in suite"
+      })]
+    })]
+  });
+  const externalAppLinks = /*#__PURE__*/_jsxs(StyledLink, {
     href: "#",
-    target: "_blank"
-  }, "External App Name", /*#__PURE__*/React.createElement(Small, null, "This is a description of external 3rd party app"));
-  return /*#__PURE__*/React.createElement(Header, {
+    target: "_blank",
+    children: ["External App Name", /*#__PURE__*/_jsx(Small, {
+      children: "This is a description of external 3rd party app"
+    })]
+  });
+  return /*#__PURE__*/_jsx(Header, {
     appName: "App Name",
     currentWorkspace: currentWorkspace,
     userName: "Michael",