fix: add tag on card list item

ocean-ds · Aug 19, 2024 · f2d8198 · f2d8198
1 parent 2121e3d
commit f2d8198
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 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;
+    width: 100%;
+  }
+
   &__content {
     display: flex;
     flex-direction: column;

diff --git a/packages/ocean-react/src/CardListItem/CardListItem.tsx b/packages/ocean-react/src/CardListItem/CardListItem.tsx
@@ -34,6 +34,10 @@ type CardListItemProps = {
    * Whether the card list item is full width.
    */
   fullWidth?: boolean;
+  /*
+   * The tag or element to be displayed in the tag area of the item.
+   */
+  tag?: string | React.ReactElement;
   /*
    * The function to call when the card list item is clicked.
    */
@@ -57,6 +61,7 @@ const CardListItem = forwardRef<HTMLDivElement, CardListItemProps>(
       fullWidth = false,
       onClick,
       loading,
+      tag,
       ...rest
     },
     ref
@@ -102,19 +107,23 @@ const CardListItem = forwardRef<HTMLDivElement, CardListItemProps>(
         {leadingIcon && (
           <div className="ods-card-list-item__leading-icon">{leadingIcon}</div>
         )}
-        <div className="ods-card-list-item__content">
-          <div className="ods-card-list-item__content__title">{title}</div>
-          {description && (
-            <div className="ods-card-list-item__content__description">
-              {description}
-            </div>
-          )}
-          {caption && size === 'medium' && (
-            <div className="ods-card-list-item__content__caption">
-              {caption}
-            </div>
-          )}
+        <div className="ods-card-list-item__wrapper">
+          <div className="ods-card-list-item__content">
+            <div className="ods-card-list-item__content__title">{title}</div>
+            {description && (
+              <div className="ods-card-list-item__content__description">
+                {description}
+              </div>
+            )}
+            {caption && size === 'medium' && (
+              <div className="ods-card-list-item__content__caption">
+                {caption}
+              </div>
+            )}
+          </div>
+          {tag && <div className="ods-card-list-item__content__tag">{tag}</div>}
         </div>
+
         {actionIcon && (
           <div className="ods-card-list-item__action">{actionIcon}</div>
         )}

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=<Tag>Tag</Tag>
     />
   </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,
+      tags: <Tag>Tag</Tag>,
       fullWidth: false,
     }}
   >