fix(mrc): fix <OnboardingLayout />

- more info: use <OdsButton /> - update css to match design specs ref: 14934 Signed-off-by: Romain Jamet <[email protected]>
ovh · Jan 15, 2025 · ddefc12 · ddefc12
1 parent 920fb36
commit ddefc12
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 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
@@ -1,9 +1,11 @@
 import {
+  ODS_BUTTON_ICON_ALIGNMENT,
   ODS_BUTTON_SIZE,
+  ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
   ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
-import { OdsButton, OdsText, OdsLink } from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsText } from '@ovhcloud/ods-components/react';
 import React, { PropsWithChildren } from 'react';
 
 import placeholderSrc from '../../../../public/assets/placeholder.png';
@@ -12,6 +14,7 @@ type OnboardingLayoutButtonProps = {
   orderButtonLabel?: string;
   orderHref?: string;
   moreInfoHref?: string;
+  moreInfoIcon?: ODS_ICON_NAME;
   moreInfoButtonLabel?: string;
   onOrderButtonClick?: () => void;
   onmoreInfoButtonClick?: () => void;
@@ -27,10 +30,11 @@ export type OnboardingLayoutProps = OnboardingLayoutButtonProps &
   }>;
 
 const OnboardingLayoutButton: React.FC<OnboardingLayoutButtonProps> = ({
-  orderHref,
   orderButtonLabel,
+  orderHref,
   moreInfoHref,
   moreInfoButtonLabel,
+  moreInfoIcon = ODS_ICON_NAME.externalLink,
   onOrderButtonClick,
   onmoreInfoButtonClick,
   isActionDisabled,
@@ -39,21 +43,35 @@ const OnboardingLayoutButton: React.FC<OnboardingLayoutButtonProps> = ({
     return <></>;
   }
   return (
-    <div className="flex sm:pt-8 xs:pt-2.5 flex-row items-center space-x-4 justify-center">
-      {moreInfoButtonLabel && moreInfoHref && (
-        <OdsLink
-          onClick={onmoreInfoButtonClick}
-          {...(isActionDisabled && { disabled: true })}
-          href={moreInfoHref}
-          label={moreInfoButtonLabel}
-          icon={ODS_ICON_NAME.externalLink}
-        />
-      )}
+    <div className="flex flex-col gap-4 w-full sm:w-fit sm:flex-row sm:items-center sm:justify-center">
       <OdsButton
+        className="[&::part(button)]:w-full sm:w-auto"
         size={ODS_BUTTON_SIZE.md}
-        onClick={onOrderButtonClick}
+        onClick={() => {
+          onOrderButtonClick?.();
+          if (orderHref) {
+            window.open(orderHref, '_blank');
+          }
+        }}
         label={orderButtonLabel}
+        isDisabled={isActionDisabled}
       />
+      {moreInfoButtonLabel && (onmoreInfoButtonClick || moreInfoHref) && (
+        <OdsButton
+          className="[&::part(button)]:w-full sm:w-auto"
+          size={ODS_BUTTON_SIZE.md}
+          variant={ODS_BUTTON_VARIANT.outline}
+          onClick={() => {
+            onmoreInfoButtonClick?.();
+            if (moreInfoHref) {
+              window.open(moreInfoHref, '_blank');
+            }
+          }}
+          label={moreInfoButtonLabel}
+          icon={moreInfoIcon}
+          iconAlignment={ODS_BUTTON_ICON_ALIGNMENT.right}
+        />
+      )}
     </div>
   );
 };
@@ -62,8 +80,8 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
   hideHeadingSection,
   title,
   description,
-  orderHref,
   orderButtonLabel,
+  orderHref,
   moreInfoHref,
   moreInfoButtonLabel,
   children,
@@ -76,9 +94,9 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
   return (
     <div className="flex flex-col mx-auto sm:px-10">
       {!hideHeadingSection && (
-        <section className="flex flex-col items-center">
+        <section className="flex flex-col items-center gap-6 pt-6">
           {(img?.src || placeholderSrc) && (
-            <div className="flex justify-center pt-8 max-h-28 w-full">
+            <div className="flex justify-center  max-h-28 w-full">
               <img
                 {...imgProps}
                 className="max-h-[150px]"
@@ -91,12 +109,12 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
           )}
           <OdsText
             preset={ODS_TEXT_PRESET.heading1}
-            className="block text-center sm:pt-8 xs:pt-2.5"
+            className="block text-center "
           >
             {title}
           </OdsText>
           {description && (
-            <OdsText preset="span" className="onboarding-description">
+            <OdsText preset="paragraph" className="block text-center ">
               {description}
             </OdsText>
           )}

diff --git a/packages/manager-react-components/src/components/templates/onboarding/onboarding.scss b/packages/manager-react-components/src/components/templates/onboarding/onboarding.scss