feat: Icon - add support for dataTestId, rotateBy and fillSpace props

Author: RohitRaj011

src/Shared/Components/Icon/IconBase.tsx

@@ -28,7 +28,16 @@ const conditionalWrap = (tooltipProps: IconBaseProps['tooltipProps']) => (childr
     </Tooltip>
 )
 
-export const IconBase = ({ name, iconMap, size = 16, tooltipProps, color }: IconBaseProps) => {
+export const IconBase = ({
+    name,
+    iconMap,
+    size = 16,
+    tooltipProps,
+    color,
+    dataTestId,
+    rotateBy,
+    fillSpace = false,
+}: IconBaseProps) => {
     const IconComponent = iconMap[name]
 
     if (!IconComponent) {
@@ -38,12 +47,14 @@ export const IconBase = ({ name, iconMap, size = 16, tooltipProps, color }: Icon
     return (
         <ConditionalWrap condition={!!tooltipProps?.content} wrap={conditionalWrap(tooltipProps)}>
             <IconComponent
-                className={`${size ? `icon-dim-${size}` : ''} ${color ? 'icon-component-color' : ''} ${ICON_STROKE_WIDTH_MAP[size] ? 'icon-component-stroke-width' : ''} dc__no-shrink`}
+                data-testid={dataTestId}
+                className={`${size ? `icon-dim-${size}` : ''} ${color ? 'icon-component-color' : ''} ${ICON_STROKE_WIDTH_MAP[size] ? 'icon-component-stroke-width' : ''} ${rotateBy ? 'rotate' : ''} ${fillSpace ? 'dc__fill-available-space' : ''} dc__no-shrink`}
                 style={{
                     ...(color ? { ['--iconColor' as string]: `var(--${color})` } : {}),
                     ...(ICON_STROKE_WIDTH_MAP[size]
                         ? { ['--strokeWidth' as string]: ICON_STROKE_WIDTH_MAP[size] }
                         : {}),
+                    ...(rotateBy ? { ['--rotateBy' as string]: `${rotateBy}deg` } : {}),
                 }}
             />
         </ConditionalWrap>

src/Shared/Components/Icon/types.ts

@@ -22,21 +22,43 @@ import { IconBaseColorType, IconBaseSizeType } from '@Shared/index'
 type IconMap = Record<string, FC<SVGProps<SVGSVGElement>>>
 
 export interface IconBaseProps {
-    /** The name of the icon to render. */
+    /**
+     * The name of the icon to render.
+     */
     name: keyof IconMap
-    /** The map containing all available icons. */
+    /**
+     * A map containing all available icons.
+     */
     iconMap: IconMap
     /**
-     * The size of the icon in pixels.
+     * The size of the icon in pixels. If not provided, the default size is `16px`.
+     *
      * @default 16
      */
     size?: IconBaseSizeType | null
-    /** Props to configure the tooltip when hovering over the icon. */
+    /**
+     * Configuration for the tooltip displayed when hovering over the icon.
+     */
     tooltipProps?: TooltipProps
     /**
-     * The color of the icon (color tokens). \
-     * If `null`, the default color present in icon is used.
-     * @example `'B500'`, `'N200'`, `'G50'`, `'R700'`
+     * The color of the icon, specified using predefined color tokens.
+     * If set to `null`, the icon's default color will be used.
+     *
+     * @example 'B500', 'N200', 'G50', 'R700'
      */
     color: IconBaseColorType
+    /**
+     * A unique identifier for testing purposes, typically used in test automation.
+     */
+    dataTestId?: string
+    /**
+     * Rotates the icon by the specified number of degrees.
+     *
+     * @example 90, 180, 270
+     */
+    rotateBy?: number
+    /**
+     * If true, the icon will expand to fill the available space of its container.
+     */
+    fillSpace?: boolean
 }