Improve iconHost and iconHighleted

Author: Kubit

src/components/elementOrIllustration/elementOrIllustration.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { IllustrationBasic as Illustration } from '../illustration/illustration';
+import { IllustrationHost as Illustration } from '../illustration/illustrationHost';
 import { IElementOrillustration } from './types/elementOrIllustration';
 
 const ElementOrIllustrationComponent = (

src/components/icon/iconHost.tsx

@@ -52,11 +52,4 @@ const IconHostComponent = (
   );
 };
 
-/**
- * @deprecated This component has been deprecated and will be removed in the next MAJOR release.
- *
- * IconHost is a component that serves as a host for icons.
- * @param {React.PropsWithChildren<IIconHost>} props
- * @returns {JSX.Element}
- */
 export const IconHost = React.forwardRef(IconHostComponent);

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

@@ -62,4 +62,18 @@ describe('IconHighlighted Component', () => {
     expect(container).toHTMLValidate();
     expect(results).toHaveNoViolations();
   });
+
+  it('Should render IconHighlighted with custom content', async () => {
+    const { getByText, container } = renderProvider(
+      <IconHighlighted {...mockPropsDecorative} customContent={'customContent'} />
+    );
+
+    const customContent = getByText('customContent');
+
+    expect(customContent).toBeDefined();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
 });

src/components/iconHighlighted/iconHighlighted.styled.ts

@@ -1,21 +1,34 @@
 import styled from 'styled-components';
 
-import { getStyles } from '@/utils/getStyles/getStyles';
+import { getStyles, getTypographyStyles } from '@/utils/getStyles/getStyles';
 
 import { IconHighlightedSizePropsType } from './types/iconHighlightedTheme';
 
 type IconHighlightedStyledType = {
   styles?: IconHighlightedSizePropsType;
   backgroundColor?: string;
   disabled?: boolean;
+  selected?: boolean;
 };
+export const ParentContainerStyled = styled.span<IconHighlightedStyledType>`
+  ${props => getStyles(props.styles?.parentContainer)}
+`;
+
 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)}
+  ${props => getStyles(props.styles?.container)}
+  ${props => props.selected && getStyles(props.styles?.container?.selected)}
+  ${props => props.disabled && getStyles(props.styles?.container?.disabled)}
   background-color: ${({ backgroundColor }) => backgroundColor};
 `;
+
+export const CustomContentContainerStyled = styled.span<IconHighlightedStyledType>`
+  ${props => getStyles(props.styles?.customContentContainer)}
+  ${props => getTypographyStyles(props.styles?.customContentContainer)}
+  ${props => props.selected && getStyles(props.styles?.customContentContainer?.selected)}
+  ${props => props.selected && getTypographyStyles(props.styles?.customContentContainer?.selected)}
+  ${props => props.disabled && getStyles(props.styles?.customContentContainer?.disabled)}
+  ${props => props.disabled && getTypographyStyles(props.styles?.customContentContainer?.disabled)}
+`;

src/components/iconHighlighted/iconHighlightedStandAlone.tsx

@@ -1,31 +1,50 @@
 import React from 'react';
 
 import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
-import { IconHighlightedContainerStyled } from './iconHighlighted.styled';
+import {
+  CustomContentContainerStyled,
+  IconHighlightedContainerStyled,
+  ParentContainerStyled,
+} from './iconHighlighted.styled';
 import { IIconHighlightedStandAlone } from './types/iconHighlighted';
 import { IconHighlightedType } from './types/type';
 
 const IconHighlightedStandAloneComponent = (
-  { disabled = false, dataTestId = 'icon-highlighted', ...props }: IIconHighlightedStandAlone,
+  {
+    disabled = false,
+    selected = false,
+    dataTestId = 'icon-highlighted',
+    ...props
+  }: IIconHighlightedStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
   return (
-    <IconHighlightedContainerStyled
-      ref={ref}
-      backgroundColor={props.backgroundColor}
-      data-testid={dataTestId}
-      disabled={disabled}
-      styles={props.styles[props.size]}
-    >
-      <ElementOrIcon
-        altText={props.type === IconHighlightedType.INFORMATIVE ? props.altText : undefined}
-        color={props.color}
-        customIconStyles={
-          !disabled ? props.styles[props.size]?.icon : props.styles[props.size]?.icon?.disabled
-        }
-        icon={props.icon}
-      />
-    </IconHighlightedContainerStyled>
+    <ParentContainerStyled ref={ref} data-testid={dataTestId} styles={props.styles[props.size]}>
+      <IconHighlightedContainerStyled
+        backgroundColor={props.backgroundColor}
+        disabled={disabled}
+        selected={selected}
+        styles={props.styles[props.size]}
+      >
+        <ElementOrIcon
+          altText={props.type === IconHighlightedType.INFORMATIVE ? props.altText : undefined}
+          color={props.color}
+          customIconStyles={
+            !disabled ? props.styles[props.size]?.icon : props.styles[props.size]?.icon?.disabled
+          }
+          icon={props.icon}
+        />
+      </IconHighlightedContainerStyled>
+      {props.customContent && (
+        <CustomContentContainerStyled
+          disabled={disabled}
+          selected={selected}
+          styles={props.styles[props.size]}
+        >
+          {props.customContent}
+        </CustomContentContainerStyled>
+      )}
+    </ParentContainerStyled>
   );
 };
 

src/components/iconHighlighted/stories/argtypes.ts

@@ -109,6 +109,18 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    selected: {
+      description: 'Applies selected styles',
+      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

@@ -9,11 +9,13 @@ export interface IIconHighlightedStyled {
   styles: IconHighlightedVariantStylesType;
   backgroundColor?: string;
   disabled?: boolean;
+  selected?: boolean;
 }
 
 export interface IIconHighlightedStandAlone extends IElementOrIcon, IIconHighlightedStyled {
   size: IconHighlightedSizeType;
   type?: IconHighlightedType;
+  customContent?: React.ReactNode;
 }
 
 export interface IIconHighlighted<V = undefined extends string ? unknown : string>

src/components/iconHighlighted/types/iconHighlightedTheme.ts

@@ -1,15 +1,23 @@
 import { CommonStyleType } from '@/types/styles/commonStyle';
 import { IconTypes } from '@/types/styles/icon';
+import { TypographyTypes } from '@/types/styles/typography';
 
 import { IconHighlightedSizeType } from './size';
 
 export type IconHighlightedSizePropsType = {
+  parentContainer?: CommonStyleType;
   container?: CommonStyleType & {
     disabled?: CommonStyleType;
+    selected?: CommonStyleType;
   };
   icon?: IconTypes & {
     disabled?: IconTypes;
   };
+  customContentContainer?: CommonStyleType &
+    TypographyTypes & {
+      disabled?: CommonStyleType & TypographyTypes;
+      selected?: CommonStyleType & TypographyTypes;
+    };
 };
 
 export type IconHighlightedVariantStylesType = {