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/input/button/components/FloatingButtonGroup.tsx

@@ -13,13 +13,15 @@ const StyledFloatingButtonGroupContainer = styled.div`
 
 export type FloatingButtonGroupProps = Pick<FloatingButtonProps, 'size'> & {
   children: React.ReactElement[];
+  className?: string;
 };
 
 export const FloatingButtonGroup = ({
   children,
   size,
+  className,
 }: FloatingButtonGroupProps) => (
-  <StyledFloatingButtonGroupContainer>
+  <StyledFloatingButtonGroupContainer className={className}>
     {React.Children.map(children, (child, index) => {
       let position: FloatingButtonPosition;
 

front/src/modules/ui/input/button/components/IconButtonGroup.tsx

@@ -18,6 +18,7 @@ export type IconButtonGroupProps = Pick<
     Icon: IconComponent;
     onClick?: (event: MouseEvent<any>) => void;
   }[];
+  className?: string;
 };
 
 export const IconButtonGroup = ({
@@ -25,8 +26,9 @@ export const IconButtonGroup = ({
   iconButtons,
   size,
   variant,
+  className,
 }: IconButtonGroupProps) => (
-  <StyledIconButtonGroupContainer>
+  <StyledIconButtonGroupContainer className={className}>
     {iconButtons.map(({ Icon, onClick }, index) => {
       const position: IconButtonPosition =
         index === 0

front/src/modules/ui/input/button/components/MainButton.tsx

@@ -106,10 +106,14 @@ export const MainButton = ({
   type,
   onClick,
   disabled,
+  className,
 }: MainButtonProps) => {
   const theme = useTheme();
   return (
-    <StyledButton {...{ disabled, fullWidth, onClick, type, variant }}>
+    <StyledButton
+      className={className}
+      {...{ disabled, fullWidth, onClick, type, variant }}
+    >
       {Icon && <Icon size={theme.icon.size.sm} />}
       {title}
     </StyledButton>

front/src/modules/ui/input/button/components/RoundedIconButton.tsx

@@ -37,11 +37,12 @@ export const RoundedIconButton = ({
   Icon,
   onClick,
   disabled,
+  className,
 }: RoundedIconButtonProps) => {
   const theme = useTheme();
 
   return (
-    <StyledIconButton {...{ disabled, onClick }}>
+    <StyledIconButton className={className} {...{ disabled, onClick }}>
       {<Icon size={theme.icon.size.md} />}
     </StyledIconButton>
   );