@conveyorhq/arrow-ds 1.62.2 → 1.64.0

package/README.md

@@ -93,7 +93,7 @@ All documentation exists within the `src` directory of this repo. If it applies
 Each MDX file should start with importing the `Meta` component and passing a `title` to it:
 
 ```mdx
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Arrow Design System/Introduction" />
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.62.2",
+  "version": "1.64.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {
@@ -63,8 +63,8 @@
     "style-dictionary:build": "style-dictionary build --config ./style-dictionary.config.js",
     "style-dictionary:clean": "style-dictionary clean --config ./style-dictionary.config.js",
     "generate": "plop",
-    "lint:check": "prettier --check 'src/**/**.{ts,tsx,js,css,mdx}' && eslint 'src/**/**.{ts,tsx,js,mdx}'",
-    "lint:fix": "eslint 'src/**/**.{ts,tsx,js,mdx}' --fix && prettier --write 'src/**/**.{ts,tsx,js,css,mdx}'",
+    "lint:check": "prettier --check 'src/**/**.{ts,tsx,js,css}' && eslint 'src/**/**.{ts,tsx,js}'",
+    "lint:fix": "eslint 'src/**/**.{ts,tsx,js}' --fix && prettier --write 'src/**/**.{ts,tsx,js,css}'",
     "test": "yarn run lint:check && tsc --noEmit",
     "bundle-analyzer": "BUNDLE_ANALYZER=true yarn build-storybook",
     "commit": "npx git-cz --disable-emoji --issues"
@@ -104,13 +104,13 @@
     "@babel/preset-typescript": "^7.7.2",
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
-    "@storybook/addon-actions": "^v6.5.0-alpha.44",
-    "@storybook/addon-docs": "^v6.5.0-alpha.44",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-docs": "^6.5.9",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/react": "^v6.5.0-alpha.44",
-    "@storybook/theming": "^v6.5.0-alpha.44",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/theming": "^6.5.9",
     "@types/classnames": "^2.2.9",
     "@types/codemirror": "^0.0.91",
     "@types/d3-ease": "^1.0.9",

package/public/components/FileUpload/FileUploadDnD.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import { HTMLProps, ReactNode } from "react";
 import { ButtonProps } from "../Button";
 interface FileUploadDndPropsBase extends Omit<HTMLProps<HTMLLabelElement>, "onChange" | "value"> {
     className?: string;
@@ -7,6 +7,7 @@ interface FileUploadDndPropsBase extends Omit<HTMLProps<HTMLLabelElement>, "onCh
     inputProps?: HTMLProps<HTMLInputElement>;
     buttonProps?: ButtonProps;
     hideFileLabel?: boolean;
+    dropAreaComponent?: (active: boolean) => ReactNode;
 }
 interface FileUploadDndPropsSingle extends FileUploadDndPropsBase {
     onChange: (file: File | null) => void;

package/public/components/FileUpload/FileUploadDnD.js

@@ -35,7 +35,7 @@ const Text_1 = require("../Text");
 const Truncate_1 = require("../Truncate");
 const cn = utilities_1.bemHOF("FileUpload");
 const ERROR_TIMEOUT = 5000;
-const FileUploadInput = ({ inputProps, buttonProps, className, accept, label = "Select file", hideFileLabel, ...props }) => {
+const FileUploadInput = ({ inputProps, buttonProps, className, accept, label = "Select file", hideFileLabel, dropAreaComponent = () => null, ...props }) => {
     const inputRef = react_1.useRef(null);
     const { id: contextId } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const inputId = inputProps ? inputProps.id : undefined;
@@ -138,6 +138,7 @@ const FileUploadInput = ({ inputProps, buttonProps, className, accept, label = "
     }, [value, multiple]);
     return (react_1.default.createElement("label", Object.assign({ ref: drop, htmlFor: id, className: classnames_1.default(cn(), isActive && cn({ m: "active" }), className) }, labelRest),
         react_1.default.createElement("input", Object.assign({ className: classnames_1.default(cn({ e: "input" }), inputClassName), ref: inputRef, type: "file", id: id, multiple: props.multiple, accept: accept }, inputRest, { onChange: handleInputChange })),
+        dropAreaComponent(isActive),
         react_1.default.createElement(Button_1.Button, Object.assign({ className: classnames_1.default(cn({ e: "button" })), as: "div", variant: Button_1.BUTTON_VARIANT.SECONDARY, tabIndex: -1 }, buttonProps), label),
         errorText && (react_1.default.createElement(Truncate_1.Truncate, { className: cn({ e: "truncate" }) },
             react_1.default.createElement(Text_1.Text, { as: "span", className: cn({ e: "error" }) }, errorText))),

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

@@ -120,7 +120,8 @@ export declare enum ICON_TYPE {
     USER_PLUS = "user-plus",
     USERS = "users",
     USER_FRIENDS = "user-friends",
-    USER_SHIELD = "user-shield"
+    USER_SHIELD = "user-shield",
+    WRENCH = "wrench"
 }
 export declare enum ICON_STYLE_PREFIX {
     SOLID = "fas",

package/public/components/Icon/Icon.js

@@ -145,12 +145,13 @@ const faUserFriends_1 = require("@fortawesome/free-solid-svg-icons/faUserFriends
 const faUserPlus_1 = require("@fortawesome/free-solid-svg-icons/faUserPlus");
 const faUsers_1 = require("@fortawesome/free-solid-svg-icons/faUsers");
 const faUserShield_1 = require("@fortawesome/free-solid-svg-icons/faUserShield");
+const faWrench_1 = require("@fortawesome/free-solid-svg-icons/faWrench");
 const svg_1 = require("./svg");
 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, 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, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, 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, faHighlighter_1.faHighlighter, 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, 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, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserShield_1.faUserShield);
+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, 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, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, 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, faHighlighter_1.faHighlighter, 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, 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, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserShield_1.faUserShield, faWrench_1.faWrench);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -284,6 +285,7 @@ var ICON_TYPE;
     ICON_TYPE["USERS"] = "users";
     ICON_TYPE["USER_FRIENDS"] = "user-friends";
     ICON_TYPE["USER_SHIELD"] = "user-shield";
+    ICON_TYPE["WRENCH"] = "wrench";
 })(ICON_TYPE = exports.ICON_TYPE || (exports.ICON_TYPE = {}));
 var ICON_STYLE_PREFIX;
 (function (ICON_STYLE_PREFIX) {

package/public/css/styles.css

@@ -7966,6 +7966,11 @@ override built-in Image component classes */
   margin-bottom: 20px;
 }
 
+.my-1 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -7991,11 +7996,6 @@ override built-in Image component classes */
   margin-right: 4px;
 }
 
-.my-1 {
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
 .ml-auto {
   margin-left: auto;
 }
@@ -8044,10 +8044,6 @@ override built-in Image component classes */
   margin-top: 32px;
 }
 
-.mb-8 {
-  margin-bottom: 32px;
-}
-
 .mb-1 {
   margin-bottom: 4px;
 }
@@ -8080,6 +8076,10 @@ override built-in Image component classes */
   margin-bottom: -4px;
 }
 
+.mb-8 {
+  margin-bottom: 32px;
+}
+
 .ml-1 {
   margin-left: 4px;
 }
@@ -8313,6 +8313,10 @@ override built-in Image component classes */
   resize: both;
 }
 
+.list-disc {
+  list-style-type: disc;
+}
+
 .flex-row {
   flex-direction: row;
 }