From d300d1282d6910555304f358bfd4dfe9d4991da3 Mon Sep 17 00:00:00 2001
From: Leonardo Dourado <102989712+leonardodouradol@users.noreply.github.com>
Date: Wed, 21 Aug 2024 14:13:40 -0300
Subject: [PATCH] feat: add optionally tag on card list item (#1119)

* fix: add tag on card list item

* fix: remove unnecessary tag div

* fix: adjust tag

* fix: card list item stories

* fix: adjusts on card list item

* feat: add tests for tag
---
 .../src/components/_card-list-item.scss       |  7 +++++++
 .../src/CardListItem/CardListItem.tsx         | 19 ++++++++++++++++---
 .../__tests__/CardListItem.test.tsx           |  9 +++++++++
 .../stories/CardListItem.stories.mdx          |  3 +++
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/ocean-core/src/components/_card-list-item.scss b/packages/ocean-core/src/components/_card-list-item.scss
index 55ee5c2b3..e4bd17a20 100644
--- a/packages/ocean-core/src/components/_card-list-item.scss
+++ b/packages/ocean-core/src/components/_card-list-item.scss
@@ -26,6 +26,13 @@
     }
   }
 
+  &__wrapper {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: $spacing-inline-xxs;
+  }
+
   &__content {
     display: flex;
     flex-direction: column;
diff --git a/packages/ocean-react/src/CardListItem/CardListItem.tsx b/packages/ocean-react/src/CardListItem/CardListItem.tsx
index 516631152..17ef164ff 100644
--- a/packages/ocean-react/src/CardListItem/CardListItem.tsx
+++ b/packages/ocean-react/src/CardListItem/CardListItem.tsx
@@ -1,5 +1,6 @@
 import React, { ComponentPropsWithoutRef, forwardRef } from 'react';
 import classNames from 'classnames';
+import Tag from '../Tag';
 
 type CardListItemProps = {
   /*
@@ -34,6 +35,10 @@ type CardListItemProps = {
    * Whether the card list item is full width.
    */
   fullWidth?: boolean;
+  /*
+   * The tag name to be displayed in the tag area.
+   */
+  tag?: string;
   /*
    * The function to call when the card list item is clicked.
    */
@@ -57,6 +62,7 @@ const CardListItem = forwardRef<HTMLDivElement, CardListItemProps>(
       fullWidth = false,
       onClick,
       loading,
+      tag,
       ...rest
     },
     ref
@@ -115,9 +121,16 @@ const CardListItem = forwardRef<HTMLDivElement, CardListItemProps>(
             </div>
           )}
         </div>
-        {actionIcon && (
-          <div className="ods-card-list-item__action">{actionIcon}</div>
-        )}
+        <div className="ods-card-list-item__wrapper">
+          {tag && (
+            <Tag variant="highlight" type="important">
+              {tag}
+            </Tag>
+          )}
+          {actionIcon && (
+            <div className="ods-card-list-item__action">{actionIcon}</div>
+          )}
+        </div>
       </div>
     )
 );
diff --git a/packages/ocean-react/src/CardListItem/__tests__/CardListItem.test.tsx b/packages/ocean-react/src/CardListItem/__tests__/CardListItem.test.tsx
index b0b8d23e4..246028037 100644
--- a/packages/ocean-react/src/CardListItem/__tests__/CardListItem.test.tsx
+++ b/packages/ocean-react/src/CardListItem/__tests__/CardListItem.test.tsx
@@ -81,4 +81,13 @@ describe('CardListItem', () => {
       'ods-card-list-item--loading'
     );
   });
+
+  test('renders the tag', () => {
+    render(<CardListItem title="Test Title" tag="Novo Relatório" />);
+
+    expect(screen.getByText('Novo Relatório')).toBeInTheDocument();
+
+    const tagElement = screen.getByText('Novo Relatório').closest('div');
+    expect(tagElement).toHaveClass('ods-tag__content');
+  });
 });
diff --git a/packages/ocean-react/src/CardListItem/stories/CardListItem.stories.mdx b/packages/ocean-react/src/CardListItem/stories/CardListItem.stories.mdx
index fc212309f..a42a9e945 100644
--- a/packages/ocean-react/src/CardListItem/stories/CardListItem.stories.mdx
+++ b/packages/ocean-react/src/CardListItem/stories/CardListItem.stories.mdx
@@ -1,6 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { PlaceholderOutline } from '@useblu/ocean-icons-react';
 import CardListItem from '../CardListItem';
+import Tag from '../../Tag';
 
 <Meta title="Components/CardListItem" component={CardListItem} />
 
@@ -24,6 +25,7 @@ import { CardListItem } from '@useblu/ocean-react';
       caption="Caption"
       leadingIcon={<PlaceholderOutline />}
       actionIcon={<PlaceholderOutline />}
+      tag="Label"
     />
   </Story>
 </Canvas>
@@ -70,6 +72,7 @@ If that's not sufficient, you can check the [implementation of the component](ht
       disabled: false,
       size: 'medium',
       onClick: () => null,
+      tag: 'Label',
       fullWidth: false,
     }}
   >