fixup! Feat(web-react): Introduce UNSTABLE_Truncate component #DS-1098

packages/web-react/src/components/UNSTABLE_Truncate/UNSTABLE_Truncate.tsx

@@ -1,11 +1,17 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritTruncateProps } from '../../types/truncate';
 import { useTruncateStyleProps } from './useTruncateStyleProps';
 
-const Truncate = (props: SpiritTruncateProps): JSX.Element => {
-  const { children, ...restProps } = props;
+const defaultProps = {
+  elementType: 'span',
+};
+
+const UNSTABLE_Truncate = <T extends ElementType = 'span'>(props: SpiritTruncateProps<T>): JSX.Element => {
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { children, elementType = 'span', ...restProps } = propsWithDefaults;
+  const Component = elementType;
 
   const { classProps, props: modifiedProps, styleProps: truncateStyle } = useTruncateStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -18,10 +24,10 @@ const Truncate = (props: SpiritTruncateProps): JSX.Element => {
   };
 
   return (
-    <span {...otherProps} {...truncateStyleProps} className={classNames(classProps, styleProps.className)}>
+    <Component {...otherProps} {...truncateStyleProps} className={classNames(classProps, styleProps.className)}>
       {children}
-    </span>
+    </Component>
   );
 };
 
-export default Truncate;
+export default UNSTABLE_Truncate;

packages/web-react/src/components/UNSTABLE_Truncate/__tests__/UNSTABLE_Truncate.test.tsx

@@ -1,14 +1,11 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 import UNSTABLE_Truncate from '../UNSTABLE_Truncate';
 
 describe('UNSTABLE_Truncate', () => {
-  classNamePrefixProviderTest(UNSTABLE_Truncate, 'UNSTABLE_Truncate');
-
   stylePropsTest(UNSTABLE_Truncate);
 
   restPropsTest(UNSTABLE_Truncate, 'span');
@@ -17,14 +14,14 @@ describe('UNSTABLE_Truncate', () => {
     render(<UNSTABLE_Truncate>Text content</UNSTABLE_Truncate>);
     const text = screen.getByText('Text content');
 
-    expect(text).toHaveClass('UNSTABLE_Truncate text-truncate-multiline');
+    expect(text).toHaveClass('text-truncate-multiline');
   });
 
   it('should have correct style based on lines', () => {
     render(<UNSTABLE_Truncate lines={2}>Text content</UNSTABLE_Truncate>);
     const text = screen.getByText('Text content');
 
-    expect(text).toHaveClass('UNSTABLE_Truncate text-truncate-multiline');
+    expect(text).toHaveClass('text-truncate-multiline');
     expect(text).toHaveStyle('--text-truncate-lines:2;');
   });
 });

packages/web-react/src/components/UNSTABLE_Truncate/__tests__/useTruncateStyleProps.test.ts

@@ -6,14 +6,14 @@ describe('useTruncateStyleProps', () => {
     const props = {};
     const { result } = renderHook(() => useTruncateStyleProps(props));
 
-    expect(result.current.classProps).toBe('UNSTABLE_Truncate text-truncate-multiline');
+    expect(result.current.classProps).toBe('text-truncate-multiline');
   });
 
   it('should return correct style based on lines', () => {
     const props = { lines: 2 };
     const { result } = renderHook(() => useTruncateStyleProps(props));
 
-    expect(result.current.classProps).toBe('UNSTABLE_Truncate text-truncate-multiline');
+    expect(result.current.classProps).toBe('text-truncate-multiline');
     expect(result.current.styleProps).toEqual({ '--text-truncate-lines': 2 });
   });
 });

packages/web-react/src/components/UNSTABLE_Truncate/useTruncateStyleProps.ts

@@ -1,24 +1,21 @@
-import classNames from 'classnames';
-import { CSSProperties } from 'react';
-import { useClassNamePrefix } from '../../hooks';
+import { CSSProperties, ElementType } from 'react';
 import { SpiritTruncateProps } from '../../types/truncate';
 
 interface TruncateCSSProperties extends CSSProperties {
   '--text-truncate-lines'?: number;
 }
 
-export interface TruncateStyles {
+export interface TruncateStyles<T extends ElementType> {
   classProps: string;
-  props: SpiritTruncateProps;
+  props: SpiritTruncateProps<T>;
   styleProps: TruncateCSSProperties;
 }
 
-export function useTruncateStyleProps(props: SpiritTruncateProps): TruncateStyles {
+export function useTruncateStyleProps<T extends ElementType>(props: SpiritTruncateProps<T>): TruncateStyles<T> {
   const { lines, ...restProps } = props;
 
-  const TruncateClass = useClassNamePrefix('UNSTABLE_Truncate');
   const TruncateMultilinesClass = 'text-truncate-multiline';
-  const classProps = classNames(TruncateClass, TruncateMultilinesClass);
+  const classProps = TruncateMultilinesClass;
 
   const truncateStyle: TruncateCSSProperties = {};
   truncateStyle['--text-truncate-lines'] = lines;

packages/web-react/src/types/truncate.ts

@@ -1,5 +1,8 @@
+import { ElementType } from 'react';
 import { ChildrenProps, StyleProps } from './shared';
 
-export interface SpiritTruncateProps extends StyleProps, ChildrenProps {
+export type SpiritTruncateProps<E extends ElementType> = {
+  elementType?: E;
   lines?: number;
-}
+} & StyleProps &
+  ChildrenProps;