diff --git a/packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.stories.tsx b/packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.stories.tsx
index 5c363435ef72..376be18cfac7 100644
--- a/packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.stories.tsx
+++ b/packages/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,7 +25,19 @@ const items: DashboardTileBlockItem[] = [
{
id: 'component-example',
label: 'Component Example',
- value: Test,
+ value: Test Value,
+ },
+ {
+ id: 'long-text',
+ label: 'Long Text',
+ value: (
+
+ 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.
+
+ ),
},
{
id: 'loading-component-example',
@@ -32,17 +45,17 @@ const items: DashboardTileBlockItem[] = [
value: ,
},
{
- id: 'text-directly',
- label: 'Text Directly',
- value: 'Text example',
+ id: 'clipboard',
+ label: 'Clipboard',
+ value: ,
},
{
id: 'menu-example',
label: 'Menu Example',
value: (
-
-
Test value
-
+
+ Test Value
+
),
},
diff --git a/packages/manager-react-components/src/components/content/dashboard-tile/tile-block.component.tsx b/packages/manager-react-components/src/components/content/dashboard-tile/tile-block.component.tsx
index a6dfd15cd6c2..59b3dfad77d5 100644
--- a/packages/manager-react-components/src/components/content/dashboard-tile/tile-block.component.tsx
+++ b/packages/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
> = ({
label,
children,
}) => (
-
- -
- {label}
+
+ -
+ {label}
- -
- {children}
-
+ - {children}
);