feat(manager-react-component): add manager tile component

It's a duplicated of dashboard tile but with a Compound components pattern Signed-off-by: Thibault Barske <[email protected]>
ovh · Jan 23, 2025 · fe1942b · fe1942b
1 parent c8ff2f5
commit fe1942b
Show file tree

Hide file tree

Showing 4 changed files with 241 additions and 0 deletions.
diff --git a/...nager-react-components/src/components/content/ManagerTile/manager-tile-item.component.tsx b/...nager-react-components/src/components/content/ManagerTile/manager-tile-item.component.tsx
@@ -0,0 +1,26 @@
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { OdsText } from '@ovhcloud/ods-components/react';
+import React from 'react';
+
+export type TileBlockProps = React.PropsWithChildren<{
+  label?: string;
+}>;
+
+export const ManagerTileItem = ({ children }: React.PropsWithChildren) => {
+  return <dl className="flex flex-col gap-1 m-0">{children}</dl>;
+};
+
+const ManagerTileItemLabel = ({ children }: React.PropsWithChildren) => {
+  return (
+    <dt>
+      <OdsText preset={ODS_TEXT_PRESET.heading6}>{children}</OdsText>
+    </dt>
+  );
+};
+
+const ManagerTileItemDescription = ({ children }: React.PropsWithChildren) => {
+  return <dd className="m-0">{children}</dd>;
+};
+
+ManagerTileItem.Label = ManagerTileItemLabel;
+ManagerTileItem.Description = ManagerTileItemDescription;
diff --git a/...es/manager-react-components/src/components/content/ManagerTile/manager-tile.component.tsx b/...es/manager-react-components/src/components/content/ManagerTile/manager-tile.component.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { OdsDivider, OdsCard, OdsText } from '@ovhcloud/ods-components/react';
+import { ODS_CARD_COLOR, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { ManagerTileItem } from './manager-tile-item.component';
+
+export type ManagerTileProps = React.ComponentProps<typeof OdsCard>;
+
+export const ManagerTile = ({
+  className,
+  children,
+  ...props
+}: ManagerTileProps) => {
+  return (
+    <OdsCard
+      className={`w-full flex-col p-[1rem] ${className}`}
+      color={ODS_CARD_COLOR.neutral}
+      {...props}
+    >
+      <div className="flex flex-col w-full">{children}</div>
+    </OdsCard>
+  );
+};
+
+type ManagerTileTitleProps = React.PropsWithChildren;
+const ManagerTileTitle = ({ children }: ManagerTileTitleProps) => {
+  return <OdsText preset={ODS_TEXT_PRESET.heading4}>{children}</OdsText>;
+};
+
+const ManagerTileDivider = () => <OdsDivider spacing="24" />;
+
+ManagerTile.Title = ManagerTileTitle;
+ManagerTile.Item = ManagerTileItem;
+ManagerTile.Divider = ManagerTileDivider;
diff --git a/...ages/manager-react-components/src/components/content/ManagerTile/manager-tile.stories.tsx b/...ages/manager-react-components/src/components/content/ManagerTile/manager-tile.stories.tsx
@@ -0,0 +1,118 @@
+import React, { useId } from 'react';
+import { Meta } from '@storybook/react';
+import { OdsSkeleton, OdsText } from '@ovhcloud/ods-components/react';
+import { ManagerTile } from './manager-tile.component';
+import ActionMenu from '../../navigation/menus/action/action.component';
+import { Clipboard } from '../../clipboard/clipboard.component';
+
+const actionItems = [
+  {
+    id: 1,
+    href: 'https://ovhcloud.com',
+    label: 'Action 1',
+  },
+  {
+    id: 2,
+    onClick: () => window.open('https://ovhcloud.com', '_blank', 'noopener'),
+    label: 'Action 2',
+  },
+];
+
+export const CompleteExample = () => {
+  const id = useId();
+  return (
+    <ManagerTile>
+      <ManagerTile.Title>Complete example</ManagerTile.Title>
+      <ManagerTile.Divider />
+      <ManagerTile.Item>
+        <ManagerTile.Item.Label>Component Example</ManagerTile.Item.Label>
+        <ManagerTile.Item.Description>
+          <OdsText preset="span">Test Value</OdsText>
+        </ManagerTile.Item.Description>
+      </ManagerTile.Item>
+      <ManagerTile.Divider />
+      <ManagerTile.Item>
+        <ManagerTile.Item.Label>Long Text</ManagerTile.Item.Label>
+        <ManagerTile.Item.Description>
+          <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>
+        </ManagerTile.Item.Description>
+      </ManagerTile.Item>
+      <ManagerTile.Divider />
+      <ManagerTile.Item>
+        <ManagerTile.Item.Label>Loading</ManagerTile.Item.Label>
+        <ManagerTile.Item.Description>
+          <OdsSkeleton />
+        </ManagerTile.Item.Description>
+      </ManagerTile.Item>
+      <ManagerTile.Divider />
+      <ManagerTile.Item>
+        <ManagerTile.Item.Label>Clipboard</ManagerTile.Item.Label>
+        <ManagerTile.Item.Description>
+          <Clipboard className="w-full" value="example value" />
+        </ManagerTile.Item.Description>
+      </ManagerTile.Item>
+      <ManagerTile.Divider />
+      <ManagerTile.Item>
+        <ManagerTile.Item.Label>Menu Example</ManagerTile.Item.Label>
+        <ManagerTile.Item.Description>
+          <div className="flex items-center justify-between">
+            <OdsText preset="span">Test Value</OdsText>
+            <ActionMenu
+              isCompact
+              items={actionItems}
+              id={'action-menu-story'}
+            />
+          </div>
+        </ManagerTile.Item.Description>
+      </ManagerTile.Item>
+    </ManagerTile>
+  );
+};
+
+export const SimpleExampleWithTitle = () => (
+  <ManagerTile>
+    <ManagerTile.Title>Sample example with title</ManagerTile.Title>
+    <ManagerTile.Divider />
+    <ManagerTile.Item>
+      <ManagerTile.Item.Label>Component Example</ManagerTile.Item.Label>
+      <ManagerTile.Item.Description>Test</ManagerTile.Item.Description>
+    </ManagerTile.Item>
+    <ManagerTile.Divider />
+    <ManagerTile.Item>
+      <ManagerTile.Item.Label>Loading</ManagerTile.Item.Label>
+      <ManagerTile.Item.Description>
+        <OdsSkeleton />
+      </ManagerTile.Item.Description>
+    </ManagerTile.Item>
+  </ManagerTile>
+);
+
+export const NoTitle = () => (
+  <ManagerTile>
+    <ManagerTile.Item>
+      <ManagerTile.Item.Label>Component Example</ManagerTile.Item.Label>
+      <ManagerTile.Item.Description>Test</ManagerTile.Item.Description>
+    </ManagerTile.Item>
+    <ManagerTile.Divider />
+    <ManagerTile.Item>
+      <ManagerTile.Item.Label>Loading</ManagerTile.Item.Label>
+      <ManagerTile.Item.Description>
+        <OdsSkeleton />
+      </ManagerTile.Item.Description>
+    </ManagerTile.Item>
+  </ManagerTile>
+);
+
+const meta: Meta = {
+  title: 'Content/Manager Tile',
+  component: ManagerTile,
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
diff --git a/packages/manager-react-components/src/components/content/ManagerTile/tile.spec.tsx b/packages/manager-react-components/src/components/content/ManagerTile/tile.spec.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { waitFor, screen } from '@testing-library/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
+import { render } from '../../../utils/test.provider';
+import { ManagerTile } from './manager-tile.component';
+
+const testItem = (
+  <ManagerTile.Item>
+    <ManagerTile.Item.Label>label</ManagerTile.Item.Label>
+    <ManagerTile.Item.Description>
+      <OdsText>value</OdsText>
+    </ManagerTile.Item.Description>
+  </ManagerTile.Item>
+);
+
+describe('Manager Tile component', () => {
+  it('renders correctly', async () => {
+    render(
+      <ManagerTile>
+        <ManagerTile.Title>Title</ManagerTile.Title>
+        <ManagerTile.Divider />
+        {testItem}
+      </ManagerTile>,
+    );
+    await waitFor(() => {
+      expect(screen.getByText('Title')).toBeInTheDocument();
+      expect(screen.getByText('value')).toBeInTheDocument();
+      expect(screen.getByText('label')).toBeInTheDocument();
+    });
+  });
+
+  it('renders correctly without items', async () => {
+    render(
+      <ManagerTile>
+        <ManagerTile.Title>Title 2</ManagerTile.Title>
+      </ManagerTile>,
+    );
+    await waitFor(() => {
+      expect(screen.getByText('Title 2')).toBeInTheDocument();
+    });
+  });
+
+  it('renders correctly without title', async () => {
+    render(<ManagerTile>{testItem}</ManagerTile>);
+    await waitFor(() => {
+      expect(screen.getByText('value')).toBeInTheDocument();
+      expect(screen.getByText('label')).toBeInTheDocument();
+    });
+  });
+
+  it('renders correctly without label', async () => {
+    render(
+      <ManagerTile>
+        <ManagerTile.Item>
+          <ManagerTile.Item.Description>value</ManagerTile.Item.Description>
+        </ManagerTile.Item>
+      </ManagerTile>,
+    );
+    await waitFor(() => {
+      expect(screen.getByText('value')).toBeInTheDocument();
+      expect(screen.queryByText('label')).not.toBeInTheDocument();
+    });
+  });
+});