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

apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx

@@ -4,6 +4,7 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import Image from "@scandic-hotels/design-system/Image"
+import ImageContainer from "@scandic-hotels/design-system/ImageContainer"
 import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
@@ -14,7 +15,6 @@ import {
 } from "@scandic-hotels/trpc/types/RTEenums"
 import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault"
 
-import ImageContainer from "../ImageContainer"
 import Table from "../TempDesignSystem/Table"
 import BiroScript from "../TempDesignSystem/Text/BiroScript"
 import { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"

apps/scandic-web/components/JsonToHtml/renderOptions.tsx

@@ -3,12 +3,12 @@ import { cx } from "class-variance-authority"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
+import ImageContainer from "@scandic-hotels/design-system/ImageContainer"
 import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ContentEnum } from "@scandic-hotels/trpc/types/content"
 import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault"
 
-import ImageContainer from "../ImageContainer"
 import Table from "../TempDesignSystem/Table"
 import {
   hasAvailableParagraphFormat,

apps/scandic-web/types/components/imageContainer.ts

@@ -1,6 +0,0 @@
-import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
-
-export type ImageContainerProps = {
-  leftImage: ImageVaultAsset
-  rightImage: ImageVaultAsset
-}

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

@@ -1,9 +1,26 @@
-import Caption from "@scandic-hotels/design-system/Caption"
+import Caption from '../Caption'
-import Image from "@scandic-hotels/design-system/Image"
+import Image from '../Image'
 
-import styles from "./imageContainer.module.css"
+import styles from './imageContainer.module.css'
 
-import type { ImageContainerProps } from "@/types/components/imageContainer"
+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,

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",