@faststore/components 2.0.102-alpha.0 → 2.0.104-alpha.0

package/dist/atoms/Button/Button.js

@@ -6,7 +6,7 @@ const Button = forwardRef(function Button({ children, variant, inverse, size = '
             loadingLabel,
             React.createElement(Loader, { variant: variant === 'primary' && !inverse ? 'light' : 'dark' }))),
         React.isValidElement(icon) && iconPosition === 'left' && React.createElement("span", { "data-fs-button-icon": true }, icon),
-        React.createElement("span", null, children),
+        children && React.createElement("span", null, children),
         React.isValidElement(icon) && iconPosition === 'right' && React.createElement("span", { "data-fs-button-icon": true }, icon)));
 });
 export default Button;

package/dist/atoms/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AA6C/B,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,WAAW,EACpB,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,yBACV,IAAI,4BACD,OAAO,4BACP,OAAO,EAC/B,QAAQ,EAAE,QAAQ,iBACL,MAAM,KACf,UAAU;QAEb,OAAO,IAAI,CACV;YACG,YAAY;YACb,oBAAC,MAAM,IACL,OAAO,EAAE,OAAO,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAC7D,CACA,CACL;QACA,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,MAAM,IAAI,6DAA2B,IAAI,CAAQ;QACjG,kCAAO,QAAQ,CAAQ;QACtB,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,OAAO,IAAI,6DAA2B,IAAI,CAAQ,CAC3F,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AA6C/B,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,WAAW,EACpB,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,yBACV,IAAI,4BACD,OAAO,4BACP,OAAO,EAC/B,QAAQ,EAAE,QAAQ,iBACL,MAAM,KACf,UAAU;QAEb,OAAO,IAAI,CACV;YACG,YAAY;YACb,oBAAC,MAAM,IACL,OAAO,EAAE,OAAO,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAC7D,CACA,CACL;QACA,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,MAAM,IAAI,6DAA2B,IAAI,CAAQ;QAChG,QAAQ,IAAI,kCAAO,QAAQ,CAAQ;QACnC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,OAAO,IAAI,6DAA2B,IAAI,CAAQ,CAC3F,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/index.d.ts

@@ -103,6 +103,8 @@ export { default as Filter, FilterFacetBoolean, FilterFacetBooleanItem, FilterFa
 export type { FilterFacetBooleanItemProps, FilterFacetRangeProps, FilterFacetsProps, FilterProps, FilterSliderProps, } from './organisms/Filter';
 export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero';
 export type { HeroProps, HeroImageProps, HeroHeaderProps, } from './organisms/Hero';
+export { default as ImageGallery, ImageGallerySelector, ImageZoom, } from './organisms/ImageGallery';
+export type { ImageElementData, ImageGalleryProps, ImageGallerySelectorProps, ImageZoomProps, } from './organisms/ImageGallery';
 export { default as OutOfStock } from './organisms/OutOfStock';
 export type { OutOfStockProps } from './organisms/OutOfStock';
 export { default as PaymentMethods } from './organisms/PaymentMethods';

package/dist/index.js

@@ -57,6 +57,7 @@ export { default as QuantitySelector } from './molecules/QuantitySelector';
 export { default as CartSidebar, CartSidebarList, CartSidebarFooter, } from './organisms/CartSidebar';
 export { default as Filter, FilterFacetBoolean, FilterFacetBooleanItem, FilterFacetRange, FilterFacets, FilterSlider, } from './organisms/Filter';
 export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero';
+export { default as ImageGallery, ImageGallerySelector, ImageZoom, } from './organisms/ImageGallery';
 export { default as OutOfStock } from './organisms/OutOfStock';
 export { default as PaymentMethods } from './organisms/PaymentMethods';
 export { default as PriceRange } from './organisms/PriceRange';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/organisms/ImageGallery/ImageGallery.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { HTMLAttributes, FunctionComponent } from 'react';
+type ImageComponentType = FunctionComponent<{
+    url: string;
+    alternateName?: string;
+    loading?: 'eager' | 'lazy';
+}>;
+export interface ImageElementData {
+    /**
+     * Image URL.
+     */
+    url: string;
+    /**
+     * Alternative text description of the image.
+     */
+    alternateName: string;
+}
+export interface ImageGalleryProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * List of images that should be rendered.
+     */
+    images: ImageElementData[];
+    /**
+     * Function that returns a React component that will be used to render images.
+     */
+    ImageComponent: ImageComponentType;
+    /**
+     * The currently active thumbnail.
+     */
+    selectedImageIdx: number;
+    /**
+     * Event handler for clicks on each thumbnail.
+     */
+    setSelectedImageIdx: (idx: number) => void;
+}
+declare const ImageGallery: React.ForwardRefExoticComponent<ImageGalleryProps & React.RefAttributes<HTMLDivElement>>;
+export default ImageGallery;

