Merged in feat/sw-3239-move-imagegallery-to-design-system (pull request #2633)

feat(SW-3239): Move imagegallery to design system

* Inline types

* Move ImageGallery to design-system


Approved-by: Matilda Landström

packages/design-system/lib/components/ImageGallery/imageGallery.module.css

@@ -0,0 +1,47 @@
+.wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.imageCount {
+  position: absolute;
+  bottom: var(--Space-x2);
+  right: var(--Space-x2);
+  background-color: var(--Overlay-90);
+  padding: var(--Space-x025) var(--Space-x05);
+  border-radius: var(--Corner-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Space-x025);
+  color: var(--Text-Inverted);
+}
+
+.imageCountBottom {
+  bottom: var(--Space-x2);
+  top: auto;
+}
+
+.imageCountTop {
+  top: var(--Space-x2);
+  bottom: auto;
+}
+
+.triggerArea {
+  background-color: transparent;
+  border-width: 0;
+  padding: 0;
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+  border-radius: inherit;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}

packages/design-system/lib/components/ImageGallery/index.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { memo, useState } from 'react'
+import { Button as ButtonRAC } from 'react-aria-components'
+import { useIntl } from 'react-intl'
+
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import Image from '../Image'
+import ImageFallback from '../ImageFallback'
+import { Typography } from '../Typography'
+import Lightbox from '../Lightbox'
+
+import styles from './imageGallery.module.css'
+
+interface GalleryImage {
+  src: string
+  alt: string
+  caption?: string | null
+  smallSrc?: string | null
+}
+
+type ImageGalleryProps = {
+  images?: GalleryImage[]
+  title: string
+  fill?: boolean
+  width?: number
+  height?: number
+  sizes?: string
+  hideLabel?: boolean
+  imageCountPosition?: 'top' | 'bottom'
+}
+
+function ImageGallery({
+  images,
+  title,
+  fill,
+  height = 280,
+  sizes,
+  hideLabel,
+  imageCountPosition = 'bottom',
+}: ImageGalleryProps) {
+  const intl = useIntl()
+  const [isOpen, setIsOpen] = useState(false)
+  const [imageError, setImageError] = useState(false)
+  const imageProps = fill ? { fill, sizes } : { height, width: height * 1.5 }
+
+  if (!images || images.length === 0 || imageError) {
+    return <ImageFallback />
+  }
+
+  const firstImage = images[0]
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <Image
+          className={styles.image}
+          src={firstImage.src}
+          alt={firstImage.alt}
+          onError={() => setImageError(true)}
+          {...imageProps}
+        />
+        <Typography variant={'Body/Supporting text (caption)/smRegular'}>
+          <span
+            className={`${styles.imageCount} ${
+              imageCountPosition === 'top'
+                ? styles.imageCountTop
+                : styles.imageCountBottom
+            }`}
+          >
+            <MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
+            <span>{images.length}</span>
+          </span>
+        </Typography>
+        <ButtonRAC
+          className={styles.triggerArea}
+          onPress={() => setIsOpen(true)}
+          aria-label={intl.formatMessage({
+            defaultMessage: 'Open image gallery',
+          })}
+        />
+      </div>
+      {isOpen ? (
+        <Lightbox
+          images={images}
+          dialogTitle={title}
+          onClose={() => setIsOpen(false)}
+          hideLabel={hideLabel}
+        />
+      ) : null}
+    </>
+  )
+}
+
+export default memo(ImageGallery)