fix(mrc): fix <TileBlock />

- fix layout - use <OdsText /> for label ref: 14917 Signed-off-by: Romain Jamet <[email protected]>
ovh · Jan 17, 2025 · 7a6ed57 · 7a6ed57
1 parent 078784d
commit 7a6ed57
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/...manager-react-components/src/components/content/dashboard-tile/dashboard-tile.stories.tsx b/...manager-react-components/src/components/content/dashboard-tile/dashboard-tile.stories.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
-import { OdsSkeleton } from '@ovhcloud/ods-components/react';
+import { OdsSkeleton, OdsText } from '@ovhcloud/ods-components/react';
 import {
   DashboardTile,
   DashboardTileBlockItem,
 } from './dashboard-tile.component';
 import ActionMenu from '../../navigation/menus/action/action.component';
+import { Clipboard } from '../../clipboard/clipboard.component';
 
 const actionItems = [
   {
@@ -24,25 +25,37 @@ const items: DashboardTileBlockItem[] = [
   {
     id: 'component-example',
     label: 'Component Example',
-    value: <span>Test</span>,
+    value: <OdsText preset="span">Test Value</OdsText>,
+  },
+  {
+    id: 'long-text',
+    label: 'Long Text',
+    value: (
+      <OdsText preset="paragraph">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </OdsText>
+    ),
   },
   {
     id: 'loading-component-example',
     label: 'Loading',
     value: <OdsSkeleton />,
   },
   {
-    id: 'text-directly',
-    label: 'Text Directly',
-    value: 'Text example',
+    id: 'clipboard',
+    label: 'Clipboard',
+    value: <Clipboard className="w-full" value="example value" />,
   },
   {
     id: 'menu-example',
     label: 'Menu Example',
     value: (
-      <div className="flex">
-        <div className="mr-auto">Test value</div>
-        <ActionMenu isCompact items={actionItems} />
+      <div className="flex items-center justify-between">
+        <OdsText preset="span">Test Value</OdsText>
+        <ActionMenu isCompact items={actionItems} id={'action-menu-story'} />
       </div>
     ),
   },

diff --git a/...s/manager-react-components/src/components/content/dashboard-tile/tile-block.component.tsx b/...s/manager-react-components/src/components/content/dashboard-tile/tile-block.component.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { OdsText } from '@ovhcloud/ods-components/react';
 
 export type TileBlockProps = React.PropsWithChildren<{
   label?: string;
@@ -8,12 +10,10 @@ export const TileBlock: React.FC<React.PropsWithChildren<TileBlockProps>> = ({
   label,
   children,
 }) => (
-  <dl className="flex flex-col gap-y-[8px] my-0">
-    <dt className="tile-block-title m-0 text-[--ods-color-heading] text-[16px] leading-[16px] font-semibold">
-      {label}
+  <dl className="flex flex-col gap-1 m-0">
+    <dt>
+      <OdsText preset={ODS_TEXT_PRESET.heading6}>{label}</OdsText>
     </dt>
-    <dd className="tile-block-description m-0 text-[--ods-color-text] text-[16px] leading-[16px] min-h-[16px]">
-      {children}
-    </dd>
+    <dd className="m-0">{children}</dd>
   </dl>
 );