Added Width and Height Props to Dot

Properties for width and height have been introduced to the Dot component, allowing users to specify custom dimensions for this element. This enhancement makes it easier to adapt the Dot component to various design contexts, offering increased flexibility in its implementation. The properties accept numerical values, which define the width and height of the Dot in pixels.

Author: Hector Arce De Las Heras

src/components/dot/dot.styled.ts

@@ -16,4 +16,6 @@ export const DotStyled = styled.span<IDotStyled>`
   ${props => getMeasuresStyles(props.sizeStyles.container)}
   ${props => getTypographyStyles(props.sizeStyles.container)}
   ${props => getTypographyStyles(props.styles.container)}
+  width: ${props => props.$width};
+  height: ${props => props.$height};
 `;

src/components/dot/dotStandAlone.tsx

@@ -4,11 +4,25 @@ import { DotStyled } from './dot.styled';
 import { IDotStandAlone } from './types/dot';
 
 const DotStandAloneComponent = (
-  { formatedNumber, sizeStyles, styles, dataTestId = 'dot-standalone-test-id' }: IDotStandAlone,
+  {
+    formatedNumber,
+    sizeStyles,
+    styles,
+    dataTestId = 'dot-standalone-test-id',
+    height,
+    width,
+  }: IDotStandAlone,
   ref: React.ForwardedRef<HTMLSpanElement> | undefined | null
 ): JSX.Element => {
   return (
-    <DotStyled ref={ref} data-testid={dataTestId} sizeStyles={sizeStyles} styles={styles}>
+    <DotStyled
+      ref={ref}
+      $height={height}
+      $width={width}
+      data-testid={dataTestId}
+      sizeStyles={sizeStyles}
+      styles={styles}
+    >
       {formatedNumber}
     </DotStyled>
   );

src/components/dot/stories/argtypes.ts

@@ -57,6 +57,28 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    width: {
+      control: { type: 'text' },
+      type: { name: 'string' },
+      description: 'Add width to the dot',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    height: {
+      control: { type: 'text' },
+      type: { name: 'string' },
+      description: 'Add height to the dot',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     dataTestId: {
       control: { type: 'text' },
       type: { name: 'string' },

src/components/dot/types/dot.ts

@@ -10,6 +10,8 @@ import { DotSizePropsType, DotVariantStylesType } from './dotTheme';
 export interface IDotStyled {
   styles: DotVariantStylesType;
   sizeStyles: DotSizePropsType;
+  $width?: string;
+  $height?: string;
 }
 
 /**
@@ -21,6 +23,8 @@ export interface IDotStandAlone {
   styles: DotVariantStylesType;
   sizeStyles: DotSizePropsType;
   formatedNumber?: number | string;
+  width?: string;
+  height?: string;
   dataTestId?: string;
 }