Migrate to twenty-ui - display (#8004)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-6871](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-6871).

 --- 

### Description

Migrate:

- Info display component
- Status display component
- SeparatorLineText display component

### Demo

###### SeparatorLineText In Storybook


![](https://assets-service.gitstart.com/4814/c0a2cd49-e545-469a-b3d3-c02eb462b60d.png)

Info Component on Storybook


![](https://assets-service.gitstart.com/4814/6f3019c5-99e0-4365-a81e-241294887f9e.png)

Status Component on Storybook


![](https://assets-service.gitstart.com/4814/29b5142a-468f-4d7e-88ff-4f3bfdd5abda.png)

###### Fixes twentyhq/private-issues#95

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/display/status/components/Status.tsx

@@ -0,0 +1,73 @@
+import styled from '@emotion/styled';
+import { ThemeColor } from '@ui/theme';
+import { themeColorSchema } from '@ui/theme/utils/themeColorSchema';
+
+import { Loader } from '@ui/feedback/loader/components/Loader';
+
+const StyledStatus = styled.h3<{
+  color: ThemeColor;
+  weight: 'regular' | 'medium';
+  isLoaderVisible: boolean;
+}>`
+  align-items: center;
+  background: ${({ color, theme }) => theme.tag.background[color]};
+  border-radius: ${({ theme }) => theme.border.radius.pill};
+  color: ${({ color, theme }) => theme.tag.text[color]};
+  display: inline-flex;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-style: normal;
+  font-weight: ${({ theme, weight }) => theme.font.weight[weight]};
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ theme }) => theme.spacing(5)};
+  margin: 0;
+  overflow: hidden;
+  padding: 0
+    ${({ theme, isLoaderVisible }) =>
+      isLoaderVisible ? theme.spacing(1) : theme.spacing(2)}
+    0 ${({ theme }) => theme.spacing(2)};
+
+  &:before {
+    background-color: ${({ color, theme }) => theme.tag.text[color]};
+    border-radius: ${({ theme }) => theme.border.radius.rounded};
+    content: '';
+    display: block;
+    flex-shrink: 0;
+    height: ${({ theme }) => theme.spacing(1)};
+    width: ${({ theme }) => theme.spacing(1)};
+  }
+`;
+
+const StyledContent = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+type StatusProps = {
+  className?: string;
+  color: ThemeColor;
+  isLoaderVisible?: boolean;
+  text: string;
+  onClick?: () => void;
+  weight?: 'regular' | 'medium';
+};
+
+export const Status = ({
+  className,
+  color,
+  isLoaderVisible = false,
+  text,
+  onClick,
+  weight = 'regular',
+}: StatusProps) => (
+  <StyledStatus
+    className={className}
+    color={themeColorSchema.catch('gray').parse(color)}
+    onClick={onClick}
+    weight={weight}
+    isLoaderVisible={isLoaderVisible}
+  >
+    <StyledContent>{text}</StyledContent>
+    {isLoaderVisible ? <Loader color={color} /> : null}
+  </StyledStatus>
+);

packages/twenty-ui/src/display/status/components/__stories__/Status.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import {
+  CatalogDecorator,
+  CatalogStory,
+  ComponentDecorator,
+} from '@ui/testing';
+import { ThemeColor, MAIN_COLOR_NAMES } from '@ui/theme';
+
+import { Status } from '../Status';
+
+const meta: Meta<typeof Status> = {
+  title: 'UI/Display/Status/Status',
+  component: Status,
+  args: {
+    text: 'Urgent',
+    weight: 'medium',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Status>;
+
+export const Default: Story = {
+  args: {
+    color: 'red',
+    onClick: fn(),
+  },
+  decorators: [ComponentDecorator],
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const status = canvas.getByRole('heading', { level: 3 });
+
+    await userEvent.click(status);
+    expect(args.onClick).toHaveBeenCalled();
+  },
+};
+
+export const WithLongText: Story = {
+  decorators: [ComponentDecorator],
+  args: {
+    color: 'green',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+  },
+  parameters: {
+    container: { width: 100 },
+  },
+};
+
+export const Catalog: CatalogStory<Story, typeof Status> = {
+  argTypes: {
+    color: { control: false },
+  },
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'colors',
+          values: MAIN_COLOR_NAMES,
+          props: (color: ThemeColor) => ({ color }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};