@jobber/components 9.10.3 → 9.10.4

package/dist/Avatar/Avatar.d.ts

@@ -28,6 +28,10 @@ interface AvatarFoundationProps {
      * @default "base"
      */
     readonly size?: AvatarSize;
+    /**
+     * A reference to the element in the rendered output
+     */
+    readonly testID?: string;
     /**
      * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
      * **last resort**. Using this may result in unexpected side effects.
@@ -52,7 +56,7 @@ interface AvatarWithInitialsProps extends AvatarFoundationProps {
     readonly initials: string;
 }
 export type AvatarProps = XOR<AvatarWithImageProps, AvatarWithInitialsProps>;
-export declare function Avatar({ imageUrl, name, initials, size, color, UNSAFE_className, UNSAFE_style, }: AvatarProps): React.JSX.Element;
+export declare function Avatar({ imageUrl, name, initials, size, color, testID, UNSAFE_className, UNSAFE_style, }: AvatarProps): React.JSX.Element;
 interface InitialsUnsafeClassNameProps {
     initials?: string;
     fallbackIcon?: IconProps["UNSAFE_className"];

package/dist/Avatar-cjs.js

@@ -42,7 +42,7 @@ function deconstructCssCustomProperty(color) {
 }
 
 const MAX_VISIBLE_INITIALS = 3;
-function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+function Avatar({ imageUrl, name, initials, size = "base", color, testID, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
     if (imageUrl) {
         style.backgroundImage = `url(${imageUrl})`;
@@ -60,7 +60,7 @@ function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_classNa
             : "text"
         : "textReverse";
     const containerClassNames = classnames(className, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
-    return (React.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React.createElement(Initials, { initials: initials, iconColor: iconColor, iconSize: size, UNSAFE_className: {
+    return (React.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name, "data-testid": testID }, !imageUrl && (React.createElement(Initials, { initials: initials, iconColor: iconColor, iconSize: size, UNSAFE_className: {
             initials: UNSAFE_className.initials,
             fallbackIcon: UNSAFE_className.fallbackIcon,
         }, UNSAFE_style: {

package/dist/Avatar-es.js

@@ -40,7 +40,7 @@ function deconstructCssCustomProperty(color) {
 }
 
 const MAX_VISIBLE_INITIALS = 3;
-function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+function Avatar({ imageUrl, name, initials, size = "base", color, testID, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
     if (imageUrl) {
         style.backgroundImage = `url(${imageUrl})`;
@@ -58,7 +58,7 @@ function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_classNa
             : "text"
         : "textReverse";
     const containerClassNames = classnames(className, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
-    return (React__default.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React__default.createElement(Initials, { initials: initials, iconColor: iconColor, iconSize: size, UNSAFE_className: {
+    return (React__default.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name, "data-testid": testID }, !imageUrl && (React__default.createElement(Initials, { initials: initials, iconColor: iconColor, iconSize: size, UNSAFE_className: {
             initials: UNSAFE_className.initials,
             fallbackIcon: UNSAFE_className.fallbackIcon,
         }, UNSAFE_style: {

package/dist/docs/Avatar/Avatar.md

@@ -143,5 +143,6 @@ Use `UNSAFE_style` to apply inline custom styles to the Avatar component.
 | `initials` | `string` | No | — | The initials that will be displayed if no image is set.\ |
 | `name` | `string` | No | — | A users name to be used for assistive technology |
 | `size` | `AvatarSize` | No | `base` | Change the size of the avatar @property "large" - Make avatar to be the focal point @property "small" - For higher-de... |
+| `testID` | `string` | No | — | A reference to the element in the rendered output |
 | `UNSAFE_className` | `{ container?: string; } & InitialsUnsafeClassNameProps` | No | `{}` | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
 | `UNSAFE_style` | `{ container?: CSSProperties; } & InitialsUnsafeStyleProps` | No | `{}` | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |

package/dist/docs/InputAvatar/InputAvatar.md

@@ -23,3 +23,4 @@ avatar. You can read more about `getUploadParams` in the
 | `name` | `string` | No | — | A users name to be used for assistive technology |
 | `onChange` | `(file?: FileUpload) => void` | No | — | Triggered when an image is changed. |
 | `onUploadComplete` | `(file?: FileUpload) => void` | No | — | Triggered when an image upload has completed. |
+| `testID` | `string` | No | — | A reference to the element in the rendered output |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.10.3",
+  "version": "9.10.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -549,5 +549,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "a39de5621289f06a4d21d021130ff191937cd851"
+  "gitHead": "de19112ccd7ce171f0ee64af0fa4043d040ace45"
 }