orcs-design-system 3.2.46 → 3.2.48

package/es/components/ActionsMenu/ActionsMenu.animations.js

@@ -0,0 +1,10 @@
+import { keyframes } from "styled-components";
+export const crossFadeIn = keyframes(["0%{opacity:0;}75%{opacity:0;}100%{opacity:1;}"]);
+export const beforeDotCollapsing = keyframes(["0%{transform:translate(0,-6px);}50%{transform:translate(0,0);}100%{transform:translate(0,0);}"]);
+export const beforeDotExpanding = keyframes(["0%{transform:translate(0,0);}50%{transform:translate(0,0);}100%{transform:translate(0,-6px);}"]);
+export const afterDotCollapsing = keyframes(["0%{transform:translate(0,6px);}50%{transform:translate(0,0);}100%{transform:translate(0,0);}"]);
+export const afterDotExpanding = keyframes(["0%{transform:translate(0,0);}50%{transform:translate(0,0);}100%{transform:translate(0,6px);}"]);
+export const beforeCrossExpanding = keyframes(["0%{height:4px;transform:rotate(-45deg);}50%{height:4px;transform:rotate(-45deg);}100%{height:18px;transform:translate(0,-7px) rotate(-45deg);}"]);
+export const beforeCrossCollapsing = keyframes(["0%{height:18px;transform:translate(0,-7px) rotate(-45deg);}50%{height:4px;transform:rotate(-45deg);}100%{height:4px;transform:rotate(-45deg);}"]);
+export const afterCrossExpanding = keyframes(["0%{height:4px;transform:rotate(45deg);}50%{height:4px;transform:rotate(45deg);}100%{height:18px;transform:translate(0,-7px) rotate(45deg);}"]);
+export const afterCrossCollapsing = keyframes(["0%{height:18px;transform:translate(0,-7px) rotate(45deg);}50%{height:4px;transform:rotate(45deg);}100%{height:4px;transform:rotate(45deg);}"]);

package/es/components/ActionsMenu/ActionsMenu.stories.js

