feat(pci-common): update region-selector components

ref: TAPC-2378 Signed-off-by: Frédéric Vilcot <[email protected]>
ovh · Dec 13, 2024 · a1c5b56 · a1c5b56
1 parent 5f9275d
commit a1c5b56
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 163 deletions.
diff --git a/...ules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.tsx b/...ules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.tsx
@@ -1,23 +1,13 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { Links, LinkType } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { useTranslation } from 'react-i18next';
+import { OdsPopover, OdsTag, OdsText } from '@ovhcloud/ods-components/react';
 import {
-  ODS_CHIP_SIZE,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
+  ODS_TAG_COLOR,
+  ODS_TAG_SIZE,
 } from '@ovhcloud/ods-components';
-import {
-  OsdsChip,
-  OsdsIcon,
-  OsdsPopover,
-  OsdsPopoverContent,
-  OsdsText,
-} from '@ovhcloud/ods-components/react';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
-import { useTranslation } from 'react-i18next';
 import { URL_INFO } from './constants';
 
 export function RegionGlobalzoneChip() {
@@ -29,44 +19,29 @@ export function RegionGlobalzoneChip() {
     URL_INFO[linkType as keyof typeof URL_INFO].DEFAULT;
 
   return (
-    <OsdsPopover>
-      <span slot="popover-trigger">
-        <OsdsChip
-          color={ODS_THEME_COLOR_INTENT.primary}
-          size={ODS_CHIP_SIZE.sm}
+    <>
+      <div id="popover-trigger">
+        <OdsTag
+          label={t('pci_project_flavors_zone_global_region')}
+          icon={ODS_ICON_NAME.question}
+          color={ODS_TAG_COLOR.information}
+          size={ODS_TAG_SIZE.md}
           onClick={(event) => event.stopPropagation()}
-        >
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.primary}
-            level={ODS_TEXT_LEVEL.body}
-            size={ODS_TEXT_SIZE._500}
-          >
-            {t('pci_project_flavors_zone_global_region')}
-          </OsdsText>
-          <OsdsIcon
-            name={ODS_ICON_NAME.HELP}
-            size={ODS_ICON_SIZE.xs}
-            className="ml-2"
-            color={ODS_THEME_COLOR_INTENT.primary}
-          />
-        </OsdsChip>
-      </span>
-      <OsdsPopoverContent>
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          level={ODS_TEXT_LEVEL.body}
-        >
+        />
+      </div>
+      <OdsPopover triggerId="popover-trigger">
+        <OdsText preset="span">
           {t('pci_project_flavors_zone_globalregions_tooltip')}
-        </OsdsText>
+        </OdsText>
         &nbsp;
         <Links
           tab-index="-1"
           label={t('pci_project_flavors_zone_tooltip_link')}
           type={LinkType.external}
-          target={OdsHTMLAnchorElementTarget._blank}
+          target="_blank"
           href={getDocumentUrl('GLOBAL_REGIONS')}
         />
-      </OsdsPopoverContent>
-    </OsdsPopover>
+      </OdsPopover>
+    </>
   );
 }
diff --git a/...anager/modules/manager-pci-common/src/components/region-selector/RegionList.component.tsx b/...anager/modules/manager-pci-common/src/components/region-selector/RegionList.component.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { OsdsTile } from '@ovhcloud/ods-components/react';
 import clsx from 'clsx';
