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/info/components/Info.tsx

@@ -0,0 +1,92 @@
+import { css, useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconInfoCircle } from '@ui/display/icon/components/TablerIcons';
+
+import { Button } from '@ui/input/button/components/Button';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export type InfoAccent = 'blue' | 'danger';
+export type InfoProps = {
+  accent?: InfoAccent;
+  text: string;
+  buttonTitle?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  to?: string;
+};
+
+const StyledTextContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledIconInfoCircle = styled(IconInfoCircle)`
+  flex-shrink: 0;
+`;
+
+const StyledInfo = styled.div<Pick<InfoProps, 'accent'>>`
+  align-items: center;
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  display: flex;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  justify-content: space-between;
+  max-width: 512px;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
+  ${({ theme, accent }) => {
+    switch (accent) {
+      case 'blue':
+        return css`
+          background: ${theme.color.blueAccent20};
+          color: ${theme.color.blue50};
+        `;
+      case 'danger':
+        return css`
+          background: ${theme.color.red10};
+          color: ${theme.color.red};
+        `;
+    }
+  }}
+`;
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+`;
+
+export const Info = ({
+  accent = 'blue',
+  text,
+  buttonTitle,
+  onClick,
+  to,
+}: InfoProps) => {
+  const theme = useTheme();
+  return (
+    <StyledInfo accent={accent}>
+      <StyledTextContainer>
+        <StyledIconInfoCircle size={theme.icon.size.md} />
+        {text}
+      </StyledTextContainer>
+      {buttonTitle && to && (
+        <StyledLink to={to}>
+          <Button
+            title={buttonTitle}
+            size={'small'}
+            variant={'secondary'}
+            accent={accent}
+          />
+        </StyledLink>
+      )}
+      {buttonTitle && onClick && !to && (
+        <Button
+          title={buttonTitle}
+          onClick={onClick}
+          size={'small'}
+          variant={'secondary'}
+          accent={accent}
+        />
+      )}
+    </StyledInfo>
+  );
+};

packages/twenty-ui/src/display/info/components/__stories__/Info.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  CatalogDecorator,
+  CatalogStory,
+  ComponentDecorator,
+} from '@ui/testing';
+
+import { Info, InfoAccent } from '../Info';
+
+const meta: Meta<typeof Info> = {
+  title: 'UI/Display/Info',
+  component: Info,
+};
+
+export default meta;
+type Story = StoryObj<typeof Info>;
+
+export const Default: Story = {
+  args: {
+    accent: 'blue',
+    text: 'An info component',
+    buttonTitle: 'Update',
+  },
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: CatalogStory<Story, typeof Info> = {
+  args: {
+    text: 'An info component',
+    buttonTitle: 'Update',
+  },
+  argTypes: {
+    accent: { control: false },
+  },
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'accents',
+          values: ['blue', 'danger'] satisfies InfoAccent[],
+          props: (accent: InfoAccent) => ({ accent }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};