@groupeactual/ui-kit 0.4.37 → 0.4.38

package/src/components/Accordion/Accordion.tsx

@@ -7,6 +7,11 @@ import React, {
 import AccordionMui, { AccordionProps } from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
+import {
+  faChevronDown
+} from '@fortawesome/pro-regular-svg-icons';
+
+import IconProvider from '../Icon/Icon';
 
 interface Props extends AccordionProps {
   icon: ReactNode;
@@ -35,18 +40,20 @@ const Accordion = ({
 
   return (
     <AccordionMui
-      sx={{ border: `1px solid`, borderColor: 'greyLightDefaultBorder' }}
+      className="DsAccordion"
       expanded={internalExpanded}
       onClick={(e) => {
         if (!props.disabled) {
           setInternalExpanded(!internalExpanded);
-          onClick && onClick(e);
+          if (onClick) {
+            onClick(e);
+          }
         }
       }}
       {...props}
     >
       <AccordionSummary
-        expandIcon={icon}
+        expandIcon={<IconProvider icon={faChevronDown} size="md" />}
         sx={{
           fontWeight: 500,
           fontSize: 18,

package/src/components/Chip/Chip.tsx

@@ -93,11 +93,11 @@ const Chip = ({
               backgroundColor: backgroundColor,
               '&.MuiChip-colorSecondary:hover': suffixIcon &&
                 suffixAction && {
-                  backgroundColor: '#004f88 !important'
+                  backgroundColor: 'blueHoverClickable !important'
                 },
               '&.MuiChip-deleteIconColorPrimary:hover': suffixIcon &&
                 suffixAction && {
-                  backgroundColor: '#004f88 !important'
+                  backgroundColor: 'blueHoverClickable !important'
                 }
             }}
             avatar={
@@ -119,6 +119,9 @@ const Chip = ({
                       setIsTooltipOpen(true);
                     }
                   }}
+                  sx={{
+                    cursor: suffixAction ? 'pointer !important' : 'default'
+                  }}
                   size="sm"
                 />
               ) : (

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import CheckboxMUI, { CheckboxProps } from '@mui/material/Checkbox';
 import FormControl from '@mui/material/FormControl';
@@ -15,6 +15,7 @@ interface Props {
     value: any,
     shouldValidate?: boolean | undefined
   ) => void;
+  description?: string;
   error?: string;
 }
 
@@ -22,12 +23,27 @@ const Checkbox = ({
   name,
   value,
   error,
+  description,
   label,
   onChange,
   ...props
 }: CheckboxProps & Props): JSX.Element => {
   const [internalValue, setInternalValue] = useState(value);
 
+  const getComponentClassName = useMemo(() => {
+    const classNames: string[] = ['DsCheckbox'];
+    if (props.disabled) classNames.push('Mui-disabled');
+
+    return classNames.join(' ');
+  }, [props.disabled]);
+
+  const getLabelClassName = useMemo(() => {
+    const classNames: string[] = ['DsCheckbox-label'];
+    if (props.disabled) classNames.push('Mui-disabled');
+
+    return classNames.join(' ');
+  }, [props.disabled]);
+
   useEffect(() => {
     if (value !== internalValue) {
       setInternalValue(value);
@@ -35,7 +51,7 @@ const Checkbox = ({
   }, [value]);
 
   return (
-    <FormControl fullWidth>
+    <FormControl fullWidth className={getComponentClassName}>
       <FormControlLabel
         control={
           <Box>
@@ -46,7 +62,7 @@ const Checkbox = ({
               color="primary"
               onChange={(e) => {
                 setInternalValue(e.target.checked);
-                onChange && onChange(name, e.target.checked, true);
+                if (onChange) onChange(name, e.target.checked, true);
               }}
               {...props}
             />
@@ -55,28 +71,20 @@ const Checkbox = ({
         label={
           <Typography
             component="span"
-            sx={{
-              fontSize: '14px',
-              marginLeft: '-3px',
-              marginTop: '2px',
-              fontWeight: 400,
-              color: error ? '#B80025' : '#000'
-            }}
+            className={getLabelClassName}
           >
             {label}
           </Typography>
         }
       />
-      {error && (
+      {(error || description) && (
         <Typography
+          className="DsCheckbox-info"
           sx={{
-            marginTop: -0.5,
-            color: '#B80025',
-            fontWeight: 400,
-            fontSize: '10px'
+            color: error ? '#B80025' : '#545352'
           }}
         >
-          {error}
+          {error || description}
         </Typography>
       )}
     </FormControl>

package/src/components/Form/MultiSelect/MultiSelect.tsx

@@ -18,16 +18,17 @@ import Chip from '../../Chip/Chip';
 interface Props<T>
   extends Omit<
     SelectProps<T[]>,
-    'value' | 'onChange' | 'defaultValue' | 'color'
+    'value' | 'onChange' | 'defaultValue' | 'color' | 'error'
   > {
   label: string;
   options: T[];
   helperText?: string;
   color?: 'success';
-  getOptionLabel: (option: T) => string;
+  getRenderValue: (option: T) => string;
   onChange: (value: T[]) => void;
   defaultValue?: T[];
   width?: number;
+  error?: string;
 }
 
 const MultiSelect = <T extends {}>({
@@ -38,7 +39,7 @@ const MultiSelect = <T extends {}>({
   placeholder,
   width = 200,
   defaultValue = [],
-  getOptionLabel,
+  getRenderValue,
   helperText,
   onChange,
   onBlur,
@@ -48,7 +49,7 @@ const MultiSelect = <T extends {}>({
 
   const handleChange = (event: SelectChangeEvent<typeof options>) => {
     const newValue = event.target.value as T[];
-    onChange(newValue);
+    if (onChange) onChange(newValue);
     setValues(newValue);
   };
 
@@ -58,7 +59,7 @@ const MultiSelect = <T extends {}>({
   };
 
   const handleClearValues = () => {
-    onChange([]);
+    if (onChange) onChange([]);
     setValues([]);
   };
 
@@ -71,7 +72,7 @@ const MultiSelect = <T extends {}>({
     if (props.disabled) classNames.push('Mui-disabled');
     if (values?.length > 0) classNames.push('Mui-filled');
 
-    return classNames;
+    return classNames.join(' ');
   }, [values, props.disabled]);
 
   const getInputLabelClassName = useMemo(() => {
@@ -79,7 +80,7 @@ const MultiSelect = <T extends {}>({
     if (error) classNames.push('Mui-error');
     if (props.disabled) classNames.push('Mui-disabled');
 
-    return classNames;
+    return classNames.join(' ');
   }, [error, props.disabled]);
 
   return (
@@ -88,16 +89,14 @@ const MultiSelect = <T extends {}>({
         id={label === placeholder ? 'select-mui' : 'select-ds'}
         fullWidth
         color={color}
-        className={getFormControlClassName.join(' ')}
+        className={getFormControlClassName}
         sx={{
           '.MuiOutlinedInput-input': {
             marginTop: values?.length > 0 ? '0px' : '2px'
           }
         }}
       >
-        <InputLabel className={getInputLabelClassName.join(' ')}>
-          {label}
-        </InputLabel>
+        <InputLabel className={getInputLabelClassName}>{label}</InputLabel>
         <MuiSelect
           sx={{
             color: color + '! important',
@@ -129,7 +128,7 @@ const MultiSelect = <T extends {}>({
                     disabled={props.disabled}
                     variant="filled"
                     color="default"
-                    label={getOptionLabel(selectedOption)}
+                    label={getRenderValue(selectedOption)}
                     suffixIcon={faTimesCircle}
                     suffixAction={() =>
                       !props.disabled && handleDeleteChip(selectedOption)
@@ -180,12 +179,15 @@ const MultiSelect = <T extends {}>({
               key={i}
               value={option as any}
               sx={{
+                fontSize: 14,
                 fontWeight: values.indexOf(option) === -1 ? 400 : 500,
                 backgroundColor:
-                  values.indexOf(option) === -1 ? '#ffffff' : '#D3E4F0'
+                  values.indexOf(option) === -1
+                    ? 'white'
+                    : 'blueHoverEquivalence'
               }}
             >
-              {getOptionLabel(option)}
+              {getRenderValue(option)}
             </MenuItem>
           ))}
         </MuiSelect>

package/src/components/Form/Select/Select.tsx

@@ -1,4 +1,10 @@
-import React, { BaseSyntheticEvent, useMemo, useState } from 'react';
+import React, {
+  BaseSyntheticEvent,
+  useContext,
+  useMemo,
+  useState
+} from 'react';
+import { useTheme } from '@mui/system';
 import { FormHelperText, InputLabel, MenuItem } from '@mui/material';
 import Box from '@mui/material/Box';
 import FormControl from '@mui/material/FormControl';
@@ -12,16 +18,17 @@ import Icon from '../../Icon';
 interface Props<T>
   extends Omit<
     SelectProps<T>,
-    'value' | 'onChange' | 'defaultValue' | 'color'
+    'value' | 'onChange' | 'defaultValue' | 'color' | 'error'
   > {
   label?: string;
   helperText?: string;
   options: T[];
-  getOptionLabel?: (option: T) => string;
+  getRenderValue?: (option: T) => string;
   color?: 'success';
   onChange: (value: T) => void;
   defaultValue?: T | undefined;
   width?: number;
+  error?: string;
 }
 
 const Select = <T extends {}>({
@@ -32,17 +39,18 @@ const Select = <T extends {}>({
   error,
   placeholder,
   onChange,
-  getOptionLabel,
+  getRenderValue,
   helperText,
   onBlur,
   width = 200,
   ...props
 }: Props<T>) => {
+  const theme = useTheme();
   const [value, setValue] = useState(defaultValue);
 
   const handleChange = (event: SelectChangeEvent<T>) => {
     const newValue = event.target.value as T;
-    onChange(newValue);
+    if (onChange) onChange(newValue);
     setValue(newValue);
   };
 
@@ -51,7 +59,7 @@ const Select = <T extends {}>({
     if (props.disabled) classNames.push('Mui-disabled');
     if (value) classNames.push('Mui-filled');
 
-    return classNames;
+    return classNames.join(' ');
   }, [value, props.disabled]);
 
   const getInputLabelClassName = useMemo(() => {
@@ -59,7 +67,7 @@ const Select = <T extends {}>({
     if (error) classNames.push('Mui-error');
     if (props.disabled) classNames.push('Mui-disabled');
 
-    return classNames;
+    return classNames.join(' ');
   }, [error, props.disabled]);
 
   return (
@@ -68,16 +76,14 @@ const Select = <T extends {}>({
         id={label === placeholder ? 'select-mui' : 'select-ds'}
         fullWidth
         color={color}
-        className={getFormControlClassName.join(' ')}
+        className={getFormControlClassName}
         sx={{
           '.MuiOutlinedInput-input': {
             marginTop: value ? '0px' : '2px'
           }
         }}
       >
-        <InputLabel className={getInputLabelClassName.join(' ')}>
-          {label}
-        </InputLabel>
+        <InputLabel className={getInputLabelClassName}>{label}</InputLabel>
         <MuiSelect
           sx={{
             color: color + '! important',
@@ -91,7 +97,7 @@ const Select = <T extends {}>({
           }}
           label={label}
           placeholder={label === placeholder ? '' : placeholder}
-          value={value}
+          value={value ?? ''}
           error={!!error}
           notched={
             /* eslint-disable-next-line no-undefined */
@@ -123,20 +129,32 @@ const Select = <T extends {}>({
               }
             }
           }}
+          renderValue={(value) =>
+            getRenderValue ? getRenderValue(value) : value['label']
+          }
           {...props}
         >
           {options?.map((option, i) => (
             <MenuItem
+              sx={{
+                fontSize: 14,
+                fontWeight: value === option ? 500 : 400,
+                backgroundColor:
+                  value === option ? 'blueHoverEquivalence' : 'white'
+              }}
               key={i}
               value={option as any}
               onMouseEnter={(e: BaseSyntheticEvent) =>
-                (e.target.style.backgroundColor = '#D3E4F0')
-              }
-              onMouseLeave={(e: BaseSyntheticEvent) =>
-                (e.target.style.backgroundColor = '#ffffff')
+                (e.target.style.backgroundColor =
+                  theme.palette['blueHoverEquivalence'])
               }
+              onMouseLeave={(e: BaseSyntheticEvent) => {
+                if (value !== option) {
+                  e.target.style.backgroundColor = theme.palette['white'];
+                }
+              }}
             >
-              {getOptionLabel ? getOptionLabel(option) : option['label']}
+              {getRenderValue ? getRenderValue(option) : option['label']}
             </MenuItem>
           ))}
         </MuiSelect>

package/src/components/Form/TextField/TextField.tsx

@@ -2,12 +2,15 @@ import React, {
   FocusEventHandler,
   ReactNode,
   useEffect,
+  useMemo,
   useState
 } from 'react';
-
+import { faEye, faEyeSlash } from '@fortawesome/pro-solid-svg-icons';
 import MuiTextField, { TextFieldProps } from '@mui/material/TextField';
 import { InputProps as StandardInputProps } from '@mui/material/Input/Input';
 
+import Icon from '../../Icon';
+
 interface Props extends Omit<TextFieldProps, 'error'> {
   error?: string;
   onBlur?: FocusEventHandler<unknown>;
@@ -34,12 +37,34 @@ const TextField = ({
   ...props
 }: Props) => {
   const [internalValue, setInternalValue] = useState(value);
+  const [showPassword, setShowPassword] = useState(false);
+  const [currentType, setCurrentType] = useState<string>(props.type ?? 'text');
+
+  const passwordEndAdornment: React.ReactNode = useMemo(() => {
+    return (
+      <Icon
+        className="DsTextField-passwordIcon"
+        icon={showPassword ? faEyeSlash : faEye}
+        color="blueClickable"
+        onClick={() => setShowPassword(!showPassword)}
+      />
+    );
+  }, [showPassword]);
+
   useEffect(() => {
     if (value !== internalValue) {
       setInternalValue(value);
     }
   }, [value]);
 
+  useEffect(() => {
+    if (showPassword) {
+      setCurrentType('text');
+    } else {
+      setCurrentType(props.type ?? 'text');
+    }
+  }, [showPassword]);
+
   return (
     <MuiTextField
       id={label === placeholder ? 'text-field-mui' : 'text-field-ds'}
@@ -69,11 +94,16 @@ const TextField = ({
       }}
       error={!!error}
       disabled={disabled}
-      InputProps={{ endAdornment }}
+      InputProps={
+        props.type === 'password'
+          ? { endAdornment: passwordEndAdornment }
+          : { endAdornment }
+      }
       inputProps={{ maxLength }}
       {...props}
+      type={currentType}
       helperText={
-        <div style={{ display: 'table', width: '100%' }}>
+        <div style={{ display: 'table', width: '100%', marginRight: '4px' }}>
           {(error || props.helperText) && (
             <div
               style={{

package/src/components/Icon/Icon.tsx

@@ -66,6 +66,7 @@ const IconProvider = ({
   icon,
   color = '#136cac', // blueClickable
   size = 16,
+  sx,
   ...props
 }: Props & BoxProps): ReactElement => {
   const getStyles = (): SxProps<Theme> => {
@@ -79,20 +80,22 @@ const IconProvider = ({
     switch (variant) {
       case 'square':
         return {
+          ...sx,
           color: usedColor,
           backgroundColor: `${usedColor}14`,
           borderRadius: '4px',
           borderColor: '1px solid ' + usedColor,
           overflow: 'visible',
           padding: '10px',
-          width: '35px',
-          height: '35px',
+          width: '36px',
+          height: '36px',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center'
         };
       default:
         return {
+          ...sx,
           color: usedColor,
           width: usedFontSize,
           height: size,