@conveyorhq/arrow-ds 1.188.0 → 1.190.0

package/package.json

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

package/public/components/Checkbox/Checkbox.d.ts

@@ -6,6 +6,7 @@ export type CheckboxProps = Omit<InputProps, "checked"> & {
     hideRequiredStyles?: boolean;
     isRequired?: boolean;
     checked?: boolean | "indeterminate";
+    color?: "brandGreen" | "blue";
 };
 export declare enum CheckboxState {
     CHECKED = "checked",
@@ -13,6 +14,6 @@ export declare enum CheckboxState {
     INDETERMINATE = "indeterminate"
 }
 export declare const Checkbox: {
-    ({ checked, children, className, disabled, id: idProp, label, onBlur, onChange, onClick, onFocus, hideRequiredStyles, isRequired, tabIndex, theme: themeProp, ...rest }: CheckboxProps): React.JSX.Element;
+    ({ checked, children, className, disabled, id: idProp, label, onBlur, onChange, onClick, onFocus, hideRequiredStyles, isRequired, tabIndex, theme: themeProp, color, ...rest }: CheckboxProps): React.JSX.Element;
     Group: (props: StackProps) => React.JSX.Element;
 };

package/public/components/Checkbox/Checkbox.js

@@ -50,7 +50,7 @@ var CheckboxState;
     CheckboxState["UNCHECKED"] = "unchecked";
     CheckboxState["INDETERMINATE"] = "indeterminate";
 })(CheckboxState || (exports.CheckboxState = CheckboxState = {}));
-const Checkbox = ({ checked, children, className, disabled = false, id: idProp, label, onBlur, onChange = () => { }, onClick, onFocus, hideRequiredStyles = true, isRequired = undefined, tabIndex, theme: themeProp, ...rest }) => {
+const Checkbox = ({ checked, children, className, disabled = false, id: idProp, label, onBlur, onChange = () => { }, onClick, onFocus, hideRequiredStyles = true, isRequired = undefined, tabIndex, theme: themeProp, color = "brandGreen", ...rest }) => {
     const { isRequired: isRequiredContext, theme: themeContext } = (0, react_1.useContext)(FormGroupContext_1.FormGroupContext);
     const fallbackId = `checkbox-${(0, react_1.useId)()}`;
     const id = (0, isUndefined_1.default)(idProp) ? fallbackId : idProp;
@@ -87,6 +87,12 @@ const Checkbox = ({ checked, children, className, disabled = false, id: idProp,
         else if (checkedState === CheckboxState.UNCHECKED) {
             updatedChecked = CheckboxState.CHECKED;
         }
+        else if (checkedState === CheckboxState.INDETERMINATE) {
+            updatedChecked = CheckboxState.INDETERMINATE;
+        }
+        else {
+            updatedChecked = CheckboxState.UNCHECKED;
+        }
         setCheckedState(updatedChecked);
         if (onChange) {
             onChange(event);
@@ -103,10 +109,10 @@ const Checkbox = ({ checked, children, className, disabled = false, id: idProp,
     };
     const bareCheckbox = (react_1.default.createElement(Box_1.Box, { className: (0, bem_1.bem)(cn, { e: "BoxWrapper" }) },
         react_1.default.createElement(Input_1.Input, { "aria-checked": ariaChecked(), checked: checkedState === CheckboxState.CHECKED, className: (0, bem_1.bem)(cn, { e: "Input" }), disabled: disabled, id: id, onChange: handleChange, type: "checkbox", onFocus: onFocus, onBlur: onBlur, onClick: label ? handleClick : undefined, tabIndex: tabIndex, ...rest }),
-        react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "Box" }), (0, bem_1.bem)(cn, { e: "Box", m: theme }), checked && (0, bem_1.bem)(cn, { e: "Box", m: "checked" })) }),
-        checked && (react_1.default.createElement(Icon_1.Icon, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "Check" }), (0, bem_1.bem)(cn, { e: "Check", m: theme })), icon: checkedState === CheckboxState.INDETERMINATE
+        react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "Box" }), (0, bem_1.bem)(cn, { e: "Box", m: theme }), (0, bem_1.bem)(cn, { e: "Box", m: color }), checked && (0, bem_1.bem)(cn, { e: "Box", m: "checked" })) }),
+        react_1.default.createElement(Icon_1.Icon, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "Check" }), (0, bem_1.bem)(cn, { e: "Check", m: theme }), checked && (0, bem_1.bem)(cn, { e: "Check", m: "checked" })), icon: checkedState === CheckboxState.INDETERMINATE
                 ? Icon_1.ICON_TYPE.MINUS
