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}
);