feat: Adding className as a prop (#2847)

* Adding className as a prop to use emotion

* Adding className to feedback and input components

front/src/modules/ui/display/checkmark/components/Checkmark.tsx

@@ -14,13 +14,15 @@ const StyledContainer = styled.div`
   width: 20px;
 `;
 
-export type CheckmarkProps = React.ComponentPropsWithoutRef<'div'>;
+export type CheckmarkProps = React.ComponentPropsWithoutRef<'div'> & {
+  className?: string;
+};
 
-export const Checkmark = (_props: CheckmarkProps) => {
+export const Checkmark = ({ className }: CheckmarkProps) => {
   const theme = useTheme();
 
   return (
-    <StyledContainer>
+    <StyledContainer className={className}>
       <IconCheck color={theme.grayScale.gray0} size={14} />
     </StyledContainer>
   );

front/src/modules/ui/display/chip/components/EntityChip.tsx

@@ -16,6 +16,7 @@ export type EntityChipProps = {
   avatarType?: AvatarType;
   variant?: EntityChipVariant;
   LeftIcon?: IconComponent;
+  className?: string;
 };
 
 export enum EntityChipVariant {
@@ -31,6 +32,7 @@ export const EntityChip = ({
   avatarType = 'rounded',
   variant = EntityChipVariant.Regular,
   LeftIcon,
+  className,
 }: EntityChipProps) => {
   const navigate = useNavigate();
 
@@ -69,6 +71,7 @@ export const EntityChip = ({
       }
       clickable={!!linkToEntity}
       onClick={handleLinkClick}
+      className={className}
     />
   ) : (
     <></>

front/src/modules/ui/display/tooltip/OverflowingTextWithTooltip.tsx

@@ -21,8 +21,10 @@ const StyledOverflowingText = styled.div<{ cursorPointer: boolean }>`
 
 export const OverflowingTextWithTooltip = ({
   text,
+  className,
 }: {
   text: string | null | undefined;
+  className?: string;
 }) => {
   const textElementId = `title-id-${uuidV4()}`;
 
@@ -51,6 +53,7 @@ export const OverflowingTextWithTooltip = ({
     <>
       <StyledOverflowingText
         data-testid="tooltip"
+        className={className}
         ref={textRef}
         id={textElementId}
         cursorPointer={isTitleOverflowing}

front/src/modules/ui/display/typography/components/H2Title.tsx

@@ -4,6 +4,7 @@ type H2TitleProps = {
   title: string;
   description?: string;
   addornment?: React.ReactNode;
+  className?: string;
 };
 
 const StyledContainer = styled.div`
@@ -33,8 +34,13 @@ const StyledDescription = styled.h3`
   margin-top: ${({ theme }) => theme.spacing(3)};
 `;
 
-export const H2Title = ({ title, description, addornment }: H2TitleProps) => (
-  <StyledContainer>
+export const H2Title = ({
+  title,
+  description,
+  addornment,
+  className,
+}: H2TitleProps) => (
+  <StyledContainer className={className}>
     <StyledTitleContainer>
       <StyledTitle>{title}</StyledTitle>
       {addornment}