@conveyorhq/arrow-ds 1.181.0 → 1.183.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.181.0",
+  "version": "1.183.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {
@@ -44,13 +44,15 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-focus-lock": "^2.2.1",
     "react-hot-toast": "^2.4.1",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^9.0.3",
     "react-merge-refs": "^1.1.0",
     "react-popper": "^2.3.0",
     "react-remove-scroll": "^2.2.0",
     "react-select": "^4.0.2",
     "react-spring": "^8.0.27",
-    "remark-breaks": "^2.0.2"
+    "remark-breaks": "^4.0.0",
+    "remark-directive": "^3.0.0",
+    "remark-directive-rehype": "^0.4.2"
   },
   "scripts": {
     "prepublishOnly": "yarn run build",

package/public/components/Chip/Chip.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+export interface ChipProps {
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ChipDefault: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+declare const integrationNames: readonly ["salesforce"];
+export declare const ChipIntegration: React.ForwardRefExoticComponent<ChipProps & {
+    integration: (typeof integrationNames)[number];
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>> & {
+    Integration: React.ForwardRefExoticComponent<ChipProps & {
+        integration: (typeof integrationNames)[number];
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/public/components/Chip/Chip.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = exports.ChipIntegration = exports.ChipDefault = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utilities_1 = require("../../utilities");
+const Flex_1 = require("../Flex");
+const IntegrationLogo_1 = require("../IntegrationLogo");
+const cn = (0, utilities_1.bemHOF)("Chip");
+exports.ChipDefault = (0, react_1.forwardRef)(function Chip({ children, className, style }, ref) {
+    return (react_1.default.createElement(Flex_1.Flex, { ref: ref, style: style, className: (0, classnames_1.default)(cn(), cn({ m: "default" }), className) }, children));
+});
+const integrationNames = ["salesforce"];
+exports.ChipIntegration = (0, react_1.forwardRef)(function ChipIntegration({ children, integration, className, style }, ref) {
+    const integrationClassNames = {
+        salesforce: "text-blue-400 bg-blue-300/15",
+    };
+    return (react_1.default.createElement(Flex_1.Flex, { ref: ref, style: style, className: (0, classnames_1.default)(cn(), integrationClassNames[integration], className) },
+        react_1.default.createElement(IntegrationLogo_1.IntegrationLogo, { logo: "salesforce", square: true, width: 13 }),
+        children));
+});
+exports.Chip = Object.assign({}, exports.ChipDefault, {
+    Integration: exports.ChipIntegration,
+});

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

@@ -0,0 +1 @@
+export * from "./Chip";

package/public/components/Chip/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Chip"), exports);

package/public/components/Markdown/Markdown.d.ts

@@ -1,10 +1,16 @@
 import React from "react";
-import { ReactMarkdownProps } from "react-markdown";
+import { Options as ReactMarkdownProps, Components as ReactMarkdownComponents } from "react-markdown";
 export interface MarkdownProps extends ReactMarkdownProps {
     children: string;
     className?: string;
     escapeHtml?: boolean;
     skipHtml?: boolean;
     renderPlainText?: boolean;
+    directives?: {
+        [key: string]: (props: {
+            children: string;
+        }) => JSX.Element;
+    } | null;
+    renderers?: ReactMarkdownComponents | null;
 }
-export declare const Markdown: ({ children, className, escapeHtml, skipHtml, renderPlainText, renderers, ...rest }: MarkdownProps) => React.JSX.Element;
+export declare const Markdown: ({ children, className, skipHtml, renderPlainText, components, directives: customDirectives, renderers, ...rest }: MarkdownProps) => React.JSX.Element;

package/public/components/Markdown/Markdown.js

@@ -8,16 +8,22 @@ const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_breaks_1 = __importDefault(require("remark-breaks"));
+const remark_directive_1 = __importDefault(require("remark-directive"));
+const remark_directive_rehype_1 = __importDefault(require("remark-directive-rehype"));
 const bem_1 = require("../../utilities/bem");
-const Text_1 = require("../Text");
+const chip_1 = require("./directives/chip");
 const cn = "Markdown";
-const TextRenderer = (as = "p") => ({ children, }) => react_1.default.createElement(Text_1.Text, { as: as }, children);
-const Markdown = ({ children, className, escapeHtml = true, skipHtml = false, renderPlainText = false, renderers, ...rest }) => {
+const Markdown = ({ children, className, skipHtml = false, renderPlainText = false, components, directives: customDirectives, renderers, ...rest }) => {
     const plainTextRenderers = renderPlainText
         ? {
-            heading: TextRenderer(),
-            strong: TextRenderer("span"),
-            emphasis: TextRenderer("span"),
+            h1: ({ ...props }) => react_1.default.createElement("p", { ...props }),
+            h2: ({ ...props }) => react_1.default.createElement("p", { ...props }),
+            h3: ({ ...props }) => react_1.default.createElement("p", { ...props }),
+            h4: ({ ...props }) => react_1.default.createElement("p", { ...props }),
+            h5: ({ ...props }) => react_1.default.createElement("p", { ...props }),
+            h6: ({ ...props }) => react_1.default.createElement("p", { ...props }),
+            strong: ({ ...props }) => react_1.default.createElement("span", { ...props }),
+            em: ({ ...props }) => react_1.default.createElement("span", { ...props }),
         }
         : undefined;
     const linkRenderer = ({ href, children: text, }) => {
@@ -25,15 +31,23 @@ const Markdown = ({ children, className, escapeHtml = true, skipHtml = false, re
             target: "_blank",
             rel: "noopener noreferrer",
         };
-        if (href.startsWith("http")) {
+        if (href === null || href === void 0 ? void 0 : href.startsWith("http")) {
             return (react_1.default.createElement("a", { href: href, ...externalLinkProps }, text));
         }
         return react_1.default.createElement("a", { href: href }, text);
     };
-    return (react_1.default.createElement(react_markdown_1.default, { className: (0, classnames_1.default)((0, bem_1.bem)(cn), className), source: children, escapeHtml: escapeHtml, skipHtml: skipHtml, renderers: {
+    const directives = {
+        "salesforce-chip": chip_1.MarkdownDirectiveChipSalesforce,
+        "conveyor-chip": chip_1.MarkdownDirectiveChipConveyor,
+        "info-chip": chip_1.MarkdownDirectiveChipInfo,
+        ...customDirectives,
+    };
+    return (react_1.default.createElement(react_markdown_1.default, { className: (0, classnames_1.default)((0, bem_1.bem)(cn), className), skipHtml: skipHtml, components: {
             ...plainTextRenderers,
-            link: linkRenderer,
+            ...directives,
+            a: linkRenderer,
+            ...components,
             ...renderers,
-        }, plugins: [remark_breaks_1.default], ...rest }));
+        }, remarkPlugins: [remark_breaks_1.default, remark_directive_1.default, remark_directive_rehype_1.default], ...rest }, children));
 };
 exports.Markdown = Markdown;

package/public/components/Markdown/directives/chip.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare const MarkdownDirectiveChipSalesforce: ({ children, }: {
+    children: string;
+}) => React.JSX.Element;
+export declare const MarkdownDirectiveChipConveyor: ({ children, }: {
+    children?: string | undefined;
+}) => React.JSX.Element;
+export declare const MarkdownDirectiveChipInfo: ({ children, }: {
+    children: string;
+}) => React.JSX.Element;

package/public/components/Markdown/directives/chip.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownDirectiveChipInfo = exports.MarkdownDirectiveChipConveyor = exports.MarkdownDirectiveChipSalesforce = void 0;
+const react_1 = __importDefault(require("react"));
+const tokens_1 = require("../../../style-dictionary/dist/tokens");
+const Chip_1 = require("../../Chip");
+const IntegrationLogo_1 = require("../../IntegrationLogo");
+const sharedProps = {
+    className: "inline-flex uppercase",
+    style: {
+        verticalAlign: "text-bottom",
+    },
+};
+const MarkdownDirectiveChipSalesforce = ({ children, }) => {
+    return (react_1.default.createElement(Chip_1.Chip.Integration, { integration: "salesforce", ...sharedProps }, children.replace("=>", "→")));
+};
+exports.MarkdownDirectiveChipSalesforce = MarkdownDirectiveChipSalesforce;
+const MarkdownDirectiveChipConveyor = ({ children, }) => {
+    return (react_1.default.createElement(Chip_1.Chip, { ...sharedProps },
+        react_1.default.createElement(IntegrationLogo_1.IntegrationLogo, { logo: "conveyor", square: true, width: 13, color: tokens_1.tokens.color.gray[700], className: "flex-shrink-0" }),
+        children || "Conveyor"));
+};
+exports.MarkdownDirectiveChipConveyor = MarkdownDirectiveChipConveyor;
+const MarkdownDirectiveChipInfo = ({ children, }) => {
+    return react_1.default.createElement(Chip_1.Chip, { ...sharedProps }, children);
+};
+exports.MarkdownDirectiveChipInfo = MarkdownDirectiveChipInfo;

package/public/components/Markdown/directives/index.d.ts

@@ -0,0 +1 @@
+export * from "./chip";

package/public/components/Markdown/directives/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./chip"), exports);

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

@@ -1 +1,2 @@
 export { Markdown } from "./Markdown";
+export * from "./directives";

package/public/components/Markdown/index.js

@@ -1,5 +1,20 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Markdown = void 0;
 var Markdown_1 = require("./Markdown");
 Object.defineProperty(exports, "Markdown", { enumerable: true, get: function () { return Markdown_1.Markdown; } });
+__exportStar(require("./directives"), exports);

package/public/css/styles.css

@@ -2387,6 +2387,28 @@ override built-in Image component classes */
   outline-offset: -1px;
 }
 
+.ads-Chip {
+  width: -webkit-max-content;
+  width: max-content;
+  align-items: center;
+  -webkit-column-gap: 4px;
+          column-gap: 4px;
+  border-radius: 9999px;
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: 12px;
+  font-weight: 500;
+
+  height: 18px;
+}
+
+.ads-Chip--default {
+  --tw-bg-opacity: 1;
+  background-color: rgb(222 231 238 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(71 104 125 / var(--tw-text-opacity));
+}
+
 .ads-CloseButton {
   display: flex;
   height: 24px;
@@ -4528,6 +4550,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 +4598,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);
@@ -8619,6 +8649,10 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   background-color: rgb(222 231 238 / var(--tw-bg-opacity));
 }
 
+.bg-blue-300\/15 {
+  background-color: rgb(62 158 245 / 0.15);
+}
+
 .bg-screen {
   background-color: rgba(0, 0, 0, 0.25);
 }
@@ -8784,6 +8818,11 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   color: rgb(32 65 86 / var(--tw-text-opacity));
 }
 
+.text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(13 125 228 / var(--tw-text-opacity));
+}
+
 .text-placeholder {
   --tw-text-opacity: 1;
   color: rgb(134 163 181 / var(--tw-text-opacity));
@@ -9155,6 +9194,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;
@@ -9224,6 +9287,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);
 }