reshaped 3.4.4 → 3.4.5

package/dist/components/Avatar/Avatar.js

@@ -5,8 +5,8 @@ import Icon from "../Icon/index.js";
 import View from "../View/index.js";
 import s from "./Avatar.module.css";
 const Avatar = (props) => {
-    const { color = "neutral", variant, src, size = 12, squared, initials, icon, className, imageAttributes, attributes, } = props;
-    const alt = props.alt || imageAttributes?.alt;
+    const { color = "neutral", variant, src, size = 12, squared, initials, icon, className, renderImage, imageAttributes: passedImageAttributes, attributes, } = props;
+    const alt = props.alt || passedImageAttributes?.alt;
     const radius = squared
         ? responsivePropDependency(size, (size) => {
             if (size >= 24)
@@ -19,10 +19,24 @@ const Avatar = (props) => {
     const heightStyles = getHeightStyles(size);
     const rootClassNames = classNames(s.root, className, heightStyles?.classNames, color && s[`--color-${color}`], variant && s[`--variant-${variant}`]);
     const renderContent = () => {
-        if (src)
-            return (_jsx("img", { ...imageAttributes, role: !alt ? "presentation" : undefined, src: src, alt: alt, className: s.img }));
-        if (icon)
+        if (src) {
+            /**
+             * Not all img attributes might be supported by custom Image components
+             * Here is an example from Next: https://nextjs.org/docs/pages/api-reference/components/image#required-props
+             */
+            const imageAttributes = {
+                ...passedImageAttributes,
+                role: !alt ? "presentation" : undefined,
+                src,
+                alt,
+                className: s.img,
+            };
+            // eslint-disable-next-line jsx-a11y/alt-text
+            return renderImage ? renderImage(imageAttributes) : _jsx("img", { ...imageAttributes });
+        }
+        if (icon) {
             return (_jsx(Icon, { svg: icon, size: responsivePropDependency(size, (size) => Math.ceil(size * 0.4)) }));
+        }
         return initials;
     };
     return (_jsx(View, { borderRadius: radius, attributes: { ...attributes, style: { ...heightStyles?.variables } }, backgroundColor: variant === "faded" ? `${color}-${variant}` : color, className: rootClassNames, children: renderContent() }));

package/dist/components/Avatar/Avatar.types.d.ts

@@ -4,6 +4,7 @@ export type Props = {
     src?: string;
     alt?: string;
     imageAttributes?: G.Attributes<"img">;
+    renderImage?: (attributes: G.Attributes<"img">) => React.ReactNode;
     initials?: string;
     icon?: IconProps["svg"];
     squared?: boolean;

package/dist/components/Avatar/tests/Avatar.stories.d.ts

@@ -30,4 +30,5 @@ export declare const colors: {
 export declare const fallback: StoryObj<{
     handleError: Mock;
 }>;
+export declare const renderImage: StoryObj;
 export declare const className: StoryObj;

package/dist/components/Avatar/tests/Avatar.stories.js

@@ -145,6 +145,20 @@ export const fallback = {
         });
     },
 };
+export const renderImage = {
+    name: "renderImage",
+    render: () => (<Example>
+			<Example.Item title="renderImage">
+				<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" alt="Amsterdam canal" renderImage={(attributes) => <img {...attributes} id="test-image"/>}/>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const img = canvas.getByRole("img");
+        expect(img).toBeInTheDocument();
+        expect(img).toHaveAccessibleName("Amsterdam canal");
+        expect(img).toHaveAttribute("id", "test-image");
+    },
+};
 export const className = {
     name: "className, attributes, imageAttributes",
     render: () => (<div data-testid="root">

package/dist/components/Image/Image.d.ts

@@ -1,6 +1,7 @@
+import React from "react";
 import * as T from "./Image.types";
 declare const Image: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    (props: T.Props): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
     displayName: string;
 };
 export default Image;

package/dist/components/Image/Image.js

@@ -7,7 +7,7 @@ import getRadiusStyles from "../../styles/radius/index.js";
 import getWidthStyles from "../../styles/width/index.js";
 import getHeightStyles from "../../styles/height/index.js";
 const Image = (props) => {
-    const { src, alt, width, height, onLoad, onError, fallback, displayMode = "cover", borderRadius, className, attributes, imageAttributes, } = props;
+    const { src, alt, width, height, onLoad, onError, fallback, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;
     const [status, setStatus] = React.useState("loading");
     const radiusStyles = getRadiusStyles(borderRadius);
     const widthStyles = getWidthStyles(width);
@@ -34,11 +34,32 @@ const Image = (props) => {
     }, [src]);
     if (isFallback) {
         if (typeof fallback === "string") {
-            return (_jsx("img", { ...attributes, src: fallback, alt: alt, role: alt ? undefined : "presentation", className: fallbackClassNames, style: style }));
+            const imageAttributes = {
+                ...attributes,
+                src: fallback,
+                alt,
+                role: alt ? undefined : "presentation",
+                className: fallbackClassNames,
+                style,
+            };
+            // eslint-disable-next-line jsx-a11y/alt-text
+            return renderImage ? renderImage(imageAttributes) : _jsx("img", { ...imageAttributes });
         }
         return (_jsx("div", { ...attributes, className: fallbackClassNames, style: style, children: fallback }));
     }
-    return (_jsx("img", { ...attributes, ...imageAttributes, src: src, alt: alt, role: alt ? undefined : "presentation", onLoad: handleLoad, onError: handleError, className: imgClassNames, style: style }));
+    const imageAttributes = {
+        ...attributes,
+        ...passedImageAttributes,
+        src,
+        alt,
+        role: alt ? undefined : "presentation",
+        onLoad: handleLoad,
+        onError: handleError,
+        className: imgClassNames,
+        style,
+    };
+    // eslint-disable-next-line jsx-a11y/alt-text
+    return renderImage ? renderImage(imageAttributes) : _jsx("img", { ...imageAttributes });
 };
 Image.displayName = "Image";
 export default Image;

package/dist/components/Image/Image.types.d.ts

@@ -6,12 +6,13 @@ export type Props = {
     alt?: string;
     width?: G.Responsive<string | number>;
     height?: G.Responsive<string | number>;
+    borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large">;
+    displayMode?: "cover" | "contain";
     onLoad?: (e: React.SyntheticEvent) => void;
     onError?: (e: React.SyntheticEvent) => void;
     fallback?: string | React.ReactNode | boolean;
-    displayMode?: "cover" | "contain";
-    borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large">;
+    renderImage?: (attributes: G.Attributes<"img">) => React.ReactNode;
+    imageAttributes?: G.Attributes<"img">;
     className?: G.ClassName;
     attributes?: G.Attributes<"div"> & G.Attributes<"img">;
-    imageAttributes?: G.Attributes<"img">;
 };

package/dist/components/Image/tests/Image.stories.d.ts

@@ -1,7 +1,9 @@
+import { StoryObj } from "@storybook/react";
+import { fn, Mock } from "@storybook/test";
 declare const _default: {
     title: string;
     component: {
-        (props: import("..").ImageProps): import("react").JSX.Element;
+        (props: import("..").ImageProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
         displayName: string;
     };
     parameters: {
@@ -11,10 +13,7 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
+export declare const src: StoryObj;
 export declare const size: {
     name: string;
     render: () => import("react").JSX.Element;
@@ -27,11 +26,19 @@ export declare const displayMode: {
     name: string;
     render: () => import("react").JSX.Element;
 };
-export declare const ratio: {
+export declare const onLoad: StoryObj<{
+    handleLoad: ReturnType<typeof fn>;
+}>;
+export declare const onError: StoryObj<{
+    handleError: Mock;
+}>;
+export declare const fallback: {
     name: string;
     render: () => import("react").JSX.Element;
 };
-export declare const fallback: {
+export declare const renderImage: StoryObj;
+export declare const imageAttributes: StoryObj;
+export declare const ratio: {
     name: string;
     render: () => import("react").JSX.Element;
 };

package/dist/components/Image/tests/Image.stories.js

@@ -1,3 +1,4 @@
+import { expect, fn, waitFor } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import Icon from "../../Icon/index.js";
@@ -13,13 +14,24 @@ export default {
     },
 };
 const imgUrl = "https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80";
-export const base = {
-    name: "base",
+export const src = {
+    name: "src, alt",
     render: () => (<Example>
-			<Example.Item title="base">
+			<Example.Item title="src, alt">
 				<Image src={imgUrl} alt="Image alt"/>
 			</Example.Item>
+
+			<Example.Item title="src">
+				<Image src={imgUrl}/>
+			</Example.Item>
 		</Example>),
+    play: ({ canvas }) => {
+        const presentation = canvas.getByRole("presentation");
+        const img = canvas.getByRole("img");
+        expect(presentation).toBeInTheDocument();
+        expect(img).toBeInTheDocument();
+        expect(img).toHaveAccessibleName("Image alt");
+    },
 };
 export const size = {
     name: "width, height",
@@ -66,20 +78,35 @@ export const displayMode = {
 			</Example.Item>
 		</Example>),
 };
-export const ratio = {
-    name: "composition, aspectRatio",
-    render: () => (<Example>
-			<Example.Item title="ratio: 16/9">
-				<View aspectRatio={16 / 9}>
-					<Image src={imgUrl}/>
-				</View>
-			</Example.Item>
-			<Example.Item title="ratio: 16/9, displayMode: contain">
-				<View aspectRatio={16 / 9}>
-					<Image src={imgUrl} displayMode="contain"/>
-				</View>
-			</Example.Item>
-		</Example>),
+export const onLoad = {
+    name: "onLoad",
+    args: {
+        handleLoad: fn(),
+    },
+    render: (args) => <Image src={imgUrl} alt="photo" onLoad={args.handleLoad}/>,
+    play: async ({ canvas, args }) => {
+        const { handleLoad } = args;
+        const img = canvas.getByRole("img");
+        await waitFor(() => {
+            expect(handleLoad).toHaveBeenCalledTimes(1);
+            expect(handleLoad).toHaveBeenCalledWith(expect.objectContaining({ target: img, type: "load" }));
+        });
+    },
+};
+export const onError = {
+    name: "onError",
+    args: {
+        handleError: fn(),
+    },
+    render: (args) => <Image src="/invalid.png" alt="photo" onError={args.handleError}/>,
+    play: async ({ canvas, args }) => {
+        const { handleError } = args;
+        const img = canvas.getByRole("img");
+        await waitFor(() => {
+            expect(handleError).toHaveBeenCalledTimes(1);
+            expect(handleError).toHaveBeenCalledWith(expect.objectContaining({ target: img, type: "error" }));
+        });
+    },
 };
 export const fallback = {
     name: "fallback",
@@ -115,3 +142,49 @@ export const fallback = {
 			</Example.Item>
 		</Example>),
 };
+export const renderImage = {
+    name: "renderImage",
+    render: () => (<Example>
+			<Example.Item title="renderImage">
+				<Image src={imgUrl} alt="Amsterdam canal" renderImage={(attributes) => <img {...attributes} id="test-image"/>}/>
+			</Example.Item>
+			<Example.Item title="renderImage, fallback">
+				<Image src="error" fallback={imgUrl} alt="Amsterdam canal 2" renderImage={(attributes) => <img {...attributes} id="test-image-fallback"/>}/>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const images = canvas.getAllByRole("img");
+        expect(images[0]).toHaveAccessibleName("Amsterdam canal");
+        expect(images[0]).toHaveAttribute("id", "test-image");
+        expect(images[1]).toHaveAccessibleName("Amsterdam canal 2");
+        expect(images[1]).toHaveAttribute("id", "test-image-fallback");
+    },
+};
+export const imageAttributes = {
+    name: "className, attributes,imageAttributes",
+    render: () => (<div data-testid="root">
+			<Image src={imgUrl} alt="photo" className="test-classname" attributes={{ id: "test-id" }} imageAttributes={{ "data-testid": "test-img-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const img = canvas.getByRole("img");
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(img).toHaveAttribute("data-testid", "test-img-id");
+    },
+};
+export const ratio = {
+    name: "test: aspectRatio",
+    render: () => (<Example>
+			<Example.Item title="ratio: 16/9">
+				<View aspectRatio={16 / 9}>
+					<Image src={imgUrl}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="ratio: 16/9, displayMode: contain">
+				<View aspectRatio={16 / 9}>
+					<Image src={imgUrl} displayMode="contain"/>
+				</View>
+			</Example.Item>
+		</Example>),
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.4.4",
+	"version": "3.4.5",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",

package/dist/components/Image/tests/Image.test.stories.d.ts

@@ -1,28 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-    component: {
-        (props: import("./..").ImageProps): import("react").JSX.Element;
-        displayName: string;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const src: StoryObj;
-export declare const ariaLabel: StoryObj;
-export declare const onLoad: StoryObj<{
-    handleLoad: ReturnType<typeof fn>;
-}>;
-export declare const onError: StoryObj<{
-    handleError: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;
-export declare const imageAttributes: StoryObj;

package/dist/components/Image/tests/Image.test.stories.js

@@ -1,80 +0,0 @@
-import { expect, fn, waitFor } from "@storybook/test";
-import Image from "../index.js";
-export default {
-    title: "Utility components/Image/tests",
-    component: Image,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/image",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-const imgUrl = "https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80";
-export const src = {
-    name: "src, presentation",
-    render: () => <Image src={imgUrl}/>,
-    play: ({ canvas }) => {
-        const img = canvas.getByRole("presentation");
-        expect(img).toHaveAttribute("src", imgUrl);
-    },
-};
-export const ariaLabel = {
-    name: "src, alt",
-    render: () => <Image src={imgUrl} alt="photo"/>,
-    play: ({ canvas }) => {
-        const img = canvas.getByRole("img");
-        expect(img).toHaveAccessibleName("photo");
-    },
-};
-export const onLoad = {
-    name: "onLoad",
-    args: {
-        handleLoad: fn(),
-    },
-    render: (args) => <Image src={imgUrl} alt="photo" onLoad={args.handleLoad}/>,
-    play: async ({ canvas, args }) => {
-        const { handleLoad } = args;
-        const img = canvas.getByRole("img");
-        await waitFor(() => {
-            expect(handleLoad).toHaveBeenCalledTimes(1);
-            expect(handleLoad).toHaveBeenCalledWith(expect.objectContaining({ target: img, type: "load" }));
-        });
-    },
-};
-export const onError = {
-    name: "onError",
-    args: {
-        handleError: fn(),
-    },
-    render: (args) => <Image src="/invalid.png" alt="photo" onError={args.handleError}/>,
-    play: async ({ canvas, args }) => {
-        const { handleError } = args;
-        const img = canvas.getByRole("img");
-        await waitFor(() => {
-            expect(handleError).toHaveBeenCalledTimes(1);
-            expect(handleError).toHaveBeenCalledWith(expect.objectContaining({ target: img, type: "error" }));
-        });
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Image src={imgUrl} className="test-classname" attributes={{ id: "test-id" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};
-export const imageAttributes = {
-    name: "imageAttributes",
-    render: () => (<div data-testid="root">
-			<Image src={imgUrl} alt="photo" attributes={{ id: "test-id" }} imageAttributes={{ id: "test-img-id" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const img = canvas.getByRole("img");
-        expect(img).toHaveAttribute("id", "test-img-id");
-    },
-};