orcs-design-system 3.2.47 → 3.3.0

package/es/components/Avatar/Avatar.stories.js

@@ -110,6 +110,30 @@ export const large = () => /*#__PURE__*/_jsxs(Spacer, {
   })]
 });
 large.storyName = "Large";
+export const customSize = () => /*#__PURE__*/_jsxs(Flex, {
+  gap: "r",
+  children: [/*#__PURE__*/_jsx(Avatar, {
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
+    imageAlt: "Avatar for Ayden Lundgre",
+    customSize: "28px"
+  }), /*#__PURE__*/_jsx(Avatar, {
+    image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
+    imageAlt: "Avatar for Innovation Lab",
+    customSize: "28px",
+    shape: "square"
+  }), /*#__PURE__*/_jsx(Avatar, {
+    image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
+    imageAlt: "Avatar for Innovation Lab",
+    customSize: "28px",
+    shape: "hexagon"
+  }), /*#__PURE__*/_jsx(Avatar, {
+    image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
+    imageAlt: "Avatar for Tag",
+    customSize: "28px",
+    shape: "tag"
+  })]
+});
+large.storyName = "customSize";
 export const titleLevel = () => /*#__PURE__*/_jsx(Spacer, {
   my: 4,
   children: /*#__PURE__*/_jsx(Avatar, {
@@ -379,6 +403,11 @@ large.__docgenInfo = {
   "methods": [],
   "displayName": "large"
 };
+customSize.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "customSize"
+};
 titleLevel.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Avatar/index.js

@@ -63,8 +63,8 @@ const Image = styled("img").withConfig({
   displayName: "Avatar__Image",
   componentId: "sc-1wtet2j-2"
 })(props => css({
-  width: themeGet("appScale.avatarDefault")(props),
-  height: themeGet("appScale.avatarDefault")(props),
+  width: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
+  height: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
   flex: "0 0 auto",
   backgroundColor: themeGet("colors.greyLighter")(props),
   border: "0",
@@ -102,12 +102,12 @@ const Shape = styled("div").withConfig({
   displayName: "Avatar__Shape",
   componentId: "sc-1wtet2j-3"
 })(props => css({
-  width: themeGet("appScale.avatarDefault")(props),
-  height: themeGet("appScale.avatarDefault")(props),
+  width: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
+  height: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
   fontWeight: themeGet("fontWeights.2")(props),
   flex: "0 0 auto",
-  backgroundColor: themeGet("colors.greyLighter")(props),
-  color: props.whiteInitials ? themeGet("colors.white")(props) : themeGet("colors.greyDarkest")(props),
+  background: `linear-gradient(135deg, ${themeGet("colors.primaryLightest")(props)}, ${themeGet("colors.primaryLight")(props)})`,
+  color: themeGet("colors.white")(props),
   border: "0",
   display: "flex",
   borderRadius: "50%",
@@ -266,7 +266,7 @@ const Avatar = _ref2 => {
     shape,
     localTime,
     uppercase = true,
-    whiteInitials,
+    customSize,
     ...props
   } = _ref2;
   const hasTitle = !!title;
@@ -287,13 +287,14 @@ const Avatar = _ref2 => {
       src: image,
       sizing: sizing,
       shape: shape,
-      alt: alt
+      alt: alt,
+      customSize: customSize
     }) : /*#__PURE__*/_jsx(Shape, {
       shape: shape,
       sizing: sizing,
+      customSize: customSize,
       type: type,
       className: type == "inverted" ? "inverted" : "",
-      whiteInitials: whiteInitials,
       uppercase: uppercase,
       children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
         icon: ["fas", "users"]
@@ -342,6 +343,8 @@ const Avatar = _ref2 => {
 Avatar.propTypes = {
   /** Changes the sizing of the Avatar component */
   sizing: PropTypes.oneOf(["small", "large", "default"]),
+  /* If specifying custom sizing, provide a string with the size in pixels */
+  customSize: PropTypes.string,
   /** Changes the shape of the Avatar component */
   shape: PropTypes.oneOf(["square", "hexagon", "tag", "default"]),
   /** Specifies the inverted type for dark backgrounds */
@@ -362,8 +365,6 @@ Avatar.propTypes = {
   initials: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   /** Specifies custom content for avatar subtitle */
   subtitleContent: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
-  /** Turns white initials on for custom `Circle` backgrounds */
-  whiteInitials: PropTypes.bool,
   /** Specifies whether to use uppercase for initials */
   uppercase: PropTypes.bool,
   /** Specifies title / name as just plain text, or an element like a hyperlink or react router link */
@@ -440,6 +441,13 @@ Avatar.__docgenInfo = {
       },
       "required": false
     },
+    "customSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "shape": {
       "description": "Changes the shape of the Avatar component",
       "type": {
@@ -513,13 +521,6 @@ Avatar.__docgenInfo = {
       },
       "required": false
     },
-    "whiteInitials": {
-      "description": "Turns white initials on for custom `Circle` backgrounds",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
     "title": {
       "description": "Specifies title / name as just plain text, or an element like a hyperlink or react router link",
       "type": {

package/es/components/Box/index.js

@@ -1,12 +1,12 @@
 import React, { forwardRef } from "react";
 import styled, { ThemeProvider } from "styled-components";
-import { space, layout, color, border, variant, compose } from "styled-system";
+import { space, layout, flexbox, color, border, variant, compose } from "styled-system";
 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";
 import { jsx as _jsx } from "react/jsx-runtime";
-const boxStyles = compose(space, layout, color, border);
+const boxStyles = compose(space, layout, flexbox, color, border);
 const BoxWrapper = styled("div").withConfig({
   shouldForwardProp,
   displayName: "Box__BoxWrapper",

package/es/components/Flex/index.js

@@ -1,12 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
-import { space, layout, flexbox, compose } from "styled-system";
+import { space, layout, flexbox, color, border, compose } from "styled-system";
 import { css } from "@styled-system/css";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import styledPropTypes from "@styled-system/prop-types";
 import { jsx as _jsx } from "react/jsx-runtime";
-const FlexStyles = compose(space, layout, flexbox);
+const FlexStyles = compose(space, layout, flexbox, color, border);
 const FlexWrapper = styled("div").withConfig({
   shouldForwardProp,
   displayName: "Flex__FlexWrapper",

package/es/components/FloatingPanels/FloatingPanels.stories.js

@@ -0,0 +1,80 @@
+import React from "react";
+import FloatingPanels from ".";
+import Box from "../Box";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import TextInput from "../TextInput";
+import Toggle from "../Toggle";
+import Spacer from "../Spacer";
+import Badge from "../Badge";
+import { P } from "../Typography";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+library.add(far);
+export default {
+  title: "Components/FloatingPanels",
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    minHeight: "600px",
+    children: storyFn()
+  })],
+  component: FloatingPanels
+};
+const Properties = () => {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Spacer, {
+      mb: "r",
+      children: [/*#__PURE__*/_jsx(Badge, {
+        variant: "secondary",
+        children: "Blah"
+      }), /*#__PURE__*/_jsx(P, {
+        children: "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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      }), /*#__PURE__*/_jsx(Toggle, {
+        id: "toggle1",
+        label: "Group items",
+        small: true
+      }), /*#__PURE__*/_jsx(Toggle, {
+        id: "toggle2",
+        label: "Show teams",
+        small: true
+      })]
+    }), /*#__PURE__*/_jsx(TextInput, {
+      id: "textInput1",
+      type: "text",
+      label: "Full name",
+      placeholder: "E.g. John Smith",
+      my: "20px"
+    }, "textInput1")]
+  });
+};
+const panels = [{
+  id: "view-options",
+  iconName: "eye",
+  title: "View Options",
+  defaultExpanded: true,
+  content: /*#__PURE__*/_jsx(Properties, {})
+}, {
+  id: "properties",
+  iconName: "sun",
+  title: "Properties",
+  content: /*#__PURE__*/_jsx(Properties, {})
+}, {
+  id: "person-details",
+  iconName: "user",
+  title: "Person Details",
+  content: /*#__PURE__*/_jsx(Properties, {})
+}];
+export const defaultFloatingPanels = () => {
+  return /*#__PURE__*/_jsx(FloatingPanels, {
+    panels: panels,
+    containerHeight: 500,
+    position: {
+      right: 20,
+      top: 20
+    }
+  });
+};
+defaultFloatingPanels.storyName = "Default Floating Panels";
+defaultFloatingPanels.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "defaultFloatingPanels"
+};

package/es/components/FloatingPanels/FloatingPanels.styles.js

@@ -0,0 +1,107 @@
+import styled from "styled-components";
+import { themeGet } from "@styled-system/theme-get";
+export const Container = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__Container",
+  componentId: "sc-1by914f-0"
+})(["z-index:2;position:absolute;display:flex;flex-direction:column;gap:8px;width:300px;max-height:", ";", ""], _ref => {
+  let {
+    containerHeight
+  } = _ref;
+  return containerHeight ? `${containerHeight}px` : "100%";
+}, _ref2 => {
+  let {
+    position
+  } = _ref2;
+  return Object.entries(position).filter(_ref3 => {
+    let [, value] = _ref3;
+    return value !== undefined;
+  }).map(_ref4 => {
+    let [key, value] = _ref4;
+    return `${key}: ${typeof value === "number" ? `${value}px` : value};`;
+  }).join("\n");
+});
+export const PanelWrapper = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__PanelWrapper",
+  componentId: "sc-1by914f-1"
+})(["background:white;border:", ";border-radius:8px;border-radius:0 0 8px 8px;box-shadow:", ";overflow-y:", ";padding:", ";margin-top:46px;max-height:", ";transition:max-height 0.3s ease-in-out;"], _ref5 => {
+  let {
+    isExpanded,
+    theme
+  } = _ref5;
+  return isExpanded ? `1px solid ${theme.colors.greyLighter}` : "1px solid white";
+}, _ref6 => {
+  let {
+    isExpanded
+  } = _ref6;
+  return isExpanded ? "0 1px 3px rgba(0, 0, 0, 0.1)" : "none";
+}, _ref7 => {
+  let {
+    isExpanded
+  } = _ref7;
+  return isExpanded ? "auto" : "hidden";
+}, _ref8 => {
+  let {
+    isExpanded
+  } = _ref8;
+  return isExpanded ? "0 12px 12px 12px" : "0 12px";
+}, _ref9 => {
+  let {
+    isExpanded
+  } = _ref9;
+  return isExpanded ? "none" : "0";
+});
+export const PanelHeader = styled.button.withConfig({
+  displayName: "FloatingPanelsstyles__PanelHeader",
+  componentId: "sc-1by914f-2"
+})(["font-family:", ";box-shadow:0 0 4px rgba(0,0,0,0.1);color:", ";width:100%;margin-left:-13px;margin-top:-46px;border-radius:", ";appearance:none;background-color:white;display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 12px;height:46px;position:absolute;width:300px;border-bottom:", ";border:solid 1px ", ";z-index:1;cursor:pointer;user-select:none;transition:padding 0.3s ease-in-out;&:focus{outline:none;}"], themeGet("fonts.main"), themeGet("colors.greyDarkest"), _ref10 => {
+  let {
+    isExpanded
+  } = _ref10;
+  return isExpanded ? "8px 8px 0 0" : "8px";
+}, _ref11 => {
+  let {
+    isExpanded,
+    theme
+  } = _ref11;
+  return isExpanded ? `1px solid ${theme.colors.greyLighter}` : "none";
+}, themeGet("colors.greyLighter"));
+export const HeaderContent = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__HeaderContent",
+  componentId: "sc-1by914f-3"
+})(["display:flex;align-items:center;gap:12px;"]);
+export const Title = styled.span.withConfig({
+  displayName: "FloatingPanelsstyles__Title",
+  componentId: "sc-1by914f-4"
+})(["font-size:14px;font-weight:500;"]);
+export const IconWrapper = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__IconWrapper",
+  componentId: "sc-1by914f-5"
+})(["background-color:", ";width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;"], themeGet("colors.primary"));
+export const ChevronWrapper = styled(IconWrapper).withConfig({
+  displayName: "FloatingPanelsstyles__ChevronWrapper",
+  componentId: "sc-1by914f-6"
+})(["transition:background-color 0.3s ease-in-out;background-color:", ";"], _ref12 => {
+  let {
+    isHovered
+  } = _ref12;
+  return isHovered ? themeGet("colors.greyLighter") : "white";
+});
+export const PanelContent = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__PanelContent",
+  componentId: "sc-1by914f-7"
+})(["padding-top:12px;display:", ";height:", ";opacity:", ";"], _ref13 => {
+  let {
+    isExpanded
+  } = _ref13;
+  return isExpanded ? "block" : "none";
+}, _ref14 => {
+  let {
+    isExpanded
+  } = _ref14;
+  return isExpanded ? "100%" : "0";
+}, _ref15 => {
+  let {
+    isExpanded
+  } = _ref15;
+  return isExpanded ? "1" : "0";
+});

package/es/components/FloatingPanels/Panel.js

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Icon from "../Icon";
+import { PanelWrapper, PanelHeader, HeaderContent, Title, IconWrapper, ChevronWrapper, PanelContent } from "./FloatingPanels.styles";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Panel = _ref => {
+  let {
+    iconName,
+    title,
+    containerHeight,
+    content,
+    defaultExpanded = false
+  } = _ref;
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const arrowIcon = isExpanded ? "chevron-up" : "chevron-down";
+  const [isHovered, setIsHovered] = useState(false);
+  return /*#__PURE__*/_jsxs(PanelWrapper, {
+    containerHeight: containerHeight,
+    isExpanded: isExpanded,
+    children: [/*#__PURE__*/_jsxs(PanelHeader, {
+      onClick: () => setIsExpanded(!isExpanded),
+      isExpanded: isExpanded,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onFocus: () => setIsHovered(true),
+      onBlur: () => setIsHovered(false),
+      children: [/*#__PURE__*/_jsxs(HeaderContent, {
+        children: [/*#__PURE__*/_jsx(IconWrapper, {
+          children: /*#__PURE__*/_jsx(Icon, {
+            size: "xs",
+            color: "white",
+            icon: ["far", iconName]
+          })
+        }), /*#__PURE__*/_jsx(Title, {
+          children: title
+        })]
+      }), /*#__PURE__*/_jsx(ChevronWrapper, {
+        isHovered: isHovered,
+        children: /*#__PURE__*/_jsx(Icon, {
+          size: "sm",
+          icon: ["fas", arrowIcon],
+          color: "greyDarker"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(PanelContent, {
+      isExpanded: isExpanded,
+      children: content
+    })]
+  });
+};
+Panel.propTypes = {
+  iconName: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.node.isRequired,
+  defaultExpanded: PropTypes.bool,
+  containerHeight: PropTypes.number,
+  isExpanded: PropTypes.bool.isRequired
+};
+Panel.defaultProps = {
+  defaultExpanded: false
+};
+Panel.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Panel",
+  "props": {
+    "defaultExpanded": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "iconName": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "title": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "content": {
+      "description": "",
+      "type": {
+        "name": "node"
+      },
+      "required": true
+    },
+    "containerHeight": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "isExpanded": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": true
+    }
+  }
+};
+export default Panel;

package/es/components/FloatingPanels/index.js

@@ -0,0 +1,141 @@
+import React from "react";
+import { Container } from "./FloatingPanels.styles";
+import Panel from "./Panel";
+import PropTypes from "prop-types";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FloatingPanels = _ref => {
+  let {
+    panels,
+    containerHeight,
+    position = {
+      right: 20,
+      top: 20
+    }
+  } = _ref;
+  return /*#__PURE__*/_jsx(Container, {
+    containerHeight: containerHeight,
+    position: position,
+    children: panels.map(panel => /*#__PURE__*/_jsx(Panel, {
+      ...panel,
+      containerHeight: containerHeight
+    }, panel?.id))
+  });
+};
+FloatingPanels.propTypes = {
+  panels: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    iconName: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    content: PropTypes.node.isRequired,
+    defaultExpanded: PropTypes.bool
+  })).isRequired,
+  containerHeight: PropTypes.number,
+  position: PropTypes.shape({
+    top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    right: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    left: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  })
+};
+FloatingPanels.defaultProps = {
+  position: {
+    right: 20,
+    top: 20
+  }
+};
+FloatingPanels.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "FloatingPanels",
+  "props": {
+    "position": {
+      "defaultValue": {
+        "value": "{ right: 20, top: 20 }",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "shape",
+        "value": {
+          "top": {
+            "name": "union",
+            "value": [{
+              "name": "number"
+            }, {
+              "name": "string"
+            }],
+            "required": false
+          },
+          "right": {
+            "name": "union",
+            "value": [{
+              "name": "number"
+            }, {
+              "name": "string"
+            }],
+            "required": false
+          },
+          "bottom": {
+            "name": "union",
+            "value": [{
+              "name": "number"
+            }, {
+              "name": "string"
+            }],
+            "required": false
+          },
+          "left": {
+            "name": "union",
+            "value": [{
+              "name": "number"
+            }, {
+              "name": "string"
+            }],
+            "required": false
+          }
+        }
+      },
+      "required": false
+    },
+    "panels": {
+      "description": "",
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": true
+            },
+            "iconName": {
+              "name": "string",
+              "required": true
+            },
+            "title": {
+              "name": "string",
+              "required": true
+            },
+            "content": {
+              "name": "node",
+              "required": true
+            },
+            "defaultExpanded": {
+              "name": "bool",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": true
+    },
+    "containerHeight": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    }
+  }
+};
+export default FloatingPanels;