From 4ed1cd184327a388ef08c27a216e08bee01092a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20J=C3=A4derberg?=
 <joakim.jaderberg@scandichotels.com>
Date: Wed, 27 Aug 2025 14:09:10 +0000
Subject: [PATCH] Merged in fix/storybook-static-folder (pull request #2718)

Storybook Avatar: Use images from public folder

* make sure we import files from the correct folder


Approved-by: Chuma Mcphoy (We Ahead)
---
 .../lib/components/Avatar/Avatar.stories.tsx  | 22 +++++--------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/packages/design-system/lib/components/Avatar/Avatar.stories.tsx b/packages/design-system/lib/components/Avatar/Avatar.stories.tsx
index 27172b478..db7343513 100644
--- a/packages/design-system/lib/components/Avatar/Avatar.stories.tsx
+++ b/packages/design-system/lib/components/Avatar/Avatar.stories.tsx
@@ -20,10 +20,10 @@ const meta: Meta<typeof Avatar> = {
 export default meta
 
 type Story = StoryObj<typeof Avatar>
-
+const imageFile = './img/profile-picture.png' as const
 export const WithImage: Story = {
   args: {
-    src: `../../../public/img/profile-picture.png`,
+    src: imageFile,
     alt: 'Profile photo',
     size: 'md',
   },
@@ -45,11 +45,7 @@ export const Fallback: Story = {
 export const SmallSize: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-      <Avatar
-        src={`../../../public/img/profile-picture.png`}
-        alt="Profile photo"
-        size="sm"
-      />
+      <Avatar src={imageFile} alt="Profile photo" size="sm" />
       <Avatar initials="FR" size="sm" />
       <Avatar size="sm" />
     </div>
@@ -59,11 +55,7 @@ export const SmallSize: Story = {
 export const MediumSize: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-      <Avatar
-        src={`../../../public/img/profile-picture.png`}
-        alt="Profile photo"
-        size="md"
-      />
+      <Avatar src={imageFile} alt="Profile photo" size="md" />
       <Avatar initials="FR" size="md" />
       <Avatar size="md" />
     </div>
@@ -73,11 +65,7 @@ export const MediumSize: Story = {
 export const LargeSize: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-      <Avatar
-        src={`../../../public/img/profile-picture.png`}
-        alt="Profile photo"
-        size="lg"
-      />
+      <Avatar src={imageFile} alt="Profile photo" size="lg" />
       <Avatar initials="FR" size="lg" />
       <Avatar size="lg" />
     </div>