@groupeactual/ui-kit 1.7.9 → 2.0.0-beta.0

package/src/components/Link/Link.tsx

@@ -1,18 +1,14 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
-import { LinkStyle } from '@groupeactual/design-tokens';
-import { Link as LinkMui, LinkProps, styled, useTheme } from '@mui/material';
+import { Link as LinkMui, LinkProps } from '@mui/material';
 
 interface Props extends Omit<LinkProps, 'variant'> {
   variant?: 'link1' | 'link2';
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  component?: any;
 }
 
-const Link = (props: Props) => {
-  const theme = useTheme();
-  const StyledLink = useMemo(() => styled(LinkMui)(LinkStyle(theme)), [theme]);
-  return <StyledLink {...(props as LinkProps)} />;
-};
+const Link = React.forwardRef<HTMLAnchorElement, Props>(({ ...props }, ref) => {
+  return <LinkMui ref={ref} {...(props as LinkProps)} data-testid="ds-link" />;
+});
 
+Link.displayName = 'Link';
 export default Link;

package/src/components/MenuItem/MenuItem.tsx

@@ -1,36 +1,48 @@
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactNode } from 'react';
 
-import { MenuItemStyle } from '@groupeactual/design-tokens';
 import {
   MenuItem as MenuItemMUI,
   MenuItemProps,
-  styled,
   useTheme,
 } from '@mui/material';
 
 interface Props extends Omit<MenuItemProps, 'onClick'> {
-  onClick: (_event?: React.MouseEvent<HTMLElement>) => void;
+  onClick?: (_event?: React.MouseEvent<HTMLLIElement>) => void;
+  selected?: boolean;
   children: NonNullable<ReactNode>;
-  testId?: string;
-  disabled?: boolean;
 }
 
-const MenuItem = ({ onClick, children, testId, disabled, ...props }: Props) => {
-  const theme = useTheme();
-  const StyledMenuItem = useMemo(
-    () => styled(MenuItemMUI)(MenuItemStyle(theme)),
-    [theme],
-  );
-  return (
-    <StyledMenuItem
-      {...props}
-      disabled={disabled}
-      onClick={(e) => onClick(e)}
-      data-testid={testId}
-    >
-      {children}
-    </StyledMenuItem>
-  );
-};
+const MenuItem = React.forwardRef<HTMLLIElement, Props>(
+  ({ onClick, selected, children, ...props }, ref) => {
+    const { palette } = useTheme();
+
+    return (
+      <MenuItemMUI
+        {...props}
+        sx={
+          selected
+            ? {
+                backgroundColor: palette?.background?.grey + ' !important',
+                '.MuiTypography-root': {
+                  fontWeight: 500,
+                },
+                '.itemIcon': {
+                  color: palette?.blueHoverClickable + ' !important',
+                },
+              }
+            : {}
+        }
+        onClick={onClick}
+        ref={ref}
+        selected={selected}
+        data-testid="ds-menu-item"
+      >
+        {children}
+      </MenuItemMUI>
+    );
+  },
+);
+
+MenuItem.displayName = 'MenuItem';
 
 export default MenuItem;

package/src/components/Modal/Dialog/Dialog.tsx

@@ -53,7 +53,7 @@ const BootstrapDialogTitle = <T extends OverridableTypeMap>({
         justifyContent: 'space-between',
         alignItems: 'center',
       }}
-      variant={'header3' as 'h3'}
+      variant="h3"
       {...props}
     >
       <Box
