@conveyorhq/arrow-ds 1.168.0 → 1.170.0

package/package.json

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

package/public/components/Avatar/Avatar.d.ts

@@ -19,6 +19,7 @@ type SystemAvatarProps = SharedAvatarProps & {
 interface UserAvatarComponentProps extends GravatarOrInitialsProps {
     imgSrc?: string;
     enableTooltip?: boolean;
+    tooltipClassName?: string;
 }
 type UserAvatarProps = SharedAvatarProps & UserAvatarComponentProps & {
     type: AVATAR_TYPE.USER;

package/public/components/Avatar/Avatar.js

@@ -142,13 +142,12 @@ const Avatar = ({ size: sizeProp = "medium", square, bordered, className, style,
     const avatarContext = (0, react_1.useContext)(context_1.AvatarContext);
     const size = avatarContext ? avatarContext.size : sizeProp;
     if (rest.type === types_1.AVATAR_TYPE.USER && (rest.email || rest.imgSrc)) {
-        const { type, email, imgSrc, name, firstInitial, lastInitial, enableTooltip = false, ...userRest } = rest;
-        return (react_1.default.createElement(exports.AvatarWrapper, { size: size, square: square, bordered: bordered, className: className, style: style, title: alt, ...userRest }, enableTooltip && (name || email) ? (react_1.default.createElement(Tooltip_1.Tooltip, { placement: "top", referenceElement: react_1.default.createElement(Box_1.Box, { className: "h-full" },
+        const { type, email, imgSrc, name, firstInitial, lastInitial, enableTooltip = false, tooltipClassName, ...userRest } = rest;
+        return (react_1.default.createElement(exports.AvatarWrapper, { size: size, square: square, bordered: bordered, className: className, style: style, title: alt, ...userRest }, enableTooltip && (name || email) ? (react_1.default.createElement(Tooltip_1.Tooltip, { placement: "top", className: tooltipClassName, referenceElement: react_1.default.createElement(Box_1.Box, { className: "h-full" },
                 react_1.default.createElement(UserAvatar, { email: email, imgSrc: imgSrc, name: name, firstInitial: firstInitial, lastInitial: lastInitial, size: size, alt: alt })) },
-            name && react_1.default.createElement("span", null,
-                name,
-                "\u00A0"),
-            react_1.default.createElement("span", { className: "text-gray-400" }, email))) : (react_1.default.createElement(UserAvatar, { email: email, imgSrc: imgSrc, name: name, firstInitial: firstInitial, lastInitial: lastInitial, size: size, alt: alt }))));
+            react_1.default.createElement(Flex_1.Flex, { className: "flex-col items-start" },
+                name && react_1.default.createElement("span", null, name),
+                react_1.default.createElement("span", { className: name ? "text-gray-400" : undefined }, email)))) : (react_1.default.createElement(UserAvatar, { email: email, imgSrc: imgSrc, name: name, firstInitial: firstInitial, lastInitial: lastInitial, size: size, alt: alt }))));
     }
     const { type, ...nonUserRest } = rest;
     if (type === types_1.AVATAR_TYPE.USER) {

package/public/components/Banner/Banner.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { BoxProps } from "../Box";
 import { HeadingProps } from "../Heading";
 import { STATUS_VARIANT } from "../../types";
-import { StatusIconProps } from "../Icon";
+import { CUSTOM_ICON_TYPE, ICON_STYLE_PREFIX, ICON_TYPE, StatusIconProps } from "../Icon";
 import { CloseButtonProps } from "../CloseButton";
 interface SharedBannerRootProps extends BoxProps {
     variant?: STATUS_VARIANT;
@@ -10,17 +10,26 @@ interface SharedBannerRootProps extends BoxProps {
 export interface BannerProps extends SharedBannerRootProps {
     title?: string;
     withIcon?: boolean;
+    icon?: ICON_TYPE | CUSTOM_ICON_TYPE;
+    iconPrefix?: ICON_STYLE_PREFIX;
 }
 export interface BannerRootProps extends SharedBannerRootProps {
     children: React.ReactNode;
 }
-export type BannerIconProps = StatusIconProps;
+export interface BannerIconProps extends StatusIconProps {
+    icon?: ICON_TYPE | CUSTOM_ICON_TYPE;
+    iconPrefix?: ICON_STYLE_PREFIX;
+}
+export type BannerContentStackProps = BoxProps;
 export type BannerTitleProps = HeadingProps;
+export type BannerBodyProps = BoxProps;
 export type BannerDismissProps = CloseButtonProps;
 declare const CompoundBanner: React.ForwardRefExoticComponent<Omit<BannerProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Root: React.ForwardRefExoticComponent<Omit<BannerRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Icon: React.ForwardRefExoticComponent<Omit<StatusIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Icon: React.ForwardRefExoticComponent<Omit<BannerIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    ContentStack: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Title: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+    Body: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Dismiss: React.ForwardRefExoticComponent<CloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
 };
 export { CompoundBanner as Banner };

package/public/components/Banner/Banner.js

@@ -44,12 +44,21 @@ const BannerRoot = (0, react_1.forwardRef)(function BannerRoot(props, ref) {
         react_1.default.createElement(Flex_1.Flex, { ref: ref, "data-component": "banner", className: (0, classnames_1.default)(cn(), cn({ m: variant }), className), role: "alert", ...rest }, children)));
 });
 const BannerIcon = (0, react_1.forwardRef)(function BannerIcon(props, ref) {
-    const { className, ...rest } = props;
+    const { icon, iconPrefix, className, ...rest } = props;
+    if (icon) {
+        return (react_1.default.createElement(Icon_1.Icon, { ref: ref, icon: icon, className: (0, classnames_1.default)(cn({ e: "icon" }), className), prefix: iconPrefix, ...rest }));
+    }
     return (react_1.default.createElement(Icon_1.StatusIcon, { ref: ref, className: (0, classnames_1.default)(cn({ e: "icon" }), className), ...rest }));
 });
+const BannerContentStack = (0, react_1.forwardRef)(function BannerContentStack({ children, className, ...props }, ref) {
+    return (react_1.default.createElement(Flex_1.Flex, { ref: ref, className: (0, classnames_1.default)("flex-col gap-y-1 w-full", className), ...props }, children));
+});
 const BannerTitle = (0, react_1.forwardRef)(function BannerTitle({ children, ...props }, ref) {
     return (react_1.default.createElement(Heading_1.Heading.H5, { ref: ref, ...props }, children));
 });
+const BannerBody = (0, react_1.forwardRef)(function BannerBody({ children, className, ...props }, ref) {
+    return (react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)("w-full", className), ref: ref, ...props }, children));
+});
 const BannerDismiss = (0, react_1.forwardRef)(function BannerDismiss({ className, ...props }, ref) {
     return (react_1.default.createElement(CloseButton_1.CloseButton, { ref: ref, className: (0, classnames_1.default)([
             "text-gray-800 hover:text-gray-700",
@@ -59,17 +68,19 @@ const BannerDismiss = (0, react_1.forwardRef)(function BannerDismiss({ className
         ]), ...props }));
 });
 const Banner = (0, react_1.forwardRef)(function Banner(props, ref) {
-    const { variant = types_1.STATUS_VARIANT.DEFAULT, title, className, children, withIcon = false, ...rest } = props;
+    const { variant = types_1.STATUS_VARIANT.DEFAULT, title, className, children, withIcon = false, icon, iconPrefix, ...rest } = props;
     return (react_1.default.createElement(BannerRoot, { ref: ref, className: className, variant: variant, ...rest },
-        withIcon && react_1.default.createElement(BannerIcon, null),
-        title ? (react_1.default.createElement(Flex_1.Flex, { className: "flex-col gap-y-1 w-full" },
+        (withIcon || icon) && react_1.default.createElement(BannerIcon, { icon: icon, iconPrefix: iconPrefix }),
+        title ? (react_1.default.createElement(BannerContentStack, null,
             react_1.default.createElement(BannerTitle, null, title),
-            react_1.default.createElement(Box_1.Box, { className: "w-full" }, children))) : (react_1.default.createElement(Box_1.Box, { className: "w-full" }, children))));
+            react_1.default.createElement(BannerBody, null, children))) : (react_1.default.createElement(BannerBody, null, children))));
 });
 const CompoundBanner = Object.assign(Banner, {
     Root: BannerRoot,
     Icon: BannerIcon,
+    ContentStack: BannerContentStack,
     Title: BannerTitle,
+    Body: BannerBody,
     Dismiss: BannerDismiss,
 });
 exports.Banner = CompoundBanner;

package/src/components/Avatar/Avatar.tsx

@@ -116,6 +116,10 @@ interface UserAvatarComponentProps extends GravatarOrInitialsProps {
    * missing.
    */
   enableTooltip?: boolean;
+  /**
+   * Classname to be applied to the underlying tooltip component.
+   */
+  tooltipClassName?: string;
 }
 
 type UserAvatarProps = SharedAvatarProps &
@@ -356,6 +360,7 @@ export const Avatar = ({
       firstInitial,
       lastInitial,
       enableTooltip = false,
+      tooltipClassName,
       ...userRest
     } = rest;
     return (
@@ -371,6 +376,7 @@ export const Avatar = ({
         {enableTooltip && (name || email) ? (
           <Tooltip
             placement="top"
+            className={tooltipClassName}
             referenceElement={
               <Box className="h-full">
                 <UserAvatar
@@ -385,8 +391,12 @@ export const Avatar = ({
               </Box>
             }
           >
-            {name && <span>{name}&nbsp;</span>}
-            <span className="text-gray-400">{email}</span>
+            <Flex className="flex-col items-start">
+              {name && <span>{name}</span>}
+              <span className={name ? "text-gray-400" : undefined}>
+                {email}
+              </span>
+            </Flex>
           </Tooltip>
         ) : (
           <UserAvatar

package/src/components/Banner/Banner.stories.mdx

@@ -4,7 +4,7 @@ import { STATUS_VARIANT } from "../../types";
 import { Link } from "../Link";
 import { Text } from "../Text";
 import { Tooltip } from "../Tooltip";
-import { Flex } from "../Flex";
+import { ICON_STYLE_PREFIX, ICON_TYPE } from "../Icon";
 import { Banner } from "./Banner";
 
 export const variants = Object.values(STATUS_VARIANT);
@@ -56,19 +56,19 @@ most flexibility in your consuming app.
 
 <Canvas sourceState="shown">
   <Story name="Banner composition">
-    <Banner.Root>
+    <Banner.Root variant={STATUS_VARIANT.WARNING}>
       <Banner.Icon />
-      <Flex className="flex-col gap-y-1 w-full">
+      <Banner.ContentStack>
         <Banner.Title>
           You are inviting this person to be a Conveyor user
         </Banner.Title>
-        <Text>
+        <Banner.Body>
           By adding this person as a Conveyor user, they’ll receive an invite to
           join your Conveyor organization. Once this user accepts their
           invitation, they’ll be able to complete workforce training, own
           assets, and complete tickets.
-        </Text>
-      </Flex>
+        </Banner.Body>
+      </Banner.ContentStack>
       <Banner.Dismiss className="self-center" />
     </Banner.Root>
   </Story>
@@ -101,6 +101,8 @@ most flexibility in your consuming app.
 
 ### Status Variants With Icons
 
+Set the `withIcon` prop to `true` to show an icon next to the title. The icon is pre-defined based on the status variant.
+
 <Canvas sourceState="shown">
   <Story name="Banners with Icons">
     {variants.map((variant) => (
@@ -120,6 +122,28 @@ most flexibility in your consuming app.
   </Story>
 </Canvas>
 
+Instead of using `withIcon` and the pre-defined icon, you can set a custom icon using the `icon` prop paired with the optional `iconPrefix` prop.
+
+<Canvas sourceState="shown">
+  <Story name="Banners with Custom Icons">
+    {variants.map((variant) => (
+      <Banner
+        key={variant}
+        title="You are inviting this person to be a Conveyor user"
+        className="mb-4"
+        variant={STATUS_VARIANT[variant.toUpperCase()]}
+        icon={ICON_TYPE.STAR}
+        iconPrefix={ICON_STYLE_PREFIX.SOLID}
+      >
+        By adding this person as a Conveyor user, they’ll receive an invite to
+        join your Conveyor organization. Once this user accepts their
+        invitation, they’ll be able to complete workforce training, own assets,
+        and complete tickets.
+      </Banner>
+    ))}
+  </Story>
+</Canvas>
+
 ### No Title
 
 <Canvas sourceState="shown">

package/src/components/Banner/Banner.tsx

@@ -5,7 +5,14 @@ import { Box, BoxProps } from "../Box";
 import { Heading, HeadingProps } from "../Heading";
 import { bemHOF } from "../../utilities/bem";
 import { STATUS_VARIANT } from "../../types";
-import { StatusIcon, StatusIconProps } from "../Icon";
+import {
+  CUSTOM_ICON_TYPE,
+  Icon,
+  ICON_STYLE_PREFIX,
+  ICON_TYPE,
+  StatusIcon,
+  StatusIconProps,
+} from "../Icon";
 import { Flex } from "../Flex";
 import { CloseButton, CloseButtonProps } from "../CloseButton";
 
@@ -19,6 +26,8 @@ interface SharedBannerRootProps extends BoxProps {
 export interface BannerProps extends SharedBannerRootProps {
   title?: string;
   withIcon?: boolean;
+  icon?: ICON_TYPE | CUSTOM_ICON_TYPE;
+  iconPrefix?: ICON_STYLE_PREFIX;
 }
 
 export interface BannerRootProps extends SharedBannerRootProps {
@@ -50,11 +59,26 @@ const BannerRoot = forwardRef<HTMLDivElement, BannerRootProps>(
   },
 );
 
-export type BannerIconProps = StatusIconProps;
+export interface BannerIconProps extends StatusIconProps {
+  icon?: ICON_TYPE | CUSTOM_ICON_TYPE;
+  iconPrefix?: ICON_STYLE_PREFIX;
+}
 
 const BannerIcon = forwardRef<HTMLSpanElement, BannerIconProps>(
   function BannerIcon(props, ref) {
-    const { className, ...rest } = props;
+    const { icon, iconPrefix, className, ...rest } = props;
+    if (icon) {
+      return (
+        <Icon
+          ref={ref}
+          icon={icon}
+          className={classNames(cn({ e: "icon" }), className)}
+          prefix={iconPrefix}
+          {...rest}
+        />
+      );
+    }
+
     return (
       <StatusIcon
         ref={ref}
@@ -65,6 +89,22 @@ const BannerIcon = forwardRef<HTMLSpanElement, BannerIconProps>(
   },
 );
 
+export type BannerContentStackProps = BoxProps;
+
+const BannerContentStack = forwardRef<HTMLDivElement, BannerContentStackProps>(
+  function BannerContentStack({ children, className, ...props }, ref) {
+    return (
+      <Flex
+        ref={ref}
+        className={classNames("flex-col gap-y-1 w-full", className)}
+        {...props}
+      >
+        {children}
+      </Flex>
+    );
+  },
+);
+
 export type BannerTitleProps = HeadingProps;
 
 const BannerTitle = forwardRef<HTMLHeadingElement, BannerTitleProps>(
@@ -77,6 +117,18 @@ const BannerTitle = forwardRef<HTMLHeadingElement, BannerTitleProps>(
   },
 );
 
+export type BannerBodyProps = BoxProps;
+
+const BannerBody = forwardRef<HTMLDivElement, BannerBodyProps>(
+  function BannerBody({ children, className, ...props }, ref) {
+    return (
+      <Box className={classNames("w-full", className)} ref={ref} {...props}>
+        {children}
+      </Box>
+    );
+  },
+);
+
 export type BannerDismissProps = CloseButtonProps;
 
 const BannerDismiss = forwardRef<HTMLButtonElement, CloseButtonProps>(
@@ -112,20 +164,22 @@ const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
     className,
     children,
     withIcon = false,
+    icon,
+    iconPrefix,
     ...rest
   } = props;
 
   return (
     <BannerRoot ref={ref} className={className} variant={variant} {...rest}>
-      {withIcon && <BannerIcon />}
+      {(withIcon || icon) && <BannerIcon icon={icon} iconPrefix={iconPrefix} />}
 
       {title ? (
-        <Flex className="flex-col gap-y-1 w-full">
+        <BannerContentStack>
           <BannerTitle>{title}</BannerTitle>
-          <Box className="w-full">{children}</Box>
-        </Flex>
+          <BannerBody>{children}</BannerBody>
+        </BannerContentStack>
       ) : (
-        <Box className="w-full">{children}</Box>
+        <BannerBody>{children}</BannerBody>
       )}
     </BannerRoot>
   );
@@ -134,7 +188,9 @@ const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
 const CompoundBanner = Object.assign(Banner, {
   Root: BannerRoot,
   Icon: BannerIcon,
+  ContentStack: BannerContentStack,
   Title: BannerTitle,
+  Body: BannerBody,
   Dismiss: BannerDismiss,
 });