@conveyorhq/arrow-ds 1.180.0 → 1.182.0

package/package.json

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

package/public/components/Toggle/Toggle.d.ts

@@ -9,5 +9,6 @@ export interface ToggleProps {
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     children?: ReactNode;
     labelPosition?: "left" | "right";
+    size?: number;
 }
-export declare const Toggle: ({ checked, disabled, id, inputProps, className, onChange, onClick, children, labelPosition, ...rest }: ToggleProps) => React.JSX.Element;
+export declare const Toggle: ({ checked, disabled, id, inputProps, className, onChange, onClick, children, labelPosition, size, ...rest }: ToggleProps) => React.JSX.Element;

package/public/components/Toggle/Toggle.js

@@ -9,7 +9,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const Box_1 = require("../Box");
 const bem_1 = require("../../utilities/bem");
 const cn = (0, bem_1.bemHOF)("Toggle");
-const Toggle = ({ checked = false, disabled = false, id, inputProps, className, onChange, onClick, children, labelPosition = "right", ...rest }) => {
+const Toggle = ({ checked = false, disabled = false, id, inputProps, className, onChange, onClick, children, labelPosition = "right", size = 20, ...rest }) => {
     const inputRef = react_1.default.useRef(null);
     const handleChange = () => {
         if (!disabled) {
@@ -28,8 +28,14 @@ const Toggle = ({ checked = false, disabled = false, id, inputProps, className,
             }
         }, ...rest },
         react_1.default.createElement("input", { ref: inputRef, disabled: disabled, checked: checked, type: "checkbox", onChange: handleChange, value: checked ? "on" : "off", hidden: true, ...inputProps }),
-        react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "track" }), "aria-hidden": "true" },
-            react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "thumb" }) })),
+        react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "track" }), "aria-hidden": "true", style: {
+                width: `${size * 2 - 4}px`,
+            } },
+            react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "thumb" }), style: {
+                    width: `${size}px`,
+                    height: `${size}px`,
+                    transform: checked ? `translateX(${size - 4}px)` : "translateX(0)",
+                } })),
         children && (react_1.default.createElement(Box_1.Box, { as: "span", className: (0, classnames_1.default)(cn({ e: "label" })) }, children))));
 };
 exports.Toggle = Toggle;

package/public/css/styles.css

@@ -4528,6 +4528,10 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   margin-bottom: 0;
 }
 
+.ads-Markdown ol + ul {
+  padding-left: 64px;
+}
+
 .ads-Markdown li input[type="checkbox"] {
   margin-left: -16px;
   margin-right: 8px;
@@ -4572,6 +4576,10 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   padding: 0;
 }
 
+.ads-Markdown a {
+  word-break: break-word;
+}
+
 :root {
   --markdown-editor-max-height: calc(100vh - 40px);
   --markdown-editor-max-width: calc(100vw - 40px);
@@ -7815,7 +7823,6 @@ button.ads-DateRangePicker-preset--isSelected:hover {
 
 .ads-Toggle-track {
   display: block;
-  width: 36px;
   cursor: pointer;
   border-radius: 9999px;
 }
@@ -7823,8 +7830,6 @@ button.ads-DateRangePicker-preset--isSelected:hover {
 .ads-Toggle-thumb {
   position: relative;
   display: block;
-  height: 20px;
-  width: 20px;
   border-radius: 9999px;
   border-width: 1px;
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
@@ -7853,10 +7858,6 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   border-color: rgb(51 198 159 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-
-  -webkit-transform: translateX(16px);
-
-          transform: translateX(16px);
 }
 
 /* Off */
@@ -9162,6 +9163,30 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   }
 }
 
+@-webkit-keyframes working-banner-gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes working-banner-gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
 .animated {
   -webkit-animation-duration: 500ms;
           animation-duration: 500ms;
@@ -9231,6 +9256,19 @@ button.ads-DateRangePicker-preset--isSelected:hover {
           animation: toast-leave 0.15s ease-in forwards;
 }
 
+.working-banner-gradient {
+  background: linear-gradient(
+      89deg,
+      rgba(51, 198, 159, 0.25) 0.27%,
+      rgba(118, 186, 249, 0.25) 77.05%,
+      rgba(200, 179, 232, 0.25) 99.79%
+    ),
+    #fff;
+  background-size: 200% 200%;
+  -webkit-animation: working-banner-gradient 2.5s ease infinite;
+          animation: working-banner-gradient 2.5s ease infinite;
+}
+
 .elevation-inset {
   box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.01);
 }