package/dist/organisms/ImageGallery/ImageGallery.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { ImageGallerySelector } from '../..';
+const ImageGallery = forwardRef(function ImageGallery({ images, children, ImageComponent, selectedImageIdx, setSelectedImageIdx, testId = 'fs-image-gallery', ...otherProps }, ref) {
+    const hasSelector = images.length > 1;
+    return (React.createElement("section", { ref: ref, "data-fs-image-gallery": hasSelector ? 'with-selector' : 'without-selector', "data-testid": testId, ...otherProps },
+        children,
+        hasSelector && (React.createElement(ImageGallerySelector, { images: images, onSelect: setSelectedImageIdx, currentImageIdx: selectedImageIdx, ImageComponent: ImageComponent }))));
+});
+export default ImageGallery;
+//# sourceMappingURL=ImageGallery.js.map

package/dist/organisms/ImageGallery/ImageGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallery.js","sourceRoot":"","sources":["../../../src/organisms/ImageGallery/ImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AA2C5C,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CACnB,EACE,MAAM,EACN,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,MAAM,GAAG,kBAAkB,EAC3B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAA;IAErC,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,2BAEN,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,iBAEvC,MAAM,KACf,UAAU;QAEb,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,oBAAoB,IACnB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,mBAAmB,EAC7B,eAAe,EAAE,gBAAgB,EACjC,cAAc,EAAE,cAAc,GAC9B,CACH,CACO,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/organisms/ImageGallery/ImageGallerySelector.d.ts

@@ -0,0 +1,31 @@
+import type { AriaAttributes } from 'react';
+import type { ImageGalleryProps } from '.';
+export interface ImageGallerySelectorProps extends Pick<ImageGalleryProps, 'images' | 'ImageComponent'> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * The currently active thumbnail.
+     */
+    currentImageIdx: number;
+    /**
+     * For accessibility purposes, define a string that labels the current element.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+    /**
+     * For accessibility purposes, define a string that labels the left navigation icon button.
+     */
+    navigationButtonLeftAriaLabel?: AriaAttributes['aria-label'];
+    /**
+     * For accessibility purposes, define a string that labels the right navigation button icon.
+     */
+    navigationButtonRightAriaLabel?: AriaAttributes['aria-label'];
+    /**
+     * Event handler for clicks on each thumbnail.
+     */
+    onSelect: (imageIdx: number) => void;
+}
+declare function ImageGallerySelector({ images, onSelect, ImageComponent, currentImageIdx, testId, 'aria-label': ariaLabel, navigationButtonLeftAriaLabel, navigationButtonRightAriaLabel, }: ImageGallerySelectorProps): JSX.Element;
+export default ImageGallerySelector;

package/dist/organisms/ImageGallery/ImageGallerySelector.js

