@jetshop/ui 5.13.12-0 → 5.14.0

package/Image/FlightImage.test.js

@@ -1,277 +1,277 @@
-import { ChannelProvider } from '@jetshop/core/components/ChannelContext';
-import t from '@jetshop/intl';
-import testImage from '@jetshop/ui/test-utils/fixtures/test-image.png';
-import { fireEvent, queryByText, render } from '@testing-library/react';
-import React from 'react';
-import { useInView } from 'react-intersection-observer';
-import Image from './FlightImage';
-import { ChannelHandler } from '@jetshop/core/ChannelHandler/ChannelHandler';
-import { selectedChannel, channels } from '@jetshop/core/test-utils/variables';
-import { ConfigProvider } from '@jetshop/core/components/ConfigProvider';
-import mockShopConfig from '@jetshop/core/test-utils/mockShopConfig';
-
-// Mock intersection observer so we can always return true/false
-jest.mock('react-intersection-observer');
-// Suppress warnings from translations
-jest.mock('@jetshop/intl');
-t.mockImplementation((t) => t);
-
-// browser mocks
-global.IntersectionObserver = jest.fn(function () {
-  this.observe = jest.fn();
-  this.unobserve = jest.fn();
-  this.disconnect = jest.fn();
-});
-
-const transparent =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
-
-global.__IN_SERVER__ = false;
-
-describe('Hooks image component', () => {
-  describe('on initial load', () => {
-    beforeAll(() => {
-      useInView.mockImplementation(() => [null, false]);
-    });
-    it('renders a lqip version of the image by default', () => {
-      const { placeholderImage } = setup();
-
-      const src = placeholderImage.getAttribute('src');
-
-      expect(src).toEqual(expect.stringContaining('sigma=2.5'));
-      expect(src).toEqual(expect.stringContaining('minampl=0.5'));
-    });
-
-    it('sets the lqip to the smallest of the calculated sizes', () => {
-      const { placeholderImage } = setup({ sizes: [0.5, 0.85, 1] });
-      // Should be 160
-      // The smallest breakpoint is 20rem, which is 360px.
-      // 0.5 x 360 = 160
-
-      const src = placeholderImage.getAttribute('src');
-
-      expect(src).toEqual(expect.stringContaining('width=160'));
-    });
-
-    it('does not render an lqip if critical is true', () => {
-      const { placeholderImage } = setup({ critical: true });
-
-      const src = placeholderImage.getAttribute('src');
-
-      // Sets the src to transaprent data image instead
-      expect(src).toEqual(expect.stringContaining('data:image'));
-    });
-
-    it('accepts sizes as pixel values', () => {
-      const { placeholderImage } = setup({ sizes: [123] });
-
-      const src = placeholderImage.getAttribute('src');
-
-      expect(src).toEqual(expect.stringContaining('width=123'));
-    });
-
-    it('sets opacity to 0.6 while image has not loaded', () => {
-      const { placeholderImage } = setup();
-
-      expect(placeholderImage).toHaveStyle('opacity: 0.6');
-    });
-  });
-
-  describe('sets the sizing method', () => {
-    it('to thumbnail if no aspect ratio is provided', () => {
-      const { placeholderImage } = setup();
-    });
-    it('to fit if an aspect ratio is provided', () => {
-      const { placeholderImage } = setup({ aspect: '1:1' });
-
-      expect(placeholderImage.getAttribute('src')).toEqual(
-        expect.stringContaining('&height=320')
-      );
-      expect(placeholderImage.getAttribute('src')).toEqual(
-        expect.stringContaining('&width=320')
-      );
-    });
-    it('to crop if crop prop is true', () => {
-      const { placeholderImage } = setup({ aspect: '1:1', crop: true });
-
-      expect(placeholderImage.getAttribute('src')).toEqual(
-        expect.stringContaining('&method=crop')
-      );
-    });
-    it('warns if gravity is provided without crop', () => {
-      console.warn = jest.fn();
-      setup({ aspect: '1:1', crop: false, gravity: 'north' });
-      expect(console.warn).toHaveBeenCalled();
-    });
-  });
-
-  describe('when image is in view', () => {
-    beforeAll(() => {
-      useInView.mockImplementation(() => [null, true]);
-    });
-
-    it('renders full image', () => {
-      const { image } = setup({
-        imageSrc: testImage
-      });
-
-      expect(image).toHaveAttribute('src', 'test-image.png');
-    });
-
-    it('applies the given alt as an aria-label', () => {
-      const { image } = setup({
-        alt: 'test alt'
-      });
-
-      expect(image).toHaveAttribute('alt', 'test alt');
-    });
-
-    it('defaults aspect to 1:1', () => {
-      const { imageContainer } = setup();
-
-      expect(imageContainer).toHaveStyle('padding-bottom : 100%');
-    });
-
-    it('sets aspect ratio using padding if aspect is passed', () => {
-      const { imageContainer } = setup({ aspect: '3:2' });
-
-      expect(imageContainer).toHaveStyle('padding-bottom : 66.6667%');
-    });
-
-    it('defaults to background-size contain', () => {
-      const { image } = setup();
-
-      expect(image).toHaveStyle('object-fit : contain');
-    });
-
-    it('sets background-size to cover if `cover` is passed', () => {
-      const { image } = setup({ cover: true });
-
-      expect(image).toHaveStyle('object-fit : cover');
-    });
-
-    it('sets up image to fill available space if `fillAvailableSpace` is passed', () => {
-      const { image } = setup({ fillAvailableSpace: true });
-
-      expect(image).toHaveStyle('object-fit : cover');
-      expect(image).toHaveStyle('padding-top : 0');
-    });
-
-    it('sets opacity to 1 when image loads', () => {
-      const { image } = setup();
-      fireEvent.load(image);
-
-      expect(image).toHaveStyle('opacity: 1');
-    });
-
-    it('fades lqip when image loads', () => {
-      const { image, placeholderImage } = setup();
-      fireEvent.load(image);
-
-      expect(placeholderImage).toHaveStyle('opacity: 0');
-    });
-
-    test('sets quality to quality prop', () => {
-      const { image } = setup({ quality: 1 });
-
-      expect(image.getAttribute('srcSet')).toEqual(
-        expect.stringContaining('&quality=1')
-      );
-    });
-  });
-
-  describe('when there is an image error', () => {
-    beforeAll(() => {
-      useInView.mockImplementation(() => [null, true]);
-    });
-
-    it('renders default error', () => {
-      const { image, getByText } = setup();
-      fireEvent.error(image);
-
-      expect(getByText('Image Not Found'));
-    });
-
-    it('renders error component', () => {
-      const { image, getByText, container } = setup({
-        error: () => <div>some error found</div>
-      });
-      fireEvent.error(image);
-
-      expect(getByText('some error found'));
-      expect(queryByText(container, 'Image Not Found')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('when image url is falsy', () => {
-    it('renders a transparent background image when null', () => {
-      const { image } = setup({ falsySrc: true, imageSrc: null });
-
-      expect(image).toHaveAttribute(`src`, transparent);
-      expect(image).toHaveStyle('opacity : 1');
-    });
-    it('renders a transparent background image when undefined', () => {
-      const { image } = setup({ falsySrc: true, imageSrc: undefined });
-
-      expect(image).toHaveAttribute(`src`, transparent);
-      expect(image).toHaveStyle('opacity: 1');
-    });
-    it('renders nothing and warns if false', () => {
-      console.warn = jest.fn();
-      const { image } = setup({ falsySrc: true, imageSrc: false });
-
-      expect(image).not.toBeInTheDocument();
-      expect(console.warn).toHaveBeenCalled();
-    });
-  });
-
-  it('renders a webp and jpeg source', () => {
-    const { imageContainer } = setup();
-
-    const sources = imageContainer.querySelectorAll('source');
-    expect(sources.length).toBe(2);
-    expect(sources[0]).toHaveAttribute('type', 'image/webp');
-  });
-});
-
-function setup({
-  imageSrc,
-  falsySrc = false,
-  error,
-  alt,
-  sizes,
-  aspect,
-  cover,
-  ...rest
-} = {}) {
-  const channelHandler = new ChannelHandler({
-    selectedChannel,
-    channels
-  });
-  const utils = render(
-    <ChannelProvider channelHandler={channelHandler}>
-      <ConfigProvider config={mockShopConfig}>
-        <Image
-          src={falsySrc ? imageSrc : imageSrc || 'default.png'}
-          error={error}
-          alt={alt}
-          sizes={sizes}
-          aspect={aspect}
-          cover={cover}
-          {...rest}
-        />
-      </ConfigProvider>
-    </ChannelProvider>
-  );
-
-  return {
-    ...utils,
-    image: utils.container.querySelector('[data-flight-image] img'),
-    placeholderImage: utils.container.querySelector(
-      '[data-flight-image-placeholder] img'
-    ),
-    imageContainer: utils.container.querySelector(
-      '[data-flight-image-container]'
-    )
-  };
-}
+import { ChannelProvider } from '@jetshop/core/components/ChannelContext';
+import t from '@jetshop/intl';
+import testImage from '@jetshop/ui/test-utils/fixtures/test-image.png';
+import { fireEvent, queryByText, render } from '@testing-library/react';
+import React from 'react';
+import { useInView } from 'react-intersection-observer';
+import Image from './FlightImage';
+import { ChannelHandler } from '@jetshop/core/ChannelHandler/ChannelHandler';
+import { selectedChannel, channels } from '@jetshop/core/test-utils/variables';
+import { ConfigProvider } from '@jetshop/core/components/ConfigProvider';
+import mockShopConfig from '@jetshop/core/test-utils/mockShopConfig';
+
+// Mock intersection observer so we can always return true/false
+jest.mock('react-intersection-observer');
+// Suppress warnings from translations
+jest.mock('@jetshop/intl');
+t.mockImplementation((t) => t);
+
+// browser mocks
+global.IntersectionObserver = jest.fn(function () {
+  this.observe = jest.fn();
+  this.unobserve = jest.fn();
+  this.disconnect = jest.fn();
+});
+
+const transparent =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+
+global.__IN_SERVER__ = false;
+
+describe('Hooks image component', () => {
+  describe('on initial load', () => {
+    beforeAll(() => {
+      useInView.mockImplementation(() => [null, false]);
+    });
+    it('renders a lqip version of the image by default', () => {
+      const { placeholderImage } = setup();
+
+      const src = placeholderImage.getAttribute('src');
+
+      expect(src).toEqual(expect.stringContaining('sigma=2.5'));
+      expect(src).toEqual(expect.stringContaining('minampl=0.5'));
+    });
+
+    it('sets the lqip to the smallest of the calculated sizes', () => {
+      const { placeholderImage } = setup({ sizes: [0.5, 0.85, 1] });
+      // Should be 160
+      // The smallest breakpoint is 20rem, which is 360px.
+      // 0.5 x 360 = 160
+
+      const src = placeholderImage.getAttribute('src');
+
+      expect(src).toEqual(expect.stringContaining('width=160'));
+    });
+
+    it('does not render an lqip if critical is true', () => {
+      const { placeholderImage } = setup({ critical: true });
+
+      const src = placeholderImage.getAttribute('src');
+
+      // Sets the src to transaprent data image instead
+      expect(src).toEqual(expect.stringContaining('data:image'));
+    });
+
+    it('accepts sizes as pixel values', () => {
+      const { placeholderImage } = setup({ sizes: [123] });
+
+      const src = placeholderImage.getAttribute('src');
+
+      expect(src).toEqual(expect.stringContaining('width=123'));
+    });
+
+    it('sets opacity to 0.6 while image has not loaded', () => {
+      const { placeholderImage } = setup();
+
+      expect(placeholderImage).toHaveStyle('opacity: 0.6');
+    });
+  });
+
+  describe('sets the sizing method', () => {
+    it('to thumbnail if no aspect ratio is provided', () => {
+      const { placeholderImage } = setup();
+    });
+    it('to fit if an aspect ratio is provided', () => {
+      const { placeholderImage } = setup({ aspect: '1:1' });
+
+      expect(placeholderImage.getAttribute('src')).toEqual(
+        expect.stringContaining('&height=320')
+      );
+      expect(placeholderImage.getAttribute('src')).toEqual(
+        expect.stringContaining('&width=320')
+      );
+    });
+    it('to crop if crop prop is true', () => {
+      const { placeholderImage } = setup({ aspect: '1:1', crop: true });
+
+      expect(placeholderImage.getAttribute('src')).toEqual(
+        expect.stringContaining('&method=crop')
+      );
+    });
+    it('warns if gravity is provided without crop', () => {
+      console.warn = jest.fn();
+      setup({ aspect: '1:1', crop: false, gravity: 'north' });
+      expect(console.warn).toHaveBeenCalled();
+    });
+  });
+
+  describe('when image is in view', () => {
+    beforeAll(() => {
+      useInView.mockImplementation(() => [null, true]);
+    });
+
+    it('renders full image', () => {
+      const { image } = setup({
+        imageSrc: testImage
+      });
+
+      expect(image).toHaveAttribute('src', 'test-image.png');
+    });
+
+    it('applies the given alt as an aria-label', () => {
+      const { image } = setup({
+        alt: 'test alt'
+      });
+
+      expect(image).toHaveAttribute('alt', 'test alt');
+    });
+
+    it('defaults aspect to 1:1', () => {
+      const { imageContainer } = setup();
+
+      expect(imageContainer).toHaveStyle('padding-bottom : 100%');
+    });
+
+    it('sets aspect ratio using padding if aspect is passed', () => {
+      const { imageContainer } = setup({ aspect: '3:2' });
+
+      expect(imageContainer).toHaveStyle('padding-bottom : 66.6667%');
+    });
+
+    it('defaults to background-size contain', () => {
+      const { image } = setup();
+
+      expect(image).toHaveStyle('object-fit : contain');
+    });
+
+    it('sets background-size to cover if `cover` is passed', () => {
+      const { image } = setup({ cover: true });
+
+      expect(image).toHaveStyle('object-fit : cover');
+    });
+
+    it('sets up image to fill available space if `fillAvailableSpace` is passed', () => {
+      const { image } = setup({ fillAvailableSpace: true });
+
+      expect(image).toHaveStyle('object-fit : cover');
+      expect(image).toHaveStyle('padding-top : 0');
+    });
+
+    it('sets opacity to 1 when image loads', () => {
+      const { image } = setup();
+      fireEvent.load(image);
+
+      expect(image).toHaveStyle('opacity: 1');
+    });
+
+    it('fades lqip when image loads', () => {
+      const { image, placeholderImage } = setup();
+      fireEvent.load(image);
+
+      expect(placeholderImage).toHaveStyle('opacity: 0');
+    });
+
+    test('sets quality to quality prop', () => {
+      const { image } = setup({ quality: 1 });
+
+      expect(image.getAttribute('srcSet')).toEqual(
+        expect.stringContaining('&quality=1')
+      );
+    });
+  });
+
+  describe('when there is an image error', () => {
+    beforeAll(() => {
+      useInView.mockImplementation(() => [null, true]);
+    });
+
+    it('renders default error', () => {
+      const { image, getByText } = setup();
+      fireEvent.error(image);
+
+      expect(getByText('Image Not Found'));
+    });
+
+    it('renders error component', () => {
+      const { image, getByText, container } = setup({
+        error: () => <div>some error found</div>
+      });
+      fireEvent.error(image);
+
+      expect(getByText('some error found'));
+      expect(queryByText(container, 'Image Not Found')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when image url is falsy', () => {
+    it('renders a transparent background image when null', () => {
+      const { image } = setup({ falsySrc: true, imageSrc: null });
+
+      expect(image).toHaveAttribute(`src`, transparent);
+      expect(image).toHaveStyle('opacity : 1');
+    });
+    it('renders a transparent background image when undefined', () => {
+      const { image } = setup({ falsySrc: true, imageSrc: undefined });
+
+      expect(image).toHaveAttribute(`src`, transparent);
+      expect(image).toHaveStyle('opacity: 1');
+    });
+    it('renders nothing and warns if false', () => {
+      console.warn = jest.fn();
+      const { image } = setup({ falsySrc: true, imageSrc: false });
+
+      expect(image).not.toBeInTheDocument();
+      expect(console.warn).toHaveBeenCalled();
+    });
+  });
+
+  it('renders a webp and jpeg source', () => {
+    const { imageContainer } = setup();
+
+    const sources = imageContainer.querySelectorAll('source');
+    expect(sources.length).toBe(2);
+    expect(sources[0]).toHaveAttribute('type', 'image/webp');
+  });
+});
+
+function setup({
+  imageSrc,
+  falsySrc = false,
+  error,
+  alt,
+  sizes,
+  aspect,
+  cover,
+  ...rest
+} = {}) {
+  const channelHandler = new ChannelHandler({
+    selectedChannel,
+    channels
+  });
+  const utils = render(
+    <ChannelProvider channelHandler={channelHandler}>
+      <ConfigProvider config={mockShopConfig}>
+        <Image
+          src={falsySrc ? imageSrc : imageSrc || 'default.png'}
+          error={error}
+          alt={alt}
+          sizes={sizes}
+          aspect={aspect}
+          cover={cover}
+          {...rest}
+        />
+      </ConfigProvider>
+    </ChannelProvider>
+  );
+
+  return {
+    ...utils,
+    image: utils.container.querySelector('[data-flight-image] img'),
+    placeholderImage: utils.container.querySelector(
+      '[data-flight-image-placeholder] img'
+    ),
+    imageContainer: utils.container.querySelector(
+      '[data-flight-image-container]'
+    )
+  };
+}

package/Image/Image.d.ts

@@ -1,2 +1,2 @@
-export * from './FlightImage';
-export { default } from './FlightImage';
+export * from './FlightImage';
+export { default } from './FlightImage';

package/Image/Image.js

@@ -1,3 +1,3 @@
-export * from './FlightImage';
-export { default } from './FlightImage';
+export * from './FlightImage';
+export { default } from './FlightImage';
 //# sourceMappingURL=Image.js.map

package/Image/index.d.ts

@@ -1 +1 @@
-export { default } from './FlightImage';
+export { default } from './FlightImage';

package/Image/index.js

@@ -1,2 +1,2 @@
-export { default } from './FlightImage';
+export { default } from './FlightImage';
 //# sourceMappingURL=index.js.map

package/Image/useConstructImage.d.ts

@@ -1,46 +1,46 @@
-import { ImageValue, ProductImageSize } from '@jetshop/core/types';
-declare type ImageSrcType = string | ProductImageSize[] | ImageValue;
-export declare type Gravity = 'north' | 'south' | 'west' | 'east' | 'centre' | 'smart';
-export declare type ImageBreakpointSize = number | string;
-export declare type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
-interface ImageParameters {
-    /** The image src
-     * Also accepts an array of objects with `url` keys (deprecated image field)
-     */
-    src: ImageSrcType;
-    /**
-     * Whether to crop the image instead of resizing it when aspect ratio is provided
-     * @default false
-     */
-    crop?: boolean;
-    gravity?: Gravity;
-    quality?: number;
-    /** An array of image sizes, will be mapped against breakpoints.
-     * @see https://docs.dev.jetshop.se/ui/image#the-sizes-prop
-     */
-    sizes: ImageBreakpointSizes;
-    /**
-     * The aspect ratio of the image
-     * If unknown, use null to preserve original aspect ratio
-     */
-    aspect?: string;
-    critical?: boolean;
-    modifiedDate?: string;
-    breakpoints: Record<string, string>;
-    baseUrl: string;
-    focalPointX?: number;
-    focalPointY?: number;
-}
-/**
- * Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
- * Also generates a LQIP using query parameters, to display while the full image loads.
- */
-export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
-    srcset: string;
-    webpSrcset: string;
-    sizes: string;
-    lqip: string;
-    src: string;
-    hasFalsySrc: boolean;
-};
-export {};
+import { ImageValue, ProductImageSize } from '@jetshop/core/types';
+declare type ImageSrcType = string | ProductImageSize[] | ImageValue;
+export declare type Gravity = 'north' | 'south' | 'west' | 'east' | 'centre' | 'smart';
+export declare type ImageBreakpointSize = number | string;
+export declare type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
+interface ImageParameters {
+    /** The image src
+     * Also accepts an array of objects with `url` keys (deprecated image field)
+     */
+    src: ImageSrcType;
+    /**
+     * Whether to crop the image instead of resizing it when aspect ratio is provided
+     * @default false
+     */
+    crop?: boolean;
+    gravity?: Gravity;
+    quality?: number;
+    /** An array of image sizes, will be mapped against breakpoints.
+     * @see https://docs.dev.jetshop.se/ui/image#the-sizes-prop
+     */
+    sizes: ImageBreakpointSizes;
+    /**
+     * The aspect ratio of the image
+     * If unknown, use null to preserve original aspect ratio
+     */
+    aspect?: string;
+    critical?: boolean;
+    modifiedDate?: string;
+    breakpoints: Record<string, string>;
+    baseUrl: string;
+    focalPointX?: number;
+    focalPointY?: number;
+}
+/**
+ * Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
+ * Also generates a LQIP using query parameters, to display while the full image loads.
+ */
+export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
+    srcset: string;
+    webpSrcset: string;
+    sizes: string;
+    lqip: string;
+    src: string;
+    hasFalsySrc: boolean;
+};
+export {};