ovh · fredericvilcot · Dec 16, 2024 · Dec 5, 2024 · Dec 13, 2024 · Dec 13, 2024
diff --git a/...manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.spec.tsx b/...manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.spec.tsx
@@ -1,12 +1,18 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { RegionGlobalzoneChip } from './RegionGlobalzoneChip.component';
 import { wrapper } from '@/wrapperRenders';
 
 describe('RegionGlobalzoneChip', () => {
-  it('renders chip with correct text', () => {
-    render(<RegionGlobalzoneChip />, { wrapper });
-    expect(
-      screen.getByText('pci_project_flavors_zone_global_region'),
-    ).toBeInTheDocument();
+  it('renders tag with correct text', () => {
+    const { container } = render(<RegionGlobalzoneChip id="fake-id" />, {
+      wrapper,
+    });
+    const tagElt = container.querySelector('#fake-id').firstChild;
+
+    expect(tagElt).toBeInTheDocument();
+    expect(tagElt).toHaveAttribute(
+      'label',
+      'pci_project_flavors_zone_global_region',
+    );
   });
 });
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,26 +1,20 @@
-import React, { useContext } from 'react';
+import { FC, 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() {
+export type TRegionGlobalzoneChipProps = Readonly<{ id: string }>;
+
+export const RegionGlobalzoneChip: FC<TRegionGlobalzoneChipProps> = ({
+  id,
+}) => {
   const { t } = useTranslation('pci-region-selector');
   const context = useContext(ShellContext);
   const { ovhSubsidiary } = context.environment.getUser();
@@ -29,44 +23,30 @@ 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={id}>
+        <OdsTag
+          className="font-bold"
+          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={id}>
+        <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/.../manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.spec.tsx b/.../manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.spec.tsx
@@ -4,10 +4,16 @@ import { RegionLocalzoneChip } from './RegionLocalzoneChip.component';
 import { wrapper } from '@/wrapperRenders';
 
 describe('RegionLocalzoneChip', () => {
-  it('renders chip with correct text', () => {
-    render(<RegionLocalzoneChip />, { wrapper });
-    expect(
-      screen.getByText('pci_project_flavors_zone_localzone'),
-    ).toBeInTheDocument();
+  it('renders tag with correct text', () => {
+    const { container } = render(<RegionLocalzoneChip id="fake-id" />, {
+      wrapper,
+    });
+    const tagElt = container.querySelector('#fake-id').firstChild;
+
+    expect(tagElt).toBeInTheDocument();
+    expect(tagElt).toHaveAttribute(
+      'label',
+      'pci_project_flavors_zone_localzone',
+    );
   });
 });
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,26 +1,18 @@
-import React, { useContext } from 'react';
+import { FC, 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() {
+export type TRegionLocalzoneChipProps = Readonly<{ id: string }>;
+
+export const RegionLocalzoneChip: FC<TRegionLocalzoneChipProps> = ({ id }) => {
   const { t } = useTranslation('pci-region-selector');
   const context = useContext(ShellContext);
   const { ovhSubsidiary } = context.environment.getUser();
@@ -29,44 +21,30 @@ 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={id}>
+        <OdsTag
+          className="font-bold"
+          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={id}>
+        <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] font-bold">
               {region.microLabel}
-            </OsdsText>
+            </OdsText>
           </div>
         </div>
-      </OsdsTile>
+      </OdsCard>
     </div>
   );
 }