+import { OdsCard } from '@ovhcloud/ods-components/react';
 import { TLocalisation } from './useRegions';
 import {
   regionContainer,
@@ -25,17 +24,16 @@ export function RegionList({
     <ul className={regionContainer}>
       {regions.map((region) => (
         <li className="w-full px-1" key={region.name}>
-          <OsdsTile
+          <OdsCard
             className={clsx(
               regionTile,
               region === selectedRegion && regionTileSelected,
             )}
-            checked={selectedRegion === region}
             onClick={() => onClick(region)}
             data-testid={`region-${region.name}`}
           >
             {render(region, selectedRegion === region)}
-          </OsdsTile>
+          </OdsCard>
         </li>
       ))}
     </ul>

diff --git a/...dules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.tsx b/...dules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.tsx
@@ -1,23 +1,13 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { Links, LinkType } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { useTranslation } from 'react-i18next';
+import { OdsPopover, OdsTag, OdsText } from '@ovhcloud/ods-components/react';
 import {
-  ODS_CHIP_SIZE,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
+  ODS_TAG_COLOR,
+  ODS_TAG_SIZE,
 } from '@ovhcloud/ods-components';
-import {
-  OsdsChip,
-  OsdsIcon,
-  OsdsPopover,
-  OsdsPopoverContent,
-  OsdsText,
-} from '@ovhcloud/ods-components/react';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
-import { useTranslation } from 'react-i18next';
 import { URL_INFO } from './constants';
 
 export function RegionLocalzoneChip() {
@@ -29,44 +19,29 @@ export function RegionLocalzoneChip() {
     URL_INFO[linkType as keyof typeof URL_INFO].DEFAULT;
 
   return (
-    <OsdsPopover>
-      <span slot="popover-trigger">
-        <OsdsChip
-          color={ODS_THEME_COLOR_INTENT.error}
-          size={ODS_CHIP_SIZE.sm}
+    <>
+      <div id="popover-trigger">
+        <OdsTag
+          label={t('pci_project_flavors_zone_localzone')}
+          icon={ODS_ICON_NAME.question}
+          color={ODS_TAG_COLOR.critical}
+          size={ODS_TAG_SIZE.md}
           onClick={(event) => event.stopPropagation()}
-        >
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.primary}
-            level={ODS_TEXT_LEVEL.body}
-            size={ODS_TEXT_SIZE._500}
-          >
-            {t('pci_project_flavors_zone_localzone')}
-          </OsdsText>
-          <OsdsIcon
-            name={ODS_ICON_NAME.HELP}
-            size={ODS_ICON_SIZE.xs}
-            className="ml-2"
-            color={ODS_THEME_COLOR_INTENT.primary}
-          />
-        </OsdsChip>
-      </span>
-      <OsdsPopoverContent>
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          level={ODS_TEXT_LEVEL.body}
-        >
+        />
+      </div>
+      <OdsPopover triggerId="popover-trigger">
+        <OdsText preset="span">
           {t('pci_project_flavors_zone_localzone_tooltip')}
-        </OsdsText>
+        </OdsText>
         &nbsp;
         <Links
           tab-index="-1"
           label={t('pci_project_flavors_zone_tooltip_link')}
           type={LinkType.external}
-          target={OdsHTMLAnchorElementTarget._blank}
+          target="_blank"
           href={getDocumentUrl('LOCAL_ZONE')}
         />
-      </OsdsPopoverContent>
-    </OsdsPopover>
+      </OdsPopover>
+    </>
   );
 }
diff --git a/...er/modules/manager-pci-common/src/components/region-selector/RegionSelector.component.tsx b/...er/modules/manager-pci-common/src/components/region-selector/RegionSelector.component.tsx
@@ -1,17 +1,8 @@
-import React from 'react';
-import { OsdsSpinner, OsdsText } from '@ovhcloud/ods-components/react';
-import {
-  ODS_SPINNER_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
-} from '@ovhcloud/ods-components';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
 import { TabsComponent } from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
+import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
+import { OdsSpinner, OdsText } from '@ovhcloud/ods-components/react';
 import { TLocalisation } from './useRegions';
 import { useRegionSelector } from './useRegionSelector';
 import { RegionTile } from './RegionTile';
@@ -48,7 +39,7 @@ export function RegionSelector({
   } = useRegionSelector({ projectId, onSelectRegion, regionFilter });
 
   if (isPending) {
-    return <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />;
+    return <OdsSpinner size={ODS_SPINNER_SIZE.md} />;
   }
 
   return (
@@ -73,14 +64,9 @@ export function RegionSelector({
           {microRegions?.length > 0 && (
             <>
               <div className="ml-8">
-                <OsdsText
-                  className="font-bold"
-                  color={ODS_THEME_COLOR_INTENT.text}
-                  level={ODS_TEXT_LEVEL.body}
-                  size={ODS_TEXT_SIZE._400}
-                >
+                <OdsText preset="span" className="font-bold">
                   {t('pci_project_regions_list_region')}
-                </OsdsText>
+                </OdsText>
               </div>
               <RegionList
                 regions={microRegions}
@@ -93,24 +79,14 @@ export function RegionSelector({
         </>
       )}
       titleElement={(continent, isSelected) => (
-        <OsdsText
-          breakSpaces={false}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._600}
-          color={
-            isSelected
-              ? ODS_THEME_COLOR_INTENT.text
-              : ODS_THEME_COLOR_INTENT.primary
-          }
+        <div
+          className={clsx(
+            isSelected && 'font-bold',
+            'whitespace-nowrap px-2 text-lg',
+          )}
         >
-          <div
-            className={clsx(
-              isSelected && 'font-bold',
-              'whitespace-nowrap px-2 text-lg',
-            )}
-          >
-            {continent.name}
-          </div>
-        </OsdsText>
+          <OdsText>{continent.name}</OdsText>
+        </div>
       )}
       onChange={setSelectedContinent}
     />

diff --git a/...ger/modules/manager-pci-common/src/components/region-selector/RegionSummary.component.tsx b/...ger/modules/manager-pci-common/src/components/region-selector/RegionSummary.component.tsx
@@ -1,10 +1,4 @@
-import React from 'react';
-import { OsdsText, OsdsTile } from '@ovhcloud/ods-components/react';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
+import { OdsCard, OdsText } from '@ovhcloud/ods-components/react';
 import { TLocalisation } from './useRegions';
 import {
   regionContainer,
@@ -20,29 +14,20 @@ export interface RegionSummaryProps {
 export function RegionSummary({ region }: Readonly<RegionSummaryProps>) {
   return (
     <div className={regionContainer}>
-      <OsdsTile className={`${regionTile} ${regionTileSelected}`} checked>
+      <OdsCard className={`${regionTile} ${regionTileSelected}`}>
         <div className="w-full">
           <div className="border-solid border-0 border-b border-ods-primary-200 py-3">
-            <OsdsText
-              className="font-bold"
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-              color={ODS_THEME_COLOR_INTENT.text}
-            >
+            <OdsText preset="span" className="font-bold">
               {region.macroLabel}
-            </OsdsText>
+            </OdsText>
           </div>
           <div className="mt-6">
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._200}
-              color={ODS_THEME_COLOR_INTENT.text}
-            >
+            <OdsText preset="span" className="text-[14px]">
               {region.microLabel}
-            </OsdsText>
+            </OdsText>
           </div>
         </div>
-      </OsdsTile>
+      </OdsCard>
     </div>
   );
 }
diff --git a/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionTile.tsx b/packages/manager/modules/manager-pci-common/src/components/region-selector/RegionTile.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
+import clsx from 'clsx';
 import { TLocalisation } from './useRegions';
 import { RegionLocalzoneChip } from './RegionLocalzoneChip.component';
 import { RegionGlobalzoneChip } from './RegionGlobalzoneChip.component';
@@ -19,13 +17,9 @@ export const RegionTile = ({
 }: Readonly<RegionTileProps>) => (
   <div className="flex flex-col w-full items-center">
     <div className={isCompact ? 'my-4' : ''}>
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        level={ODS_TEXT_LEVEL.body}
-        size={isSelected ? ODS_TEXT_SIZE._500 : ODS_TEXT_SIZE._400}
-      >
+      <OdsText preset="span" className={clsx(isSelected && 'font-bold')}>
         {region.isMacro ? region.macroLabel : region.microLabel}
-      </OsdsText>
+      </OdsText>
     </div>
     {!isCompact && (
       <>