orcs-design-system 3.2.46 → 3.2.47

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/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/package.json

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