@conveyorhq/arrow-ds 1.170.0 → 1.171.0

package/package.json

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

package/public/components/Button/Button.js

@@ -32,6 +32,7 @@ const react_1 = __importStar(require("react"));
 const Icon_1 = require("../Icon");
 const Link_1 = require("../Link");
 const bem_1 = require("../../utilities/bem");
+const strings_1 = require("../../utilities/strings");
 const ButtonGroup_1 = require("./ButtonGroup");
 const contexts_1 = require("../../contexts");
 const cn = "Button";
@@ -70,7 +71,7 @@ function getButtonSizeClasses(size, icon, children) {
         ? buttonIconOnlySizeClasses[size]
         : buttonSizeClasses[size];
 }
-const Button = (0, react_1.forwardRef)(({ as: Component = "button", children, className, block = false, size = BUTTON_SIZE.MEDIUM, variant = BUTTON_VARIANT.PRIMARY, depressed = false, isLoading = false, theme: themeProp, icon, iconColor, iconSpin = false, iconPosition = BUTTON_ICON_POSITION.LEFT, iconPrefix, disabled, type: typeProp, ...rest }, ref) => {
+const Button = (0, react_1.forwardRef)(({ as: Component = "button", children, className, block = false, size = BUTTON_SIZE.MEDIUM, variant = BUTTON_VARIANT.PRIMARY, depressed = false, isLoading = false, theme: themeProp, icon, iconColor, iconSpin = false, iconPosition = BUTTON_ICON_POSITION.LEFT, iconPrefix, disabled, type: typeProp, href, ...rest }, ref) => {
     const isDisabled = disabled || isLoading;
     const themeContext = (0, react_1.useContext)(contexts_1.ThemeContext);
     const theme = themeProp || themeContext;
@@ -90,10 +91,11 @@ const Button = (0, react_1.forwardRef)(({ as: Component = "button", children, cl
         type = "button";
     }
     const propsIfLink = Component === Link_1.Link ? { noStyles: true } : {};
+    const safeHref = (0, strings_1.isSafeUrl)(href) ? href : "#";
     if (variant === BUTTON_VARIANT.PLAIN) {
         return (react_1.default.createElement(Component, { type: type, className: className, disabled: disabled, ref: ref, ...rest }, children));
     }
-    return (react_1.default.createElement(Component, { type: type, className: buttonClassNames, disabled: isDisabled, ref: ref, ...propsIfLink, ...rest },
+    return (react_1.default.createElement(Component, { type: type, className: buttonClassNames, disabled: isDisabled, ref: ref, href: safeHref, ...propsIfLink, ...rest },
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.LEFT && (react_1.default.createElement(Icon_1.Icon, { ...iconProps })),
         children && (react_1.default.createElement("span", { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "content" }), isLoading && (0, bem_1.bem)(cn, { e: "content", m: "invisible" })) }, children)),
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.RIGHT && (react_1.default.createElement(Icon_1.Icon, { ...iconProps })),

package/public/components/Link/Link.js

@@ -30,12 +30,14 @@ exports.Link = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
+const strings_1 = require("../../utilities/strings");
 const status_1 = require("../../contexts/status");
 const cn = "Link";
 exports.Link = (0, react_1.forwardRef)((props, ref) => {
-    const { as: Component = "a", className, disabled, noStyles, statusVariant: statusVariantProp, target, ...rest } = props;
+    const { as: Component = "a", className, disabled, noStyles, statusVariant: statusVariantProp, target, href, ...rest } = props;
     const context = (0, react_1.useContext)(status_1.StatusContext);
     const calculatedVariant = statusVariantProp || context;
     const classes = (0, classnames_1.default)(!noStyles && (0, bem_1.bem)(cn), calculatedVariant && (0, bem_1.bem)(cn, { m: calculatedVariant }), disabled && "isDisabled", className);
-    return (react_1.default.createElement(Component, { className: classes, disabled: Component === "button" && disabled, target: target, rel: `${target === "_blank" ? "noopener noreferrer" : ""}`, ref: ref, ...rest }));
+    const safeHref = (0, strings_1.isSafeUrl)(href) ? href : "#";
+    return (react_1.default.createElement(Component, { className: classes, disabled: Component === "button" && disabled, target: target, rel: `${target === "_blank" ? "noopener noreferrer" : ""}`, ref: ref, href: safeHref, ...rest }));
 });

package/public/components/Reference/Reference.js

@@ -31,14 +31,18 @@ const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Box_1 = require("../Box");
 const bem_1 = require("../../utilities/bem");
+const strings_1 = require("../../utilities/strings");
 const Icon_1 = require("../Icon");
 const Badge_1 = require("../Badge");
 const cn = "Reference";
 const ReferenceGroup = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)((0, bem_1.bem)(`${cn}Group`), className), ...rest }));
-const Reference = (0, react_1.forwardRef)(({ as: Component = "a", disabled, className, icon, iconPrefix, badgeVariant, badgeLabel, children, target, noLink, reverse = false, ...rest }, ref) => (react_1.default.createElement(Component, { className: (0, classnames_1.default)((0, bem_1.bem)(cn), !noLink && (0, bem_1.bem)(cn, { m: "isLink" }), disabled && (0, bem_1.bem)(cn, { m: "disabled" }), reverse && "flex-row-reverse", className), disabled: Component === "button" && disabled, target: target, rel: `${target === "_blank" ? "noopener noreferrer" : ""}`, ref: ref, ...rest },
-    icon && (react_1.default.createElement(Icon_1.Icon, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "icon" })), icon: icon, prefix: iconPrefix })),
-    children,
-    badgeLabel && (react_1.default.createElement(Badge_1.Badge, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "badge" })), variant: badgeVariant, size: Badge_1.BADGE_SIZE.MICRO }, badgeLabel)))));
+const Reference = (0, react_1.forwardRef)(({ as: Component = "a", disabled, className, icon, iconPrefix, badgeVariant, badgeLabel, children, target, noLink, reverse = false, href, ...rest }, ref) => {
+    const safeHref = (0, strings_1.isSafeUrl)(href) ? href : "#";
+    return (react_1.default.createElement(Component, { className: (0, classnames_1.default)((0, bem_1.bem)(cn), !noLink && (0, bem_1.bem)(cn, { m: "isLink" }), disabled && (0, bem_1.bem)(cn, { m: "disabled" }), reverse && "flex-row-reverse", className), disabled: Component === "button" && disabled, target: target, rel: `${target === "_blank" ? "noopener noreferrer" : ""}`, ref: ref, href: safeHref, ...rest },
+        icon && (react_1.default.createElement(Icon_1.Icon, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "icon" })), icon: icon, prefix: iconPrefix })),
+        children,
+        badgeLabel && (react_1.default.createElement(Badge_1.Badge, { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "badge" })), variant: badgeVariant, size: Badge_1.BADGE_SIZE.MICRO }, badgeLabel))));
+});
 const CompoundReference = Object.assign(Reference, {
     Group: ReferenceGroup,
 });

