Improve dot Component

Author: Kubit

src/components/dot/dot.tsx

@@ -28,7 +28,7 @@ const DotComponent = React.forwardRef(
       <DotStandAlone
         {...props}
         ref={ref}
-        formatedNumber={size !== 'SMALL' ? formattedNumber : undefined}
+        formatedNumber={formattedNumber}
         sizeStyles={sizeStyles}
         styles={styles}
       />

src/components/dot/dotStandAlone.tsx

@@ -4,7 +4,7 @@ import { DotStyled } from './dot.styled';
 import { IDotStandAlone } from './types/dot';
 
 const DotStandAloneComponent = (
-  { formatedNumber, sizeStyles, styles, dataTestId = 'dot', height, width }: IDotStandAlone,
+  { formatedNumber, label, sizeStyles, styles, dataTestId = 'dot', height, width }: IDotStandAlone,
   ref: React.ForwardedRef<HTMLSpanElement> | undefined | null
 ): JSX.Element => {
   return (
@@ -16,6 +16,7 @@ const DotStandAloneComponent = (
       sizeStyles={sizeStyles}
       styles={styles}
     >
+      {label}
       {formatedNumber}
     </DotStyled>
   );

src/components/dot/stories/dot.stories.tsx

@@ -30,6 +30,7 @@ export const Dot: Story = {
     variant: Object.values(variantsObject[themeSelected].DotVariantType || {})[0] as string,
     size: Object.values(variantsObject[themeSelected].DotSizeType || {})[0] as string,
     number: 2,
+    label: 'label',
     themeArgs: themesObject[themeSelected][STYLES_NAME.DOT],
   },
 };

src/components/dot/types/dot.ts

@@ -25,6 +25,7 @@ export interface IDotStandAlone {
   formatedNumber?: number | string;
   width?: string;
   height?: string;
+  label?: string;
   dataTestId?: string;
 }