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

lmc-eu · Dec 31, 2024 · d61cbb0 · d61cbb0
1 parent 16039c8
commit d61cbb0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/packages/web-react/src/components/Box/README.md b/packages/web-react/src/components/Box/README.md
@@ -51,15 +51,15 @@ Responsive values can be set for each prop using an object:
 You can define background color using the `backgroundColor` prop.
 
 ```jsx
-<Box backgroundColor="basic">{/* Content go here */}</Box>
+<Box backgroundColor="primary">{/* Content go here */}</Box>
 ```
 
 ## API
 
 | Name              | Type                                                              | Default | Required | Description                   |
 | ----------------- | ----------------------------------------------------------------- | ------- | -------- | ----------------------------- |
-| `backgroundColor` | [Background Color dictionary][dictionary-background-color]        | -       | ✕        | Background color of the Box   |
-| `borderColor`     | [Border Color dictionary][dictionary-border-color]                | -       | ✕        | Border color of the Box       |
+| `backgroundColor` | [Background Color dictionary][dictionary-color]                   | -       | ✕        | Background color of the Box   |
+| `borderColor`     | [Border Color dictionary][dictionary-color]                       | -       | ✕        | Border color of the Box       |
 | `borderRadius`    | `string`                                                          | -       | ✕        | Border radius of the Box      |
 | `borderWidth`     | `string`                                                          | -       | ✕        | Border width of the Box       |
 | `elementType`     | `ElementType`                                                     | `div`   | ✕        | Type of element               |
@@ -75,8 +75,7 @@ On top of the API options, the components accept [additional attributes][readme-
 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-background-color]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#color
-[dictionary-border-color]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#color
+[dictionary-color]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#color
 [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
diff --git a/packages/web-react/src/components/Box/useBoxStyleProps.ts b/packages/web-react/src/components/Box/useBoxStyleProps.ts
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { CSSProperties, ElementType } from 'react';
-import { BorderColors } from '../../constants';
+import { BorderColors, BorderStyles } from '../../constants';
 import { BreakpointToken, SpaceToken, SpiritBoxProps } from '../../types';
 
 interface BoxCSSProperties extends CSSProperties {
@@ -57,10 +57,11 @@ export const useBoxStyleProps = (
   const boxBackgroundColor = backgroundColor ? `bg-${backgroundColor}` : '';
   let boxBorderColor = borderColor ? borderColor.replace('', 'border-') : '';
   let boxBorderRadius = '';
+  let boxBorderStyle = '';
   const boxBorderWidth = borderWidth ? borderWidth.replace('', 'border-') : '';
 
   if (borderWidth && parseInt(borderWidth, 10) > 0) {
-    boxStyle.borderStyle = 'solid';
+    boxBorderStyle = `border-${BorderStyles.SOLID}`;
     boxBorderRadius = borderRadius ? borderRadius.replace('', 'rounded-') : '';
     if (!borderColor) {
       boxBorderColor = `border-${BorderColors.BASIC}`;
@@ -77,7 +78,14 @@ export const useBoxStyleProps = (
     ...generateResponsiveUtilityClasses('py', paddingY),
   ];
 
-  const boxClasses = classNames(boxBackgroundColor, boxBorderColor, boxBorderRadius, boxBorderWidth, ...paddingClasses);
+  const boxClasses = classNames(
+    boxBackgroundColor,
+    boxBorderColor,
+    boxBorderRadius,
+    boxBorderWidth,
+    boxBorderStyle,
+    ...paddingClasses,
+  );
 
   return {
     classProps: boxClasses,

diff --git a/packages/web-react/src/constants/dictionaries.ts b/packages/web-react/src/constants/dictionaries.ts
@@ -55,6 +55,12 @@ export const BorderColors = {
   FOCUS: 'focus',
 } as const;
 
+export const BorderStyles = {
+  SOLID: 'solid',
+  DOTTED: 'dotted',
+  DASHED: 'dashed',
+} as const;
+
 export const EmotionColors = {
   SUCCESS: 'success',
   INFORMATIVE: 'informative',