package/public/utilities/strings.d.ts

@@ -1,2 +1,3 @@
 export declare const capitalize: (s: string) => string;
 export declare const camelToTitleCase: (s: string) => string;
+export declare const isSafeUrl: (url: string) => boolean;

package/public/utilities/strings.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.camelToTitleCase = exports.capitalize = void 0;
+exports.isSafeUrl = exports.camelToTitleCase = exports.capitalize = void 0;
 const capitalize = (s) => {
     return s.charAt(0).toUpperCase() + s.slice(1);
 };
@@ -10,3 +10,14 @@ const camelToTitleCase = (s) => {
     return result.charAt(0).toUpperCase() + result.slice(1);
 };
 exports.camelToTitleCase = camelToTitleCase;
+const isSafeUrl = (url) => {
+    const rejectedProtocols = ["javascript:"];
+    try {
+        const parsedUrl = new URL(url, window.location.origin);
+        return !rejectedProtocols.includes(parsedUrl.protocol);
+    }
+    catch (e) {
+        return false;
+    }
+};
+exports.isSafeUrl = isSafeUrl;

package/src/components/Button/Button.tsx

@@ -8,6 +8,7 @@ import React, {
 import { Icon, IconType, ICON_TYPE, ICON_STYLE_PREFIX } from "../Icon";
 import { Link } from "../Link";
 import { bem } from "../../utilities/bem";
+import { isSafeUrl } from "../../utilities/strings";
 import { ButtonGroup } from "./ButtonGroup";
 import { THEME } from "../../types";
 import { ThemeContext } from "../../contexts";
@@ -131,6 +132,7 @@ const Button = forwardRef<HTMLElement, ButtonProps>(
       disabled,
       type: typeProp,
       // Other
+      href,
       ...rest
     }: ButtonProps,
     ref,
@@ -173,6 +175,7 @@ const Button = forwardRef<HTMLElement, ButtonProps>(
       type = "button";
     }
     const propsIfLink = Component === Link ? { noStyles: true } : {};
+    const safeHref = isSafeUrl(href) ? href : "#";
 
     if (variant === BUTTON_VARIANT.PLAIN) {
       return (
@@ -194,6 +197,7 @@ const Button = forwardRef<HTMLElement, ButtonProps>(
         className={buttonClassNames}
         disabled={isDisabled}
         ref={ref}
+        href={safeHref}
         {...propsIfLink}
         {...rest}
       >

package/src/components/Link/Link.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useContext } from "react";
 import classNames from "classnames";
 import { bem } from "../../utilities/bem";
+import { isSafeUrl } from "../../utilities/strings";
 import { STATUS_VARIANT } from "../../types";
 import { StatusContext } from "../../contexts/status";
 
@@ -24,6 +25,7 @@ export const Link = forwardRef<
     noStyles,
     statusVariant: statusVariantProp,
     target,
+    href,
     ...rest
   } = props;
   const context = useContext(StatusContext);
@@ -36,6 +38,8 @@ export const Link = forwardRef<
     className,
   );
 
+  const safeHref = isSafeUrl(href) ? href : "#";
+
   return (
     <Component
       className={classes}
@@ -43,6 +47,7 @@ export const Link = forwardRef<
       target={target}
       rel={`${target === "_blank" ? "noopener noreferrer" : ""}`}
       ref={ref}
+      href={safeHref}
       {...rest}
     />
   );

package/src/components/Reference/Reference.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from "react";
 import classNames from "classnames";
 import { Box, BoxProps } from "../Box";
 import { bem } from "../../utilities/bem";
+import { isSafeUrl } from "../../utilities/strings";
 import { ICON_STYLE_PREFIX, Icon, IconType } from "../Icon";
 import { STATUS_VARIANT } from "../../types";
 import { Badge, BADGE_SIZE } from "../Badge";
@@ -42,43 +43,48 @@ const Reference = forwardRef<HTMLElement, ReferenceProps>(
       target,
       noLink,
       reverse = false,
+      href,
       ...rest
     },
     ref,
-  ) => (
-    <Component
-      className={classNames(
-        bem(cn),
-        !noLink && bem(cn, { m: "isLink" }),
-        disabled && bem(cn, { m: "disabled" }),
-        reverse && "flex-row-reverse",
-        className,
-      )}
-      disabled={Component === "button" && disabled}
-      target={target}
-      rel={`${target === "_blank" ? "noopener noreferrer" : ""}`}
-      ref={ref}
-      {...rest}
-    >
-      {icon && (
-        <Icon
-          className={classNames(bem(cn, { e: "icon" }))}
-          icon={icon}
-          prefix={iconPrefix}
-        />
-      )}
-      {children}
-      {badgeLabel && (
-        <Badge
-          className={classNames(bem(cn, { e: "badge" }))}
-          variant={badgeVariant}
-          size={BADGE_SIZE.MICRO}
-        >
-          {badgeLabel}
-        </Badge>
-      )}
-    </Component>
-  ),
+  ) => {
+    const safeHref = isSafeUrl(href) ? href : "#";
+    return (
+      <Component
+        className={classNames(
+          bem(cn),
+          !noLink && bem(cn, { m: "isLink" }),
+          disabled && bem(cn, { m: "disabled" }),
+          reverse && "flex-row-reverse",
+          className,
+        )}
+        disabled={Component === "button" && disabled}
+        target={target}
+        rel={`${target === "_blank" ? "noopener noreferrer" : ""}`}
+        ref={ref}
+        href={safeHref}
+        {...rest}
+      >
+        {icon && (
+          <Icon
+            className={classNames(bem(cn, { e: "icon" }))}
+            icon={icon}
+            prefix={iconPrefix}
+          />
+        )}
+        {children}
+        {badgeLabel && (
+          <Badge
+            className={classNames(bem(cn, { e: "badge" }))}
+            variant={badgeVariant}
+            size={BADGE_SIZE.MICRO}
+          >
+            {badgeLabel}
+          </Badge>
+        )}
+      </Component>
+    );
+  },
 );
 
 const CompoundReference = Object.assign(Reference, {

package/src/utilities/strings.ts

@@ -6,3 +6,14 @@ export const camelToTitleCase = (s: string) => {
   const result = s.replace(/([A-Z])/g, " $1");
   return result.charAt(0).toUpperCase() + result.slice(1);
 };
+
+export const isSafeUrl = (url: string) => {
+  // eslint-disable-next-line no-script-url
+  const rejectedProtocols = ["javascript:"];
+  try {
+    const parsedUrl = new URL(url, window.location.origin);
+    return !rejectedProtocols.includes(parsedUrl.protocol);
+  } catch (e) {
+    return false;
+  }
+};