Create a reusable Label component (#9833)

As seen with @Bonapara, I'm creating a Label component and use it in the
workflows.

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx

@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
 import { Handle, Position } from '@xyflow/react';
 import React from 'react';
 import { capitalize } from 'twenty-shared';
-import { isDefined, OverflowingTextWithTooltip } from 'twenty-ui';
+import { isDefined, Label, OverflowingTextWithTooltip } from 'twenty-ui';
 
 type Variant = 'placeholder';
 
@@ -19,15 +19,11 @@ const StyledStepNodeContainer = styled.div`
   padding-block: ${({ theme }) => theme.spacing(3)};
 `;
 
-const StyledStepNodeType = styled.div`
+const StyledStepNodeType = styled(Label)`
   background-color: ${({ theme }) => theme.background.tertiary};
   border-radius: ${({ theme }) => theme.border.radius.sm}
     ${({ theme }) => theme.border.radius.sm} 0 0;
 
-  color: ${({ theme }) => theme.font.color.light};
-  font-size: 9px;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-
   margin-left: ${({ theme }) => theme.spacing(2)};
   padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
   align-self: flex-start;
@@ -119,7 +115,9 @@ export const WorkflowDiagramBaseStepNode = ({
         <StyledTargetHandle type="target" position={Position.Top} />
       ) : null}
 
-      <StyledStepNodeType>{capitalize(nodeType)}</StyledStepNodeType>
+      <StyledStepNodeType variant="small">
+        {capitalize(nodeType)}
+      </StyledStepNodeType>
 
       <StyledStepNodeInnerContainer variant={variant}>
         <StyledStepNodeLabel variant={variant}>

packages/twenty-ui/src/display/index.ts

@@ -57,4 +57,5 @@ export * from './tooltip/OverflowingTextWithTooltip';
 export * from './typography/components/H1Title';
 export * from './typography/components/H2Title';
 export * from './typography/components/H3Title';
+export * from './typography/components/Label';
 export * from './typography/components/StyledText';

packages/twenty-ui/src/display/typography/components/Label.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+export type LabelVariant = 'default' | 'small';
+
+const StyledLabel = styled.div<{ variant?: LabelVariant }>`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ variant = 'default' }) => {
+    switch (variant) {
+      case 'default':
+        return '11px';
+      case 'small':
+        return '9px';
+    }
+  }};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+export { StyledLabel as Label };

packages/twenty-ui/src/display/typography/components/__stories__/Label.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '@ui/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '@ui/testing/types/CatalogStory';
+
+import { Label, LabelVariant } from '../Label';
+
+const meta: Meta<typeof Label> = {
+  title: 'UI/Display/Typography/Label',
+  component: Label,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {
+  decorators: [ComponentDecorator],
+  args: {
+    children: 'Label',
+  },
+};
+
+export const Catalog: CatalogStory<Story, typeof Label> = {
+  decorators: [CatalogDecorator],
+  args: {
+    children: 'Label',
+  },
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'Variant',
+          values: ['default', 'small'] satisfies LabelVariant[],
+          props: (variant: LabelVariant) => ({ variant }),
+        },
+      ],
+    },
+  },
+};