@@ -104,6 +104,7 @@ const MenuItems = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         if (id === "other") {
           return /*#__PURE__*/_jsx(ActionsMenuItem, {
             type: "button",
+            id: "other",
             selected: selectedReason === id,
             onClick: clickOther,
             children: /*#__PURE__*/_jsxs(Flex, {
@@ -127,7 +128,6 @@ const MenuItems = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       id: "editableContent",
       p: "s",
       children: [/*#__PURE__*/_jsx(TextArea, {
-        inverted: true,
         id: "TextArea01",
         label: "Reason for rejection",
         cols: "35",

package/es/components/ActionsMenu/index.js

@@ -1,16 +1,15 @@
 import React, { useState, useImperativeHandle, createContext, useContext, useMemo, useId, useLayoutEffect } from "react";
-import styled, { css, keyframes, ThemeProvider } from "styled-components";
+import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 import { commonKeys } from "../../hooks/keypress";
 import useActionMenu from "./useActionMenu";
+import { crossFadeIn, beforeDotCollapsing, beforeDotExpanding, afterDotCollapsing, afterDotExpanding, beforeCrossExpanding, beforeCrossCollapsing, afterCrossExpanding, afterCrossCollapsing } from "./ActionsMenu.animations";
 import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
 import { getFloatingUiRootElement, getFloatingUiZIndex } from "../../utils/floatingUiHelpers";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ActionMenuContext = /*#__PURE__*/createContext({});
-const crossTransform1 = keyframes(["0%{transform:translate(0,-6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(-45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(-45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
-const crossTransform2 = keyframes(["0%{transform:translate(0,6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
 const StyledActionsMenuContainer = styled.div.withConfig({
   displayName: "ActionsMenu__StyledActionsMenuContainer",
   componentId: "sc-yvbni2-0"
@@ -22,15 +21,19 @@ const Wrapper = styled.div.withConfig({
 const Control = styled.button.withConfig({
   displayName: "ActionsMenu__Control",
   componentId: "sc-yvbni2-2"
-})(["position:relative;background-color:", ";border:none;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;border-radius:", ";transition:", ";cursor:pointer;width:30px;height:30px;&:hover,&:focus{outline:0;background-color:", ";}&[data-state=\"open\"] .action-menu-icon{&:before{animation:400ms ", " ease-in-out forwards;}&:after{animation:400ms ", " ease-in-out forwards;}}"], props => themeGet("colors.greyLighter")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.greyLight")(props), crossTransform1, crossTransform2);
-const Icon = styled.div.withConfig({
-  displayName: "ActionsMenu__Icon",
+})(["position:relative;background-color:", ";border:solid 1px ", ";display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;border-radius:", ";transition:", ";cursor:pointer;width:30px;height:30px;&:hover,&:focus{outline:0;border-color:", ";}&[data-state=\"open\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"open\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}"], props => themeGet("colors.white")(props), props => themeGet("colors.greyLight")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
+const Dots = styled.div.withConfig({
+  displayName: "ActionsMenu__Dots",
   componentId: "sc-yvbni2-3"
-})(["border-radius:2px;height:4px;width:4px;background-color:", ";&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";transition:", ";transform-origin:50% 50%;}&:before{transform:translate(0,-6px) scaleX(1);}&:after{transform:translate(0,6px) scaleX(1);}"], props => themeGet("colors.greyDarker")(props), props => themeGet("colors.greyDarker")(props), props => themeGet("transition.transitionDefault")(props));
+})(["border-radius:2px;height:4px;width:4px;background-color:", ";&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";}&:before{transform:translate(0,-6px);}&:after{transform:translate(0,6px);}"], props => themeGet("colors.greyDarker")(props), props => themeGet("colors.greyDarker")(props));
+const Cross = styled.div.withConfig({
+  displayName: "ActionsMenu__Cross",
+  componentId: "sc-yvbni2-4"
+})(["animation:1500ms ", " ease-in-out forwards;opacity:0;position:absolute;left:calc(50% - 2px);top:calc(50% - 2px);&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";}&:before{transform:rotate(-45deg);}&:after{transform:rotate(45deg);}"], crossFadeIn, props => themeGet("colors.greyDarker")(props));
 const Menu = styled.div.withConfig({
   displayName: "ActionsMenu__Menu",
-  componentId: "sc-yvbni2-4"
-})(["display:block;width:", ";z-index:5;background-color:", ";border-radius:", ";"], props => props.menuWidth ? props.menuWidth : "auto", props => themeGet("colors.greyDarker")(props), props => themeGet("radii.2")(props));
+  componentId: "sc-yvbni2-5"
+})(["display:block;width:", ";z-index:5;background-color:", ";border:1px solid ", ";box-shadow:", ";border-radius:", ";"], props => props.menuWidth ? props.menuWidth : "auto", themeGet("colors.white"), themeGet("colors.greyLight"), themeGet("shadows.boxDefault"), props => themeGet("radii.2")(props));
 export const ActionsMenuHeading = styled(props => {
   const {
     actionMenu
@@ -56,8 +59,8 @@ export const ActionsMenuHeading = styled(props => {
   role: "button"
 }).withConfig({
   displayName: "ActionsMenu__ActionsMenuHeading",
-  componentId: "sc-yvbni2-5"
-})(["color:", ";padding:8px;width:100%;font-size:", ";font-weight:", ";border-bottom:solid 1px ", ";white-space:nowrap;cursor:", ";"], props => themeGet("colors.white")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fontWeights.1")(props), props => themeGet("colors.greyDarkest")(props), props => props.canClick ? "pointer" : "default");
+  componentId: "sc-yvbni2-6"
+})(["color:", ";padding:8px;width:100%;font-size:", ";font-weight:", ";border-bottom:solid 1px ", ";white-space:nowrap;cursor:", ";"], props => themeGet("colors.greyDark")(props), props => themeGet("fontSizes.0")(props), props => themeGet("fontWeights.1")(props), props => themeGet("colors.greyLighter")(props), props => props.canClick ? "pointer" : "default");
 export const ActionsMenuItem = styled(props => {
   const {
     id,
@@ -102,12 +105,12 @@ export const ActionsMenuItem = styled(props => {
   role: "menuitem"
 }).withConfig({
   displayName: "ActionsMenu__ActionsMenuItem",
-  componentId: "sc-yvbni2-6"
+  componentId: "sc-yvbni2-7"
 })(["", ""], _ref => {
   let {
     Component
   } = _ref;
-  return Component ? "" : css(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover,&:focus{outline:0;background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}&:only-child{border-radius:", ";}"], props => props.selected ? themeGet("colors.successDark")(props) : "transparent", props => themeGet("colors.greyDarkest")(props), props => themeGet("colors.white")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fonts.main")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props));
+  return Component ? "" : css(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover{background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}&:only-child{border-radius:", ";}&#other{padding:6px 8px;}"], props => props.selected ? themeGet("colors.success20")(props) : "transparent", props => themeGet("colors.white")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("fontSizes.0")(props), props => themeGet("fontSizes.0")(props), props => themeGet("fonts.main")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryLightest")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props), props => themeGet("radii.2")(props));
 });
 export const ActionsMenuBody = _ref2 => {
   let {
@@ -153,11 +156,13 @@ export const ActionsMenuBody = _ref2 => {
       "data-testid": dataTestId
     })
   }), [ariaLabel, onTriggerFocus, id, actionMenu, onToggle, props, triggerRef, dataTestId]);
-  let triggerComponent = /*#__PURE__*/_jsx(Control, {
+  let triggerComponent = /*#__PURE__*/_jsxs(Control, {
     ...triggerProps,
-    children: /*#__PURE__*/_jsx(Icon, {
-      className: "action-menu-icon"
-    })
+    children: [/*#__PURE__*/_jsx(Dots, {
+      className: "actionsMenu__dots"
+    }), /*#__PURE__*/_jsx(Cross, {
+      className: "actionsMenu__cross"
+    })]
   });
   if (renderTrigger) {
     triggerComponent = renderTrigger(triggerProps);

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:fixed;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;

package/es/components/Select/index.js

@@ -306,6 +306,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
         padding: "6.5px 6px 6.5px 5px",
         display: state.data.isFixed ? "none" : provided.display,
         cursor: "pointer",
+        alignSelf: "stretch",
         borderRadius: "0 15px 15px 0",
         transition: themeGet("transition.transitionDefault")({
           theme

package/es/components/Tag/Tag.stories.js

@@ -203,11 +203,21 @@ export const withTagType = () => /*#__PURE__*/_jsxs(Spacer, {
     children: "product design"
   })]
 });
-export const smallVariant = () => /*#__PURE__*/_jsx(Tag, {
-  selected: true,
-  tagType: "specialist",
-  small: true,
-  children: "Agile Coach"
+export const smallVariant = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "2px",
+  children: [/*#__PURE__*/_jsx(Tag, {
+    selected: true,
+    tagType: "specialist",
+    small: true,
+    children: "Agile Coach"
+  }), /*#__PURE__*/_jsx(Tag, {
+    selected: true,
+    showRemove: true,
+    showEdit: true,
+    tagType: "Project",
+    small: true,
+    children: "Infracore 2.0"
+  })]
 });
 export const highlightedVariant = () => /*#__PURE__*/_jsx(Tag, {
   selected: true,

package/es/components/Tag/index.js

@@ -20,7 +20,7 @@ const TagValue = styled.button.attrs(props => ({
 const TagValueText = styled.div.withConfig({
   displayName: "Tag__TagValueText",
   componentId: "sc-1dh2aa8-2"
-})(["text-decoration:", ";text-overflow:ellipsis;white-space:normal;text-align:left;line-height:", ";padding-bottom:1px;"], props => props.showStrikeThrough ? "line-through" : "none", props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props));
+})(["text-decoration:", ";white-space:normal;text-align:left;line-height:", ";padding-bottom:1px;"], props => props.showStrikeThrough ? "line-through" : "none", props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props));
 const TagActionIconWrapper = styled(TagValue).withConfig({
   displayName: "Tag__TagActionIconWrapper",
   componentId: "sc-1dh2aa8-3"
@@ -28,11 +28,11 @@ const TagActionIconWrapper = styled(TagValue).withConfig({
 const TagRemoveIconWrapper = styled(TagValue).withConfig({
   displayName: "Tag__TagRemoveIconWrapper",
   componentId: "sc-1dh2aa8-4"
-})(["border-radius:0 15px 15px 0;padding:", ";&:focus{z-index:2;}", ""], props => props.small ? "0 8px 3px 7px" : "0 10px 3px 9px", props => props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`, props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props)));
+})(["border-radius:0 15px 15px 0;padding:", ";&:focus{z-index:2;}", ""], props => props.small ? "2px 8px 2px 7px" : "2px 10px 2px 9px", props => props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`, props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props)));
 const TagType = styled.div.withConfig({
   displayName: "Tag__TagType",
   componentId: "sc-1dh2aa8-5"
-})(["text-transform:uppercase;margin-left:", ";padding:", ";line-height:1;white-space:normal;text-align:left;flex:1 1 auto;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], props => props.small ? "6px" : "10px", props => props.small ? themeGet("space.2")(props) : themeGet("space.2")(props), props => themeGet("radii.1")(props), props => props.small ? "1rem" : themeGet("fontSizes.0")(props), props => props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props), props => props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props));
+})(["text-transform:uppercase;margin-left:", ";padding:", ";line-height:1;white-space:nowrap;text-align:left;flex:1 1 auto;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], props => props.small ? "6px" : "10px", props => props.small ? themeGet("space.2")(props) : themeGet("space.2")(props), props => themeGet("radii.1")(props), props => props.small ? "1rem" : themeGet("fontSizes.0")(props), props => props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props), props => props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props));
 const TagAvatar = styled(Avatar).withConfig({
   displayName: "Tag__TagAvatar",
   componentId: "sc-1dh2aa8-6"
@@ -60,6 +60,7 @@ export default function Tag(_ref) {
     showStrikeThrough,
     children,
     isPending,
+    ariaLabel,
     small,
     highlighted,
     personEntity,
@@ -77,8 +78,7 @@ export default function Tag(_ref) {
       showRemove: showRemove,
       onClick: onSelect,
       small: small,
-      "aria-label": "Navigate to tag",
-      title: "Navigate to tag",
+      "aria-label": ariaLabel,
       children: [personEntity && /*#__PURE__*/_jsx(TagAvatar, {
         selected: selected,
         highlighted: highlighted,
@@ -110,11 +110,11 @@ export default function Tag(_ref) {
       showRemove: showRemove,
       onClick: onEdit,
       small: small,
-      "aria-label": "Edit tag",
-      title: "Edit tag",
+      "aria-label": "Edit",
+      title: "Edit",
       children: /*#__PURE__*/_jsx(Icon, {
         icon: ["fas", "pen"],
-        size: "xs"
+        size: "sm"
       })
     }), showInfo && /*#__PURE__*/_jsx(TagActionIconWrapper, {
       selected: selected,
@@ -123,11 +123,11 @@ export default function Tag(_ref) {
       onClick: onInfo,
       showInfo: showInfo,
       small: small,
-      "aria-label": "View tag details",
-      title: "View tag details",
+      "aria-label": "View details",
+      title: "View details",
       children: /*#__PURE__*/_jsx(Icon, {
         icon: ["fas", "info"],
-        size: "xs"
+        size: "sm"
       })
     }), showRemove && /*#__PURE__*/_jsx(TagRemoveIconWrapper, {
       selected: selected,
@@ -135,11 +135,11 @@ export default function Tag(_ref) {
       disabled: disabled,
       onClick: onRemove,
       small: small,
-      "aria-label": "Remove tag",
-      title: "Remove tag",
+      "aria-label": "Remove",
+      title: "Remove",
       children: /*#__PURE__*/_jsx(Icon, {
         icon: ["fas", "times"],
-        size: "xs"
+        size: "sm"
       })
     })]
   });
@@ -183,7 +183,9 @@ Tag.propTypes = {
   /** Applies a highlighted style and colour to the tag */
   highlighted: PropTypes.bool,
   /** Allows you to set a person avatar image or initials */
-  personEntity: PropTypes.object
+  personEntity: PropTypes.object,
+  /** Add ariaLabel text describing to screen readers what this tag button does when pressed. e.g. Apply filter or Navigate to tag.  */
+  ariaLabel: PropTypes.string.isRequired
 };
 Tag.defaultProps = {
   selected: false,
@@ -365,6 +367,13 @@ Tag.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "ariaLabel": {
+      "description": "Add ariaLabel text describing to screen readers what this tag button does when pressed. e.g. Apply filter or Navigate to tag.",
+      "type": {
+        "name": "string"
+      },
+      "required": true
     }
   }
 };

package/es/components.test.js

@@ -21,6 +21,7 @@ test("all components exported", () => {
       "Expandable",
       "Flex",
       "FlexItem",
+      "FloatingPanels",
       "GlobalStyles",
       "Grid",
       "GridItem",

package/es/index.js

@@ -20,6 +20,7 @@ export { default as Divider } from "./components/Divider";
 export { default as Expandable } from "./components/Expandable";
 export { default as Flex, FlexItem } from "./components/Flex";
 export { default as Grid, GridItem } from "./components/Grid";
+export { default as FloatingPanels } from "./components/FloatingPanels";
 export { default as Header } from "./components/Header";
 export { default as HeaderSimple } from "./components/HeaderSimple";
 export { default as Icon } from "./components/Icon";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.46",
+  "version": "3.2.48",
   "engines": {
     "node": "20.12.2"
   },