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/menu-item/components/MenuItemSelect.tsx

@@ -7,8 +7,12 @@ import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
 
-const StyledMenuItemSelect = styled(StyledMenuItemBase)<{ selected: boolean }>`
-  ${({ theme, selected }) => {
+export const StyledMenuItemSelect = styled(StyledMenuItemBase)<{
+  selected: boolean;
+  disabled?: boolean;
+  hovered?: boolean;
+}>`
+  ${({ theme, selected, disabled, hovered }) => {
     if (selected) {
       return css`
         background: ${theme.background.transparent.light};
@@ -16,16 +20,33 @@ const StyledMenuItemSelect = styled(StyledMenuItemBase)<{ selected: boolean }>`
           background: ${theme.background.transparent.medium};
         }
       `;
+    } else if (disabled) {
+      return css`
+        background: inherit;
+        &:hover {
+          background: inherit;
+        }
+
+        color: ${theme.font.color.tertiary};
+
+        cursor: default;
+      `;
+    } else if (hovered) {
+      return css`
+        background: ${theme.background.transparent.light};
+      `;
     }
   }}
 `;
 
 type OwnProps = {
-  LeftIcon?: IconComponent;
+  LeftIcon: IconComponent | null | undefined;
   selected: boolean;
   text: string;
-  className: string;
+  className?: string;
   onClick?: () => void;
+  disabled?: boolean;
+  hovered?: boolean;
 };
 
 export function MenuItemSelect({
@@ -34,6 +55,8 @@ export function MenuItemSelect({
   selected,
   className,
   onClick,
+  disabled,
+  hovered,
 }: OwnProps) {
   const theme = useTheme();
 
@@ -42,6 +65,8 @@ export function MenuItemSelect({
       onClick={onClick}
       className={className}
       selected={selected}
+      disabled={disabled}
+      hovered={hovered}
     >
       <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
       {selected && <IconCheck size={theme.icon.size.sm} />}