orcs-design-system 3.5.5 → 3.5.7

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

@@ -1,9 +1,11 @@
 import { keyframes } from "styled-components";
 export const crossFadeIn = /*#__PURE__*/keyframes(["0%{opacity:0;}75%{opacity:0;}100%{opacity:1;}"]);
-export const beforeDotCollapsing = /*#__PURE__*/keyframes(["0%{transform:translate(0,-6px);}50%{transform:translate(0,0);}100%{transform:translate(0,0);}"]);
-export const beforeDotExpanding = /*#__PURE__*/keyframes(["0%{transform:translate(0,0);}50%{transform:translate(0,0);}100%{transform:translate(0,-6px);}"]);
-export const afterDotCollapsing = /*#__PURE__*/keyframes(["0%{transform:translate(0,6px);}50%{transform:translate(0,0);}100%{transform:translate(0,0);}"]);
-export const afterDotExpanding = /*#__PURE__*/keyframes(["0%{transform:translate(0,0);}50%{transform:translate(0,0);}100%{transform:translate(0,6px);}"]);
+const DOT_OFFSET = 7; // Match index.js DOT_OFFSET
+
+export const beforeDotCollapsing = /*#__PURE__*/keyframes(["0%{transform:translateY(-", "px);}50%{transform:translateY(0);}100%{transform:translateY(0);}"], DOT_OFFSET);
+export const beforeDotExpanding = /*#__PURE__*/keyframes(["0%{transform:translateY(0);}50%{transform:translateY(0);}100%{transform:translateY(-", "px);}"], DOT_OFFSET);
+export const afterDotCollapsing = /*#__PURE__*/keyframes(["0%{transform:translateY(", "px);}50%{transform:translateY(0);}100%{transform:translateY(0);}"], DOT_OFFSET);
+export const afterDotExpanding = /*#__PURE__*/keyframes(["0%{transform:translateY(0);}50%{transform:translateY(0);}100%{transform:translateY(", "px);}"], DOT_OFFSET);
 export const beforeCrossExpanding = /*#__PURE__*/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 = /*#__PURE__*/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 = /*#__PURE__*/keyframes(["0%{height:4px;transform:rotate(45deg);}50%{height:4px;transform:rotate(45deg);}100%{height:18px;transform:translate(0,-7px) rotate(45deg);}"]);

package/es/components/ActionsMenu/index.js