@@ -69,7 +69,7 @@ const BootstrapDialogTitle = <T extends OverridableTypeMap>({
         aria-label="close"
         data-testid="close-button"
         onClick={() => onClose?.()}
-        variant="table"
+        variant="plain"
         size="medium"
         icon={faClose}
       />
@@ -77,27 +77,30 @@ const BootstrapDialogTitle = <T extends OverridableTypeMap>({
   );
 };
 
-const Dialog = ({
-  title,
-  open,
-  onClose,
-  children,
-  icon,
-  ...props
-}: Omit<ModalProps, 'footer' | 'cardProps' | 'size' | 'component'>) => {
+const Dialog = React.forwardRef<
+  HTMLDivElement,
+  Omit<ModalProps, 'footer' | 'cardProps' | 'size' | 'component'>
+>(({ title, open, onClose, children, icon, ...props }, ref) => {
   return (
     <BootstrapDialog
+      ref={ref}
       onClose={() => onClose?.()}
       open={open}
       {...props}
-      data-testid="dialog"
+      data-testid="ds-dialog"
     >
-      <BootstrapDialogTitle icon={icon} onClose={() => onClose?.()}>
+      <BootstrapDialogTitle
+        icon={icon}
+        onClose={() => onClose?.()}
+        data-testid="ds-dialog-title"
+      >
         {title && <Text variant="h3">{title}</Text>}
       </BootstrapDialogTitle>
-      <DialogContent>{children}</DialogContent>
+      <DialogContent data-testid="ds-dialog-content">{children}</DialogContent>
     </BootstrapDialog>
   );
-};
+});
+
+Dialog.displayName = 'Dialog';
 
 export default Dialog;

package/src/components/Modal/Drawer/Drawer.tsx

@@ -10,78 +10,106 @@ import {
 } from '@mui/material';
 
 import IconButton from '@/components/IconButton';
-import { ModalProps } from '@/components/Modal/modal.interface';
+import { DrawerProps } from '@/components/Modal/modal.interface';
+import Text from '@/components/Text';
 
-const Drawer = ({
-  title,
-  open,
-  onClose,
-  component,
-  footer,
-  cardProps,
-  size = 'small',
-  ...props
-}: Omit<ModalProps, 'withHeaderDivider' | 'icon'>) => {
-  return (
-    <DrawerMUI
-      anchor="right"
-      open={open}
-      onClose={() => onClose?.()}
-      data-testid="drawer"
-      {...props}
-      sx={{
-        '.MuiCardHeader-root': {
-          padding: '24px 24px 0 24px',
-          color: 'greyXDark',
-          '.MuiCardHeader-action': {
-            margin: '0',
-          },
-        },
-        '.MuiCardContent-root': {
-          padding: '10px 24px 24px 24px',
-          color: 'greyXDark',
-        },
-      }}
-    >
-      <Card
-        elevation={0}
-        {...cardProps}
+const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
+  (
+    {
+      title,
+      open,
+      hideCloseButton,
+      titleLeftComponent,
+      footer,
+      cardProps,
+      size = 'small',
+      children,
+      onClose,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <DrawerMUI
+        ref={ref}
+        anchor="right"
+        open={open}
+        onClose={() => onClose?.()}
+        data-testid="ds-drawer"
+        {...props}
         sx={{
-          height: '100%',
-          width: size === 'large' ? 980 : 608,
-          overflowY: 'scroll',
-          ...cardProps?.sx,
+          '.MuiCardHeader-root': {
+            padding: '24px 24px 0 24px',
+            color: 'greyXDark',
+            '.MuiCardHeader-action': {
+              margin: '0',
+            },
+          },
+          '.MuiCardContent-root': {
+            padding: '10px 24px 24px 24px',
+            color: 'greyXDark',
+          },
+          '.MuiButton-outlinedPrimary': {
+            backgroundColor: 'white',
+          },
         }}
       >
-        <CardHeader
-          action={
-            <IconButton
-              aria-label="close"
-              data-testid="close-button"
-              onClick={() => onClose?.()}
-              variant="table"
-              size="medium"
-              icon={faClose}
-            />
-          }
-          title={
-            title ? (
-              <Box display="flex">
-                <Box mt="2px">{title}</Box>
-              </Box>
-            ) : (
-              ''
-            )
-          }
-          subheader=""
-        />
-        <CardContent>
-          <Box pb={footer ? '94px !important' : 0}>{component}</Box>
-        </CardContent>
-        {footer}
-      </Card>
-    </DrawerMUI>
-  );
-};
+        <Card
+          elevation={0}
+          {...cardProps}
+          sx={{
+            height: '100%',
+            width: size === 'large' ? 980 : 608,
+            overflowY: 'scroll',
+            ...cardProps?.sx,
+          }}
+          data-testid="ds-drawer-card"
+        >
+          <CardHeader
+            action={
+              !hideCloseButton ? (
+                <IconButton
+                  aria-label="close"
+                  data-testid="ds-close-button"
+                  onClick={() => onClose?.()}
+                  variant="plain"
+                  size="medium"
+                  icon={faClose}
+                />
+              ) : null
+            }
+            title={
+              title ? (
+                <Box display="flex" data-testid="ds-drawer-title">
+                  <Box
+                    mt="2px"
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    {titleLeftComponent}
+                    <Text variant="h3">{title}</Text>
+                  </Box>
+                </Box>
+              ) : (
+                ''
+              )
+            }
+            subheader=""
+          />
+          <CardContent data-testid="ds-drawer-content">
+            <Box pb={footer ? '94px !important' : 0}>{children}</Box>
+          </CardContent>
+          {footer}
+        </Card>
+      </DrawerMUI>
+    );
+  },
+);
+
+Drawer.displayName = 'Drawer';
 
 export default Drawer;

package/src/components/Modal/modal.interface.ts

@@ -17,13 +17,16 @@ export interface ModalProps
   open: boolean;
   title?: string;
   size?: 'small' | 'large';
-  component: ReactNode | null;
   footer?: ReactNode | null;
   cardProps?: Partial<CardProps>;
   className?: string;
   icon?: IconDefinition;
   onClose?: () => void;
 }