@@ -0,0 +1,46 @@
+import React, { useRef, useState, useCallback } from 'react';
+import { InView } from 'react-intersection-observer';
+import { Button, Icon, IconButton } from '../..';
+const SCROLL_MARGIN_VALUE = 400;
+const moveScroll = (container, value) => {
+    if (container) {
+        if (container.scrollHeight > container.clientHeight) {
+            // TODO: Temporary workaround for scroll-behavior with scrollTop – Safari 15.4) https://developer.apple.com/forums/thread/703294
+            container.style.overflow = 'auto';
+            window.requestAnimationFrame(() => container.scrollTo({ top: value, behavior: 'smooth' }));
+            setTimeout(() => (container.style.overflow = 'hidden'), 2000);
+        }
+        else {
+            container.scrollLeft += value;
+        }
+    }
+};
+const hasScroll = (container) => {
+    if (container) {
+        return (container.scrollHeight > container.clientHeight ||
+            container.scrollWidth > container.clientWidth);
+    }
+    return false;
+};
+function ImageGallerySelector({ images, onSelect, ImageComponent, currentImageIdx, testId = 'fs-image-gallery-selector', 'aria-label': ariaLabel = 'Product Images', navigationButtonLeftAriaLabel = 'Backward slide image selector', navigationButtonRightAriaLabel = 'Forward slide image selector', }) {
+    const elementsRef = useRef(null);
+    const elementHasScroll = hasScroll(elementsRef.current);
+    const [firstImageInView, setFirstImageInView] = useState(true);
+    const [lastImageInView, setLastImageInView] = useState(true);
+    const inViewChange = useCallback((idx, inView) => {
+        idx === 0 && setFirstImageInView(inView);
+        idx === images.length - 1 && setLastImageInView(inView);
+    }, [images.length]);
+    return (React.createElement("section", { "data-fs-image-gallery-selector": true, "data-testid": testId, "aria-label": ariaLabel, "aria-roledescription": "carousel" },
+        elementHasScroll && !firstImageInView && (React.createElement("div", { "data-fs-image-gallery-selector-control": true },
+            React.createElement(IconButton, { "data-fs-image-gallery-selector-control-button": true, "aria-label": navigationButtonLeftAriaLabel, icon: React.createElement(Icon, { name: "ArrowLeft" }), size: "small", onClick: () => moveScroll(elementsRef.current, -SCROLL_MARGIN_VALUE) }))),
+        React.createElement("div", { "data-fs-image-gallery-selector-elements": true, ref: elementsRef }, images.map((image, idx) => {
+            return (React.createElement(InView, { key: idx, onChange: (inView) => inViewChange(idx, inView) },
+                React.createElement(Button, { key: idx, "aria-label": `${image.alternateName} - Image ${idx + 1} of ${images.length}`, onClick: () => onSelect(idx), "data-fs-image-gallery-selector-thumbnail": idx === currentImageIdx ? 'selected' : 'true' },
+                    React.createElement(ImageComponent, { url: image.url ?? '', loading: idx === 0 ? 'eager' : 'lazy', alternateName: image.alternateName ?? '' }))));
+        })),
+        elementHasScroll && !lastImageInView && (React.createElement("div", { "data-fs-image-gallery-selector-control": true },
+            React.createElement(IconButton, { "data-fs-image-gallery-selector-control-button": true, "aria-label": navigationButtonRightAriaLabel, icon: React.createElement(Icon, { name: "ArrowLeft" }), size: "small", onClick: () => moveScroll(elementsRef.current, +SCROLL_MARGIN_VALUE) })))));
+}
+export default ImageGallerySelector;
+//# sourceMappingURL=ImageGallerySelector.js.map

package/dist/organisms/ImageGallery/ImageGallerySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallerySelector.js","sourceRoot":"","sources":["../../../src/organisms/ImageGallery/ImageGallerySelector.tsx"],"names":[],"mappings":"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"}

package/dist/organisms/ImageGallery/ImageZoom.d.ts

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+export interface ImageZoomProps {
+    helpMessage?: string;
+    zoomFactor?: number;
+}
+declare const ImageZoom: ({ children }: PropsWithChildren<ImageZoomProps>) => JSX.Element;
+export default ImageZoom;

package/dist/organisms/ImageGallery/ImageZoom.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const ImageZoom = ({ children }) => {
+    return React.createElement(React.Fragment, null, children);
+};
+export default ImageZoom;
+//# sourceMappingURL=ImageZoom.js.map

package/dist/organisms/ImageGallery/ImageZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageZoom.js","sourceRoot":"","sources":["../../../src/organisms/ImageGallery/ImageZoom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAqC,EAAE,EAAE;IACpE,OAAO,0CAAG,QAAQ,CAAI,CAAA;AACxB,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/organisms/ImageGallery/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './ImageGallery';
+export type { ImageGalleryProps, ImageElementData } from './ImageGallery';
+export { default as ImageGallerySelector } from './ImageGallerySelector';
+export type { ImageGallerySelectorProps } from './ImageGallerySelector';
+export { default as ImageZoom } from './ImageZoom';
+export type { ImageZoomProps } from './ImageZoom';

package/dist/organisms/ImageGallery/index.js

@@ -0,0 +1,4 @@
+export { default } from './ImageGallery';
+export { default as ImageGallerySelector } from './ImageGallerySelector';
+export { default as ImageZoom } from './ImageZoom';
+//# sourceMappingURL=index.js.map

package/dist/organisms/ImageGallery/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/ImageGallery/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAGxC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAGxE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.102-alpha.0",
+  "version": "2.0.104-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -21,8 +21,8 @@
     "src"
   ],
   "devDependencies": {
-    "@faststore/eslint-config": "^2.0.91-alpha.0",
-    "@faststore/shared": "^2.0.91-alpha.0",
+    "@faststore/eslint-config": "^2.0.104-alpha.0",
+    "@faststore/shared": "^2.0.104-alpha.0",
     "eslint": "7.32.0",
     "typescript": "^4.8.4"
   },
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "c9841c86822020c65161193647edf280cd765efa"
+  "gitHead": "0db7f06c36c7c41ecec51f247b21866469977618"
 }

