Merged in feat/sw-3244-move-imagecontainer-to-design-system (pull request #2637)

feat(SW-3244): Move ImageContainer component to design-system

* Move ImageContainer component to design-system

* Fix imports


Approved-by: Bianca Widstam

packages/design-system/lib/components/ImageContainer/imageContainer.module.css

@@ -0,0 +1,24 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x2);
+  width: 100%;
+  grid-template-columns: auto;
+}
+
+.image {
+  max-width: 100%;
+  width: 100%;
+  height: 365px;
+  object-fit: cover;
+  border-radius: var(--Corner-radius-md);
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .image {
+    margin: var(--Spacing-x1) var(--Spacing-x0);
+  }
+}

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

@@ -0,0 +1,55 @@
+import Caption from '../Caption'
+import Image from '../Image'
+
+import styles from './imageContainer.module.css'
+
+type Image = {
+  id: number
+  title: string
+  url: string
+  focalPoint: {
+    x: number
+    y: number
+  }
+  meta: {
+    alt?: string | null
+    caption?: string | null
+  }
+}
+
+type ImageContainerProps = {
+  leftImage: Image
+  rightImage: Image
+}
+
+export default function ImageContainer({
+  leftImage,
+  rightImage,
+}: ImageContainerProps) {
+  return (
+    <section className={styles.container}>
+      <article>
+        <Image
+          className={styles.image}
+          src={leftImage.url}
+          height={365}
+          width={600}
+          alt={leftImage.meta.alt || leftImage.title}
+          focalPoint={leftImage.focalPoint}
+        />
+        <Caption>{leftImage.meta.caption}</Caption>
+      </article>
+      <article>
+        <Image
+          className={styles.image}
+          src={rightImage.url}
+          height={365}
+          width={600}
+          alt={rightImage.meta.alt || rightImage.title}
+          focalPoint={rightImage.focalPoint}
+        />
+        <Caption>{leftImage.meta.caption}</Caption>
+      </article>
+    </section>
+  )
+}

packages/design-system/package.json

@@ -26,6 +26,7 @@
     "./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx",
     "./IconChip": "./lib/components/IconChip/index.tsx",
     "./Image": "./lib/components/Image.tsx",
+    "./ImageContainer": "./lib/components/ImageContainer/index.tsx",
     "./ImageFallback": "./lib/components/ImageFallback/index.tsx",
     "./ImageGallery": "./lib/components/ImageGallery/index.tsx",
     "./Input": "./lib/components/Input/index.tsx",