feat(onboarding): improve onboarding template component

Use React.ComponentProps to improve flexibility of image rules Signed-off-by: Thibault Barske <[email protected]>
ovh · Sep 19, 2024 · 38c94e2 · 38c94e2
1 parent aa132e2
commit 38c94e2
Showing 1 changed file with 8 additions and 17 deletions.
diff --git a/...ges/manager-react-components/src/components/templates/onboarding/onboarding.component.tsx b/...ges/manager-react-components/src/components/templates/onboarding/onboarding.component.tsx
@@ -32,11 +32,7 @@ export type OnboardingLayoutProps = OnboardingLayoutButtonProps &
     hideHeadingSection?: boolean;
     title: string;
     description?: React.ReactNode;
-    img?: {
-      src: string;
-      width?: number;
-      height?: number;
-    };
+    img?: React.ComponentProps<'img'>;
   }>;
 
 const OnboardingLayoutButton: React.FC<OnboardingLayoutButtonProps> = ({
@@ -103,21 +99,16 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
   img,
   isActionDisabled,
 }) => {
+  const { className: brandImageClassName, ...brandImageProps } = img;
   return (
     <div className="flex flex-col mx-auto sm:px-10">
       {!hideHeadingSection && (
-        <section className="flex flex-col items-center">
-          {(img?.src || placeholderSrc) && (
-            <div className="flex justify-center pt-8 max-h-28">
-              <img
-                className="max-h-[150px]"
-                src={img?.src ?? placeholderSrc}
-                alt=""
-                width={img?.width}
-                height={img?.height}
-              />
-            </div>
-          )}
+        <section className="flex flex-col items-center mt-8">
+          <img
+            className={`max-h-28 ${brandImageClassName}`}
+            src={placeholderSrc}
+            {...brandImageProps}
+          />
           <OsdsText
             color={ODS_THEME_COLOR_INTENT.primary}
             level={ODS_TEXT_LEVEL.heading}