Feat(web-react): Add prefixed utility class #DS-1618

lmc-eu · Jan 13, 2025 · dd814b8 · dd814b8
1 parent 591b1f5
commit dd814b8
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 23 deletions.
diff --git a/packages/web-react/src/components/Box/__tests__/Box.test.tsx b/packages/web-react/src/components/Box/__tests__/Box.test.tsx
@@ -1,7 +1,8 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { restPropsTest, stylePropsTest } from '@local/tests';
+import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
+import { SpiritBoxProps } from '../../../types';
 import Box from '../Box';
 
 const dataProvider = [
@@ -73,7 +74,11 @@ const dataProvider = [
   },
 ];
 
+const BoxPrefixTestComponent = ({ children }: SpiritBoxProps) => <Box backgroundColor="primary">{children}</Box>;
+
 describe('Box', () => {
+  classNamePrefixProviderTest(BoxPrefixTestComponent, 'bg-primary');
+
   stylePropsTest(Box);
 
   restPropsTest(Box, 'div');

diff --git a/packages/web-react/src/components/Box/useBoxStyleProps.ts b/packages/web-react/src/components/Box/useBoxStyleProps.ts
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { ElementType } from 'react';
 import { BorderColors } from '../../constants';
+import { useClassNamePrefix } from '../../hooks';
 import { SpiritBoxProps } from '../../types';
 
 export interface UseBoxStyleProps<T> {
@@ -14,17 +15,21 @@ export const useBoxStyleProps = (
   props: Partial<SpiritBoxProps<ElementType>>,
 ): UseBoxStyleProps<Partial<SpiritBoxProps<ElementType>>> => {
   const { backgroundColor, borderColor, borderRadius, borderStyle, borderWidth, ...restProps } = props || {};
-  const boxBackgroundColor = backgroundColor ? `bg-${backgroundColor}` : '';
-  let boxBorderColor = borderColor ? borderColor.replace('', 'border-') : '';
+  const boxBackgroundClassName = useClassNamePrefix(`bg-${backgroundColor}`);
+  const boxBorderClassName = useClassNamePrefix('border-');
+  const boxRadiiClassName = useClassNamePrefix('rounded-');
+
+  const boxBackgroundColor = backgroundColor ? boxBackgroundClassName : '';
+  let boxBorderColor = borderColor ? borderColor.replace('', boxBorderClassName) : '';
   let boxBorderRadius = '';
   let boxBorderStyle = '';
-  const boxBorderWidth = borderWidth ? borderWidth.replace('', 'border-') : '';
+  const boxBorderWidth = borderWidth ? borderWidth.replace('', boxBorderClassName) : '';
 
   if (borderWidth && parseInt(borderWidth, 10) > 0) {
-    boxBorderStyle = `border-${borderStyle}`;
-    boxBorderRadius = borderRadius ? borderRadius.replace('', 'rounded-') : '';
+    boxBorderStyle = `${boxBorderClassName}${borderStyle}`;
+    boxBorderRadius = borderRadius ? borderRadius.replace('', boxRadiiClassName) : '';
     if (!borderColor) {
-      boxBorderColor = `border-${BorderColors.BASIC}`;
+      boxBorderColor = `${boxBorderClassName}${BorderColors.BASIC}`;
     }
   }
 

diff --git a/packages/web-react/src/components/Footer/__tests__/Footer.test.tsx b/packages/web-react/src/components/Footer/__tests__/Footer.test.tsx
@@ -1,11 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import '@testing-library/jest-dom';
-import { restPropsTest, stylePropsTest } from '@local/tests';
+import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
 import { BackgroundColors } from '../../../constants';
 import Footer from '../Footer';
 
 describe('Footer', () => {
+  classNamePrefixProviderTest(Footer, 'bg-secondary');
+
   stylePropsTest(Footer);
 
   restPropsTest(Footer, 'footer');

diff --git a/packages/web-react/src/components/Footer/useFooterStyleProps.ts b/packages/web-react/src/components/Footer/useFooterStyleProps.ts
@@ -5,9 +5,11 @@ export interface UseFooterStyleProps {
   classProps: string;
 }
 
-export function useFooterStyleProps(props: Partial<SpiritFooterProps>): UseFooterStyleProps {
+export const useFooterStyleProps = (props: Partial<SpiritFooterProps>): UseFooterStyleProps => {
   const { backgroundColor } = props;
-  const footerBackgroundColor = backgroundColor ? `bg-${backgroundColor}` : '';
+  const footerBackgroundClassName = `bg-${backgroundColor}`;
+
+  const footerBackgroundColor = backgroundColor ? footerBackgroundClassName : '';
 
   const classProps = classNames({
     [footerBackgroundColor]: backgroundColor,
@@ -16,4 +18,4 @@ export function useFooterStyleProps(props: Partial<SpiritFooterProps>): UseFoote
   return {
     classProps,
   };
-}
+};
diff --git a/packages/web-react/src/components/Item/__tests__/Item.test.tsx b/packages/web-react/src/components/Item/__tests__/Item.test.tsx
@@ -1,13 +1,15 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import React from 'react';
-import { restPropsTest, stylePropsTest } from '@local/tests';
+import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
 import { SpiritItemProps } from '../../../types';
 import Item from '../Item';
 
 jest.mock('../../../hooks/useIcon');
 
 describe('Item', () => {
+  classNamePrefixProviderTest(Item, 'Item');
+
   stylePropsTest(Item);
 
   restPropsTest((props: SpiritItemProps) => <Item {...props} />, 'button');

diff --git a/packages/web-react/src/components/TextFieldBase/__tests__/TextFieldBase.test.tsx b/packages/web-react/src/components/TextFieldBase/__tests__/TextFieldBase.test.tsx
@@ -1,11 +1,13 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import React from 'react';
-import { requiredPropsTest } from '@local/tests';
+import { classNamePrefixProviderTest, requiredPropsTest } from '@local/tests';
 import { TextFieldType } from '../../../types';
 import TextFieldBase from '../TextFieldBase';
 
 describe('TextFieldBase', () => {
+  classNamePrefixProviderTest(TextFieldBase, 'TextField');
+
   requiredPropsTest(TextFieldBase, 'textbox', 'id', 'textfieldbase');
 
   describe.each(['text', 'password', 'email'])('input type %s', (type) => {

diff --git a/packages/web-react/src/components/Tooltip/__tests__/Tooltip.test.tsx b/packages/web-react/src/components/Tooltip/__tests__/Tooltip.test.tsx
@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
-import { restPropsTest, stylePropsTest } from '@local/tests';
+import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
 import { Button } from '../../Button';
 import { Tooltip, TooltipPopover, TooltipTrigger } from '..';
 
@@ -10,6 +10,8 @@ describe('Tooltip', () => {
   const triggerText = 'TooltipTrigger';
   const popoverText = 'TooltipPopover';
 
+  classNamePrefixProviderTest(Tooltip, 'Tooltip');
+
   stylePropsTest((props) => <Tooltip id={id} {...props} data-testid="tooltip-test" />, 'tooltip-test');
 
   restPropsTest((props) => <Tooltip id={id} {...props} />, 'div');

diff --git a/packages/web-react/src/components/Tooltip/__tests__/TooltipTrigger.test.tsx b/packages/web-react/src/components/Tooltip/__tests__/TooltipTrigger.test.tsx
@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { restPropsTest, stylePropsTest } from '@local/tests';
+import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
 import { Button } from '../../Button';
 import { TooltipTrigger } from '..';
 

diff --git a/packages/web-react/src/components/UNSTABLE_Slider/__tests__/UNSTABLE_Slider.test.tsx b/packages/web-react/src/components/UNSTABLE_Slider/__tests__/UNSTABLE_Slider.test.tsx
@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { restPropsTest, stylePropsTest } from '@local/tests';
+import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
 import UNSTABLE_Slider from '../UNSTABLE_Slider';
 
 describe('UNSTABLE_Slider', () => {
@@ -13,6 +13,8 @@ describe('UNSTABLE_Slider', () => {
     value: defaultValue,
   };
 
+  classNamePrefixProviderTest(UNSTABLE_Slider, 'UNSTABLE_Slider');
+
   stylePropsTest(
     (props) => <UNSTABLE_Slider id={defaultProps.id} {...props} data-testid="slider-test" />,
     'slider-test',

diff --git a/packages/web-react/src/components/UNSTABLE_Truncate/UNSTABLE_Truncate.tsx b/packages/web-react/src/components/UNSTABLE_Truncate/UNSTABLE_Truncate.tsx
@@ -2,7 +2,7 @@
 
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
-import { useClassNamePrefix, useStyleProps } from '../../hooks';
+import { useStyleProps } from '../../hooks';
 import { SpiritTruncateProps } from '../../types/truncate';
 import { useTruncateStyleProps } from './useTruncateStyleProps';
 
@@ -25,11 +25,7 @@ const UNSTABLE_Truncate = <T extends ElementType = 'span'>(props: SpiritTruncate
   };
 
   return (
-    <ElementTag
-      {...otherProps}
-      {...truncateStyleProps}
-      className={classNames(useClassNamePrefix(classProps), styleProps.className)}
-    >
+    <ElementTag {...otherProps} {...truncateStyleProps} className={classNames(classProps, styleProps.className)}>
       {children}
     </ElementTag>
   );

diff --git a/packages/web-react/src/components/UNSTABLE_Truncate/useTruncateStyleProps.ts b/packages/web-react/src/components/UNSTABLE_Truncate/useTruncateStyleProps.ts
@@ -1,4 +1,5 @@
 import { CSSProperties, ElementType } from 'react';
+import { useClassNamePrefix } from '../../hooks';
 import { SpiritTruncateProps } from '../../types/truncate';
 
 interface TruncateCSSProperties extends CSSProperties {
@@ -14,7 +15,7 @@ export interface TruncateStyles<T extends ElementType> {
 export function useTruncateStyleProps<T extends ElementType>(props: SpiritTruncateProps<T>): TruncateStyles<T> {
   const { lines, ...restProps } = props;
 
-  const TruncateMultilinesClass = 'text-truncate-multiline';
+  const TruncateMultilinesClass = useClassNamePrefix('text-truncate-multiline');
   const classProps = TruncateMultilinesClass;
 
   const truncateStyle: TruncateCSSProperties = {};