feat: Update component to ods 18

Signed-off-by: Lionel Bueno <[email protected]>
ovh · Dec 18, 2024 · 9704c70 · 9704c70
1 parent 83eff7f
commit 9704c70
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 107 deletions.
diff --git a/packages/manager/apps/pci-savings-plan/src/components/Breadcrumb/Breadcrumb.tsx b/packages/manager/apps/pci-savings-plan/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
 import { Params, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react';
+import {
+  OdsBreadcrumb,
+  OdsBreadcrumbItem,
+} from '@ovhcloud/ods-components/react';
 import { useNavigation } from '@ovh-ux/manager-react-shell-client';
 
 import { useProject } from '@ovh-ux/manager-pci-common';
@@ -16,6 +19,7 @@ const getPageName = (location: string, t: (key: string) => string) => {
     return [
       {
         label: t('createSavingsPlan'),
+        href: location,
       },
     ];
   }
@@ -45,20 +49,23 @@ const Breadcrumb: React.FC = () => {
     updateNav();
   }, [navigation, projectId]);
 
+  const breadcrumbItems = [
+    {
+      href: urlProject,
+      label: project?.description,
+    },
+    {
+      href: `${urlProject}/savings-plan`,
+      label: t('title'),
+    },
+    ...items,
+  ];
   return (
-    <OsdsBreadcrumb
-      items={[
-        {
-          href: urlProject,
-          label: project?.description,
-        },
-        {
-          href: `${urlProject}/savings-plan`,
-          label: t('title'),
-        },
-        ...items,
-      ]}
-    ></OsdsBreadcrumb>
+    <OdsBreadcrumb>
+      {breadcrumbItems.map((item) => (
+        <OdsBreadcrumbItem href={item.href}>{item.label}</OdsBreadcrumbItem>
+      ))}
+    </OdsBreadcrumb>
   );
 };
 

diff --git a/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx b/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx
@@ -1,9 +1,4 @@
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import { ODS_TILE_SIZE, ODS_TILE_VARIANT } from '@ovhcloud/ods-components';
-import { OsdsText, OsdsTile } from '@ovhcloud/ods-components/react';
+import { OdsText, OdsCard } from '@ovhcloud/ods-components/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCatalogPrice } from '@ovh-ux/manager-react-components';
@@ -42,54 +37,34 @@ const Commitment = ({
   );
 
   return (
-    <OsdsTile
-      size={ODS_TILE_SIZE.sm}
-      rounded
-      inline
-      variant={ODS_TILE_VARIANT.stroked}
+    <OdsCard
       className={`flex flex-row items-center mr-5 my-4 justify-between w-full cursor-pointer ${
         isActive
           ? 'bg-[--ods-color-blue-100] border-[--ods-color-blue-600]'
           : ''
       }`}
-      color={
-        isActive
-          ? ODS_THEME_COLOR_INTENT.primary
-          : ODS_THEME_COLOR_INTENT.default
-      }
       onClick={onClick}
     >
       <span slot="start" className="flex flex-row items-center justify-center">
-        <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
-          {t('commitment_month', { value: duration })}
-        </OsdsText>
-        <OsdsText
-          size={ODS_THEME_TYPOGRAPHY_SIZE._500}
-          className="ml-3 text-[#AC246F]"
-        >
+        <OdsText>{t('commitment_month', { value: duration })}</OdsText>
+        <OdsText className="ml-3 text-[#AC246F] text-[16px]">
           {diffInPercent ? `- ${diffInPercent} %` : ''}
-        </OsdsText>
+        </OdsText>
       </span>
       <span slot="end" className="flex flex-col items-end justify-center">
         <div className="flex flex-row items-center justify-center">
           {priceByMonthWithoutCommitment && (
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.text}
-              className="line-through"
-            >
+            <OdsText className="line-through">
               {`~ ${getTextPrice(priceByMonthWithoutCommitment * CENTS_PRICE)}`}
-            </OsdsText>
+            </OdsText>
           )}
-          <OsdsText
-            size={ODS_THEME_TYPOGRAPHY_SIZE._500}
-            className="ml-3 text-[#AC246F]"
-          >
+          <OdsText className="ml-3 text-[#AC246F] text-[16px]">
             {getTextPrice(priceNumber * CENTS_PRICE)}
-          </OsdsText>
+          </OdsText>
         </div>
-        <OsdsText>{t('commitment_price_month')}</OsdsText>
+        <OdsText>{t('commitment_price_month')}</OdsText>
       </span>
-    </OsdsTile>
+    </OdsCard>
   );
 };
 