@@ -8,7 +8,7 @@ import React, { useState, useImperativeHandle, createContext, useContext, useMem
 import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import { NavLink } from "react-router-dom";
-import { space, layout, variant } from "styled-system";
+import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 import { commonKeys } from "../../hooks/keypress";
 import useActionMenu from "./useActionMenu";
@@ -28,70 +28,18 @@ const Wrapper = /*#__PURE__*/styled.div.withConfig({
 const Control = /*#__PURE__*/styled.button.withConfig({
   displayName: "Control",
   componentId: "sc-yvbni2-2"
-})(["position:relative;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;transition:", ";cursor:", ";", " &[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("transition.transitionDefault")(props), props => props.disabled ? "not-allowed" : "pointer", props => variant({
-  variants: {
-    default: {
-      width: "30px",
-      height: "30px",
-      borderRadius: themeGet("radii.2")(props),
-      border: "solid 1px",
-      backgroundColor: props.disabled ? themeGet("colors.greyLighter")(props) : "white",
-      borderColor: props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyLight")(props),
-      "&:hover, &:focus": {
-        outline: 0,
-        borderColor: props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.primary")(props)
-      }
-    },
-    circle: {
-      width: "35px",
-      height: "35px",
-      borderRadius: "50%",
-      border: "solid 2px",
-      backgroundColor: props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props),
-      borderColor: props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props),
-      "&:hover, &:focus": {
-        outline: 0,
-        borderColor: props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.primary")(props)
-      }
-    }
-  }
-}), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
+})(["position:relative;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:", ";width:", ";height:", ";border-radius:", ";border:", ";", " ", " &: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("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? "not-allowed" : "pointer", props => props.variant === "circle" ? "35px" : "30px", props => props.variant === "circle" ? "35px" : "30px", props => props.variant === "circle" ? "50%" : themeGet("radii.2")(props), props => props.variant === "circle" ? "solid 2px" : "solid 1px", props => props.variant === "default" && css(["background-color:", ";border-color:", ";"], props.disabled ? themeGet("colors.greyLighter")(props) : "white", props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyLight")(props)), props => props.variant === "circle" && css(["background-color:", ";border-color:", ";"], props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props), props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props)), props => props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.primary")(props), props => !props.disabled && props.variant === "default" && css(["background-color:", ";"], themeGet("colors.greyLightest")(props)), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
+const DOT_SIZE = 4;
+const DOT_OFFSET = 7; // Distance from center dot to top/bottom dots
+
 const Dots = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dots",
   componentId: "sc-yvbni2-3"
-})(["border-radius:2px;height:4px;width:4px;&::before,&::after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;}&::before{transform:translate(0,-6px);}&::after{transform:translate(0,6px);}", ""], props => variant({
-  variants: {
-    default: {
-      backgroundColor: themeGet("colors.greyDarker")(props),
-      "&::before, &::after": {
-        backgroundColor: themeGet("colors.greyDarker")(props)
-      }
-    },
-    circle: {
-      backgroundColor: themeGet("colors.white")(props),
-      "&::before, &::after": {
-        backgroundColor: themeGet("colors.white")(props)
-      }
-    }
-  }
-}));
+})(["position:relative;border-radius:50%;height:", "px;width:", "px;background-color:", ";transform:translateZ(0);&::before,&::after{content:\"\";display:block;position:absolute;left:0;top:0;border-radius:50%;height:", "px;width:", "px;background-color:", ";}&::before{transform:translateY(-", "px);}&::after{transform:translateY(", "px);}"], DOT_SIZE, DOT_SIZE, props => props.variant === "circle" ? themeGet("colors.white")(props) : themeGet("colors.greyDarker")(props), DOT_SIZE, DOT_SIZE, props => props.variant === "circle" ? themeGet("colors.white")(props) : themeGet("colors.greyDarker")(props), DOT_OFFSET, DOT_OFFSET);
 const Cross = /*#__PURE__*/styled.div.withConfig({
   displayName: "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;}&::before{transform:rotate(-45deg);}&::after{transform:rotate(45deg);}", ""], crossFadeIn, props => variant({
-  variants: {
-    default: {
-      "&::before, &::after": {
-        backgroundColor: themeGet("colors.greyDarker")(props)
-      }
-    },
-    circle: {
-      "&::before, &::after": {
-        backgroundColor: themeGet("colors.white")(props)
-      }
-    }
-  }
-}));
+})(["animation:1500ms ", " ease-in-out forwards;opacity:0;position:absolute;left:calc(50% - 2px);top:calc(50% - 2px);pointer-events:none;&::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 => props.variant === "circle" ? themeGet("colors.white")(props) : themeGet("colors.greyDarker")(props));
 const Menu = /*#__PURE__*/styled.div.withConfig({
   displayName: "Menu",
   componentId: "sc-yvbni2-5"

package/es/components/Icon/index.js

@@ -16,11 +16,11 @@ import { themeGet } from "@styled-system/theme-get";
  *
  * For full list of icons see here: <https://fontawesome.com/icons?d=listing>.
  *
- * Some examples of icons with props for size, colour or animation below. For full usage guidelines view the readme at https://github.com/FortAwesome/react-fontawesome#usage
+ * Some examples of icons with props for size, colour or animation below. For full usage guidelines view the readme at <https://github.com/FortAwesome/react-fontawesome#usage>
  *
  * Note: There are two different icon set weightings available in the Font Awesome free icons sets. Regular and solid. To use we need to specify which set to use by prefixing icon with either "far" or "fas" as shown in example code below.
  *
- * To get started you can import the icons into Font Awesome library. Alternatively if you want to use their full icon set you need to purchase a PRO plan from Font awesome, and can install the full pro icon packages in your app. See the readme here for more details on how to use and install PRO: <https://github.com/orchestrated-io/orcs-design-system>
+ * To get started you can import the icons into Font Awesome library. Alternatively if you want to use their full icon set you need to purchase a PRO plan from Font Awesome, and can install the full pro icon packages in your app. See the readme here for more details on how to use and install PRO: <https://github.com/orchestrated-io/orcs-design-system>
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const IconStyles = compose(space, color, typography);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.5.5",
+  "version": "3.5.7",
   "engines": {
     "node": ">=20.0.0"
   },
@@ -91,22 +91,22 @@
     "@fortawesome/react-fontawesome": "git://github.com/FortAwesome/react-fontawesome.git#0.1.13",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-docs": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-toolbars": "^8.6.14",
-    "@storybook/addon-viewport": "^8.6.14",
+    "@storybook/addon-a11y": "^8.6.15",
+    "@storybook/addon-actions": "^8.6.15",
+    "@storybook/addon-docs": "^8.6.15",
+    "@storybook/addon-links": "^8.6.15",
+    "@storybook/addon-toolbars": "^8.6.15",
+    "@storybook/addon-viewport": "^8.6.15",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/components": "^8.6.14",
-    "@storybook/core-events": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
+    "@storybook/blocks": "^8.6.15",
+    "@storybook/components": "^8.6.15",
+    "@storybook/core-events": "^8.6.15",
+    "@storybook/manager-api": "^8.6.15",
     "@storybook/mdx1-csf": "^1.0.0",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-webpack5": "^8.6.14",
+    "@storybook/react": "^8.6.15",
+    "@storybook/react-webpack5": "^8.6.15",
     "@storybook/storybook-deployer": "2.8.16",
-    "@storybook/theming": "^8.6.14",
+    "@storybook/theming": "^8.6.15",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^14.3.1",
     "@types/jest": "^29.5.14",
@@ -141,7 +141,7 @@
     "react-docgen": "^7.0.3",
     "react-dom": "^18.3.1",
     "shelljs": "^0.8.5",
-    "storybook": "^8.6.14",
+    "storybook": "^8.6.15",
     "style-loader": "^2.0.0",
     "webpack": "^5.101.1",
     "webpack-cli": "^5.1.4"
@@ -199,4 +199,4 @@
       "\\.(css|less)$": "identity-obj-proxy"
     }
   }
-}
+}