@conveyorhq/arrow-ds 1.19.2 → 1.22.0

package/package.json

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

package/public/components/Frame/Frame.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-declare type FrameAreaName = "appbar" | "topbar" | "main" | "bottombar";
+declare type FrameAreaName = "navbar" | "appbar" | "topbar" | "main" | "bottombar";
 interface FrameProps {
     children: ReactNode;
 }

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

@@ -87,6 +87,7 @@ export declare enum ICON_TYPE {
     SEARCH = "search",
     SHARE_ALT = "share-alt",
     SHIELD_ALT = "shield-alt",
+    SIGN_OUT_ALT = "sign-out-alt",
     SIGNATURE = "signature",
     SLIDERS_H = "sliders-h",
     SORT = "sort",

package/public/components/Icon/Icon.js

@@ -114,6 +114,7 @@ const faScroll_1 = require("@fortawesome/free-solid-svg-icons/faScroll");
 const faSearch_1 = require("@fortawesome/free-solid-svg-icons/faSearch");
 const faShareAlt_1 = require("@fortawesome/free-solid-svg-icons/faShareAlt");
 const faShieldAlt_1 = require("@fortawesome/free-solid-svg-icons/faShieldAlt");
+const faSignOutAlt_1 = require("@fortawesome/free-solid-svg-icons/faSignOutAlt");
 const faSignature_1 = require("@fortawesome/free-solid-svg-icons/faSignature");
 const faSlidersH_1 = require("@fortawesome/free-solid-svg-icons/faSlidersH");
 const faSort_1 = require("@fortawesome/free-solid-svg-icons/faSort");
@@ -140,7 +141,7 @@ const status_1 = require("../../contexts/status");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 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, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, 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, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, 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, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, 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, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignature_1.faSignature, 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, faTrash_1.faTrash, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends);
+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, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, 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, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, 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, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, 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, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignOutAlt_1.faSignOutAlt, faSignature_1.faSignature, 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, faTrash_1.faTrash, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -237,6 +238,7 @@ var ICON_TYPE;
     ICON_TYPE["SEARCH"] = "search";
     ICON_TYPE["SHARE_ALT"] = "share-alt";
     ICON_TYPE["SHIELD_ALT"] = "shield-alt";
+    ICON_TYPE["SIGN_OUT_ALT"] = "sign-out-alt";
     ICON_TYPE["SIGNATURE"] = "signature";
     ICON_TYPE["SLIDERS_H"] = "sliders-h";
     ICON_TYPE["SORT"] = "sort";

package/public/components/Table/Table.d.ts

