@vention/machine-ui 6.1.12 → 6.3.0

package/README.md

@@ -94,7 +94,7 @@ Components built on an MUI component (noted as "built on MUI `X`") accept that c
 - `VentionProgressBar`: a horizontal progress bar. `value` runs from 0 to 100.
 - `VentionSpinner`: a circular progress indicator. With `type="progress"` it shows `value`, from 0 to 100.
 - `VentionSkeleton`: a loading placeholder. `variant` (`"text"`, `"rounded"` or `"circular"`) decides which other props it needs.
-- `VentionStatusDot`: a small colored dot. `color` takes any CSS color, such as a `COLORS` value.
+- `VentionStatusDot`: a small colored dot. `dotColor` takes the same colors as `VentionBadge`: `"red"`, `"blue"`, `"green"`, `"yellow"` or `"slate"`. The older `color`, which takes any CSS color, is deprecated.
 - `VentionStatusIndicator`: a status dot with a text label, such as a machine state. Use `size="xx-large"` on touch HMIs.
 - `VentionBadge`: a small labeled tag. Pair the color with a text label, since color alone is hard to read on a shop floor.
 - `VentionTooltip`: a tooltip on hover or focus, built on MUI `Tooltip`. `placement` defaults to `"top-end"`. Hover does not exist on touch screens, so don't put information an operator needs only in a tooltip.

package/index.esm.js

@@ -5957,6 +5957,93 @@ $$n({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {
   }
 });
 
+const VentionStatusDot = props => {
+  const {
+    size = "small",
+    borderWidth = 2,
+    className
+  } = props;
+  const {
+    classes,
+    cx
+  } = useStyles$J({
+    dotColor: props.dotColor,
+    color: props.color,
+    borderColor: props.borderColor,
+    borderWidth,
+    size
+  });
+  return jsx("div", {
+    className: cx(classes.root, className),
+    "data-testid": "vention-status-dot",
+    children: jsx("div", {
+      className: classes.dot
+    })
+  });
+};
+const useStyles$J = tss.withParams().create(({
+  dotColor,
+  color,
+  borderColor,
+  borderWidth,
+  size,
+  theme
+}) => {
+  const sizeMapping = {
+    small: {
+      rootSize: 16,
+      dotSize: 8
+    },
+    medium: {
+      rootSize: 24,
+      dotSize: 12
+    },
+    "x-large": {
+      rootSize: 28,
+      dotSize: 14
+    },
+    "xx-large": {
+      rootSize: 32,
+      dotSize: 16
+    }
+  };
+  const {
+    rootSize,
+    dotSize
+  } = sizeMapping[size];
+  return {
+    root: {
+      width: rootSize,
+      height: rootSize,
+      padding: rootSize / 4,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    dot: {
+      width: dotSize,
+      height: dotSize,
+      background: dotColor ? getDotFillColor(dotColor, theme) : color,
+      borderRadius: "50%",
+      border: borderColor ? `${borderWidth}px solid ${borderColor}` : "none"
+    }
+  };
+});
+function getDotFillColor(dotColor, theme) {
+  switch (dotColor) {
+    case "red":
+      return theme.palette.background.destructive;
+    case "blue":
+      return theme.palette.background.blue;
+    case "green":
+      return theme.palette.background.success;
+    case "yellow":
+      return theme.palette.background.warning;
+    case "slate":
+      return theme.palette.background.mutedSlate;
+  }
+}
+
 function VentionAvatar({
   initials,
   name,
@@ -5966,12 +6053,14 @@ function VentionAvatar({
   state = "default",
   className,
   imageUrl,
-  focused
+  focused,
+  statusDotColor
 }) {
   const {
     classes,
-    cx
-  } = useStyles$J({
+    cx,
+    theme
+  } = useStyles$I({
     size,
     variant,
     color,
@@ -5994,10 +6083,14 @@ function VentionAvatar({
     }), focused && jsx("div", {
       className: classes.focusBorder,
       "data-testid": "vention-avatar-focus-border"
-    })]
+    }), statusDotColor && jsx(VentionStatusDot, Object.assign({}, getStatusDot(size), {
+      dotColor: statusDotColor,
+      borderColor: theme.palette.border.white,
+      className: classes.statusDot
+    }))]
   });
 }
