feat(Image): add hide param (#1182)

Author: aeksandla

.storybook/stories/documentation/Types.mdx

@@ -96,6 +96,7 @@ You can add all attributes which `<iframe>` can take. See more info [here](https
 - `src: string`
 - `alt?: string`
 - `disableCompress?: true | false` — If true, image compression is disabled. If false (default), it's enabled.
+- `hide?: boolean | Record<'mobile' | 'tablet' | 'desktop', boolean>`
 
 ---
 
@@ -107,8 +108,7 @@ Image property with device support
 - `desktop: string`
 - `alt?: string`
 - `disableCompress?: true | false` — If true, image compression is disabled. If false (default), it's enabled.
-
----
+- `hide?: boolean | Record<'mobile' | 'tablet' | 'desktop', boolean>`
 
 ---
 

src/components/BackgroundImage/BackgroundImage.tsx

@@ -11,12 +11,12 @@ export const qaIdByDefault = 'background-image';
 const b = block('storage-background-image');
 
 const BackgroundImage = (props: React.PropsWithChildren<BackgroundImageProps>) => {
-    const {children, src, desktop, className, imageClassName, style, hide, qa} = props;
+    const {children, src, desktop, className, imageClassName, style, qa} = props;
     const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);
 
     return (
         <div className={b(null, className)} style={style} data-qa={qa || qaIdByDefault}>
-            {(src || desktop) && !hide && (
+            {(src || desktop) && (
                 <Image {...props} className={b('img', imageClassName)} qa={qaAttributes.image} />
             )}
             {children && <div className={b('container')}>{children}</div>}

src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx

@@ -2,9 +2,10 @@ import {render, screen} from '@testing-library/react';
 
 import {testCustomClassName, testCustomStyle} from '../../../../test-utils/shared/common';
 import {testSourceProps} from '../../../../test-utils/shared/image';
-import {BackgroundImageProps} from '../../../models';
+import {BackgroundImageProps, Device} from '../../../models';
 import {getQaAttrubutes} from '../../../utils';
 import BackgroundImage from '../BackgroundImage';
+import {EMPTY_IMG} from '../../Image/Image';
 
 const qa = 'background-image-component';
 
@@ -39,12 +40,33 @@ describe('BackgroundImage', () => {
 
     test('should hide image', () => {
         render(<BackgroundImage src={imageSrc} hide qa={qa} />);
+        const qaAttrubutes = getQaAttrubutes(
+            qa,
+            'image-mobile-source',
+            'image-tablet-source',
+            'image-desktop-source',
+        );
+        const component = screen.getByTestId(qa);
+        const mobileSourceComponent = screen.getByTestId(qaAttrubutes.imageMobileSource);
+        const tabletSourceComponent = screen.getByTestId(qaAttrubutes.imageTabletSource);
+        const desktopSourceComponent = screen.getByTestId(qaAttrubutes.imageDesktopSource);
+
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+        expect(mobileSourceComponent).toHaveAttribute('srcset', EMPTY_IMG);
+        expect(tabletSourceComponent).toHaveAttribute('srcset', EMPTY_IMG);
+        expect(desktopSourceComponent).toHaveAttribute('srcset', EMPTY_IMG);
+    });
+
+    test('should hide tablet image', () => {
+        render(<BackgroundImage src={imageSrc} hide={{[Device.Tablet]: true}} qa={qa} />);
+        const qaAttrubutes = getQaAttrubutes(qa, 'image-tablet-source');
         const component = screen.getByTestId(qa);
-        const imageComponent = screen.queryByRole('img');
+        const tabletSourceComponent = screen.getByTestId(qaAttrubutes.imageTabletSource);
 
         expect(component).toBeInTheDocument();
         expect(component).toBeVisible();
-        expect(imageComponent).not.toBeInTheDocument();
+        expect(tabletSourceComponent).toHaveAttribute('srcset', EMPTY_IMG);
     });
 
     test('should render children', () => {

src/components/Image/Image.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {BREAKPOINTS} from '../../constants';
 import {ProjectSettingsContext} from '../../context/projectSettingsContext';
-import {ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';
+import {Device, ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';
 import {getQaAttrubutes} from '../../utils';
 import {isCompressible} from '../../utils/imageCompress';
 import ImageBase from '../ImageBase/ImageBase';
@@ -18,31 +18,50 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
 export interface DeviceSpecificFragmentProps extends QAProps {
     disableWebp: boolean;
     src: string;
-    breakpoint: number;
+    maxBreakpoint?: number;
+    minBreakpoint?: number;
 }
 
 const checkWebP = (src: string) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
 
+export const EMPTY_IMG =
+    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';
+
 const DeviceSpecificFragment = ({
     disableWebp,
     src,
-    breakpoint,
+    maxBreakpoint,
+    minBreakpoint,
     qa,
-}: DeviceSpecificFragmentProps) => (
-    <React.Fragment>
-        {!disableWebp && (
-            <source
-                srcSet={checkWebP(src)}
-                type="image/webp"
-                media={`(max-width: ${breakpoint}px)`}
-                data-qa={`${qa}-compressed`}
-            />
-        )}
-        <source srcSet={src} media={`(max-width: ${breakpoint}px)`} data-qa={qa} />
-    </React.Fragment>
-);
+}: DeviceSpecificFragmentProps) => {
+    const media: string[] = [];
+
+    if (maxBreakpoint) {
+        media.push(`(max-width: ${maxBreakpoint}px)`);
+    }
+
+    if (minBreakpoint) {
+        media.push(`(min-width: ${minBreakpoint}px)`);
+    }
+
+    const mediaString = media.join(' and ');
+
+    return (
+        <React.Fragment>
+            {!disableWebp && (
+                <source
+                    srcSet={checkWebP(src)}
+                    type="image/webp"
+                    media={mediaString}
+                    data-qa={`${qa}-compressed`}
+                />
+            )}
+            <source srcSet={src} media={mediaString} data-qa={qa} />
+        </React.Fragment>
+    );
+};
 
 const Image = (props: ImageProps) => {
     const projectSettings = React.useContext(ProjectSettingsContext);
@@ -61,48 +80,64 @@ const Image = (props: ImageProps) => {
         qa,
         fetchPriority,
         loading,
+        hide,
     } = props;
     const [imgLoadingError, setImgLoadingError] = React.useState(false);
 
     const src = imageSrc || desktop;
 
-    if (!src) {
-        return null;
-    }
+    const hideDevices =
+        typeof hide === 'boolean' || !hide
+            ? Object.values(Device).reduce(
+                  (acc, device) => ({...acc, [device]: Boolean(hide)}),
+                  {} as Record<Device, boolean>,
+              )
+            : hide;
 
     const qaAttributes = getQaAttrubutes(
         qa,
         'mobile-webp-source',
         'mobile-source',
         'tablet-webp-source',
         'tablet-source',
+        'desktop-source',
         'desktop-source-compressed',
     );
 
     const disableWebp =
+        !src ||
         projectSettings.disableCompress ||
         disableCompress ||
         !isCompressible(src) ||
         imgLoadingError;
 
     return (
         <picture className={containerClassName} data-qa={qa}>
-            {mobile && (
+            {(mobile || hideDevices.mobile) && (
                 <DeviceSpecificFragment
-                    src={mobile}
-                    disableWebp={disableWebp}
-                    breakpoint={BREAKPOINTS.sm}
+                    src={mobile || EMPTY_IMG}
+                    disableWebp={disableWebp || Boolean(hideDevices.mobile)}
+                    maxBreakpoint={BREAKPOINTS.sm}
                     qa={qaAttributes.mobileSource}
                 />
             )}
-            {tablet && (
+            {(tablet || hideDevices.tablet) && (
                 <DeviceSpecificFragment
-                    src={tablet}
-                    disableWebp={disableWebp}
-                    breakpoint={BREAKPOINTS.md}
+                    src={tablet || EMPTY_IMG}
+                    disableWebp={disableWebp || Boolean(hideDevices.tablet)}
+                    maxBreakpoint={BREAKPOINTS.md}
+                    minBreakpoint={BREAKPOINTS.sm}
                     qa={qaAttributes.tabletSource}
                 />
             )}
+            {hideDevices.desktop && (
+                <DeviceSpecificFragment
+                    src={EMPTY_IMG}
+                    disableWebp
+                    minBreakpoint={BREAKPOINTS.md}
+                    qa={qaAttributes.desktopSource}
+                />
+            )}
             {src && !disableWebp && (
                 <source
                     srcSet={checkWebP(src)}

src/components/Image/schema.ts

@@ -19,6 +19,21 @@ const ImageBase = {
         type: 'string',
         enum: ['high', 'low', 'auto'],
     },
+    hide: {
+        oneOf: [
+            {
+                type: 'boolean',
+            },
+            {
+                type: 'object',
+                properties: {
+                    mobile: {type: 'boolean'},
+                    tablet: {type: 'boolean'},
+                    desktop: {type: 'boolean'},
+                },
+            },
+        ],
+    },
 };
 
 const StyleBase = {

src/models/constructor-items/common.ts

@@ -130,11 +130,18 @@ interface LoopProps {
 
 // images
 
+export enum Device {
+    Desktop = 'desktop',
+    Mobile = 'mobile',
+    Tablet = 'tablet',
+}
+
 export interface ImageInfoProps
     extends Pick<
-        React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
-        'aria-describedby' | 'loading'
-    > {
+            React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
+            'aria-describedby' | 'loading'
+        >,
+        ImageDevicesVisibleProps {
     alt?: string;
     fetchPriority?: 'high' | 'low' | 'auto';
     disableCompress?: boolean;
@@ -145,9 +152,13 @@ export interface ImageObjectProps extends ImageInfoProps {
 }
 
 export interface ImageDeviceProps extends ImageInfoProps {
-    desktop: string;
-    mobile: string;
-    tablet?: string;
+    [Device.Desktop]: string;
+    [Device.Mobile]: string;
+    [Device.Tablet]?: string;
+}
+
+export interface ImageDevicesVisibleProps {
+    hide?: boolean | Partial<Record<Device, boolean>>;
 }
 
 export type ImageProps = string | ImageObjectProps | ImageDeviceProps;
@@ -157,10 +168,10 @@ export interface BackgroundImageProps
     extends React.HTMLProps<HTMLDivElement>,
         Partial<ImageDeviceProps>,
         Partial<ImageObjectProps>,
-        QAProps {
+        QAProps,
+        ImageDevicesVisibleProps {
     style?: React.CSSProperties;
     imageClassName?: string;
-    hide?: boolean;
 }
 
 //components props