package/src/atoms/Button/Button.tsx

@@ -82,7 +82,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
         </p>
       )}
       {React.isValidElement(icon) && iconPosition === 'left' && <span data-fs-button-icon>{icon}</span>}
-      <span>{children}</span>
+      {children && <span>{children}</span>}
       {React.isValidElement(icon) && iconPosition === 'right' && <span data-fs-button-icon>{icon}</span>}
     </button>
   )

package/src/index.ts

@@ -221,6 +221,18 @@ export type {
   HeroHeaderProps,
 } from './organisms/Hero'
 
+export {
+  default as ImageGallery,
+  ImageGallerySelector,
+  ImageZoom,
+} from './organisms/ImageGallery'
+export type {
+  ImageElementData,
+  ImageGalleryProps,
+  ImageGallerySelectorProps,
+  ImageZoomProps,
+} from './organisms/ImageGallery'
+
 export { default as OutOfStock } from './organisms/OutOfStock'
 export type { OutOfStockProps } from './organisms/OutOfStock'
 

package/src/organisms/ImageGallery/ImageGallery.tsx

@@ -0,0 +1,85 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes, FunctionComponent } from 'react'
+
+import { ImageGallerySelector } from '../..'
+
+type ImageComponentType = FunctionComponent<{
+  url: string
+  alternateName?: string
+  loading?: 'eager' | 'lazy'
+}>
+
+export interface ImageElementData {
+  /**
+   * Image URL.
+   */
+  url: string
+  /**
+   * Alternative text description of the image.
+   */
+  alternateName: string
+}
+
+export interface ImageGalleryProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * List of images that should be rendered.
+   */
+  images: ImageElementData[]
+  /**
+   * Function that returns a React component that will be used to render images.
+   */
+  ImageComponent: ImageComponentType
+  /**
+   * The currently active thumbnail.
+   */
+  selectedImageIdx: number
+  /**
+   * Event handler for clicks on each thumbnail.
+   */
+  setSelectedImageIdx: (idx: number) => void
+}
+
+const ImageGallery = forwardRef<HTMLDivElement, ImageGalleryProps>(
+  function ImageGallery(
+    {
+      images,
+      children,
+      ImageComponent,
+      selectedImageIdx,
+      setSelectedImageIdx,
+      testId = 'fs-image-gallery',
+      ...otherProps
+    },
+    ref
+  ) {
+    const hasSelector = images.length > 1
+
+    return (
+      <section
+        ref={ref}
+        data-fs-image-gallery={
+          hasSelector ? 'with-selector' : 'without-selector'
+        }
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+        {hasSelector && (
+          <ImageGallerySelector
+            images={images}
+            onSelect={setSelectedImageIdx}
+            currentImageIdx={selectedImageIdx}
+            ImageComponent={ImageComponent}
+          />
+        )}
+      </section>
+    )
+  }
+)
+
+export default ImageGallery

package/src/organisms/ImageGallery/ImageGallerySelector.tsx

