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
ocean-ds · Aug 21, 2024 · d300d12 · d300d12
1 parent 7de2542
commit d300d12
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,
     }}
   >