Feat: Introduce Box component #DS-1595

docs/DICTIONARIES.md

@@ -10,6 +10,7 @@ This project uses `dictionaries` to unify props between different components.
 ## List of Dictionaries
 
 - [Alignment](#alignment)
+- [Border Properities](#border-properties)
 - [Color](#color)
 - [Emphasis](#emphasis)
 - [Placement](#placement)
@@ -25,6 +26,15 @@ This project uses `dictionaries` to unify props between different components.
 | AlignmentY         | `top`, `center`, `bottom`               | AlignmentY         |
 | AlignmentYExtended | AlignmentY + `stretch`, `baseline`      | AlignmentYExtended |
 
+### Border Properties
+
+| Dictionary    | Values                                          | Code name    |
+| ------------- | ----------------------------------------------- | ------------ |
+| Border Color  | `basic`, `focus`                                | BorderColor  |
+| Border Radius | `0`, `100`, `200`, `300`, `400`, `500`, `full`, | BorderRadius |
+| Border Style  | `solid`, `'dotted'`, `'dashed'`                 | BorderStyle  |
+| Border Width  | `0`, `100`, `200`,                              | BorderWidth  |
+
 ### Color
 
 | Dictionary        | Values                                                           | Code name       |

packages/web-react/scripts/entryPoints.js

@@ -13,6 +13,7 @@ const entryPoints = [
   { dirs: ['components', 'Accordion'] },
   { dirs: ['components', 'Alert'] },
   { dirs: ['components', 'Breadcrumbs'] },
+  { dirs: ['components', 'Box'] },
   { dirs: ['components', 'Button'] },
   { dirs: ['components', 'Card'] },
   { dirs: ['components', 'Checkbox'] },

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

@@ -0,0 +1,29 @@
+'use client';
+
+import classNames from 'classnames';
+import React, { ElementType } from 'react';
+import { BorderStyles } from '../../constants';
+import { useStyleProps } from '../../hooks';
+import { SpiritBoxProps } from '../../types';
+import { useBoxStyleProps } from './useBoxStyleProps';
+
+const defaultProps: Partial<SpiritBoxProps> = {
+  elementType: 'div',
+  borderStyle: BorderStyles.SOLID,
+};
+
+const Box = <T extends ElementType = 'div'>(props: SpiritBoxProps<T>) => {
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { elementType: ElementTag = 'div', children, ...restProps } = propsWithDefaults;
+
+  const { classProps, props: modifiedProps } = useBoxStyleProps(restProps);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+
+  return (
+    <ElementTag {...otherProps} {...styleProps} className={classNames(classProps, styleProps.className)}>
+      {children}
+    </ElementTag>
+  );
+};
+
+export default Box;

packages/web-react/src/components/Box/README.md

@@ -0,0 +1,85 @@
+# Box
+
+The Box component is a simple container around content or other components.
+
+```jsx
+<Box>{/* Content go here */}</Box>
+```
+
+## Border
+
+You can define border color, radius, style and width using the `borderColor`, `borderRadius`, `borderStyle` and `borderWidth` props.
+
+```jsx
+<Box borderColor="basic" borderRadius="200" borderWidth="100" borderStyle="dashed">
+  {/* Content go here */}
+</Box>
+```
+
+The borderColor, borderRadius, and borderStyle props are applied only if borderWidth is greater than `0`.
+
+## Padding
+
+You can define padding using the `padding` prop.
+
+```jsx
+<Box padding="space-200">{/* Content go here */}</Box>
+```
+
+It is also possible to define padding for horizontal and vertical sides using the `paddingX` and `paddingY` props.
+
+```jsx
+<Box paddingX="space-200" paddingY="space-300">
+  {/* Content go here */}
+</Box>
+```
+
+You can also define padding for each side using the `paddingTop`, `paddingRight`, `paddingBottom`, and `paddingLeft` props.
+
+```jsx
+<Box paddingTop="space-200" paddingRight="space-300" paddingBottom="space-400" paddingLeft="space-500">
+  {/* Content go here */}
+</Box>
+```
+
+Responsive values can be set for each prop using an object:
+
+```jsx
+<Box padding={{ mobile: 'space-200', tablet: 'space-300', desktop: 'space-400' }}>{/* Content go here */}</Box>
+```
+
+## Background Color
+
+You can define background color using the `backgroundColor` prop.
+
+```jsx
+<Box backgroundColor="primary">{/* Content go here */}</Box>
+```
+
+## API
+
+| Name              | Type                                                              | Default | Required | Description                   |
+| ----------------- | ----------------------------------------------------------------- | ------- | -------- | ----------------------------- |
+| `backgroundColor` | [Background Color dictionary][dictionary-color]                   | -       | ✕        | Background color of the Box   |
+| `borderColor`     | [Border Color dictionary][dictionary-border-properities]          | -       | ✕        | Border color of the Box       |
+| `borderRadius`    | [Border Radius dictionary][dictionary-border-properities]         | -       | ✕        | Border radius of the Box      |
+| `borderStyle`     | [Border Style dictionary][dictionary-border-properities]          | `solid` | ✕        | Border style of the Box       |
+| `borderWidth`     | [Border Width dictionary][dictionary-border-properities]          | -       | ✕        | Border width of the Box       |
+| `elementType`     | `ElementType`                                                     | `div`   | ✕        | Type of element               |
+| `padding`         | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | -       | ✕        | Padding of the Box            |
+| `paddingX`        | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | -       | ✕        | Horizontal padding of the Box |
+| `paddingY`        | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | -       | ✕        | Vertical padding of the Box   |
+| `paddingTop`      | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | -       | ✕        | Padding top of the Box        |
+| `paddingRight`    | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | -       | ✕        | Padding right of the Box      |
+| `paddingBottom`   | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | -       | ✕        | Padding bottom of the Box     |
+| `paddingLeft`     | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | -       | ✕        | Padding left of the Box       |
+
+On top of the API options, the components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
+
+[dictionary-color]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#color
+[dictionary-border-properities]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#border-properties
+[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
+[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
+[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props

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

@@ -0,0 +1,133 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
+import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
+import Box from '../Box';
+
+const dataProvider = [
+  {
+    prop: 'backgroundColor',
+    value: 'primary',
+    className: 'bg-primary',
+    description: 'background color',
+  },
+  {
+    prop: 'borderColor',
+    value: 'basic',
+    className: 'border-basic',
+    description: 'border color',
+  },
+  {
+    prop: 'borderWidth',
+    value: '100',
+    className: 'border-100',
+    description: 'border width',
+  },
+  {
+    prop: 'padding',
+    value: 'space-800',
+    className: 'p-800',
+    description: 'padding',
+  },
+  {
+    prop: 'paddingX',
+    value: 'space-800',
+    className: 'px-800',
+    description: 'horizontal padding',
+  },
+  {
+    prop: 'paddingY',
+    value: 'space-800',
+    className: 'py-800',
+    description: 'vertical padding',
+  },
+  {
+    prop: 'paddingTop',
+    value: 'space-800',
+    className: 'pt-800',
+    description: 'padding top',
+  },
+  {
+    prop: 'paddingBottom',
+    value: 'space-800',
+    className: 'pb-800',
+    description: 'padding bottom',
+  },
+  {
+    prop: 'paddingLeft',
+    value: 'space-800',
+    className: 'pl-800',
+    description: 'padding left',
+  },
+  {
+    prop: 'paddingRight',
+    value: 'space-800',
+    className: 'pr-800',
+    description: 'padding right',
+  },
+  {
+    prop: 'padding',
+    value: { mobile: 'space-600', tablet: 'space-800', desktop: 'space-1000' },
+    className: 'p-600 p-tablet-800 p-desktop-1000',
+    description: 'responsive padding',
+  },
+];
+
+describe('Box', () => {
+  stylePropsTest(Box);
+
+  restPropsTest(Box, 'div');
+
+  it('should render children', () => {
+    render(<Box>Content</Box>);
+
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('should render with background color', () => {
+    render(<Box backgroundColor="primary">Content</Box>);
+
+    expect(screen.getByText('Content')).toHaveStyle('background-color: var(--color-primary)');
+  });
+
+  it('should render with border radius and width', () => {
+    render(
+      <Box borderRadius="200" borderWidth="100" data-testid="Box">
+        Content
+      </Box>,
+    );
+
+    expect(screen.getByTestId('Box')).toHaveClass('rounded-200');
+  });
+
+  it('should not render correct border radius class when border width is not set', () => {
+    render(
+      <Box borderRadius="200" data-testid="Box">
+        Content
+      </Box>,
+    );
+
+    expect(screen.getByTestId('Box')).not.toHaveClass('rounded-200');
+  });
+
+  it('should render border style', () => {
+    render(
+      <Box borderStyle="dashed" borderWidth="100" data-testid="Box">
+        Content
+      </Box>,
+    );
+
+    expect(screen.getByTestId('Box')).toHaveClass('border-dashed');
+  });
+
+  it.each(dataProvider)('should render with $description', ({ prop, value, className }) => {
+    render(
+      <Box {...{ [prop]: value }} data-testid="Box">
+        Content
+      </Box>,
+    );
+
+    expect(screen.getByTestId('Box')).toHaveClass(className);
+  });
+});