feat(image-web): support icon collections (#441)

r0b1n · web-flow · commit 17f8931cff81 · 2023-03-20T09:50:48.000+01:00
diff --git a/packages/pluggableWidgets/image-web/CHANGELOG.md b/packages/pluggableWidgets/image-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   We added custom icon collections support.
+
 ## [1.2.1] - 2022-04-01
 
 ### Fixed
diff --git a/packages/pluggableWidgets/image-web/package.json b/packages/pluggableWidgets/image-web/package.json
@@ -16,7 +16,7 @@
     "mpkName": "com.mendix.widget.web.Image.mpk"
   },
   "marketplace": {
-    "minimumMXVersion": "9.6.0",
+    "minimumMXVersion": "9.24.0",
     "appNumber": 118579,
     "appName": "Image"
   },
diff --git a/packages/pluggableWidgets/image-web/src/Image.editorPreview.tsx b/packages/pluggableWidgets/image-web/src/Image.editorPreview.tsx
@@ -21,11 +21,14 @@ export function preview(props: ImagePreviewProps): ReactElement | null {
         case "icon":
             // TODO: Remove these when preview typing for `icon` property is aligned properly by PageEditor
             const imageIcon: WebIcon | null = props.imageIcon as any;
-            if (imageIcon?.type === "glyph") {
-                image = imageIcon.iconClass;
-            }
-            if (imageIcon?.type === "image") {
-                image = imageIcon.iconUrl;
+            switch (imageIcon?.type) {
+                case "glyph":
+                case "icon":
+                    image = imageIcon.iconClass;
+                    break;
+                case "image":
+                    image = imageIcon.iconUrl;
+                    break;
             }
             break;
         case "imageUrl":
@@ -48,7 +51,7 @@ export function preview(props: ImagePreviewProps): ReactElement | null {
             responsive={props.responsive}
             onClickType={props.onClickType}
             onClick={undefined}
-            type={props.datasource === "icon" && props.imageIcon?.type === "glyph" ? "icon" : "image"}
+            type={props.datasource === "icon" && props.imageIcon ? props.imageIcon.type : "image"}
             image={image}
             displayAs={props.displayAs}
             renderAsBackground={props.datasource !== "icon" && props.isBackgroundImage}
diff --git a/packages/pluggableWidgets/image-web/src/Image.tsx b/packages/pluggableWidgets/image-web/src/Image.tsx
@@ -41,19 +41,12 @@ function getImageProps({
                 image: imageUrl?.status === ValueStatus.Available ? imageUrl.value : undefined
             };
         case "icon": {
-            if (imageIcon?.status === ValueStatus.Available) {
-                if (imageIcon.value?.type === "glyph") {
-                    return {
-                        type: "icon",
-                        image: imageIcon.value.iconClass
-                    };
-                }
-                if (imageIcon.value?.type === "image") {
-                    return {
-                        type: "image",
-                        image: imageIcon.value.iconUrl
-                    };
-                }
+            if (imageIcon?.status === ValueStatus.Available && imageIcon.value) {
+                const icon = imageIcon.value;
+                return {
+                    type: icon.type,
+                    image: icon.type === "image" ? icon.iconUrl : icon.iconClass
+                };
             }
             return fallback;
         }
diff --git a/packages/pluggableWidgets/image-web/src/components/Image/Image.tsx b/packages/pluggableWidgets/image-web/src/components/Image/Image.tsx
@@ -8,7 +8,7 @@ import "../../ui/Image.scss";
 import classNames from "classnames";
 
 export type ImageType = {
-    type: "image" | "icon";
+    type: "image" | "icon" | "glyph";
     image: string | undefined;
 };
 
@@ -99,7 +99,7 @@ export const Image: FunctionComponent<ImageProps> = ({
                 {...sharedContentProps}
             />
         ) : (
-            <ImageUi.ContentGlyphicon icon={image} size={iconSize} {...sharedContentProps} />
+            <ImageUi.ContentIcon icon={image} isGlyph={type === "glyph"} size={iconSize} {...sharedContentProps} />
         );
 
     if (renderAsBackground) {
diff --git a/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx b/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx
@@ -20,8 +20,8 @@ export interface ImageWrapperProps {
     responsive: boolean;
     hasImage: boolean;
     children:
-        | ReactElement<ImageContentGlyphicon | ImageContentImage>
-        | [ReactElement<ImageContentGlyphicon | ImageContentImage>, ReactElement<LightboxProps> | false];
+        | ReactElement<ImageContentIcon | ImageContentImage>
+        | [ReactElement<ImageContentIcon | ImageContentImage>, ReactElement<LightboxProps> | false];
 }
 
 export interface ImageContentProps {
@@ -45,12 +45,13 @@ function Wrapper(props: ImageWrapperProps): ReactElement {
     );
 }
 
-export interface ImageContentGlyphicon extends ImageContentProps {
+export interface ImageContentIcon extends ImageContentProps {
     icon: string | undefined;
     size: number;
+    isGlyph?: boolean;
 }
 
-function ContentGlyphicon(props: ImageContentGlyphicon): ReactElement {
+function ContentIcon(props: ImageContentIcon): ReactElement {
     const accessibilityProps = props.altText
         ? {
               "aria-label": props.altText,
@@ -62,7 +63,7 @@ function ContentGlyphicon(props: ImageContentGlyphicon): ReactElement {
 
     return (
         <span
-            className={classNames("glyphicon", props.icon)}
+            className={classNames(props.icon, { glyphicon: props.isGlyph })}
             style={{ ...props.style, fontSize: `${props.size}px` }}
             {...accessibilityProps}
             {...onClickProps}
@@ -136,6 +137,6 @@ function BackgroundImage(props: BackgroundImageProps): ReactElement {
 export const ImageUi = {
     Wrapper,
     BackgroundImage,
-    ContentGlyphicon,
+    ContentIcon,
     ContentImage
 };
diff --git a/packages/pluggableWidgets/image-web/src/components/__tests__/Image.spec.tsx b/packages/pluggableWidgets/image-web/src/components/__tests__/Image.spec.tsx
@@ -38,7 +38,7 @@ const imageProps: ImageProps = {
 
 const glyphiconProps: ImageProps = {
     class: "",
-    type: "icon",
+    type: "glyph",
     image: "glyphicon-asterisk",
     iconSize: 20,
     height: 0,
@@ -52,6 +52,22 @@ const glyphiconProps: ImageProps = {
     backgroundImageContent: null
 };
 
+const iconProps: ImageProps = {
+    class: "",
+    type: "icon",
+    image: "mx-icon mx-icon-asterisk",
+    iconSize: 20,
+    height: 0,
+    heightUnit: "pixels",
+    width: 0,
+    widthUnit: "pixels",
+    responsive: true,
+    onClickType: "action",
+    displayAs: "fullImage",
+    renderAsBackground: false,
+    backgroundImageContent: null
+};
+
 describe("Image", () => {
     it("renders the structure with an image", () => {
         expect(render(<Image {...imageProps} />)).toMatchSnapshot();
@@ -63,10 +79,14 @@ describe("Image", () => {
         ).toMatchSnapshot();
     });
 
-    it("renders the structure with an icon", () => {
+    it("renders the structure with a glyph icon", () => {
         expect(render(<Image {...glyphiconProps} />)).toMatchSnapshot();
     });
 
+    it("renders the structure with an icon", () => {
+        expect(render(<Image {...iconProps} />)).toMatchSnapshot();
+    });
+
     it("renders the structure as a background image", () => {
         expect(
             render(<Image {...imageProps} renderAsBackground backgroundImageContent={<div>Image content</div>} />)
@@ -85,7 +105,7 @@ describe("Image", () => {
             expect(onClickMock).toHaveBeenCalled();
         });
 
-        it("calls the onClick when clicking on an icon", () => {
+        it("calls the onClick when clicking on a glyph icon", () => {
             const onClickMock = jest.fn();
             const imageRender = mount(<Image {...glyphiconProps} onClick={onClickMock} onClickType="action" />);
 
@@ -95,6 +115,17 @@ describe("Image", () => {
             glyphicon.simulate("click");
             expect(onClickMock).toHaveBeenCalled();
         });
+
+        it("calls the onClick when clicking on an icon", () => {
+            const onClickMock = jest.fn();
+            const imageRender = mount(<Image {...iconProps} onClick={onClickMock} onClickType="action" />);
+
+            const glyphicon = imageRender.find("span");
+            expect(glyphicon).toHaveLength(1);
+
+            glyphicon.simulate("click");
+            expect(onClickMock).toHaveBeenCalled();
+        });
     });
 
     describe("when the onClickType is enlarge", () => {
@@ -151,7 +182,14 @@ describe("Image", () => {
         });
 
         it("is set properly on a glyphicon", () => {
-            const imageRender = mount(<Image {...glyphiconProps} altText="this is an awesome icon" />);
+            const imageRender = mount(<Image {...glyphiconProps} altText="this is an awesome glyphicon" />);
+            const image = imageRender.find("span");
+            expect(image.prop("aria-label")).toBe("this is an awesome glyphicon");
+            expect(image.prop("role")).toBe("img");
+        });
+
+        it("is set properly on an icon", () => {
+            const imageRender = mount(<Image {...iconProps} altText="this is an awesome icon" />);
             const image = imageRender.find("span");
             expect(image.prop("aria-label")).toBe("this is an awesome icon");
             expect(image.prop("role")).toBe("img");
@@ -171,6 +209,13 @@ describe("Image", () => {
             expect(image).not.toHaveProperty("aria-label");
             expect(image).not.toHaveProperty("role");
         });
+
+        it("nothing is set on an icon", () => {
+            const imageRender = mount(<Image {...iconProps} />);
+            const image = imageRender.find("span");
+            expect(image).not.toHaveProperty("aria-label");
+            expect(image).not.toHaveProperty("role");
+        });
     });
 
     describe("when showing an image as a thumbnail", () => {
diff --git a/packages/pluggableWidgets/image-web/src/components/__tests__/__snapshots__/Image.spec.tsx.snap b/packages/pluggableWidgets/image-web/src/components/__tests__/__snapshots__/Image.spec.tsx.snap
@@ -11,12 +11,23 @@ exports[`Image renders the structure as a background image 1`] = `
 </div>
 `;
 
+exports[`Image renders the structure with a glyph icon 1`] = `
+<div
+  class="mx-image-viewer mx-image-viewer-responsive"
+>
+  <span
+    class="glyphicon-asterisk glyphicon"
+    style="font-size:20px"
+  />
+</div>
+`;
+
 exports[`Image renders the structure with an icon 1`] = `
 <div
   class="mx-image-viewer mx-image-viewer-responsive"
 >
   <span
-    class="glyphicon glyphicon-asterisk"
+    class="mx-icon mx-icon-asterisk"
     style="font-size:20px"
   />
 </div>
diff --git a/packages/shared/pluggable-widgets-commons/src/structure-preview-api/index.ts b/packages/shared/pluggable-widgets-commons/src/structure-preview-api/index.ts
@@ -20,6 +20,7 @@ interface TextStylingProps extends BaseStylingProps {
 export interface ImageProps extends BaseStylingProps {
     type: "Image";
     document?: string; // svg image
+    property?: object; // property containing the image property
     data?: string; // base64 image. Will only be read if no svg image is passed
     width?: number; // sets a fixed maximum width
     height?: number; // sets a fixed maximum height
