fix: correct handling of custom max-width style (#13)

- properly applies user-defined `max-width`
- add storybook example for custom `max-width`
- add unit tests for user-defined `aspect-ratio`, `max-width`
- bump package version: `1.0.4`

package.json

@@ -1,7 +1,7 @@
 {
   "name": "visionary-image",
   "description": "React image component with built-in Blurhash placeholders for better UX and Core Web Vitals.",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "homepage": "https://visionary.cloud",
   "type": "module",
   "main": "./dist/visionary-image.umd.js",

src/components/Image/Image.tsx

@@ -148,13 +148,18 @@ export const Image = ({
     position: "relative",
     width: "100%",
   };
-  // User wants to hardcode height/width
+  // Apply user-specified container width
   if (userWidth) {
     containerStyles.width = userWidth;
   }
+  // Apply user-specified container height
   if (userHeight) {
     containerStyles.height = userHeight;
   }
+  // Allow user to override container's max-width
+  if (userStyles?.maxWidth) {
+    containerStyles.maxWidth = userStyles.maxWidth;
+  }
   const containerProps: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> = {
     onClick,
   };
@@ -164,7 +169,6 @@ export const Image = ({
       className={containerClasses}
       ref={containerRef}
       style={containerStyles}
-      // style={{ aspectRatio }}
       {...getDebugIdProp(imageState.url, debug)}
       {...getTestIdProp(TEST_IDS.CONTAINER)}
       {...containerProps}

src/components/Image/ImageWrapper.tsx

@@ -1,5 +1,8 @@
 import type { CSSProperties, ReactNode } from "react";
 
+import { TEST_IDS } from "../../lib/test";
+import { getTestIdProp } from "../../lib/util";
+
 interface ImageWrapperProps {
   aspectRatio: CSSProperties["aspectRatio"];
   children: ReactNode;
@@ -16,5 +19,7 @@ const imageWrapperStyles: CSSProperties = {
  * - Storybook example: https://visionary-ux.github.io/visionary-image/?path=/story/visionary-image--custom-aspect-ratio
  */
 export const ImageWrapper = ({ aspectRatio, children }: ImageWrapperProps) => (
-  <div style={{ aspectRatio, ...imageWrapperStyles }}>{children}</div>
+  <div style={{ aspectRatio, ...imageWrapperStyles }} {...getTestIdProp(TEST_IDS.ASPECT_RATIO_WRAPPER)}>
+    {children}
+  </div>
 );

src/components/Image/__test__/Image.test.tsx

@@ -215,6 +215,27 @@ describe("Image component", () => {
     });
   });
 
+  describe("Style overrides", () => {
+    test("user can override max-width", () => {
+      render(<Image src={testVisionaryUrl} style={{ maxWidth: 220 }} />);
+
+      const containerElement = screen.getByTestId(TEST_IDS.CONTAINER);
+      const containerStyles = window.getComputedStyle(containerElement);
+
+      expect(containerStyles.maxWidth).toBe("220px");
+    });
+
+    test("user can specify custom aspect-ratio", () => {
+      const customAspectRatio = "3 / 1";
+      render(<Image src={testVisionaryUrl} style={{ aspectRatio: customAspectRatio }} />);
+
+      const containerElement = screen.getByTestId(TEST_IDS.ASPECT_RATIO_WRAPPER);
+      const containerStyles = window.getComputedStyle(containerElement);
+
+      expect(containerStyles.getPropertyValue("aspect-ratio")).toBe(customAspectRatio);
+    });
+  });
+
   describe("Using ordinary (non-visionary) URL ", () => {
     test("renders fallback <img /> element when src is not visionary", () => {
       const testClassname = "v7y_tester";

src/lib/test.ts

@@ -1,4 +1,5 @@
 export const TEST_IDS = {
+  ASPECT_RATIO_WRAPPER: "aspect-ratio-wrapper",
   CANVAS: "canvas",
   CONTAINER: "container",
   IMAGE: "image",

src/stories/Image.stories.ts

@@ -66,6 +66,13 @@ export const PreventSelection: Story = {
   },
 };
 
+export const CustomSizeToken: Story = {
+  args: {
+    ...sharedProps,
+    size: ImageSizeToken.xs,
+  },
+};
+
 export const CustomAspectRatio: Story = {
   args: {
     ...sharedProps,
@@ -74,13 +81,17 @@ export const CustomAspectRatio: Story = {
       transform: "translateY(-30%)",
     },
   },
+  name: "Custom aspect-ratio style",
 };
 
-export const CustomSizeToken: Story = {
+export const CustomMaxWidth: Story = {
   args: {
     ...sharedProps,
-    size: ImageSizeToken.xs,
+    style: {
+      maxWidth: 210,
+    },
   },
+  name: "Custom max-width style",
 };
 
 export const ExternalImageUrl: Story = {