@conveyorhq/arrow-ds 1.193.0 → 1.194.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.193.0",
+  "version": "1.194.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/LoadingDots/LoadingDots.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 export interface LoadingDotsProps {
+    size?: number;
+    spacing?: number;
+    bounce?: boolean;
     className?: string;
     style?: React.CSSProperties;
 }

package/public/components/LoadingDots/LoadingDots.js

@@ -32,12 +32,16 @@ const classnames_1 = __importDefault(require("classnames"));
 const utilities_1 = require("../../utilities");
 const Box_1 = require("../Box");
 const cn = (0, utilities_1.bemHOF)("LoadingDots");
-const LoadingDot = ({ delay }) => (react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "dot" }), style: {
-        animation: `loadingDot 1s ease-in-out ${delay}ms infinite`,
+const LoadingDot = ({ size = 4 }) => (react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "dot" }), style: {
+        height: `${size}px`,
+        width: `${size}px`,
     } }));
-exports.LoadingDots = (0, react_1.forwardRef)(({ className, style }, ref) => {
-    return (react_1.default.createElement(Box_1.Box, { ref: ref, className: (0, classnames_1.default)(cn(), className), style: style },
-        react_1.default.createElement(LoadingDot, { delay: 0 }),
-        react_1.default.createElement(LoadingDot, { delay: 160 }),
-        react_1.default.createElement(LoadingDot, { delay: 320 })));
+exports.LoadingDots = (0, react_1.forwardRef)(({ size = 4, spacing = 2, bounce = false, className, style }, ref) => {
+    return (react_1.default.createElement(Box_1.Box, { ref: ref, className: (0, classnames_1.default)(cn(), bounce && cn({ m: "bounce" }), className), style: {
+            ...style,
+            gap: `${spacing}px`,
+        } },
+        react_1.default.createElement(LoadingDot, { size: size }),
+        react_1.default.createElement(LoadingDot, { size: size }),
+        react_1.default.createElement(LoadingDot, { size: size })));
 });

package/public/css/styles.css

@@ -4483,12 +4483,46 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   }
 }
 
+@-webkit-keyframes loadingDotBounce {
+  0%,
+  80%,
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  40% {
+    -webkit-transform: translateY(-4px);
+            transform: translateY(-4px);
+    opacity: 0.4;
+  }
+  60% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes loadingDotBounce {
+  0%,
+  80%,
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  40% {
+    -webkit-transform: translateY(-4px);
+            transform: translateY(-4px);
+    opacity: 0.4;
+  }
+  60% {
+    opacity: 0.6;
+  }
+}
+
 .ads-LoadingDots {
   display: inline-flex;
-  width: 24px;
   justify-content: space-between;
   align-self: center;
-  padding: 4px;
   text-align: center;
   vertical-align: middle;
 
@@ -4497,12 +4531,39 @@ button.ads-DateRangePicker-preset--isSelected:hover {
 
 .ads-LoadingDots-dot {
   display: inline-block;
-  height: 4px;
-  width: 4px;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(134 163 181 / var(--tw-bg-opacity));
+  background-color: rgb(185 200 210 / var(--tw-bg-opacity));
   vertical-align: top;
+
+  -webkit-animation: loadingDot 1.2s infinite ease-in-out;
+
+          animation: loadingDot 1.2s infinite ease-in-out;
+}
+
+.ads-LoadingDots-dot:nth-child(2) {
+  -webkit-animation-delay: 160ms;
+          animation-delay: 160ms;
+}
+
+.ads-LoadingDots-dot:nth-child(3) {
+  -webkit-animation-delay: 320ms;
+          animation-delay: 320ms;
+}
+
+.ads-LoadingDots--bounce .ads-LoadingDots-dot {
+  -webkit-animation-name: loadingDotBounce;
+          animation-name: loadingDotBounce;
+}
+
+.ads-LoadingDots--bounce .ads-LoadingDots-dot:nth-child(1) {
+  -webkit-animation-delay: -320ms;
+          animation-delay: -320ms;
+}
+
+.ads-LoadingDots--bounce .ads-LoadingDots-dot:nth-child(2) {
+  -webkit-animation-delay: -160ms;
+          animation-delay: -160ms;
 }
 
 .ads-Markdown {
@@ -8992,10 +9053,6 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   transition-duration: 150ms;
 }
 
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 @-webkit-keyframes fadeIn {
   from {
     opacity: 0;