Add disable state to IconHighlighted component

Author: Kubit

src/components/iconHighlighted/__tests__/iconHighlighted.test.tsx

@@ -37,6 +37,20 @@ describe('IconHighlighted Component', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('Should render IconHighlighted with decorative icon and disabled=true', async () => {
+    const { getByRole, container } = renderProvider(
+      <IconHighlighted {...mockPropsInformative} disabled={true} />
+    );
+
+    const iconHighlighted = getByRole('img', { name: 'icon label', hidden: false });
+
+    expect(iconHighlighted).toBeDefined();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
   it('Should render IconHighlighted with informative icon', async () => {
     const { getByRole, container } = renderProvider(<IconHighlighted {...mockPropsDecorative} />);
 

src/components/iconHighlighted/iconHighlighted.styled.ts

@@ -7,11 +7,15 @@ import { IconHighlightedSizePropsType } from './types';
 type IconHighlightedStyledType = {
   styles?: IconHighlightedSizePropsType;
   backgroundColor?: string;
+  disabled?: boolean;
 };
 export const IconHighlightedContainerStyled = styled.span<IconHighlightedStyledType>`
   display: flex;
   justify-content: center;
   align-items: center;
+  ${props =>
+    props.disabled
+      ? getStyles(props.styles?.container?.disabled)
+      : getStyles(props.styles?.container)}
   background-color: ${({ backgroundColor }) => backgroundColor};
-  ${props => getStyles(props.styles?.container)}
 `;

src/components/iconHighlighted/iconHighlightedStandAlone.tsx

@@ -7,20 +7,23 @@ import { IIconHighlightedStandAlone } from './types/iconHighlighted';
 import { IconHighlightedType } from './types/type';
 
 const IconHighlightedStandAloneComponent = (
-  { ...props }: IIconHighlightedStandAlone,
+  { disabled = false, ...props }: IIconHighlightedStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
   return (
     <IconHighlightedContainerStyled
       ref={ref}
       backgroundColor={props.backgroundColor}
       data-testid={props.dataTestId}
+      disabled={disabled}
       styles={props.styles[props.size]}
     >
       <ElementOrIcon
         altText={props.type === IconHighlightedType.INFORMATIVE ? props.altText : undefined}
         color={props.color}
-        customIconStyles={props.styles[props.size]?.icon}
+        customIconStyles={
+          !disabled ? props.styles[props.size]?.icon : props.styles[props.size]?.icon?.disabled
+        }
         icon={props.icon}
       />
     </IconHighlightedContainerStyled>

src/components/iconHighlighted/stories/argtypes.ts

@@ -96,6 +96,18 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    disabled: {
+      description: 'Specifies if the IconHighlighted element is disabled or not',
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: false },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     dataTestId: {
       description: 'String used for testing',
       control: { type: 'text' },

src/components/iconHighlighted/types/iconHighlighted.ts

@@ -8,6 +8,7 @@ import { IconHighlightedType } from './type';
 export interface IIconHighlightedStyled {
   styles: IconHighlightedVariantStylesType;
   backgroundColor?: string;
+  disabled?: boolean;
 }
 
 export interface IIconHighlightedStandAlone extends IElementOrIcon, IIconHighlightedStyled {

src/components/iconHighlighted/types/iconHighlightedTheme.ts

@@ -3,8 +3,12 @@ import { CommonStyleType, IconTypes } from '@/types';
 import { IconHighlightedSizeType } from './size';
 
 export type IconHighlightedSizePropsType = {
-  container?: CommonStyleType;
-  icon?: IconTypes;
+  container?: CommonStyleType & {
+    disabled?: CommonStyleType;
+  };
+  icon?: IconTypes & {
+    disabled?: IconTypes;
+  };
 };
 
 export type IconHighlightedVariantStylesType = {