+export interface DrawerProps extends Omit<ModalProps, 'icon'> {
+  titleLeftComponent?: ReactNode;
+  hideCloseButton?: boolean;
+}
 
 export type DialogTitleProps<T extends OverridableTypeMap> =
   DefaultComponentProps<T> & {

package/src/components/Navigation/Stepper/Step.tsx

@@ -21,7 +21,7 @@ export const StepComponent = ({
 }) => {
   const percent = stepperItemsToPercent(items);
   const isFullyValidated = percent === 100;
-  const { palette, spacing } = useTheme();
+  const { palette } = useTheme();
   const isNavigeable = canNavigate && link && !isActive;
 
   return (
@@ -33,9 +33,9 @@ export const StepComponent = ({
           (isActive && {
             content: "' '",
             position: 'absolute',
-            left: spacing(4.25),
-            top: spacing(5.5),
-            bottom: spacing(1.25),
+            left: '25px',
+            top: '40px',
+            bottom: '20px',
             height: 'auto',
             width: '1px',
             background: palette.greyLightDefaultBorder,
@@ -50,6 +50,7 @@ export const StepComponent = ({
         sx={{
           px: 2,
           py: 1,
+          mb: 4,
           cursor: (isNavigeable && 'pointer') || 'inherit',
           borderRight:
             (isActive && `4px solid ${palette.blueClickable as string}`) || '',
@@ -82,7 +83,7 @@ export const StepComponent = ({
         <Stack>
           {items.map(({ label, isValid }) => {
             return (
-              <Stack direction="row" key={label} mb={1}>
+              <Stack direction="row" key={label} sx={{ mb: 2, ml: 1 }}>
                 <IconProvider
                   icon={(isValid && faCheckCircle) || faDotCircle}
                   mr={2.25}
@@ -97,7 +98,7 @@ export const StepComponent = ({
                   }}
                 />
                 <Text
-                  variant={(isValid && 'body1Medium') || 'body1Regular'}
+                  variant={(isValid && 'body1Medium') || 'body1'}
                   color={(isValid && palette.greyXDark) || palette.greyDark}
                 >
                   {label}

package/src/components/Navigation/Stepper/Stepper.tsx

@@ -12,29 +12,30 @@ interface Props {
   onNavigate?: (_url: string) => void;
   sx?: SxProps<Theme>;
 }
-const Stepper = ({
-  steps,
-  canNavigate,
-  onNavigate = () => null,
-  sx = {},
-}: Props) => {
-  const isCurrentStepCompleted =
-    stepperItemsToPercent(
-      steps.find(({ isActive }) => isActive)?.items ?? [],
-    ) === 100;
 
-  return (
-    <Box gap={2} sx={sx}>
-      {steps.map((step) => (
-        <StepComponent
-          step={step}
-          key={step.label}
-          canNavigate={canNavigate && isCurrentStepCompleted}
-          onNavigate={onNavigate}
-        />
-      ))}
-    </Box>
-  );
-};
+const Stepper = React.forwardRef<HTMLDivElement, Props>(
+  ({ steps, canNavigate, onNavigate = () => null, sx = {} }, ref) => {
+    const isCurrentStepCompleted =
+      stepperItemsToPercent(
+        steps.find(({ isActive }) => isActive)?.items ?? [],
+      ) === 100;
+
+    return (
+      <Box gap={2} sx={sx} ref={ref} data-testid="ds-stepper-container">
+        {steps.map((step) => (
+          <StepComponent
+            step={step}
+            key={step.label}
+            canNavigate={canNavigate && isCurrentStepCompleted}
+            onNavigate={onNavigate}
+            data-testid={`ds-step-${step.label}`}
+          />
+        ))}
+      </Box>
+    );
+  },
+);
+
+Stepper.displayName = 'Stepper';
 
 export default Stepper;

package/src/components/NotistackAdapter/NotistackAdapter.tsx

@@ -10,7 +10,7 @@ const NotistackAdapter = forwardRef<HTMLDivElement, CustomContentProps>(
       return <></>;
     }
     return (
-      <SnackbarContent ref={ref}>
+      <SnackbarContent ref={ref} data-testid="ds-notistack-adapter">
         <Snackbar text={message} severity={variant} />
       </SnackbarContent>
     );