orcs-design-system 3.2.4 → 3.2.6

package/es/components/Toggle/index.js

@@ -1,67 +1,27 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["inverted", "id", "small", "theme", "label", "checked", "disabled", "srHide"];
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { css, ThemeProvider } from "styled-components";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
-var Group = styled.div.withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Group = styled.div.withConfig({
   displayName: "Toggle__Group",
   componentId: "sc-f6l22k-0"
-})(["", " ", " display:flex;align-items:center;", ";"], space, layout, function (props) {
-  return props.inverted ? css(["input{&:focus{+ label{box-shadow:", ";}}}label{&:first-of-type{background:", ";}}"], themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black")(props), themeGet("colors.greyDark")(props)) : css([""]);
-});
-var Input = styled.input.attrs({
+})(["", " ", " display:flex;align-items:center;", ";"], space, layout, props => props.inverted ? css(["input{&:focus{+ label{box-shadow:", ";}}}label{&:first-of-type{background:", ";}}"], themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black")(props), themeGet("colors.greyDark")(props)) : css([""]));
+const Input = styled.input.attrs({
   type: "checkbox"
 }).withConfig({
   displayName: "Toggle__Input",
   componentId: "sc-f6l22k-1"
-})(["opacity:0;position:absolute;visibility:", ";margin:0;z-index:-1;width:0;height:0;pointer-events:none;&:focus{+ label{box-shadow:", ";}}:checked{+ label{background:", ";&:after{left:calc(100% - 3px);transform:translateX(-100%);}}&:focus{+ label{box-shadow:", ";}}}"], function (props) {
-  return props.srHide ? "hidden" : "visible";
-}, function (props) {
-  return themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black20")(props);
-}, function (props) {
-  return themeGet("colors.success")(props);
-}, function (props) {
-  return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.success30")(props);
-});
-var Item = styled.label.withConfig({
+})(["opacity:0;position:absolute;visibility:", ";margin:0;z-index:-1;width:0;height:0;pointer-events:none;&:focus{+ label{box-shadow:", ";}}:checked{+ label{background:", ";&:after{left:calc(100% - 3px);transform:translateX(-100%);}}&:focus{+ label{box-shadow:", ";}}}"], props => props.srHide ? "hidden" : "visible", props => themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black20")(props), props => themeGet("colors.success")(props), props => themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.success30")(props));
+const Item = styled.label.withConfig({
   displayName: "Toggle__Item",
   componentId: "sc-f6l22k-2"
-})(["cursor:pointer;flex:0 0 auto;margin:0;display:block;position:relative;transition:", ";background:", ";width:", ";height:", ";border-radius:", ";&:after{content:\"\";position:absolute;top:3px;left:3px;background:", ";transition:", ";width:", ";height:", ";border-radius:", ";}:active{&:after{width:", ";}}", ";"], function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return themeGet("colors.greyDarker")(props);
-}, function (props) {
-  return props.small ? "36px" : "44px";
-}, function (props) {
-  return props.small ? "20px" : "24px";
-}, function (props) {
-  return props.small ? "10px" : "12px";
-}, function (props) {
-  return themeGet("colors.white")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return props.small ? "14px" : "18px";
-}, function (props) {
-  return props.small ? "14px" : "18px";
-}, function (props) {
-  return props.small ? "7px" : "9px";
-}, function (props) {
-  return props.small ? "20px" : "24px";
-}, function (props) {
-  return props.disabled ? css(["opacity:0.5;"]) : css([""]);
-});
-var Label = styled.label.withConfig({
+})(["cursor:pointer;flex:0 0 auto;margin:0;display:block;position:relative;transition:", ";background:", ";width:", ";height:", ";border-radius:", ";&:after{content:\"\";position:absolute;top:3px;left:3px;background:", ";transition:", ";width:", ";height:", ";border-radius:", ";}:active{&:after{width:", ";}}", ";"], props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.greyDarker")(props), props => props.small ? "36px" : "44px", props => props.small ? "20px" : "24px", props => props.small ? "10px" : "12px", props => themeGet("colors.white")(props), props => themeGet("transition.transitionDefault")(props), props => props.small ? "14px" : "18px", props => props.small ? "14px" : "18px", props => props.small ? "7px" : "9px", props => props.small ? "20px" : "24px", props => props.disabled ? css(["opacity:0.5;"]) : css([""]));
+const Label = styled.label.withConfig({
   displayName: "Toggle__Label",
   componentId: "sc-f6l22k-3"
-})(["margin:0;padding-left:8px;cursor:pointer;font-size:", ";color:", ";"], function (props) {
-  return props.small ? themeGet("fontSizes.1")(props) : themeGet("fontSizes.2")(props);
-}, function (props) {
-  return props.disabled ? themeGet("colors.grey")(props) : props.inverted ? themeGet("colors.white")(props) : themeGet("colors.greyDarkest")(props);
-});
+})(["margin:0;padding-left:8px;cursor:pointer;font-size:", ";color:", ";"], props => props.small ? themeGet("fontSizes.1")(props) : themeGet("fontSizes.2")(props), props => props.disabled ? themeGet("colors.grey")(props) : props.inverted ? themeGet("colors.white")(props) : themeGet("colors.greyDarkest")(props));
 
 /**
  * `Toggle` should be used for when functionality is required to turn something off/on, hide/show or disable/enable. Default is off (left/grey), this works like a checkbox, so clicking or applying a checked attribute with javascript will turn it on (right/green).
@@ -70,35 +30,41 @@ var Label = styled.label.withConfig({
  */
 
 export default function Toggle(_ref) {
-  var inverted = _ref.inverted,
-    id = _ref.id,
-    small = _ref.small,
-    theme = _ref.theme,
-    label = _ref.label,
-    checked = _ref.checked,
-    disabled = _ref.disabled,
-    srHide = _ref.srHide,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(Group, {
-    inverted: inverted
-  }, /*#__PURE__*/React.createElement(Input, _extends({
-    id: id,
-    checked: checked,
-    disabled: disabled,
-    srHide: srHide
-  }, props)), /*#__PURE__*/React.createElement(Item, {
-    htmlFor: id,
-    small: small,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(Label, {
+  let {
+    inverted,
+    id,
+    small,
+    theme,
+    label,
+    checked,
+    disabled,
+    srHide,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsxs(Group, {
     inverted: inverted,
-    disabled: disabled,
-    htmlFor: id,
-    small: small
-  }, label));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    children: [/*#__PURE__*/_jsx(Input, {
+      id: id,
+      checked: checked,
+      disabled: disabled,
+      srHide: srHide,
+      ...props
+    }), /*#__PURE__*/_jsx(Item, {
+      htmlFor: id,
+      small: small,
+      disabled: disabled
+    }), /*#__PURE__*/_jsx(Label, {
+      inverted: inverted,
+      disabled: disabled,
+      htmlFor: id,
+      small: small,
+      children: label
+    })]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Toggle.propTypes = {
   /** Must be used to specify a unique ID. */

package/es/components/TreeNav/TreeNav.stories.js

@@ -1,10 +1,11 @@
 import React from "react";
 import TreeNav from ".";
+import { jsx as _jsx } from "react/jsx-runtime";
 export default {
   title: "Components/TreeNav",
   component: TreeNav
 };
-var data = [{
+const data = [{
   id: "1",
   name: "Domains",
   badgeText: "Domains",
@@ -345,13 +346,11 @@ var data = [{
   badgeText: "Contractor",
   badgeColour: "primary"
 }];
-export var defaultTreeNav = function defaultTreeNav() {
-  return /*#__PURE__*/React.createElement(TreeNav, {
-    data: data,
-    openByDefault: false,
-    width: 400
-  });
-};
+export const defaultTreeNav = () => /*#__PURE__*/_jsx(TreeNav, {
+  data: data,
+  openByDefault: false,
+  width: 400
+});
 defaultTreeNav.storyName = "Default tree navigation";
 defaultTreeNav.__docgenInfo = {
   "description": "",

package/es/components/TreeNav/index.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["data"];
 /* eslint-disable */
 import React from "react";
 import styled from "styled-components";
@@ -12,84 +9,90 @@ import Badge from "../Badge";
 import Checkbox from "../Checkbox";
 import { Small } from "../Typography";
 import { Tree } from "react-arborist";
-var TreeItemWrapper = styled("button").withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TreeItemWrapper = styled("button").withConfig({
   displayName: "TreeNav__TreeItemWrapper",
   componentId: "sc-13iwmeo-0"
-})(function (props) {
-  return css({
-    appearance: "none",
-    border: "none",
-    fontFamily: "inherit",
-    background: "none",
-    padding: "5px",
-    width: "100%",
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginRight: "5px",
-    cursor: "pointer",
-    borderRadius: themeGet("radii.2")(props),
-    transition: themeGet("transition.transitionDefault")(props),
-    "&:hover, &:focus": {
-      outline: "none",
-      backgroundColor: themeGet("colors.primary10")(props)
-    }
-  });
-});
-var Node = function Node(_ref) {
-  var node = _ref.node,
-    style = _ref.style;
+})(props => css({
+  appearance: "none",
+  border: "none",
+  fontFamily: "inherit",
+  background: "none",
+  padding: "5px",
+  width: "100%",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginRight: "5px",
+  cursor: "pointer",
+  borderRadius: themeGet("radii.2")(props),
+  transition: themeGet("transition.transitionDefault")(props),
+  "&:hover, &:focus": {
+    outline: "none",
+    backgroundColor: themeGet("colors.primary10")(props)
+  }
+}));
+const Node = _ref => {
+  let {
+    node,
+    style
+  } = _ref;
   /* This node instance can do many things. See the API reference. */
-  return /*#__PURE__*/React.createElement(TreeItemWrapper, {
+  return /*#__PURE__*/_jsxs(TreeItemWrapper, {
     style: style,
     className: "treeitem-wrapper",
-    onClick: function onClick() {
-      return node.toggle();
-    }
-  }, node.isLeaf ? /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "chevron-down"],
-    title: "Select item",
-    mr: "xs",
-    ml: "s",
-    size: "sm",
-    rotation: 270,
-    color: "transparent"
-  }) : node.isOpen ? /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "chevron-down"],
-    title: "Collapse item",
-    transform: "up-1",
-    mr: "xs",
-    ml: "s",
-    size: "sm"
-  }) : /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "chevron-down"],
-    title: "Expand item",
-    transform: "up-1",
-    mr: "xs",
-    ml: "s",
-    size: "sm",
-    rotation: 270
-  }), node.data.checkbox && /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: node.data.checkboxOnChange
-  }), /*#__PURE__*/React.createElement(Small, null, node.data.name), node.data.badgeText && /*#__PURE__*/React.createElement(Badge, {
-    variant: node.data.badgeColour,
-    ml: "auto"
-  }, node.data.badgeText));
+    onClick: () => node.toggle(),
+    children: [node.isLeaf ? /*#__PURE__*/_jsx(Icon, {
+      icon: ["fas", "chevron-down"],
+      title: "Select item",
+      mr: "xs",
+      ml: "s",
+      size: "sm",
+      rotation: 270,
+      color: "transparent"
+    }) : node.isOpen ? /*#__PURE__*/_jsx(Icon, {
+      icon: ["fas", "chevron-down"],
+      title: "Collapse item",
+      transform: "up-1",
+      mr: "xs",
+      ml: "s",
+      size: "sm"
+    }) : /*#__PURE__*/_jsx(Icon, {
+      icon: ["fas", "chevron-down"],
+      title: "Expand item",
+      transform: "up-1",
+      mr: "xs",
+      ml: "s",
+      size: "sm",
+      rotation: 270
+    }), node.data.checkbox && /*#__PURE__*/_jsx(Checkbox, {
+      onChange: node.data.checkboxOnChange
+    }), /*#__PURE__*/_jsx(Small, {
+      children: node.data.name
+    }), node.data.badgeText && /*#__PURE__*/_jsx(Badge, {
+      variant: node.data.badgeColour,
+      ml: "auto",
+      children: node.data.badgeText
+    })]
+  });
 };
 Node.propTypes = {
   isLeaf: PropTypes.bool,
   data: PropTypes.array
 };
