improve tag component: children element

massalabs · Jan 25, 2024 · 24727fe · 24727fe
1 parent f725040
commit 24727fe
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 16 deletions.
diff --git a/src/components/Plugin/Plugin.stories.tsx b/src/components/Plugin/Plugin.stories.tsx
@@ -20,7 +20,7 @@ const argsOn = {
   topActionFunction: () => console.log('download'),
   title: `plugin name - 30 characters...`,
   subtitle: `Author's Name`,
-  tag: <Tag type="warning" content="beta" />,
+  tag: <Tag type="warning">Beta</Tag>,
   subtitleIcon: <Certificate />,
   version: '1.0.2',
   content: [

diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
@@ -7,15 +7,15 @@ export default {
 export const _Tag = {
   render: () => (
     <>
-      <Tag type={'default'} content={'default type'} />
+      <Tag type={'default'}>default type</Tag>
       <br />
-      <Tag type={'error'} content={'error type'} />
+      <Tag type={'error'}>error type</Tag>
       <br />
-      <Tag type={'success'} content={'success type'} />
+      <Tag type={'success'}>success type</Tag>
       <br />
-      <Tag type={'info'} content={'info type'} />
+      <Tag type={'info'}>info type</Tag>
       <br />
-      <Tag type={'warning'} content={'warning type'} />
+      <Tag type={'warning'}>warning type</Tag>
     </>
   ),
 };
diff --git a/src/components/Tag/Tag.test.tsx b/src/components/Tag/Tag.test.tsx
@@ -4,47 +4,47 @@ import { Tag } from './Tag';
 
 describe('Components | Tag', () => {
   test('it should render', () => {
-    render(<Tag type="default" content="default type" />);
+    render(<Tag type="default">default type</Tag>);
 
     let tag = screen.getByTestId('tag');
 
     expect(tag).toBeTruthy();
   });
 
   test('it should have white class with 30% opacity', () => {
-    render(<Tag type="default" content="default type" />);
+    render(<Tag type="default">default type</Tag>);
 
     let tag = screen.getByTestId('tag');
 
     expect(tag).toHaveClass('bg-white/30');
   });
 
   test('it should have info-1 class', () => {
-    render(<Tag type="info" content="info type" />);
+    render(<Tag type="info">info type</Tag>);
 
     let tag = screen.getByTestId('tag');
 
     expect(tag).toHaveClass('bg-s-info-1');
   });
 
   test('it should have error class', () => {
-    render(<Tag type="error" content="error type" />);
+    render(<Tag type="error">error type</Tag>);
 
     let tag = screen.getByTestId('tag');
 
     expect(tag).toHaveClass('bg-s-error');
   });
 
   test('it should have success class', () => {
-    render(<Tag type="success" content="success type" />);
+    render(<Tag type="success">success type</Tag>);
 
     let tag = screen.getByTestId('tag');
 
     expect(tag).toHaveClass('bg-s-success');
   });
 
   test('it should have warning class', () => {
-    render(<Tag type="warning" content="warning type" />);
+    render(<Tag type="warning">warning type</Tag>);
 
     let tag = screen.getByTestId('tag');
 

diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
@@ -4,12 +4,12 @@ import React from 'react';
 
 interface TagProps {
   type: string;
-  content: string;
+  children: React.ReactNode;
   customClass?: string;
 }
 
 export function Tag(props: TagProps) {
-  const { content, type, customClass } = props;
+  const { children, type, customClass } = props;
 
   let isDefault = type === 'default';
   let isInfo = type === 'info';
@@ -31,7 +31,7 @@ export function Tag(props: TagProps) {
       className={`${backgroundClass} mas-caption rounded-full w-fit px-3 py-1
         bg-opacity-30 ${typeColor} ${customClass}`}
     >
-      {content}
+      {children}
     </p>
   );
 }
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -27,7 +27,7 @@ export function Tooltip(props: TooltipProps) {
       {icon || defaultIcon}
       {showTooltip && (
         <div
-          className={`w-fit z-10 absolute bg-tertiary p-3 rounded-lg text-neutral ml-2 ${customClass} `}
+          className={`w-fit z-10 absolute bg-tertiary p-3 rounded-lg text-neutral ml-2 ${customClass}`}
         >
           {content}
         </div>