-const useStyles$J = tss.withParams().create(({
+const useStyles$I = tss.withParams().create(({
   size,
   variant,
   color,
@@ -6006,6 +6099,9 @@ const useStyles$J = tss.withParams().create(({
 }) => {
   const diameter = getAvatarDiameter(size);
   const focusInset = getAvatarFocusInset(size);
+  const {
+    borderWidth: ringWidth
+  } = getStatusDot(size);
   const {
     background,
     borderColor,
@@ -6044,6 +6140,14 @@ const useStyles$J = tss.withParams().create(({
       inset: focusInset,
       border: `2px solid ${COLORS.blue[400]}`,
       borderRadius: "50%"
+    },
+    statusDot: {
+      position: "absolute",
+      top: -ringWidth,
+      right: -ringWidth,
+      padding: 0,
+      width: "auto",
+      height: "auto"
     }
   };
 });
@@ -6065,6 +6169,25 @@ function getAvatarFocusInset(size) {
       return -1.5;
   }
 }
+function getStatusDot(size) {
+  switch (size) {
+    case "large":
+      return {
+        size: "medium",
+        borderWidth: 2
+      };
+    case "medium":
+      return {
+        size: "small",
+        borderWidth: 1
+      };
+    case "small":
+      return {
+        size: "small",
+        borderWidth: 1
+      };
+  }
+}
 function getInitialsTypographyVariant(size) {
   switch (size) {
     case "large":
@@ -6112,7 +6235,7 @@ const VentionBadge = props => {
   const {
     classes,
     cx
-  } = useStyles$I({
+  } = useStyles$H({
     size: props.size,
     color: props.color,
     variant: props.variant,
@@ -6133,7 +6256,7 @@ const VentionBadge = props => {
     })]
   });
 };
-const useStyles$I = tss.withParams().create(({
+const useStyles$H = tss.withParams().create(({
   size,
   color,
   variant,
@@ -6309,7 +6432,7 @@ const VentionIconButton = /*#__PURE__*/forwardRef((inputProps, ref) => {
   const {
     classes,
     cx
-  } = useStyles$H({
+  } = useStyles$G({
     variant: variant,
     size: size
   });
@@ -6324,7 +6447,7 @@ const VentionIconButton = /*#__PURE__*/forwardRef((inputProps, ref) => {
   }));
 });
 VentionIconButton.displayName = "VentionIconButton";
-const useStyles$H = tss.withParams().create(({
+const useStyles$G = tss.withParams().create(({
   variant,
   size,
   theme
@@ -6381,7 +6504,7 @@ const VentionDropdownButton = _a => {
   const {
     classes,
     cx
-  } = useStyles$G({
+  } = useStyles$F({
     variant,
     size,
     contentColor,
@@ -6444,7 +6567,7 @@ const VentionDropdownButton = _a => {
     })
   });
 };
-const useStyles$G = tss.withParams().create(({
+const useStyles$F = tss.withParams().create(({
   variant,
   size,
   contentColor,
@@ -6556,7 +6679,7 @@ const VentionCallout = inputProps => {
   const calloutProps = applyDefaultProps(inputProps, defaultProps$6);
   const {
     classes
-  } = useStyles$F({
+  } = useStyles$E({
     isSingleLine: calloutProps.isSingleLine,
     variant: calloutProps.variant,
     size: calloutProps.size
@@ -6678,7 +6801,7 @@ function getBottomMarginForDescription(isSingleLine, size) {
   }
   return "16px";
 }
-const useStyles$F = tss.withParams().create(({
+const useStyles$E = tss.withParams().create(({
   isSingleLine,
   variant,
   size,
@@ -6736,7 +6859,7 @@ if (NOT_GENERIC || INCORRECT_NAME) {
 const VentionCounter = props => {
   const {
     classes
-  } = useStyles$E({
+  } = useStyles$D({
     size: props.size,
     color: props.color,
     variant: props.variant
@@ -6759,7 +6882,7 @@ const getShownValue = props => {
   const displayCap = size === "small" ? 9 : 99;
   return value > displayCap ? `${displayCap}+` : value.toString();
 };
-const useStyles$E = tss.withParams().create(({
+const useStyles$D = tss.withParams().create(({
   size,
   color,
   variant,
@@ -6909,7 +7032,7 @@ const VentionModalBase = props => {
   const {
     classes,
     cx
-  } = useStyles$D({
+  } = useStyles$C({
     modalSize,
     isTouchDevice,
     width
@@ -6987,7 +7110,7 @@ const getModalStyle = (modalSize, width) => {
   };
   return modalStyles[modalSize];
 };
-const useStyles$D = tss.withParams().create(({
+const useStyles$C = tss.withParams().create(({
   modalSize,
   isTouchDevice,
   width,
@@ -7056,7 +7179,7 @@ const VentionModal = props => {
   } = props;
   const {
     classes
-  } = useStyles$C({
+  } = useStyles$B({
     modalSize,
     isTouchDevice,
     type,
@@ -7134,7 +7257,7 @@ const VentionModal = props => {
     })
   });
 };
-const useStyles$C = tss.withParams().create(({
+const useStyles$B = tss.withParams().create(({
   type,
   modalSize,
   isTouchDevice,
@@ -7276,7 +7399,7 @@ const VentionProgressBar = inputProps => {
   const isStatusState = props.state === "error" || props.state === "success";
   const {
     classes
-  } = useStyles$B({
+  } = useStyles$A({
     size: props.size,
     colored: props.colored,
     state: props.state
@@ -7314,7 +7437,7 @@ const VentionProgressBar = inputProps => {
     })]
   });
 };
-const useStyles$B = tss.withParams().create(({
+const useStyles$A = tss.withParams().create(({
   size,
   colored,
   state,
@@ -7383,7 +7506,7 @@ function VentionSkeleton(props) {
   const {
     classes,
     cx
-  } = useStyles$A({
+  } = useStyles$z({
     typography: props.variant === "text" ? props.typography : undefined
   });
   const className = cx(classes.root, props.className);
@@ -7416,7 +7539,7 @@ function VentionSkeleton(props) {
     "data-testid": testId
   });
 }
-const useStyles$A = tss.withParams().create(({
+const useStyles$z = tss.withParams().create(({
   theme,
   typography
 }) => ({
@@ -7695,7 +7818,7 @@ const VentionSteps = props => {
   const {
     classes,
     cx
-  } = useStyles$z(props);
+  } = useStyles$y(props);
   const typographyVariants = getTypographyVariants$1(props.size);
   let variant = props.variant;
   if (props.size === "small" && variant === "number") {
@@ -7748,7 +7871,7 @@ const VentionSteps = props => {
     })
   });
 };
-const useStyles$z = tss.withParams().withNestedSelectors().create(({
+const useStyles$y = tss.withParams().withNestedSelectors().create(({
   theme,
   size,
   classes
@@ -7929,72 +8052,6 @@ const VARIABLE_SIZES = {
   }
 };
 
-const VentionStatusDot = props => {
-  const {
-    size = "small",
-    className
-  } = props;
-  const {
-    classes,
-    cx
-  } = useStyles$y({
-    color: props.color,
-    borderColor: props.borderColor,
-    size
-  });
-  return jsx("div", {
-    className: cx(classes.root, className),
-    children: jsx("div", {
-      className: classes.dot
-    })
-  });
-};
-const useStyles$y = tss.withParams().create(({
-  color,
-  borderColor,
-  size
-}) => {
-  const sizeMapping = {
-    small: {
-      rootSize: 16,
-      dotSize: 8
-    },
-    medium: {
-      rootSize: 24,
-      dotSize: 12
-    },
-    "x-large": {
-      rootSize: 28,
-      dotSize: 14
-    },
-    "xx-large": {
-      rootSize: 32,
-      dotSize: 16
-    }
-  };
-  const {
-    rootSize,
-    dotSize
-  } = sizeMapping[size];
-  return {
-    root: {
-      width: rootSize,
-      height: rootSize,
-      padding: rootSize / 4,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    dot: {
-      width: dotSize,
-      height: dotSize,
-      background: color,
-      borderRadius: "50%",
-      border: borderColor ? `2px solid ${borderColor}` : "none"
-    }
-  };
-});
-
 const VentionTextInput = _a => {
   var {
       state = "default",
@@ -15205,11 +15262,13 @@ const useStyles$1 = tss.create(({
 
 function VentionPersonCardRoot({
   name,
+  nameSuffix,
   size,
   description,
   state = "default",
   hideName,
   avatarVariant,
+  avatarStatusDotColor,
   imageUrl,
   initials,
   className
@@ -15232,13 +15291,24 @@ function VentionPersonCardRoot({
       variant: avatarVariant,
       state: state,
       imageUrl: imageUrl,
-      initials: initials
+      initials: initials,
+      statusDotColor: avatarStatusDotColor
     }),
-    name: jsx(Typography, {
-      variant: getNameTypographyVariant(size),
-      color: isDisabled ? "text.tertiary" : "text.primary",
+    name: jsxs("div", {
       className: classes.line,
-      children: name
+      children: [jsx(Typography, {
+        component: "span",
+        variant: getNameTypographyVariant(size, Boolean(nameSuffix)),
+        color: isDisabled ? "text.tertiary" : "text.primary",
+        children: name
+      }), nameSuffix && jsxs(Fragment, {
+        children: [" ", jsx(Typography, {
+          component: "span",
+          variant: getNameTypographyVariant(size),
+          color: isDisabled ? "text.tertiary" : "text.secondary",
+          children: nameSuffix
+        })]
+      })]
     }),
     description: description && jsx(Typography, {
       variant: "uiText12Regular",
@@ -15376,12 +15446,12 @@ function getCardPadding(size, hideName, theme) {
       return hideName ? theme.spacing(2, 4) : theme.spacing(3, 4);
   }
 }
-function getNameTypographyVariant(size) {
+function getNameTypographyVariant(size, emphasized = false) {
   switch (size) {
     case "small":
-      return "uiText12Regular";
+      return emphasized ? "uiText12SemiBold" : "uiText12Regular";
     default:
-      return "uiText14Regular";
+      return emphasized ? "uiText14SemiBold" : "uiText14Regular";
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "6.1.12",
+  "version": "6.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/lib/components/vention-avatar/vention-avatar.d.ts

@@ -1,4 +1,5 @@
 import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
+import { VentionStatusDotColors } from "../vention-status-dot/vention-status-dot";
 export type VentionAvatarSizes = StrictExtract<Sizes, "small" | "medium" | "large">;
 export type VentionAvatarVariants = "image" | "initials-filled" | "initials-subtle";
 export type VentionAvatarColors = "grayscale";
@@ -12,7 +13,8 @@ export interface VentionAvatarProps {
     imageUrl?: string;
     initials?: string;
     focused?: boolean;
+    statusDotColor?: VentionStatusDotColors;
     className?: string;
 }
-export declare function VentionAvatar({ initials, name, size, variant, color, state, className, imageUrl, focused, }: VentionAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function VentionAvatar({ initials, name, size, variant, color, state, className, imageUrl, focused, statusDotColor, }: VentionAvatarProps): import("react/jsx-runtime").JSX.Element;
 export declare function getAvatarDiameter(size: VentionAvatarSizes): number;

package/src/lib/components/vention-person-card/vention-person-card.d.ts

@@ -1,19 +1,21 @@
 import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
-import { VentionAvatarVariants } from "../vention-avatar/vention-avatar";
+import { VentionAvatarProps, VentionAvatarVariants } from "../vention-avatar/vention-avatar";
 export type VentionPersonCardSizes = StrictExtract<Sizes, "small" | "medium" | "large">;
 export type VentionPersonCardStates = "default" | "disabled";
 export interface VentionPersonCardProps {
     name: string;
+    nameSuffix?: string | undefined;
     size: VentionPersonCardSizes;
     description?: string;
     state?: VentionPersonCardStates;
     hideName?: boolean;
     avatarVariant?: VentionAvatarVariants;
+    avatarStatusDotColor?: VentionAvatarProps["statusDotColor"];
     imageUrl?: string;
     initials?: string;
     className?: string;
 }
-declare function VentionPersonCardRoot({ name, size, description, state, hideName, avatarVariant, imageUrl, initials, className, }: VentionPersonCardProps): import("react/jsx-runtime").JSX.Element;
+declare function VentionPersonCardRoot({ name, nameSuffix, size, description, state, hideName, avatarVariant, avatarStatusDotColor, imageUrl, initials, className, }: VentionPersonCardProps): import("react/jsx-runtime").JSX.Element;
 declare namespace VentionPersonCardRoot {
     var displayName: string;
 }

package/src/lib/components/vention-status-dot/vention-status-dot.d.ts

@@ -1,10 +1,19 @@
 import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
 import React from "react";
-export interface VentionStatusDotProps {
-    color: string;
-    borderColor?: string;
+export type VentionStatusDotColors = "red" | "blue" | "green" | "yellow" | "slate";
+type VentionStatusDotBorderProps = {
+    borderColor: string;
+    borderWidth?: number;
+} | {
+    borderColor?: undefined;
+    borderWidth?: undefined;
+};
+export type VentionStatusDotProps = VentionStatusDotBorderProps & {
+    dotColor?: VentionStatusDotColors;
+    /** @deprecated Use `dotColor` instead. */
+    color?: string;
     size?: StrictExtract<Sizes, "small" | "medium" | "x-large" | "xx-large">;
     className?: string;
-}
+};
 export declare const VentionStatusDot: React.FunctionComponent<VentionStatusDotProps>;
 export default VentionStatusDot;