@@ -0,0 +1,148 @@
+import React, { useRef, useState, useCallback } from 'react'
+import type { AriaAttributes } from 'react'
+import { InView } from 'react-intersection-observer'
+import { Button, Icon, IconButton } from '../..'
+
+import type { ImageGalleryProps } from '.'
+
+export interface ImageGallerySelectorProps
+  extends Pick<ImageGalleryProps, 'images' | 'ImageComponent'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * The currently active thumbnail.
+   */
+  currentImageIdx: number
+  /**
+   * For accessibility purposes, define a string that labels the current element.
+   */
+  'aria-label'?: AriaAttributes['aria-label']
+  /**
+   * For accessibility purposes, define a string that labels the left navigation icon button.
+   */
+  navigationButtonLeftAriaLabel?: AriaAttributes['aria-label']
+  /**
+   * For accessibility purposes, define a string that labels the right navigation button icon.
+   */
+  navigationButtonRightAriaLabel?: AriaAttributes['aria-label']
+  /**
+   * Event handler for clicks on each thumbnail.
+   */
+  onSelect: (imageIdx: number) => void
+}
+
+const SCROLL_MARGIN_VALUE = 400
+
+const moveScroll = (container: HTMLDivElement | null, value: number) => {
+  if (container) {
+    if (container.scrollHeight > container.clientHeight) {
+      // TODO: Temporary workaround for scroll-behavior with scrollTop – Safari 15.4) https://developer.apple.com/forums/thread/703294
+      container.style.overflow = 'auto'
+      window.requestAnimationFrame(() =>
+        container.scrollTo({ top: value, behavior: 'smooth' })
+      )
+      setTimeout(() => (container.style.overflow = 'hidden'), 2000)
+    } else {
+      container.scrollLeft += value
+    }
+  }
+}
+
+const hasScroll = (container: HTMLDivElement | null): boolean => {
+  if (container) {
+    return (
+      container.scrollHeight > container.clientHeight ||
+      container.scrollWidth > container.clientWidth
+    )
+  }
+
+  return false
+}
+
+function ImageGallerySelector({
+  images,
+  onSelect,
+  ImageComponent,
+  currentImageIdx,
+  testId = 'fs-image-gallery-selector',
+  'aria-label': ariaLabel = 'Product Images',
+  navigationButtonLeftAriaLabel = 'Backward slide image selector',
+  navigationButtonRightAriaLabel = 'Forward slide image selector',
+}: ImageGallerySelectorProps) {
+  const elementsRef = useRef<HTMLDivElement>(null)
+  const elementHasScroll = hasScroll(elementsRef.current)
+  const [firstImageInView, setFirstImageInView] = useState(true)
+  const [lastImageInView, setLastImageInView] = useState(true)
+
+  const inViewChange= useCallback((idx: number, inView: boolean) => {
+    idx === 0 && setFirstImageInView(inView)
+    idx === images.length - 1 && setLastImageInView(inView)
+  }, [images.length])
+
+  return (
+    <section
+      data-fs-image-gallery-selector
+      data-testid={testId}
+      aria-label={ariaLabel}
+      aria-roledescription="carousel"
+    >
+      {elementHasScroll && !firstImageInView && (
+        <div data-fs-image-gallery-selector-control>
+          <IconButton
+            data-fs-image-gallery-selector-control-button
+            aria-label={navigationButtonLeftAriaLabel}
+            icon={<Icon name="ArrowLeft" />}
+            size="small"
+            onClick={() =>
+              moveScroll(elementsRef.current, -SCROLL_MARGIN_VALUE)
+            }
+          />
+        </div>
+      )}
+      <div data-fs-image-gallery-selector-elements ref={elementsRef}>
+        {images.map((image, idx) => {
+          return (
+            <InView 
+              key={idx}
+              onChange={(inView) => inViewChange(idx, inView)}>
+              <Button
+                key={idx}
+                aria-label={`${image.alternateName} - Image ${idx + 1} of ${
+                  images.length
+                }`}
+                onClick={() => onSelect(idx)}
+                data-fs-image-gallery-selector-thumbnail={
+                  idx === currentImageIdx ? 'selected' : 'true'
+                }
+              >
+                <ImageComponent
+                  url={image.url ?? ''}
+                  loading={idx === 0 ? 'eager' : 'lazy'}
+                  alternateName={image.alternateName ?? ''}
+                />
+              </Button>
+            </InView>
+          )
+        })}
+      </div>
+      {elementHasScroll && !lastImageInView && (
+        <div data-fs-image-gallery-selector-control>
+          <IconButton
+            data-fs-image-gallery-selector-control-button
+            aria-label={navigationButtonRightAriaLabel}
+            icon={<Icon name="ArrowLeft" />}
+            size="small"
+            onClick={() =>
+              moveScroll(elementsRef.current, +SCROLL_MARGIN_VALUE)
+            }
+          />
+        </div>
+      )}
+    </section>
+  )
+}
+
+export default ImageGallerySelector

package/src/organisms/ImageGallery/ImageZoom.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+
+// TODO: Implements zoom feature to the selected image (Coming Soon)
+export interface ImageZoomProps {
+  helpMessage?: string
+  zoomFactor?: number
+}
+
+const ImageZoom = ({ children }: PropsWithChildren<ImageZoomProps>) => {
+  return <>{children}</>
+}
+
+export default ImageZoom

package/src/organisms/ImageGallery/index.ts

@@ -0,0 +1,8 @@
+export { default } from './ImageGallery'
+export type { ImageGalleryProps, ImageElementData } from './ImageGallery'
+
+export { default as ImageGallerySelector } from './ImageGallerySelector'
+export type { ImageGallerySelectorProps } from './ImageGallerySelector'
+
+export { default as ImageZoom } from './ImageZoom'
+export type { ImageZoomProps } from './ImageZoom'