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/ImageContainer/imageContainer.module.css

@@ -1,24 +0,0 @@
-.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);
-  }
-}

apps/scandic-web/components/ImageContainer/index.tsx

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

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
-}