Refactor/new menu item (#1448)

* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests

front/src/modules/ui/dropdown/components/DropdownMenuHeader.tsx

@@ -1,6 +1,9 @@
-import { ComponentProps, ReactElement } from 'react';
+import { ComponentProps } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
 const StyledHeader = styled.li`
   align-items: center;
   color: ${({ theme }) => theme.font.color.primary};
@@ -40,23 +43,31 @@ const StyledEndIconWrapper = styled(StyledStartIconWrapper)`
 `;
 
 type DropdownMenuHeaderProps = ComponentProps<'li'> & {
-  startIcon?: ReactElement;
-  endIcon?: ReactElement;
+  StartIcon?: IconComponent;
+  EndIcon?: IconComponent;
 };
 
 export function DropdownMenuHeader({
   children,
-  startIcon,
-  endIcon,
+  StartIcon,
+  EndIcon,
   ...props
 }: DropdownMenuHeaderProps) {
+  const theme = useTheme();
+
   return (
     <StyledHeader {...props}>
-      {startIcon && (
-        <StyledStartIconWrapper>{startIcon}</StyledStartIconWrapper>
+      {StartIcon && (
+        <StyledStartIconWrapper>
+          <StartIcon size={theme.icon.size.md} />
+        </StyledStartIconWrapper>
       )}
       {children}
-      {endIcon && <StyledEndIconWrapper>{endIcon}</StyledEndIconWrapper>}
+      {EndIcon && (
+        <StyledEndIconWrapper>
+          <EndIcon size={theme.icon.size.md} />
+        </StyledEndIconWrapper>
+      )}
     </StyledHeader>
   );
 }