@manuscripts/style-guide 2.0.28-LEAN-4186.1 → 2.0.28-LEAN-4186.3

package/dist/cjs/components/Tooltip.js

@@ -4,13 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
+const react_1 = __importDefault(require("react"));
 const react_tooltip_1 = require("react-tooltip");
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Tooltip = (0, styled_components_1.default)(react_tooltip_1.Tooltip).attrs({
-    positionStrategy: 'fixed',
-    offset: 10,
-}) `
-  &.react-tooltip {
+const StyledTooltipWrapper = styled_components_1.default.div `
+  & .react-tooltip {
     z-index: 1000;
     font-size: 12px;
     line-height: 16px;
@@ -29,3 +27,16 @@ exports.Tooltip = (0, styled_components_1.default)(react_tooltip_1.Tooltip).attr
     }
   }
 `;
+const defaultOpenEvents = ['click', 'mouseenter'];
+const Tooltip = (props) => (react_1.default.createElement(StyledTooltipWrapper, null,
+    react_1.default.createElement(react_tooltip_1.Tooltip, Object.assign({ positionStrategy: "fixed", offset: 10, openEvents: {
+            mouseenter: true,
+            mouseover: true,
+            click: false,
+        }, closeEvents: {
+            mouseleave: true,
+            mouseout: true,
+            blur: true,
+            click: false,
+        } }, props))));
+exports.Tooltip = Tooltip;

package/dist/cjs/components/icons/circle-tick-animation.js

@@ -28,17 +28,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
+const fadeIn = (0, styled_components_1.keyframes) `
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const fadeOut = (0, styled_components_1.keyframes) `
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+`;
 const fillCircle = (0, styled_components_1.keyframes) `
   from {
-    stroke-dashoffset: 283; /* Full circumference */
+    stroke-dashoffset: 283;
   }
   to {
     stroke-dashoffset: 0;
   }
 `;