diff --git a/packages/manager/apps/pci-savings-plan/src/components/Loading/Loading.tsx b/packages/manager/apps/pci-savings-plan/src/components/Loading/Loading.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { OsdsSpinner } from '@ovhcloud/ods-components/react';
+import { OdsSpinner } from '@ovhcloud/ods-components/react';
 
 export default function Loading() {
   return (
     <div className="flex justify-center">
-      <OsdsSpinner />
+      <OdsSpinner />
     </div>
   );
 }
diff --git a/.../apps/pci-savings-plan/src/components/PlannedChangeStatusChip/PlannedChangeStatusChip.tsx b/.../apps/pci-savings-plan/src/components/PlannedChangeStatusChip/PlannedChangeStatusChip.tsx
@@ -1,28 +1,25 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
-import { OsdsChip, OsdsSpinner } from '@ovhcloud/ods-components/react';
+import { ODS_SPINNER_SIZE, ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
+import { OdsBadge, OdsSpinner } from '@ovhcloud/ods-components/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SavingsPlanPlanedChangeStatus } from '@/types/api.type';
 
 const PlannedChangeStatusChip = ({ label }: { label: string }) => {
   const { t } = useTranslation('listing');
   const colorByProductStatus: {
-    [key in SavingsPlanPlanedChangeStatus]: ODS_THEME_COLOR_INTENT;
+    [key in SavingsPlanPlanedChangeStatus]: ODS_BADGE_COLOR;
   } = {
-    [SavingsPlanPlanedChangeStatus.REACTIVATE]: ODS_THEME_COLOR_INTENT.success,
-    [SavingsPlanPlanedChangeStatus.TERMINATE]: ODS_THEME_COLOR_INTENT.error,
+    [SavingsPlanPlanedChangeStatus.REACTIVATE]: ODS_BADGE_COLOR.success,
+    [SavingsPlanPlanedChangeStatus.TERMINATE]: ODS_BADGE_COLOR.critical,
   };
 
   return label ? (
-    <OsdsChip
-      inline
+    <OdsBadge
+      label={t(label.toLowerCase())}
       color={colorByProductStatus[label as SavingsPlanPlanedChangeStatus]}
-    >
-      {t(label.toLowerCase() as SavingsPlanPlanedChangeStatus)}
-    </OsdsChip>
+    />
   ) : (
-    <OsdsSpinner inline size={ODS_SPINNER_SIZE.sm} />
+    <OdsSpinner size={ODS_SPINNER_SIZE.sm} />
   );
 };
 

diff --git a/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx b/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx
@@ -1,19 +1,11 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_TILE_VARIANT } from '@ovhcloud/ods-components';
-import { OsdsTile } from '@ovhcloud/ods-components/react';
+import { OdsCard } from '@ovhcloud/ods-components/react';
 import React from 'react';
 
 const SimpleTile: React.FC<React.PropsWithChildren<{
   onClick?: () => void;
   isActive?: boolean;
 }>> = ({ children, onClick, isActive }) => (
-  <OsdsTile
-    rounded
-    inline
-    color={
-      isActive ? ODS_THEME_COLOR_INTENT.primary : ODS_THEME_COLOR_INTENT.default
-    }
-    variant={ODS_TILE_VARIANT.stroked}
+  <OdsCard
     className={`flex items-center justify-center w-1/2 shrink-0 md:shrink md:w-1/4  mr-5 text-center ${
       onClick ? 'cursor-pointer' : 'cursor-default'
     } ${
@@ -22,7 +14,7 @@ const SimpleTile: React.FC<React.PropsWithChildren<{
     onClick={onClick}
   >
     {children}
-  </OsdsTile>
+  </OdsCard>
 );
 
 export default SimpleTile;
diff --git a/packages/manager/apps/pci-savings-plan/src/components/StatusChip/StatusChip.tsx b/packages/manager/apps/pci-savings-plan/src/components/StatusChip/StatusChip.tsx
@@ -1,26 +1,26 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
-import { OsdsChip, OsdsSpinner } from '@ovhcloud/ods-components/react';
+import { ODS_SPINNER_SIZE, ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
+import { OdsBadge, OdsSpinner } from '@ovhcloud/ods-components/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SavingsPlanStatus } from '@/types/api.type';
 
 const StatusChip = ({ label }: { label: string }) => {
   const { t } = useTranslation('listing');
   const colorByProductStatus: {
-    [key in SavingsPlanStatus]: ODS_THEME_COLOR_INTENT;
+    [key in SavingsPlanStatus]: ODS_BADGE_COLOR;
   } = {
-    [SavingsPlanStatus.ACTIVE]: ODS_THEME_COLOR_INTENT.success,
-    [SavingsPlanStatus.PENDING]: ODS_THEME_COLOR_INTENT.warning,
-    [SavingsPlanStatus.TERMINATED]: ODS_THEME_COLOR_INTENT.error,
+    [SavingsPlanStatus.ACTIVE]: ODS_BADGE_COLOR.success,
+    [SavingsPlanStatus.PENDING]: ODS_BADGE_COLOR.warning,
+    [SavingsPlanStatus.TERMINATED]: ODS_BADGE_COLOR.critical,
   };
 
   return label ? (
-    <OsdsChip inline color={colorByProductStatus[label as SavingsPlanStatus]}>
-      {t(label.toLowerCase() as SavingsPlanStatus)}
-    </OsdsChip>
+    <OdsBadge
+      color={colorByProductStatus[label as SavingsPlanStatus]}
+      label={t(label.toLowerCase() as SavingsPlanStatus)}
+    />
   ) : (
-    <OsdsSpinner inline size={ODS_SPINNER_SIZE.sm} />
+    <OdsSpinner size={ODS_SPINNER_SIZE.sm} />
   );
 };
 

diff --git a/packages/manager/apps/pci-savings-plan/src/components/Table/TableContainer.tsx b/packages/manager/apps/pci-savings-plan/src/components/Table/TableContainer.tsx
@@ -1,11 +1,6 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useLocation,
-  useNavigate,
-  useParams,
-  useSearchParams,
-} from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 
 import {

diff --git a/...ages/manager/apps/pci-savings-plan/src/components/TileTechnicalInfo/TileTechnicalInfo.tsx b/...ages/manager/apps/pci-savings-plan/src/components/TileTechnicalInfo/TileTechnicalInfo.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import {
   ODS_THEME_COLOR_HUE,
-  ODS_THEME_COLOR_INTENT,
   ODS_THEME_TYPOGRAPHY_SIZE,
 } from '@ovhcloud/ods-common-theming';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import SimpleTile from '../SimpleTile/SimpleTile';
 import { formatTechnicalInfo } from '@/utils/formatter/formatter';
@@ -18,30 +17,27 @@ const DisplayTechnicalInfo = ({
   const { memory, cpu, storage, bandwidth } = technical;
   return (
     <>
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-      >
+      <OdsText className="text-[]">
         {t('resource_model_characteristics_gb', {
           value: memory.size,
         })}
-      </OsdsText>
-      <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
+      </OdsText>
+      <OdsText>
         {t('resource_model_characteristics_cpu', {
           cores: cpu.cores,
           ghz: cpu.frequency,
         })}
-      </OsdsText>
-      <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
+      </OdsText>
+      <OdsText>
         {t('resource_model_characteristics_disk', {
           value: storage.disks[0].capacity,
         })}
-      </OsdsText>
-      <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
+      </OdsText>
+      <OdsText>
         {t('resource_model_characteristics_mbits', {
           value: bandwidth.level,
         })}
-      </OsdsText>
+      </OdsText>
     </>
   );
 };
@@ -61,14 +57,14 @@ export const TileTechnicalInfo: React.FC<TileTechnicalInfoProps> = ({
 }) => (
   <SimpleTile onClick={onClick} isActive={isActive}>
     <div className="flex flex-col items-center justify-center">
-      <OsdsText
+      <OdsText
         size={ODS_THEME_TYPOGRAPHY_SIZE._500}
         color={ODS_THEME_COLOR_INTENT.text}
         hue={ODS_THEME_COLOR_HUE._700}
         className="mb-5"
       >
         {name}
-      </OsdsText>
+      </OdsText>
       {technical && technical.bandwidth && (
         <DisplayTechnicalInfo technical={technical} />
       )}