@conveyorhq/arrow-ds 1.69.1 → 1.72.0

package/package.json

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

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

@@ -21,6 +21,7 @@ export declare enum ICON_TYPE {
     ARROW_UP = "arrow-up",
     BACKWARD = "backward",
     BAN = "ban",
+    BARS = "bars",
     BATTERY_HALF = "battery-half",
     BED = "bed",
     BELL = "bell",
@@ -50,6 +51,7 @@ export declare enum ICON_TYPE {
     COMPASS = "compass",
     COMPRESS = "compress",
     CROWN = "crown",
+    COPY = "copy",
     DOOR_CLOSED = "door-closed",
     EDIT = "edit",
     ELLIPSIS_H = "ellipsis-h",

package/public/components/Icon/Icon.js

@@ -45,6 +45,7 @@ const faArrowRight_1 = require("@fortawesome/free-solid-svg-icons/faArrowRight")
 const faArrowUp_1 = require("@fortawesome/free-solid-svg-icons/faArrowUp");
 const faBackward_1 = require("@fortawesome/free-solid-svg-icons/faBackward");
 const faBan_1 = require("@fortawesome/free-solid-svg-icons/faBan");
+const faBars_1 = require("@fortawesome/free-solid-svg-icons/faBars");
 const faBatteryHalf_1 = require("@fortawesome/free-solid-svg-icons/faBatteryHalf");
 const faBed_1 = require("@fortawesome/free-solid-svg-icons/faBed");
 const faBell_1 = require("@fortawesome/free-solid-svg-icons/faBell");
@@ -160,13 +161,14 @@ const faUsers_1 = require("@fortawesome/free-solid-svg-icons/faUsers");
 const faUserSecret_1 = require("@fortawesome/free-solid-svg-icons/faUserSecret");
 const faUserShield_1 = require("@fortawesome/free-solid-svg-icons/faUserShield");
 const faWrench_1 = require("@fortawesome/free-solid-svg-icons/faWrench");
+const faCopy_1 = require("@fortawesome/free-solid-svg-icons/faCopy");
 const svg_1 = require("./svg");
 const status_1 = require("../../contexts/status");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const ShieldCheck_1 = require("./svg/ShieldCheck");
 const cn = utilities_1.bemHOF("Icon");
-fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faBug_1.faBug, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCloudDownloadAlt_1.faCloudDownloadAlt, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCrown_1.faCrown, faDoorClosed_1.faDoorClosed, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHighlighter_1.faHighlighter, faIdBadge_1.faIdBadge, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLink_1.faLink, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperPlane_1.faPaperPlane, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faScroll_1.faScroll, faSearch_1.faSearch, faServer_1.faServer, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faWrench_1.faWrench);
+fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBars_1.faBars, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faBug_1.faBug, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCloudDownloadAlt_1.faCloudDownloadAlt, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCrown_1.faCrown, faCopy_1.faCopy, faDoorClosed_1.faDoorClosed, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHighlighter_1.faHighlighter, faIdBadge_1.faIdBadge, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLink_1.faLink, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperPlane_1.faPaperPlane, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faScroll_1.faScroll, faSearch_1.faSearch, faServer_1.faServer, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faWrench_1.faWrench);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -201,6 +203,7 @@ var ICON_TYPE;
     ICON_TYPE["ARROW_UP"] = "arrow-up";
     ICON_TYPE["BACKWARD"] = "backward";
     ICON_TYPE["BAN"] = "ban";
+    ICON_TYPE["BARS"] = "bars";
     ICON_TYPE["BATTERY_HALF"] = "battery-half";
     ICON_TYPE["BED"] = "bed";
     ICON_TYPE["BELL"] = "bell";
@@ -230,6 +233,7 @@ var ICON_TYPE;
     ICON_TYPE["COMPASS"] = "compass";
     ICON_TYPE["COMPRESS"] = "compress";
     ICON_TYPE["CROWN"] = "crown";
+    ICON_TYPE["COPY"] = "copy";
     ICON_TYPE["DOOR_CLOSED"] = "door-closed";
     ICON_TYPE["EDIT"] = "edit";
     ICON_TYPE["ELLIPSIS_H"] = "ellipsis-h";