-const Svg = styled_components_1.default.svg `
-  position: absolute;
-`;
 const drawTick = (0, styled_components_1.keyframes) `
   from {
     stroke-dasharray: 0 100;
@@ -49,29 +66,46 @@ const drawTick = (0, styled_components_1.keyframes) `
     opacity: 1;
   }
 `;
+const Svg = styled_components_1.default.svg `
+  position: absolute;
+  opacity: 0;
+  animation: ${fadeIn} 0.3s ease-out forwards;
+
+  // Start fading out at 2.7s (300ms before the 3s unmount)
+  @keyframes autoFadeOut {
+    0%,
+    90% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+  animation: ${fadeIn} 0.3s ease-out forwards,
+    autoFadeOut 3s ease-in-out forwards;
+`;
 const Circle = styled_components_1.default.circle `
   stroke-dasharray: 283;
-  stroke-dashoffset: 283;
-  animation: ${fillCircle} 2s linear forwards;
-  stroke: ${(props) => props.color || '#4CAF50'};
+  stroke: #4caf50;
   fill: none;
   transform-origin: center;
   transform: rotate(-90deg);
+  animation: ${fillCircle} 2s linear forwards;
 `;
 const Tick = styled_components_1.default.polyline `
-  stroke-dasharray: 100;
-  stroke-dashoffset: 100;
-  animation: ${drawTick} 1s ease-in-out 2s forwards;
-  stroke: ${(props) => props.color || '#4CAF50'};
+  animation: ${drawTick} 1s ease-in-out 1s forwards;
+  stroke: #4caf50;
   fill: none;
   stroke-width: 5;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: 0;
 `;
-const CircleTickAnimation = ({ color, size, }) => {
+const CircleTickAnimation = ({ size }) => {
     return (react_1.default.createElement(Svg, { width: size, height: size, viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
-        react_1.default.createElement(Circle, { cx: "50", cy: "50", r: "45", strokeWidth: "5", color: color }),
-        react_1.default.createElement(Tick, { points: "30,50 45,65 70,40", color: color })));
+        react_1.default.createElement(Circle, { cx: "50", cy: "50", r: "45", strokeWidth: "5" }),
+        react_1.default.createElement(Tick, { points: "30,50 45,65 70,40" })));
 };
 exports.default = CircleTickAnimation;

package/dist/es/components/Tooltip.js

@@ -1,10 +1,8 @@
+import React from 'react';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 import styled from 'styled-components';
-export const Tooltip = styled(ReactTooltip).attrs({
-    positionStrategy: 'fixed',
-    offset: 10,
-}) `
-  &.react-tooltip {
+const StyledTooltipWrapper = styled.div `
+  & .react-tooltip {
     z-index: 1000;
     font-size: 12px;
     line-height: 16px;
@@ -23,3 +21,15 @@ export const Tooltip = styled(ReactTooltip).attrs({
     }
   }
 `;
+const defaultOpenEvents = ['click', 'mouseenter'];
+export const Tooltip = (props) => (React.createElement(StyledTooltipWrapper, null,
+    React.createElement(ReactTooltip, Object.assign({ positionStrategy: "fixed", offset: 10, openEvents: {
+            mouseenter: true,
+            mouseover: true,
+            click: false,
+        }, closeEvents: {
+            mouseleave: true,
+            mouseout: true,
+            blur: true,
+            click: false,
+        } }, props))));

package/dist/es/components/icons/circle-tick-animation.js

@@ -1,16 +1,33 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
+const fadeIn = keyframes `
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const fadeOut = keyframes `
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+`;
 const fillCircle = keyframes `
   from {
-    stroke-dashoffset: 283; /* Full circumference */
+    stroke-dashoffset: 283;
   }
   to {
     stroke-dashoffset: 0;
   }
 `;
-const Svg = styled.svg `
-  position: absolute;
-`;
 const drawTick = keyframes `
   from {
     stroke-dasharray: 0 100;
@@ -21,29 +38,46 @@ const drawTick = keyframes `
     opacity: 1;
   }
 `;
+const Svg = styled.svg `
+  position: absolute;
+  opacity: 0;
+  animation: ${fadeIn} 0.3s ease-out forwards;
+
+  // Start fading out at 2.7s (300ms before the 3s unmount)
+  @keyframes autoFadeOut {
+    0%,
+    90% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+  animation: ${fadeIn} 0.3s ease-out forwards,
+    autoFadeOut 3s ease-in-out forwards;
+`;
 const Circle = styled.circle `
   stroke-dasharray: 283;
-  stroke-dashoffset: 283;
-  animation: ${fillCircle} 2s linear forwards;
-  stroke: ${(props) => props.color || '#4CAF50'};
+  stroke: #4caf50;
   fill: none;
   transform-origin: center;
   transform: rotate(-90deg);
+  animation: ${fillCircle} 2s linear forwards;
 `;
 const Tick = styled.polyline `
-  stroke-dasharray: 100;
-  stroke-dashoffset: 100;
-  animation: ${drawTick} 1s ease-in-out 2s forwards;
-  stroke: ${(props) => props.color || '#4CAF50'};
+  animation: ${drawTick} 1s ease-in-out 1s forwards;
+  stroke: #4caf50;
   fill: none;
   stroke-width: 5;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: 0;
 `;
-const CircleTickAnimation = ({ color, size, }) => {
+const CircleTickAnimation = ({ size }) => {
     return (React.createElement(Svg, { width: size, height: size, viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement(Circle, { cx: "50", cy: "50", r: "45", strokeWidth: "5", color: color }),
-        React.createElement(Tick, { points: "30,50 45,65 70,40", color: color })));
+        React.createElement(Circle, { cx: "50", cy: "50", r: "45", strokeWidth: "5" }),
+        React.createElement(Tick, { points: "30,50 45,65 70,40" })));
 };
 export default CircleTickAnimation;

package/dist/types/components/Tooltip.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-export declare const Tooltip: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-tooltip").ITooltip & import("react").RefAttributes<import("react-tooltip").TooltipRefProps>>, import("styled-components").DefaultTheme, {
-    positionStrategy: "fixed";
-    offset: 10;
-}, "offset" | "positionStrategy">;
+import React from 'react';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+export declare const Tooltip: (props: React.ComponentProps<typeof ReactTooltip>) => React.JSX.Element;

package/dist/types/components/icons/circle-tick-animation.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 interface CircleTickAnimationProps {
     size: number;
-    color?: string;
 }
 declare const CircleTickAnimation: React.FC<CircleTickAnimationProps>;
 export default CircleTickAnimation;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "2.0.28-LEAN-4186.1",
+  "version": "2.0.28-LEAN-4186.3",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -54,7 +54,7 @@
     "react-router-dom": "^5.3.4",
     "react-select": "^5.7.3",
     "react-sizeme": "^3.0.2",
-    "react-tooltip": "^5.26.0",
+    "react-tooltip": "^5.28.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {