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

packages/design-system/lib/components/ImageFallback/imageFallback.module.css

@@ -0,0 +1,10 @@
+.imageFallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  min-width: 200px;
+  min-height: 200px;
+  background-color: var(--Surface-Feedback-Neutral);
+}

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

@@ -0,0 +1,23 @@
+import { MaterialIcon } from '../Icons/MaterialIcon'
+
+import styles from './imageFallback.module.css'
+
+interface ImageFallbackProps {
+  width?: string
+  height?: string
+}
+
+export default function ImageFallback({
+  width = '100%',
+  height = '100%',
+}: ImageFallbackProps) {
+  return (
+    <div className={styles.imageFallback} style={{ width, height }}>
+      <MaterialIcon
+        icon="imagesmode"
+        size={32}
+        color="Icon/Interactive/Disabled"
+      />
+    </div>
+  )
+}

packages/design-system/package.json

@@ -25,6 +25,8 @@
     "./Form/Phone": "./lib/components/Form/Phone/index.tsx",
     "./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx",
     "./IconChip": "./lib/components/IconChip/index.tsx",
+    "./Image": "./lib/components/Image.tsx",
+    "./ImageFallback": "./lib/components/ImageFallback/index.tsx",
     "./Input": "./lib/components/Input/index.tsx",
     "./Label": "./lib/components/Label/index.tsx",
     "./Link": "./lib/components/Link/index.tsx",