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

package/src/components/Chip/Chip.tsx

@@ -1,17 +1,10 @@
-import React, { MouseEvent, useMemo, useRef, useState } from 'react';
+import React, { MouseEvent, useState } from 'react';
 
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { ChipStyle } from '@groupeactual/design-tokens';
-import {
-  Box,
-  Chip as ChipMUI,
-  ChipProps as ChipPropsMUI,
-  Tooltip,
-  styled,
-  useTheme,
-} from '@mui/material';
+import { Box, Chip as ChipMUI, ChipProps as ChipPropsMUI } from '@mui/material';
 
 import IconProvider from '@/components/IconProvider';
+import Tooltip from '@/components/Tooltip';
 
 interface Props
   extends Omit<
@@ -29,120 +22,98 @@ interface Props
   maxLength?: number;
 }
 
-const Chip = ({
-  variant,
-  label,
-  prefixIcon,
-  suffixIcon,
-  suffixTooltip,
-  suffixAction,
-  tooltip,
-  maxWidth = '100%',
-  ...props
-}: Props) => {
-  const theme = useTheme();
-  const StyledChip = useMemo(() => styled(ChipMUI)(ChipStyle(theme)), [theme]);
+const Chip = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      variant,
+      label,
+      prefixIcon,
+      suffixIcon,
+      suffixTooltip,
+      suffixAction,
+      tooltip,
+      maxWidth = '100%',
+      ...props
+    },
+    ref,
+  ) => {
+    const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+    const [isSuffixTooltipOpen, setIsSuffixTooltipOpen] = useState(false);
 
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-  const [isSuffixTooltipOpen, setIsSuffixTooltipOpen] = useState(false);
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  let backgroundColor: string =
-    // eslint-disable-next-line no-nested-ternary
-    props.color && theme.palette[props.color]
-      ? typeof theme.palette[props.color] === 'object'
-        ? theme.palette[props.color]['main']
-        : theme.palette[props.color]
-      : (props.color ?? 'white');
-
-  if (variant === 'filled' || variant === 'statusFilled') {
-    // opacity 0.08
-    backgroundColor = `${backgroundColor}14`;
-  } else if (variant === 'status') {
-    backgroundColor = 'white';
-  }
-
-  return (
-    <Tooltip title={tooltip} placement="right-start" open={isTooltipOpen}>
+    return (
       <Box
-        maxWidth="fit-content"
         onMouseEnter={() => setIsTooltipOpen(true)}
         onMouseLeave={() => setIsTooltipOpen(false)}
+        sx={{ width: 'fit-content' }}
+        data-testid="ds-chip-container"
       >
-        <Tooltip
-          title={suffixTooltip}
-          open={isSuffixTooltipOpen}
-          placement="bottom-end"
-          sx={{ cursor: suffixAction ? 'pointer !important' : 'default' }}
-        >
-          <StyledChip
-            label={label}
-            ref={ref}
-            className={`MuiChip-${variant}`}
-            size="small"
-            sx={{
-              maxWidth,
-              backgroundColor: backgroundColor,
-              '&.MuiChip-colorSecondary': suffixIcon &&
-                suffixAction && {
-                  '&:hover': {
-                    borderColor: '#004f88 !important',
-                    '.MuiChip-deleteIcon': {
-                      color: '#004f88 !important',
-                    },
-                  },
-                },
-              '&.MuiChip-colorPrimary': suffixIcon &&
-                suffixAction && {
-                  '&:hover': {
-                    backgroundColor: '#004f88 !important',
-                  },
-                },
-              '&.MuiChip-colorDefault': suffixIcon &&
-                suffixAction && {
-                  '&:hover': {
-                    '.MuiChip-deleteIcon': {
-                      color: '#004f88 !important',
-                    },
-                  },
-                },
-            }}
-            avatar={
-              prefixIcon ? <IconProvider icon={prefixIcon} size="sm" /> : <></>
-            }
-            deleteIcon={
-              suffixIcon ? (
-                <IconProvider
-                  icon={suffixIcon}
-                  onMouseEnter={() => {
-                    if (suffixTooltip) {
-                      setIsSuffixTooltipOpen(true);
-                      setIsTooltipOpen(false);
-                    }
-                  }}
-                  onMouseLeave={() => {
-                    if (suffixTooltip) {
-                      setIsSuffixTooltipOpen(false);
-                      setIsTooltipOpen(true);
+        <Tooltip title={tooltip} placement="right-start" open={isTooltipOpen}>
+          <Tooltip
+            title={suffixTooltip}
+            open={isSuffixTooltipOpen}
+            placement="bottom-end"
+            sx={{ cursor: suffixAction ? 'pointer !important' : 'default' }}
+          >
+            <ChipMUI
+              label={label}
+              ref={ref}
+              size="small"
+              variant={variant}
+              sx={{
+                maxWidth,
+              }}
+              avatar={
+                prefixIcon ? (
+                  <IconProvider
+                    color=""
+                    icon={prefixIcon}
+                    size="sm"
+                    data-testid="ds-prefix-icon"
+                  />
+                ) : (
+                  <></>
+                )
+              }
+              deleteIcon={
+                suffixIcon ? (
+                  <IconProvider
+                    icon={suffixIcon}
+                    className={
+                      suffixAction ? 'MuiChip-iconAction' : 'MuiChip-icon'
                     }
-                  }}
-                  sx={{
-                    cursor: suffixAction ? 'pointer !important' : 'default',
-                  }}
-                  size="sm"
-                />
-              ) : (
-                <></>
-              )
-            }
-            onDelete={suffixAction ?? (() => null)}
-            {...props}
-          />
+                    onMouseEnter={() => {
+                      if (suffixTooltip) {
+                        setIsSuffixTooltipOpen(true);
+                        setIsTooltipOpen(false);
+                      }
+                    }}
+                    onMouseLeave={() => {
+                      if (suffixTooltip) {
+                        setIsSuffixTooltipOpen(false);
+                        setIsTooltipOpen(true);
+                      }
+                    }}
+                    sx={{
+                      cursor: suffixAction ? 'pointer !important' : 'default',
+                    }}
+                    size="sm"
+                    data-testid="ds-suffix-icon"
+                  />
+                ) : (
+                  <></>
+                )
+              }
+              onDelete={suffixAction ?? (() => null)}
+              {...props}
+              data-testid="ds-chip"
+            />
+          </Tooltip>
         </Tooltip>
       </Box>
-    </Tooltip>
-  );
-};
+    );
+  },
+);
+
+Chip.displayName = 'Chip';
 
 export default Chip;