-                : Icon_1.ICON_TYPE.CHECK }))));
+                : Icon_1.ICON_TYPE.CHECK })));
     const checkboxWithLabel = label || children ? (react_1.default.createElement(Label_1.Label, { className: (0, bem_1.bem)(cn, { e: "Label" }), isRequired: calculatedRequired && !hideRequiredStyles },
         bareCheckbox,
         react_1.default.createElement(Text_1.Text, { as: "span", className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "LabelText" }), (0, bem_1.bem)(cn, { e: "LabelText", m: theme })) },

package/public/components/Icon/Icon.d.ts

@@ -17,6 +17,7 @@ export declare enum CUSTOM_ICON_TYPE {
     DIALOG_CHECK = "dialog-check",
     DO_NOT_ENTER = "do-not-enter",
     FOLDERS = "folders",
+    GLOBE = "globe",
     INSERT_END = "insert-end",
     INSERT_MIDDLE = "insert-middle",
     INSERT_START = "insert-start",

package/public/components/Icon/Icon.js

@@ -266,6 +266,7 @@ var CUSTOM_ICON_TYPE;
     CUSTOM_ICON_TYPE["DIALOG_CHECK"] = "dialog-check";
     CUSTOM_ICON_TYPE["DO_NOT_ENTER"] = "do-not-enter";
     CUSTOM_ICON_TYPE["FOLDERS"] = "folders";
+    CUSTOM_ICON_TYPE["GLOBE"] = "globe";
     CUSTOM_ICON_TYPE["INSERT_END"] = "insert-end";
     CUSTOM_ICON_TYPE["INSERT_MIDDLE"] = "insert-middle";
     CUSTOM_ICON_TYPE["INSERT_START"] = "insert-start";
@@ -291,6 +292,7 @@ const CustomIcons = {
     [CUSTOM_ICON_TYPE.DIALOG_CHECK]: svg_1.DialogCheck,
     [CUSTOM_ICON_TYPE.DO_NOT_ENTER]: svg_1.DoNotEnter,
     [CUSTOM_ICON_TYPE.FOLDERS]: svg_1.Folders,
+    [CUSTOM_ICON_TYPE.GLOBE]: svg_1.Globe,
     [CUSTOM_ICON_TYPE.INSERT_END]: svg_1.InsertEnd,
     [CUSTOM_ICON_TYPE.INSERT_MIDDLE]: svg_1.InsertMiddle,
     [CUSTOM_ICON_TYPE.INSERT_START]: svg_1.InsertStart,

package/public/components/Icon/svg/Globe.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SvgProps } from "../../Svg";
+export declare const Globe: (props: SvgProps) => React.JSX.Element;

package/public/components/Icon/svg/Globe.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Globe = void 0;
+const react_1 = __importDefault(require("react"));
+const Svg_1 = require("../../Svg");
+const Globe = (props) => {
+    return (react_1.default.createElement(Svg_1.Svg, { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", ...props },
+        react_1.default.createElement("path", { d: "M6.78125 0.96875C10.5273 0.96875 13.5625 4.00391 13.5625 7.75C13.5625 11.4961 10.5273 14.5312 6.78125 14.5312C3.03516 14.5312 0 11.4961 0 7.75C0 4.00391 3.03516 0.96875 6.78125 0.96875ZM11.6758 5.34375C11.1016 4.19531 10.1445 3.29297 8.96875 2.77344C9.35156 3.48438 9.65234 4.35938 9.84375 5.34375H11.6758ZM6.78125 2.28125C6.26172 2.28125 5.44141 3.42969 5.03125 5.34375H8.50391C8.09375 3.42969 7.27344 2.28125 6.78125 2.28125ZM1.3125 7.75C1.3125 8.13281 1.33984 8.51562 1.42188 8.84375H3.52734C3.5 8.48828 3.5 8.13281 3.5 7.75C3.5 7.39453 3.5 7.03906 3.52734 6.65625H1.42188C1.33984 7.01172 1.3125 7.39453 1.3125 7.75ZM1.85938 10.1562C2.43359 11.3047 3.39062 12.2344 4.56641 12.7539C4.18359 12.043 3.88281 11.168 3.69141 10.1562H1.85938ZM3.69141 5.34375C3.88281 4.35938 4.18359 3.48438 4.56641 2.77344C3.39062 3.29297 2.43359 4.19531 1.85938 5.34375H3.69141ZM6.78125 13.2188C7.27344 13.2188 8.09375 12.0977 8.50391 10.1562H5.03125C5.44141 12.0977 6.26172 13.2188 6.78125 13.2188ZM8.69531 8.84375C8.72266 8.51562 8.75 8.13281 8.75 7.75C8.75 7.36719 8.72266 7.01172 8.69531 6.65625H4.83984C4.8125 7.01172 4.8125 7.36719 4.8125 7.75C4.8125 8.13281 4.8125 8.51562 4.83984 8.84375H8.69531ZM8.96875 12.7539C10.1445 12.2344 11.1016 11.3047 11.6758 10.1562H9.84375C9.65234 11.168 9.35156 12.043 8.96875 12.7539ZM10.0078 8.84375H12.1406C12.1953 8.51562 12.25 8.13281 12.25 7.75C12.25 7.39453 12.1953 7.01172 12.1406 6.65625H10.0078C10.0352 7.03906 10.0625 7.39453 10.0625 7.75C10.0625 8.13281 10.0352 8.48828 10.0078 8.84375Z", fill: "currentColor" })));
+};
+exports.Globe = Globe;

package/public/components/Icon/svg/index.d.ts

@@ -12,6 +12,7 @@ export * from "./ConveyorLogoIcon";
 export * from "./DialogCheck";
 export * from "./DoNotEnter";
 export * from "./Folders";
+export * from "./Globe";
 export * from "./InsertEnd";
 export * from "./InsertMiddle";
 export * from "./InsertStart";

package/public/components/Icon/svg/index.js

@@ -28,6 +28,7 @@ __exportStar(require("./ConveyorLogoIcon"), exports);
 __exportStar(require("./DialogCheck"), exports);
 __exportStar(require("./DoNotEnter"), exports);
 __exportStar(require("./Folders"), exports);
+__exportStar(require("./Globe"), exports);
 __exportStar(require("./InsertEnd"), exports);
 __exportStar(require("./InsertMiddle"), exports);
 __exportStar(require("./InsertStart"), exports);

package/public/css/styles.css

@@ -2244,15 +2244,26 @@ override built-in Image component classes */
   border-color: rgb(134 163 181 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(249 251 252 / var(--tw-bg-opacity));
+  transition-duration: 150ms;
+
+  transition-property: background-color, border-color, opacity;
 }
 
-.ads-Checkbox-Box--product.ads-Checkbox-Box--checked {
+.ads-Checkbox-Box--product.ads-Checkbox-Box--checked, 
+.ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--brandGreen {
   --tw-border-opacity: 1;
   border-color: rgb(51 198 159 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(51 198 159 / var(--tw-bg-opacity));
 }
 
+.ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--blue {
+  --tw-border-opacity: 1;
+  border-color: rgb(13 125 228 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 125 228 / var(--tw-bg-opacity));
+}
+
 .ads-Checkbox-Check--product {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2268,13 +2279,21 @@ override built-in Image component classes */
 .ads-Checkbox.is-disabled .ads-Checkbox-Box--product {
   --tw-border-opacity: 1;
   border-color: rgb(222 231 238 / var(--tw-border-opacity));
+  transition-duration: 150ms;
 }
 
-.ads-Checkbox.is-disabled .ads-Checkbox-Box--product.ads-Checkbox-Box--checked {
+.ads-Checkbox.is-disabled .ads-Checkbox-Box--product.ads-Checkbox-Box--checked, 
+.ads-Checkbox.is-disabled
+  .ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--brandGreen {
   --tw-border-opacity: 1;
-  border-color: rgb(125 229 202 / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgb(125 229 202 / var(--tw-bg-opacity));
+  border-color: rgb(51 198 159 / var(--tw-border-opacity));
+  opacity: 0.5;
+}
+
+.ads-Checkbox.is-disabled
+  .ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--blue {
+  --tw-border-opacity: 1;
+  border-color: rgb(13 125 228 / var(--tw-border-opacity));
   opacity: 0.5;
 }
 
@@ -2366,12 +2385,39 @@ override built-in Image component classes */
 /* Checked */
 
 .ads-Checkbox-Check {
+  pointer-events: none;
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 12px;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  opacity: 0;
+  transition-duration: 150ms;
+
+  transition-property: opacity, -webkit-transform;
+
+  transition-property: opacity, transform;
+
+  transition-property: opacity, transform, -webkit-transform;
+  -webkit-transform: scale(0.5);
+          transform: scale(0.5);
+}
+
+.ads-Checkbox-Check--checked {
+  opacity: 1;
+  transition-duration: 150ms;
+
+  transition-property: opacity, -webkit-transform;
+
+  transition-property: opacity, transform;
+
+  transition-property: opacity, transform, -webkit-transform;
+  -webkit-transform: scale(1);
+          transform: scale(1);
 }
 
 /* Focused */