Create TagV2 component and deprecate original Tag component

This commit introduces a new component, TagV2, which is intended to replace the original Tag component. The original Tag component has been marked as deprecated. The new TagV2 component includes enhancements and updates that improve its functionality and usability. Users are encouraged to transition to using TagV2 in their future developments.

Author: Hector Arce De Las Heras

src/components/tag/tag.tsx

@@ -58,6 +58,9 @@ const TagBoundary = <
   </ErrorBoundary>
 );
 
+/**
+ * @deprecated Try TagV2 component that will override this component in the next major
+ */
 const Tag = React.forwardRef(TagBoundary) as <V, S>(
   p: ITag<V, S> & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;

src/components/tagV2/__tests__/tag.test.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { axe } from 'jest-axe';
+
+import { ICONS } from '@/assets';
+import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
+
+import { Tag } from '../tag';
+
+const mockProps = {
+  variant: 'HEALTHY',
+  icon: { icon: ICONS.ICON_PLACEHOLDER },
+  label: { content: 'LABEL' },
+};
+
+describe('Tag component', () => {
+  it('Should render tag component', async () => {
+    const { container, getByText } = renderProvider(<Tag {...mockProps} />);
+
+    const tagLabel = getByText(mockProps.label.content);
+
+    expect(tagLabel).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+});

src/components/tagV2/index.ts

@@ -0,0 +1,8 @@
+export type {
+  ITag as ITagV2,
+  TagStylesType as TagStylesTypeV2,
+  TagPropsStylesType as TagPropsStylesTypeV2,
+  TagLabelType as TagLabelTypeV2,
+} from './types';
+
+export { Tag as TagV2 } from './tag';

src/components/tagV2/stories/argtypes.ts

@@ -0,0 +1,67 @@
+import { CATEGORY_CONTROL } from '@/constants';
+import { IThemeObjectVariants } from '@/designSystem/themesObject';
+import { ArgTypesReturn } from '@/types';
+
+export const argtypes = (
+  variantsObject: IThemeObjectVariants,
+  themeSelected: string
+): ArgTypesReturn => {
+  return {
+    variant: {
+      description: 'Select tag variant type',
+      type: { name: 'string', required: true },
+      control: { type: 'select' },
+      options: Object.keys(variantsObject[themeSelected].TagVariantTypeV2 || {}),
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    icon: {
+      description: 'Object with the icon properties',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'IElementOrIcon',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
+    label: {
+      description: 'Object with the label properties',
+      control: { type: 'object' },
+      type: { name: 'object' },
+      table: {
+        type: {
+          summary: 'TagLabelType',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
+    dataTestId: {
+      description: 'Test id',
+      type: { name: 'string' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: { summary: 'tag' },
+        category: CATEGORY_CONTROL.TESTING,
+      },
+    },
+    ctv: {
+      description: 'Object used for update variant styles',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'object',
+        },
+        category: CATEGORY_CONTROL.CUSTOMIZATION,
+      },
+    },
+  };
+};

src/components/tagV2/stories/tag.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ICONS } from '@/assets';
+import { STYLES_NAME } from '@/constants';
+import { themesObject, variantsObject } from '@/designSystem/themesObject';
+
+import { Tag as Story } from '../tag';
+import { argtypes } from './argtypes';
+
+const themeSelected = localStorage.getItem('themeSelected') || 'kubit';
+
+const meta = {
+  title: 'Components/Status/TagV2',
+  component: Story,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: argtypes(variantsObject, themeSelected),
+} satisfies Meta<typeof Story>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
+
+const commonTagProps = {
+  variant: Object.values(variantsObject[themeSelected].TagVariantTypeV2 || {})[0] as string,
+  icon: { icon: ICONS.ICON_PLACEHOLDER },
+  label: { content: 'LABEL' },
+};
+
+export const Tag: Story = {
+  args: {
+    ...commonTagProps,
+    themeArgs: themesObject[themeSelected][STYLES_NAME.TAG_V2],
+  },
+};
+
+export const TagWithCtv: Story = {
+  args: {
+    ...commonTagProps,
+    ctv: {
+      icon: {
+        color: 'red',
+      },
+    },
+  },
+};

src/components/tagV2/tag.styled.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+import { getStyles } from '@/utils/getStyles/getStyles';
+
+import { TagPropsStylesType } from './types';
+
+export const TagContainerStyled = styled.div<{ styles: TagPropsStylesType }>`
+  ${({ styles }) => getStyles(styles.container)};
+`;

src/components/tagV2/tag.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import { STYLES_NAME } from '@/constants';
+import { useStyles } from '@/hooks/useStyles/useStyles';
+import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
+
+import { TagStandAlone } from './tagStandAlone';
+import type { ITag, ITagStandAlone, TagPropsStylesType } from './types';
+
+const TagComponent = React.forwardRef(
+  <V extends string>(
+    { variant, ctv, ...props }: ITag<V>,
+    ref: React.ForwardedRef<HTMLDivElement> | undefined | null
+  ): JSX.Element => {
+    const styles: TagPropsStylesType = useStyles<TagPropsStylesType>(
+      STYLES_NAME.TAG_V2,
+      variant,
+      ctv
+    );
+
+    return <TagStandAlone {...props} ref={ref} styles={styles} />;
+  }
+);
+TagComponent.displayName = 'TagComponent';
+
+const TagBoundary = <V extends string>(
+  props: ITag<V>,
+  ref: React.ForwardedRef<HTMLDivElement> | undefined | null
+): JSX.Element => (
+  <ErrorBoundary
+    fallBackComponent={
+      <FallbackComponent>
+        <TagStandAlone {...(props as unknown as ITagStandAlone)} ref={ref} />
+      </FallbackComponent>
+    }
+  >
+    <TagComponent {...props} ref={ref} />
+  </ErrorBoundary>
+);
+
+const Tag = React.forwardRef(TagBoundary) as <V, S>(
+  props: ITag<V> & React.RefAttributes<HTMLDivElement>
+) => JSX.Element;
+
+/**
+ * @description
+ * Tag component is used to highlight or categorize important information.
+ */
+export { Tag };

src/components/tagV2/tagStandAlone.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { ElementOrIcon } from '@/components/elementOrIcon';
+import { Text } from '@/components/text';
+import { TextComponentType } from '@/components/text/types';
+import { pickAriaProps } from '@/utils/aria/aria';
+
+import { TagContainerStyled } from './tag.styled';
+import { ITagStandAlone } from './types';
+
+const TagStandAloneComponent = (
+  { dataTestId = 'tag', ...props }: ITagStandAlone,
+  ref: React.ForwardedRef<HTMLDivElement> | undefined | null
+): JSX.Element => {
+  const ariaProps = pickAriaProps(props);
+  return (
+    <TagContainerStyled ref={ref} data-testid={dataTestId} styles={props.styles} {...ariaProps}>
+      <ElementOrIcon customIconStyles={props.styles.icon} {...props.icon} />
+      <Text
+        component={TextComponentType.SPAN}
+        customTypography={props.styles.label}
+        {...props.label}
+      >
+        {props.label?.content}
+      </Text>
+    </TagContainerStyled>
+  );
+};
+
+/**
+ * @description
+ * Tag component is used to highlight or categorize important information.
+ */
+export const TagStandAlone = React.forwardRef(TagStandAloneComponent);

src/components/tagV2/types/index.ts

@@ -0,0 +1,2 @@
+export * from './tag';
+export * from './tagTheme';

src/components/tagV2/types/tag.ts

@@ -0,0 +1,37 @@
+import { IElementOrIcon } from '@/components/elementOrIcon';
+import { IText } from '@/components/text';
+import { CustomTokenTypes } from '@/types';
+
+import { TagPropsStylesType } from './tagTheme';
+
+type TagAriaAttributes = Pick<
+  React.AriaAttributes,
+  'aria-label' | 'aria-describedby' | 'aria-disabled' | 'aria-labelledby'
+>;
+
+export type TagLabelType = Omit<IText<string>, 'children'> & {
+  content?: string;
+};
+
+/**
+ * @description
+ * Tag props
+ */
+export interface ITagStandAlone extends TagAriaAttributes {
+  styles: TagPropsStylesType;
+  icon?: IElementOrIcon;
+  label?: TagLabelType;
+  dataTestId?: string;
+}
+
+/**
+ * @description
+ * Tag props
+ * @interface ITag
+ */
+export interface ITag<
+  V = undefined extends string | unknown ? string | undefined : string | unknown,
+> extends Omit<ITagStandAlone, 'styles'>,
+    Omit<CustomTokenTypes<TagPropsStylesType>, 'cts' | 'extraCt'> {
+  variant: V;
+}