fixup! Feat(web-react): Introduce Box component #DS-1595

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

@@ -13,11 +13,19 @@ const defaultProps: Partial<SpiritBoxProps> = {
 const Box = <T extends ElementType = 'div'>(props: SpiritBoxProps<T>) => {
   const propsWithDefaults = { ...defaultProps, ...props };
   const { elementType: ElementTag = 'div', children, ...restProps } = propsWithDefaults;
-  const { classProps } = useBoxStyleProps(restProps);
-  const { styleProps, props: otherProps } = useStyleProps(restProps);
+
+  const { classProps, props: modifiedProps, styleProps: boxStyle } = useBoxStyleProps(restProps);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+
+  const boxStyleProps = {
+    style: {
+      ...styleProps.style,
+      ...boxStyle,
+    },
+  };
 
   return (
-    <ElementTag {...otherProps} className={classNames(classProps, styleProps.className)} style={styleProps.style}>
+    <ElementTag {...otherProps} {...boxStyleProps} className={classNames(classProps, styleProps.className)}>
       {children}
     </ElementTag>
   );

packages/web-react/src/components/Box/demo/BoxDefault.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import Box from '../Box';
 
-const BoxDefault = () => <Box>Content</Box>;
+const BoxDefault = () => (
+  <Box padding="space-1200" backgroundColor="tertiary">
+    Content
+  </Box>
+);
 
 export default BoxDefault;

packages/web-react/src/components/Box/useBoxStyleProps.ts

@@ -1,38 +1,65 @@
 import classNames from 'classnames';
-import { useClassNamePrefix } from '../../hooks';
-import { BackgroundColorsDictionaryType, SpaceToken } from '../../types';
+import { CSSProperties, ElementType } from 'react';
+import { DirectionAxis } from '../../constants';
+import { useClassNamePrefix, useSpacingStyle } from '../../hooks';
+import { SpiritBoxProps } from '../../types';
 
-export interface UseBoxStyleProps {
-  backgroundColor?: BackgroundColorsDictionaryType;
-  borderColor?: string;
-  borderRadius?: string;
-  borderWidth?: string;
-  paddingTop?: SpaceToken;
-  paddingBottom?: SpaceToken;
-  paddingLeft?: SpaceToken;
-  paddingRight?: SpaceToken;
+interface BoxCSSProperties extends CSSProperties {
+  [key: string]: string | undefined | number;
 }
 
-export interface UseBoxStylePropsReturn {
+export interface UseBoxStyleProps<T> {
+  /** className props */
   classProps: string;
+  /** Props for the box element. */
+  props: T;
+  /** Style props for the box element */
+  styleProps: BoxCSSProperties;
 }
 
-export function useBoxStyleProps(props?: UseBoxStyleProps): UseBoxStylePropsReturn {
+export const useBoxStyleProps = (
+  props: Partial<SpiritBoxProps<ElementType>>,
+): UseBoxStyleProps<Partial<SpiritBoxProps<ElementType>>> => {
   const {
     backgroundColor,
     borderColor,
     borderRadius,
     borderWidth,
+    padding,
+    paddingX,
+    paddingY,
     paddingTop,
     paddingBottom,
     paddingLeft,
     paddingRight,
+    ...restProps
   } = props || {};
   const boxClass = useClassNamePrefix('Box');
 
-  const boxClasses = classNames(boxClass, {});
+  const boxStyle: BoxCSSProperties = {
+    ...useSpacingStyle(padding, 'box', DirectionAxis.X),
+    ...useSpacingStyle(padding, 'box', DirectionAxis.Y),
+    ...useSpacingStyle(paddingX, 'box', DirectionAxis.X),
+    ...useSpacingStyle(paddingY, 'box', DirectionAxis.Y),
+  };
+
+  const boxBackgroundColor = backgroundColor ? `bg-${backgroundColor}` : '';
+  const boxPaddingBottom = paddingBottom ? paddingBottom.replace('space-', 'pb-') : '';
+  const boxPaddingTop = paddingTop ? paddingTop.replace('space-', 'pt-') : '';
+  const boxPaddingLeft = paddingLeft ? paddingLeft.replace('space-', 'pl-') : '';
+  const boxPaddingRight = paddingRight ? paddingRight.replace('space-', 'pr-') : '';
+
+  const boxClasses = classNames(boxClass, {
+    [boxBackgroundColor]: backgroundColor,
+    [boxPaddingBottom]: paddingBottom,
+    [boxPaddingTop]: paddingTop,
+    [boxPaddingLeft]: paddingLeft,
+    [boxPaddingRight]: paddingRight,
+  });
 
   return {
     classProps: boxClasses,
+    props: restProps,
+    styleProps: boxStyle,
   };
-}
+};

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

@@ -1,4 +1,4 @@
-import { ElementType } from 'react';
+import { ElementType, JSXElementConstructor } from 'react';
 import {
   BackgroundColorsDictionaryType,
   ChildrenProps,
@@ -17,9 +17,18 @@ export interface BoxBaseProps extends ChildrenProps, StyleProps {
   /** The border width of the box. */
   borderWidth?: string;
   /** Padding of the box. */
+  padding?: SpaceToken;
+  /** Horizontal padding of the box. */
+  paddingX?: SpaceToken;
+  /** Vertical padding of the box. */
+  paddingY?: SpaceToken;
+  /** Padding top of the box. */
   paddingTop?: SpaceToken;
+  /** Padding bottom of the box. */
   paddingBottom?: SpaceToken;
+  /** Padding left of the box. */
   paddingLeft?: SpaceToken;
+  /** Padding right of the box. */
   paddingRight?: SpaceToken;
 }
 
@@ -29,7 +38,7 @@ export type BoxProps<E extends ElementType> = {
    *
    * @default 'button'
    */
-  elementType?: E;
+  elementType?: E | JSXElementConstructor<unknown>;
 } & BoxBaseProps;
 
 export type SpiritBoxProps<E extends ElementType = 'div'> = BoxProps<E> &