@@ -13,9 +13,11 @@ interface TableProps extends React.HTMLProps<HTMLTableElement> {
     stickyColumn?: boolean;
     hasBatchActions?: boolean;
     spaceRows?: boolean;
+    enableGridSizing?: boolean;
+    gridSizing?: string | string[];
 }
 declare const Table: {
-    ({ children, className, onSort, outerBorder, sortColumnId, sortDirection, affixHeader, removeSpacerColumn, noResults, renderInModal, enableHorizontalScroll, stickyColumn, hasBatchActions, spaceRows, ...rest }: TableProps): JSX.Element;
+    ({ children, className, onSort, outerBorder, sortColumnId, sortDirection, affixHeader, removeSpacerColumn, noResults, renderInModal, enableHorizontalScroll, stickyColumn, hasBatchActions, spaceRows, style, enableGridSizing, gridSizing, ...rest }: TableProps): JSX.Element;
     Body: ({ className, children, ...rest }: React.HTMLProps<HTMLTableSectionElement>) => JSX.Element;
     Row: ({ className, children, selected, ...rest }: import("./TableRow").TableRowProps) => JSX.Element;
     Cell: React.FunctionComponent<import("./TableCell").TableCellProps>;

package/public/components/Table/Table.js

@@ -35,9 +35,9 @@ Object.defineProperty(exports, "SORT_DIRECTION", { enumerable: true, get: functi
 const bem_1 = require("../../utilities/bem");
 const cn = "Table";
 const wrapperCn = "TableWrapper";
-const Table = ({ children, className, onSort = () => { }, outerBorder = false, sortColumnId, sortDirection, affixHeader = false, removeSpacerColumn = false, noResults = false, renderInModal = false, enableHorizontalScroll = false, stickyColumn = false, hasBatchActions = false, spaceRows = false, ...rest }) => {
+const Table = ({ children, className, onSort = () => { }, outerBorder = false, sortColumnId, sortDirection, affixHeader = false, removeSpacerColumn = false, noResults = false, renderInModal = false, enableHorizontalScroll = false, stickyColumn = false, hasBatchActions = false, spaceRows = false, style, enableGridSizing = false, gridSizing, ...rest }) => {
     const wrapperClasses = classnames_1.default(bem_1.bem(wrapperCn), enableHorizontalScroll && bem_1.bem(wrapperCn, { m: "enable-hscroll" }), spaceRows && bem_1.bem(wrapperCn, { m: "space-rows" }));
-    const classes = classnames_1.default(bem_1.bem(cn), removeSpacerColumn && bem_1.bem(cn, { m: "remove-spacer" }), outerBorder && bem_1.bem(cn, { m: "outer-border" }), affixHeader && bem_1.bem(cn, { m: "affix-header" }), noResults && bem_1.bem(cn, { m: "no-results" }), stickyColumn && bem_1.bem(cn, { m: "sticky-column" }), hasBatchActions && bem_1.bem(cn, { m: "batch-actions" }), spaceRows && bem_1.bem(cn, { m: "space-rows" }), className);
+    const classes = classnames_1.default(bem_1.bem(cn), removeSpacerColumn && bem_1.bem(cn, { m: "remove-spacer" }), outerBorder && bem_1.bem(cn, { m: "outer-border" }), affixHeader && bem_1.bem(cn, { m: "affix-header" }), noResults && bem_1.bem(cn, { m: "no-results" }), stickyColumn && bem_1.bem(cn, { m: "sticky-column" }), hasBatchActions && bem_1.bem(cn, { m: "batch-actions" }), spaceRows && bem_1.bem(cn, { m: "space-rows" }), enableGridSizing && gridSizing && bem_1.bem(cn, { m: "grid-sizing" }), className);
     return (react_1.default.createElement(TableContext_1.default.Provider, { value: {
             handleSort: onSort,
             sortDirection,
@@ -49,7 +49,14 @@ const Table = ({ children, className, onSort = () => { }, outerBorder = false, s
             hasBatchActions,
         } },
         react_1.default.createElement("div", { className: wrapperClasses },
-            react_1.default.createElement("table", Object.assign({ className: classes }, rest), children))));
+            react_1.default.createElement("table", Object.assign({ className: classes, style: enableGridSizing && gridSizing
+                    ? {
+                        gridTemplateColumns: Array.isArray(gridSizing)
+                            ? gridSizing.join(" ")
+                            : gridSizing,
+                        ...style,
+                    }
+                    : style }, rest), children))));
 };
 exports.Table = Table;
 Table.Body = TableBody_1.default;

package/public/components/Table/TableCell.js

@@ -25,6 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
+const Flex_1 = require("../Flex");
 const Skeleton_1 = require("../Skeleton");
 const cn = "TableCell";
 const TableCell = react_1.forwardRef(({ className, removePadding = false, isLoading = false, children, columnWidth, align = "left", style, ...rest }, ref) => {
@@ -32,6 +33,7 @@ const TableCell = react_1.forwardRef(({ className, removePadding = false, isLoad
     if (columnWidth) {
         computedStyle.width = columnWidth;
     }
-    return (react_1.default.createElement("td", Object.assign({ style: computedStyle, className: classnames_1.default(bem_1.bem(cn), removePadding && bem_1.bem(cn, { m: "removePadding" }), align && `text-${align}`, className), ref: ref }, rest), isLoading ? react_1.default.createElement(Skeleton_1.Skeleton, null) : children));
+    return (react_1.default.createElement("td", Object.assign({ style: computedStyle, className: classnames_1.default(bem_1.bem(cn), removePadding && bem_1.bem(cn, { m: "removePadding" }), align && `text-${align}`, className), ref: ref }, rest), isLoading ? (react_1.default.createElement(Flex_1.Flex, { className: "h-full items-center" },
+        react_1.default.createElement(Skeleton_1.Skeleton, { className: "w-full" }))) : (children)));
 });
 exports.default = TableCell;

package/public/components/Table/index.d.ts

@@ -1 +1,4 @@
 export * from "./Table";
+export type { TableCellProps } from "./TableCell";
+export type { TableHeaderCellProps } from "./TableHeaderCell";
+export type { TableRowProps } from "./TableRow";

package/public/components/VendorLogo/VendorLogo.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
+import { SizingKeys } from "../../types";
 import { BoxProps } from "../Box";
 import { IconType } from "../Icon";
-export declare type VendorLogoSize = 4 | 6 | 10 | 14 | 20 | 40;
+export declare type VendorLogoSize = SizingKeys;
 interface VendorLogoBadgeProps extends BoxProps {
     icon: IconType;
     size?: VendorLogoSize;
@@ -14,7 +15,7 @@ interface VendorLogoProps extends BoxProps {
     children?: ReactElement<VendorLogoBadgeProps>;
 }
 export declare const VendorLogo: {
-    ({ src, vendorName, alt, className, size, children, }: VendorLogoProps): JSX.Element;
+    ({ src, vendorName, alt, className, size, children, ...rest }: VendorLogoProps): JSX.Element;
     Badge: ({ icon, size, className, ...rest }: VendorLogoBadgeProps) => JSX.Element;
 };
 export {};

package/public/components/VendorLogo/VendorLogo.js

@@ -35,13 +35,13 @@ const VendorLogoBadge = ({ icon, size = 10, className, ...rest }) => {
         } }, rest),
         react_1.default.createElement(Icon_1.Icon, { className: bem_1.bem(cn, { e: "icon" }), icon: icon })));
 };
-const VendorLogo = ({ src, vendorName, alt, className, size = 10, children, }) => {
+const VendorLogo = ({ src, vendorName, alt, className, size = 10, children, ...rest }) => {
     const [loadSuccess, setLoadSuccess] = react_1.useState(!!src);
     const firstLetter = vendorName && vendorName.length > 0 ? vendorName[0] : "";
     react_1.useEffect(() => {
         setLoadSuccess(!!src);
     }, [src]);
-    return (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(`${bem_1.bem(cn)} w-${size} h-${size}`, className) },
+    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(`${bem_1.bem(cn)} w-${size} h-${size}`, className) }, rest),
         loadSuccess ? (react_1.default.createElement("img", { className: bem_1.bem(cn, { e: "img" }), src: src, alt: alt || vendorName || "", onError: () => {
                 setLoadSuccess(false);
             } })) : (react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "placeholder" }), style: {