Add new info to Text

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

docs-ui/src/app/components/text/components.tsx

@@ -30,6 +30,7 @@ export const Colors = () => {
       <Text color="danger">Danger</Text>
       <Text color="warning">Warning</Text>
       <Text color="success">Success</Text>
+      <Text color="info">Info</Text>
     </Flex>
   );
 };

docs-ui/src/app/components/text/snippets.ts

@@ -21,6 +21,7 @@ export const colorsSnippet = `<Flex direction="column" gap="2">
   <Text color="danger">Danger</Text>
   <Text color="warning">Warning</Text>
   <Text color="success">Success</Text>
+  <Text color="info">Info</Text>
 </Flex>`;
 
 export const weightsSnippet = `<Flex direction="column" gap="2">

packages/ui/src/components/Link/definition.ts

@@ -27,7 +27,14 @@ export const LinkDefinition = {
   dataAttributes: {
     variant: ['subtitle', 'body', 'caption', 'label'] as const,
     weight: ['regular', 'bold'] as const,
-    color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,
+    color: [
+      'primary',
+      'secondary',
+      'danger',
+      'warning',
+      'success',
+      'info',
+    ] as const,
     truncate: [true, false] as const,
     standalone: [true, false] as const,
   },

packages/ui/src/components/Text/Text.module.css

@@ -91,6 +91,10 @@
     color: var(--bui-fg-success);
   }
 
+  .bui-Text[data-color='info'] {
+    color: var(--bui-fg-info);
+  }
+
   .bui-Text[data-truncate] {
     overflow: hidden;
     text-overflow: ellipsis;

packages/ui/src/components/Text/Text.stories.tsx

@@ -101,6 +101,7 @@ export const AllColors = meta.story({
       <Text {...args} color="danger" children="I am danger" />
       <Text {...args} color="warning" children="I am warning" />
       <Text {...args} color="success" children="I am success" />
+      <Text {...args} color="info" children="I am info" />
     </Flex>
   ),
 });

packages/ui/src/components/Text/definition.ts

@@ -27,7 +27,14 @@ export const TextDefinition = {
   dataAttributes: {
     variant: ['subtitle', 'body', 'caption', 'label'] as const,
     weight: ['regular', 'bold'] as const,
-    color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,
+    color: [
+      'primary',
+      'secondary',
+      'danger',
+      'warning',
+      'success',
+      'info',
+    ] as const,
     truncate: [true, false] as const,
   },
 } as const satisfies ComponentDefinition;