package/public/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,6 @@
 import { PopoverTooltipSharedProps } from "../Popover";
 export interface TooltipProps extends PopoverTooltipSharedProps {
     delay?: number;
+    theme?: "light" | "dark";
 }
 export declare const Tooltip: (props: TooltipProps) => JSX.Element;

package/public/components/Tooltip/Tooltip.js

@@ -32,7 +32,7 @@ const types_1 = require("../../types");
 const context_1 = require("./context");
 const cn = "Tooltip";
 const Tooltip = (props) => {
-    const { isVisible: isVisibleProp = false, children, referenceElement, placement = "bottom", className, delay = 200, style, ...rest } = props;
+    const { isVisible: isVisibleProp = false, children, referenceElement, placement = "bottom", className, delay = 200, theme = "dark", style, ...rest } = props;
     const { isOpen, onOpen, onClose } = hooks_1.useDisclosure(isVisibleProp);
     const isHoveringReferenceRef = react_1.useRef(false);
     const isHoveringPopoverRef = react_1.useRef(false);
@@ -126,6 +126,6 @@ const Tooltip = (props) => {
         isOpen,
     }), [isOpen]);
     return children ? (react_1.default.createElement(context_1.TooltipContext.Provider, { value: context },
-        react_1.default.createElement(Popover_1.Popover, Object.assign({ showArrow: true, isVisible: isOpen, referenceElement: referenceElementWithMouseHandlers, placement: placement, className: classnames_1.default(bem_1.bem(cn), className), onMouseEnter: !isVisibleProp ? handlePopoverMouseEnter : undefined, onMouseLeave: !isVisibleProp ? handlePopoverMouseLeave : undefined, style: style }, rest), children))) : (referenceElement);
+        react_1.default.createElement(Popover_1.Popover, Object.assign({ showArrow: true, isVisible: isOpen, referenceElement: referenceElementWithMouseHandlers, placement: placement, className: classnames_1.default([bem_1.bem(cn), bem_1.bem(cn, { m: theme }), className]), onMouseEnter: !isVisibleProp ? handlePopoverMouseEnter : undefined, onMouseLeave: !isVisibleProp ? handlePopoverMouseLeave : undefined, style: style }, rest), children))) : (referenceElement);
 };
 exports.Tooltip = Tooltip;

package/public/css/styles.css

@@ -7658,8 +7658,6 @@ override built-in Image component classes */
   display: inline-flex;
   max-width: 256px;
   align-items: center;
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 27 40 / var(--tw-bg-opacity));
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 6px;
@@ -7667,30 +7665,58 @@ override built-in Image component classes */
   text-align: center;
   font-size: 12px;
   line-height: 1.25;
+}
+
+.ads-Tooltip--dark {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 27 40 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.ads-Tooltip--light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(71 104 125 / var(--tw-text-opacity));
+}
+
 .ads-Tooltip .ads-Popover-arrow {
   border-width: 4px;
 }
 
-.ads-Tooltip .ads-Popover-arrow[data-placement*="bottom"] {
+.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="bottom"] {
   border-bottom-color: #001b28;
 }
 
-.ads-Tooltip .ads-Popover-arrow[data-placement*="top"] {
+.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="top"] {
   border-top-color: #001b28;
 }
 
-.ads-Tooltip .ads-Popover-arrow[data-placement*="left"] {
+.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="left"] {
   border-left-color: #001b28;
 }
 
-.ads-Tooltip .ads-Popover-arrow[data-placement*="right"] {
+.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="right"] {
   border-right-color: #001b28;
 }
 
+.ads-Tooltip--light .ads-Popover-arrow[data-placement*="bottom"] {
+  border-bottom-color: #ffffff;
+}
+
+.ads-Tooltip--light .ads-Popover-arrow[data-placement*="top"] {
+  border-top-color: #ffffff;
+}
+
+.ads-Tooltip--light .ads-Popover-arrow[data-placement*="left"] {
+  border-left-color: #ffffff;
+}
+
+.ads-Tooltip--light .ads-Popover-arrow[data-placement*="right"] {
+  border-right-color: #ffffff;
+}
+
 .ads-Tooltip-trigger {
   display: inline-flex;
 }