package/src/components/Datatable/Datatable.tsx

@@ -1,10 +1,9 @@
-import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 
 import {
   faArrowDownLong,
   faArrowUpLong,
 } from '@fortawesome/pro-regular-svg-icons';
-import { DatatableStyle } from '@groupeactual/design-tokens';
 import {
   Box,
   Table,
@@ -14,8 +13,6 @@ import {
   TableHead,
   TableRow,
   TableSortLabel,
-  styled,
-  useTheme,
 } from '@mui/material';
 
 import IconButton from '@/components/IconButton';
@@ -25,19 +22,28 @@ import Text from '@/components/Text';
 import { RowDetail as D, Props } from './datatable.interface';
 import usePaginationProps from './use-pagination-props.hook';
 
-const Datatable = <T extends object>({
-  onLoad,
-  onSort = () => undefined,
-  sortInfo = null,
-  withHeader = false,
-  withPagination,
-  columns,
-  isTableLayoutFixed = false,
-  ...props
-}: Props<T>) => {
+function fixedForwardRef<T, P = {}>(
+  render: (_props: P, _ref: React.Ref<T>) => React.ReactNode,
+): (_props: P & React.RefAttributes<T>) => React.ReactNode {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return React.forwardRef(render as any) as any;
+}
+
+const DatatableComponent = <T extends object>(
+  {
+    onLoad,
+    onSort = () => undefined,
+    sortInfo = null,
+    withHeader = false,
+    withPagination,
+    columns,
+    isTableLayoutFixed = false,
+    ...props
+  }: Props<T>,
+  ref: React.ForwardedRef<HTMLTableElement>,
+) => {
   const { trans, limits, withTopPagination, hideTotal, setPage, setLimit } =
     usePaginationProps<T>(props);
-  const theme = useTheme();
 
   const [currentRows, setCurrentRows] = useState<T[] | (T & D)[]>();
   const [currentPage, setCurrentPage] = useState<number>();
@@ -48,11 +54,6 @@ const Datatable = <T extends object>({
   const isAsc = sortInfo?.direction === 'asc';
   const hasTopTitle = columns.some(({ topTitle }) => topTitle);
 
-  const StyledDatatable = useMemo(
-    () => styled(Box)(DatatableStyle(theme)),
-    [theme],
-  );
-
   useEffect(() => {
     onLoad()
       .then((data) => {
@@ -84,19 +85,21 @@ const Datatable = <T extends object>({
   );
 
   return (
-    <StyledDatatable>
+    <Box ref={ref} data-testid="ds-datatable">
       {withTopPagination && <SyncedPagination />}
       <TableContainer
         sx={{ display: 'flex', maxWidth: '100%', overflow: 'auto' }}
+        data-testid="ds-table-container"
       >
         <Table
           sx={{
             tableLayout: isTableLayoutFixed ? 'fixed' : 'auto',
           }}
+          data-testid="ds-table"
         >
           {withHeader && (
-            <TableHead>
-              <TableRow data-testid="datatable-head-row">
+            <TableHead data-testid="ds-table-head">
+              <TableRow data-testid="ds-datatable-head-row">
                 {columns.map(
                   ({
                     name,
@@ -117,10 +120,14 @@ const Datatable = <T extends object>({
                           width: width,
                           height: hasTopTitle ? '55px' : 'inherit',
                         }}
+                        data-testid={`ds-table-cell-head-${name}`}
                       >
                         {hasTopTitle && (
-                          <Box height={24}>
-                            <Text variant="body2Regular">{topTitle}</Text>
+                          <Box
+                            sx={{ mb: 1, height: '16px' }}
+                            data-testid={`ds-top-title-${name}`}
+                          >
+                            <Text variant="body1Medium">{topTitle}</Text>
                           </Box>
                         )}
                         {(sortable && (
@@ -148,7 +155,7 @@ const Datatable = <T extends object>({
                             IconComponent={() => (
                               <IconButton
                                 icon={isAsc ? faArrowUpLong : faArrowDownLong}
-                                variant="table"
+                                variant="plain"
                                 size="small"
                                 sx={{
                                   visibility:
@@ -156,30 +163,28 @@ const Datatable = <T extends object>({
                                       ? 'visible'
                                       : 'hidden',
                                 }}
+                                data-testid={`ds-sort-icon-${name}`}
                               />
                             )}
+                            data-testid={`ds-sort-label-${name}`}
                           >
                             <Box
                               sx={{
                                 pr: 1,
-                                fontWeight: 500,
-                                lineHeight: '16px',
-                                fontSize: '13px',
                               }}
+                              data-testid={`ds-title-${name}`}
                             >
-                              {title}
+                              <Text variant="body1">{title}</Text>
                             </Box>
                           </TableSortLabel>
                         )) || (
                           <Box
                             sx={{
                               pr: 1,
-                              fontWeight: 500,
-                              lineHeight: '16px',
-                              fontSize: '13px',
                             }}
+                            data-testid={`ds-title-${name}`}
                           >
-                            {title}
+                            <Text variant="body1">{title}</Text>
                           </Box>
                         )}
                       </TableCell>
@@ -189,10 +194,10 @@ const Datatable = <T extends object>({
               </TableRow>
             </TableHead>
           )}
-          <TableBody>
+          <TableBody data-testid="ds-table-body">
             {currentRows?.map((record, index) => (
               <Fragment key={index}>
-                <TableRow data-testid="datatable-body-row">
+                <TableRow data-testid="ds-datatable-body-row">
                   {columns.map(({ name, width, render }) => (
                     <TableCell
                       key={name}
@@ -207,6 +212,7 @@ const Datatable = <T extends object>({
                             ? '0px'
                             : 'default',
                       }}
+                      data-testid={`ds-table-cell-body-${name}`}
                     >
                       {render(record)}
                     </TableCell>
@@ -219,12 +225,14 @@ const Datatable = <T extends object>({
                       width: record.width,
                       borderColor: 'greyLightDefaultBorder',
                     }}
+                    data-testid={`ds-details-row-${index}`}
                   >
                     <TableCell
                       sx={{
                         columnSpan: columns.length,
                         borderBottom: 'none',
                       }}
+                      data-testid={`ds-details-cell-${index}`}
                     >
                       {record.details}
                     </TableCell>
@@ -236,8 +244,12 @@ const Datatable = <T extends object>({
         </Table>
       </TableContainer>
       {withPagination && <SyncedPagination />}
-    </StyledDatatable>
+    </Box>
   );
 };
 
+DatatableComponent.displayName = 'Datatable';
+
+const Datatable = fixedForwardRef(DatatableComponent);
+
 export default Datatable;

package/src/components/Datatable/DatatableCellRender.tsx

@@ -11,7 +11,7 @@ const DatatableCellRender = ({ data }: { data: string }): JSX.Element => {
   return (
     <Tooltip title={data} placement="bottom-start">
       <Text
-        variant="body2Regular"
+        variant="body2"
         style={{
           whiteSpace: 'nowrap',
           overflow: 'hidden',

package/src/components/EmbbededNotification/EmbeddedNotification.tsx

@@ -7,7 +7,7 @@ import {
   faCircleInfo,
   faCircleXmark,
 } from '@fortawesome/pro-solid-svg-icons';
-import { Box, BoxProps } from '@mui/material';
+import { Box, BoxProps, useTheme } from '@mui/material';
 
 import Text from '@/components//Text';
 import Icon from '@/components/IconProvider';
@@ -19,83 +19,92 @@ interface Props extends BoxProps {
   actionButton?: ReactNode;
 }
 
-const EmbeddedNotification = ({
-  title,
-  text,
-  variant = 'infos',
-  actionButton,
-  ...props
-}: Props) => {
-  interface EmbeddedNotifVariant {
-    color: string;
-    icon: IconDefinition;
-  }
+interface EmbeddedNotifVariant {
+  color: string;
+  icon: IconDefinition;
+}
+
+const EmbeddedNotification = React.forwardRef<HTMLDivElement, Props>(
+  ({ title, text, variant = 'infos', actionButton, ...props }, ref) => {
+    const { spacing } = useTheme();
 
-  const variantNotification: Record<string, EmbeddedNotifVariant> = {
-    warning: {
-      color: 'orangeWarning',
-      icon: faCircleExclamation,
-    },
-    error: {
-      color: 'redError',
-      icon: faCircleXmark,
-    },
-    success: {
-      color: 'greenSuccess',
-      icon: faCircleCheck,
-    },
-    infos: {
-      color: 'blueInfo',
-      icon: faCircleInfo,
-    },
-  };
+    const variantNotification: Record<string, EmbeddedNotifVariant> = {
+      warning: {
+        color: 'orangeWarning',
+        icon: faCircleExclamation,
+      },
+      error: {
+        color: 'redError',
+        icon: faCircleXmark,
+      },
+      success: {
+        color: 'greenSuccess',
+        icon: faCircleCheck,
+      },
+      infos: {
+        color: 'blueInfo',
+        icon: faCircleInfo,
+      },
+    };
 
-  return (
-    <Box
-      border="1px solid"
-      borderColor={variantNotification[variant].color}
-      p="8px 16px"
-      borderRadius="4px"
-      display="flex"
-      alignItems={text ? 'flex-start' : 'center'}
-      justifyContent={text ? 'flex-start' : 'center'}
-      {...props}
-    >
-      <Icon
-        icon={variantNotification[variant].icon}
-        color={variantNotification[variant].color}
-        mr="16px"
-        mt={text ? '1px' : 0}
-      />
-      <Box display="flex" flexDirection="column" paddingRight={4}>
-        <Text
-          align="left"
-          variant="body1Bold"
+    return (
+      <Box
+        ref={ref}
+        border="1px solid"
+        borderColor={variantNotification[variant].color}
+        p={spacing(2, 4)}
+        borderRadius="4px"
+        display="flex"
+        alignItems={text ? 'flex-start' : 'center'}
+        justifyContent={text ? 'flex-start' : 'center'}
+        {...props}
+        data-testid="ds-embedded-notification"
+      >
+        <Icon
+          icon={variantNotification[variant].icon}
           color={variantNotification[variant].color}
-          display="inline-block"
-        >
-          {title}
-        </Text>
-        {text && (
+          mr={4}
+          mt={text ? '1px' : 0}
+          data-testid="ds-icon"
+        />
+        <Box display="flex" flexDirection="column" paddingRight={4}>
           <Text
             align="left"
-            variant="body1Regular"
-            color="greyDark"
+            variant="body1Bold"
+            color={variantNotification[variant].color}
             display="inline-block"
-            paddingTop="4px"
+            data-testid="ds-title"
           >
-            {text}
+            {title}
           </Text>
+          {text && (
+            <Text
+              align="left"
+              variant="body1"
+              color="greyDark"
+              display="inline-block"
+              pt={1}
+              data-testid="ds-text"
+            >
+              {text}
+            </Text>
+          )}
+        </Box>
+        <Box flexGrow={2} />
+        {actionButton && (
+          <Box
+            alignSelf="center"
+            whiteSpace="nowrap"
+            data-testid="ds-action-button"
+          >
+            {actionButton}
+          </Box>
         )}
       </Box>
-      <Box flexGrow={2} />
-      {actionButton && (
-        <Box alignSelf="center" whiteSpace="nowrap">
-          {actionButton}
-        </Box>
-      )}
-    </Box>
-  );
-};
+    );
+  },
+);
+
+EmbeddedNotification.displayName = 'EmbeddedNotification';
 
 export default EmbeddedNotification;