-var TreeNav = function TreeNav(_ref2) {
-  var data = _ref2.data,
-    props = _objectWithoutProperties(_ref2, _excluded);
-  return /*#__PURE__*/React.createElement(Tree, _extends({
-    initialData: data
-  }, props, {
+const TreeNav = _ref2 => {
+  let {
+    data,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Tree, {
+    initialData: data,
+    ...props,
     overscanCount: 5,
     rowHeight: 32,
-    indent: 14
-  }), Node);
+    indent: 14,
+    children: Node
+  });
 };
 TreeNav.propTypes = {
   data: PropTypes.array

package/es/components/Typography/Typography.stories.js

@@ -0,0 +1,174 @@
+import React from "react";
+import { H1, H2, H3, H4, H5, H6, P, Text, Quote, Small, Code } from ".";
+import Box from "../Box";
+import Spacer from "../Spacer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "System/Typography"
+};
+export const HeadingsH1ToH6 = {
+  render: () => /*#__PURE__*/_jsxs(Spacer, {
+    my: 4,
+    children: [/*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(H1, {
+        children: "Standard H1"
+      }), /*#__PURE__*/_jsx(H1, {
+        weight: "light",
+        children: "Light version"
+      }), /*#__PURE__*/_jsx(H1, {
+        weight: "bold",
+        children: "Bold version"
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(H2, {
+        children: "Standard H2"
+      }), /*#__PURE__*/_jsx(H2, {
+        weight: "light",
+        children: "Light version"
+      }), /*#__PURE__*/_jsx(H2, {
+        weight: "bold",
+        children: "Bold version"
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(H3, {
+        children: "Standard H3"
+      }), /*#__PURE__*/_jsx(H3, {
+        weight: "light",
+        children: "Light version"
+      }), /*#__PURE__*/_jsx(H3, {
+        weight: "bold",
+        children: "Bold version"
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(H4, {
+        children: "Standard H4"
+      }), /*#__PURE__*/_jsx(H4, {
+        weight: "light",
+        children: "Light version"
+      }), /*#__PURE__*/_jsx(H4, {
+        weight: "bold",
+        children: "Bold version"
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(H5, {
+        children: "Standard H5"
+      }), /*#__PURE__*/_jsx(H5, {
+        weight: "light",
+        children: "Light version"
+      }), /*#__PURE__*/_jsx(H5, {
+        weight: "bold",
+        children: "Bold version"
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(H6, {
+        children: "Standard H6"
+      }), /*#__PURE__*/_jsx(H6, {
+        weight: "light",
+        children: "Light version"
+      }), /*#__PURE__*/_jsx(H6, {
+        weight: "bold",
+        children: "Bold version"
+      })]
+    })]
+  }),
+  name: "Headings/H1 to H6"
+};
+export const BodyTextParagraph = {
+  render: () => /*#__PURE__*/_jsxs(Spacer, {
+    my: 3,
+    children: [/*#__PURE__*/_jsx(P, {
+      children: "Regular paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet at elit sit amet iaculis. Cras eget sapien et ligula mollis placerat non venenatis dolor. Fusce id mi risus. Ut sit amet diam in dui maximus sagittis a at dolor. Cras volutpat est nec arcu interdum pulvinar in vitae erat."
+    }), /*#__PURE__*/_jsx(P, {
+      textAlign: "center",
+      children: "Centered paragraph text."
+    }), /*#__PURE__*/_jsx(P, {
+      textAlign: "right",
+      children: "Right-aligned paragraph text."
+    }), /*#__PURE__*/_jsx(P, {
+      weight: "light",
+      children: "Light paragraph text"
+    }), /*#__PURE__*/_jsx(P, {
+      sizing: "small",
+      children: "Small paragraph text"
+    })]
+  }),
+  name: "Body text/Paragraph"
+};
+export const BodyTextText = {
+  render: () => /*#__PURE__*/_jsx(Text, {
+    children: "Hello world"
+  }),
+  name: "Body text/Text"
+};
+export const StylingSizing = {
+  render: () => /*#__PURE__*/_jsxs(Spacer, {
+    my: 3,
+    children: [/*#__PURE__*/_jsx(H5, {
+      sizing: "small",
+      children: "Small variant of H5"
+    }), /*#__PURE__*/_jsx(H5, {
+      sizing: "large",
+      children: "Large variant of H5"
+    }), /*#__PURE__*/_jsx(H5, {
+      fontSize: 2,
+      children: "Even smaller H5, scaled down two steps in the fontSize array"
+    }), /*#__PURE__*/_jsx(P, {
+      fontSize: "10px",
+      children: "Very small text using a specific fontSize value"
+    }), /*#__PURE__*/_jsx(Small, {
+      children: "Small text using the Small component"
+    })]
+  }),
+  name: "Styling/Sizing"
+};
+export const StylingEmphasis = {
+  render: () => /*#__PURE__*/_jsxs(Spacer, {
+    my: 3,
+    children: [/*#__PURE__*/_jsx(P, {
+      weight: "bold",
+      children: "Bold paragraph text lorem ipsum dolor sit amet"
+    }), /*#__PURE__*/_jsxs(P, {
+      children: ["Only ", /*#__PURE__*/_jsx("strong", {
+        children: "partially bolded"
+      }), " paragraph"]
+    })]
+  }),
+  name: "Styling/Emphasis"
+};
+export const StylingColours = {
+  render: () => /*#__PURE__*/_jsxs(Spacer, {
+    my: 2,
+    children: [/*#__PURE__*/_jsx(P, {
+      color: "greyDark",
+      children: "Grey-coloured text"
+    }), /*#__PURE__*/_jsx(P, {
+      color: "success",
+      children: "Success-coloured text"
+    }), /*#__PURE__*/_jsx(P, {
+      color: "danger",
+      children: "Danger-coloured text"
+    }), /*#__PURE__*/_jsx(Box, {
+      bg: "greyDarker",
+      p: "r",
+      children: /*#__PURE__*/_jsx(P, {
+        color: "white",
+        children: "White text for dark backgrounds"
+      })
+    })]
+  }),
+  name: "Styling/Colours"
+};
+export const MiscellaneousBlockquote = {
+  render: () => /*#__PURE__*/_jsxs(Quote, {
+    children: ["\"Used to display block quotes lorem ipsum dolor sit amet\"", /*#__PURE__*/_jsx("em", {
+      children: " - Adam, 2018"
+    })]
+  }),
+  name: "Miscellaneous/Blockquote"
+};
+export const MiscellaneousCode = {
+  render: () => /*#__PURE__*/_jsx(Code, {
+    children: "<html> <head> <body> Hello I am a code block </body> </head> </html>"
+  }),
+  name: "Miscellaneous/Code"
+};