Merged in feat/sw-3228-move-image-to-design-system (pull request #2616)

feat(SW-3228): Move Image to design-system

* Move Image to design-system

* Merge branch 'master' into feat/sw-3228-move-image-to-design-system


Approved-by: Linus Flood

packages/design-system/lib/components/Image.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import NextImage, {
+  type ImageLoaderProps,
+  ImageProps as NextImageProps,
+} from 'next/image'
+
+import ImageFallback from './ImageFallback'
+
+import type { CSSProperties } from 'react'
+
+type FocalPoint = {
+  x: number
+  y: number
+}
+
+export interface ImageProps extends NextImageProps {
+  focalPoint?: FocalPoint
+}
+
+function imageLoader({ quality, src, width }: ImageLoaderProps) {
+  const isAbsoluteUrl = src.startsWith('https://') || src.startsWith('http://')
+  const hasQS = src.indexOf('?') !== -1
+
+  if (isAbsoluteUrl) {
+    return `https://img.scandichotels.com/.netlify/images?url=${src}&w=${width}${quality ? '&q=' + quality : ''}`
+  }
+
+  return `${src}${hasQS ? '&' : '?'}w=${width}${quality ? '&q=' + quality : ''}`
+}
+
+// Next/Image adds & instead of ? before the params
+export default function Image({ focalPoint, style, ...props }: ImageProps) {
+  const styles: CSSProperties = focalPoint
+    ? {
+        objectFit: 'cover',
+        objectPosition: `${focalPoint.x}% ${focalPoint.y}%`,
+        ...style,
+      }
+    : { ...style }
+
+  if (!props.src) {
+    return <ImageFallback />
+  }
+
+  return <NextImage {...props} style={styles} loader={imageLoader} />
+}