@centreon/ui 23.10.92 → 23.10.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.92",
+  "version": "23.10.93",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/ActionsList/ActionsList.styles.ts

@@ -0,0 +1,116 @@
+import { makeStyles } from 'tss-react/mui';
+import { equals } from 'ramda';
+
+import { Theme, alpha } from '@mui/material';
+
+interface GetBackgroundAndColorProps {
+  status: string;
+  theme: Theme;
+}
+
+const getColor = ({ theme, status }: GetBackgroundAndColorProps): string =>
+  equals(theme.palette.mode, 'dark')
+    ? theme.palette.common.white
+    : theme.palette[status].main;
+
+export const useStyles = makeStyles()((theme) => ({
+  item: {
+    '& .MuiListItemText-secondary': {
+      textWrap: 'pretty'
+    },
+    '&[data-variant="error"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'error', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.error.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'error', theme })
+      },
+      color: theme.palette.error.main
+    },
+    '&[data-variant="info"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'info', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.info.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'info', theme })
+      },
+      color: theme.palette.info.main
+    },
+    '&[data-variant="pending"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'pending', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.pending.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'pending', theme })
+      },
+      color: theme.palette.pending.main
+    },
+    '&[data-variant="primary"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'primary', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.primary.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'primary', theme })
+      },
+      color: theme.palette.primary.main
+    },
+    '&[data-variant="secondary"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'secondary', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.secondary.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'secondary', theme })
+      },
+      color: theme.palette.secondary.main
+    },
+    '&[data-variant="success"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'success', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.success.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'success', theme })
+      },
+      color: theme.palette.success.main
+    },
+    '&[data-variant="warning"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'warning', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.warning.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'warning', theme })
+      },
+      color: theme.palette.warning.main
+    }
+  },
+  list: {
+    width: '100%'
+  }
+}));

package/src/ActionsList/index.stories.tsx

@@ -24,6 +24,68 @@ const actions = [
   }
 ];
 
+const actionsWithVariants = [
+  {
+    label: 'No variant',
+    onClick: (): void => undefined
+  },
+  {
+    label: 'Primary',
+    onClick: (): void => undefined,
+    variant: 'primary'
+  },
+  {
+    label: 'Secondary',
+    onClick: (): void => undefined,
+    variant: 'secondary'
+  },
+  {
+    label: 'Success',
+    onClick: (): void => undefined,
+    variant: 'success'
+  },
+  {
+    label: 'Warning',
+    onClick: (): void => undefined,
+    variant: 'warning'
+  },
+  {
+    label: 'Error',
+    onClick: (): void => undefined,
+    variant: 'error'
+  },
+  {
+    label: 'Info',
+    onClick: (): void => undefined,
+    variant: 'info'
+  },
+  {
+    label: 'Pending',
+    onClick: (): void => undefined,
+    variant: 'pending'
+  }
+];
+
+const actionsWithSecondaryLabel = [
+  {
+    Icon: EditIcon,
+    label: 'Edit',
+    onClick: (): void => undefined
+  },
+  {
+    Icon: CopyIcon,
+    label: 'Duplicate',
+    onClick: (): void => undefined,
+    secondaryLabel:
+      'This is a secondary label that the purpose is to give a small description about an action'
+  },
+  {
+    Icon: DeleteIcon,
+    label: 'Delete',
+    onClick: (): void => undefined
+  }
+];
+
 export default {
   argTypes: {},
   component: ActionsList,
@@ -39,3 +101,15 @@ export const Playground = Template.bind({});
 Playground.args = {
   actions
 };
+
+export const Variants = Template.bind({});
+
+Variants.args = {
+  actions: actionsWithVariants
+};
+
+export const SecondaryLabel = Template.bind({});
+
+SecondaryLabel.args = {
+  actions: actionsWithSecondaryLabel
+};

package/src/ActionsList/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-array-index-key */
-import { makeStyles } from 'tss-react/mui';
 import { useTranslation } from 'react-i18next';
 import { equals } from 'ramda';
 
@@ -12,10 +11,15 @@ import {
   Divider
 } from '@mui/material';
 
+import { useStyles } from './ActionsList.styles';
+import { ActionVariants } from './models';
+
 interface ActionsType {
   Icon?: (props: SvgIconProps) => JSX.Element;
   label: string;
   onClick?: (e?) => void;
+  secondaryLabel?: string;
+  variant?: ActionVariants;
 }
 
 interface Props {
@@ -24,12 +28,6 @@ interface Props {
   listItemClassName?: string;
 }
 
-const useStyles = makeStyles()({
-  list: {
-    maxWidth: '100%'
-  }
-});
-
 const ActionsList = ({
   className,
   listItemClassName,
@@ -45,18 +43,28 @@ const ActionsList = ({
           return <Divider key={`divider_${idx}`} />;
         }
 
-        const { label, Icon, onClick } = action as ActionsType;
+        const { label, Icon, onClick, variant, secondaryLabel } =
+          action as ActionsType;
 
         return (
-          <MenuItem aria-label={label} id={label} key={label} onClick={onClick}>
+          <MenuItem
+            aria-label={label}
+            className={classes.item}
+            data-variant={variant}
+            id={label}
+            key={label}
+            onClick={onClick}
+          >
             {Icon && (
               <ListItemIcon>
                 <Icon fontSize="small" />
               </ListItemIcon>
             )}
-            <ListItemText className={listItemClassName}>
-              {t(label)}
-            </ListItemText>
+            <ListItemText
+              className={listItemClassName}
+              primary={t(label)}
+              secondary={secondaryLabel && t(secondaryLabel)}
+            />
           </MenuItem>
         );
       })}

package/src/ActionsList/models.ts

@@ -0,0 +1,8 @@
+export type ActionVariants =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'pending';

package/src/Checkbox/Checkbox.tsx

@@ -12,7 +12,6 @@ import {
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 
 interface StyleProps {
-  disabled: boolean;
   hasIcon: boolean;
   labelPlacement: LabelPlacement;
 }
@@ -26,7 +25,13 @@ const getLabelSpacing = (labelPlacement, theme): string => {
 };
 
 const useStyles = makeStyles<StyleProps>()(
-  (theme, { disabled, hasIcon, labelPlacement }) => ({
+  (theme, { hasIcon, labelPlacement }) => ({
+    checkbox: {
+      '&.Mui-checked': {
+        color: theme.palette.primary.main
+      },
+      color: theme.palette.primary.main
+    },
     container: hasIcon
       ? {
           alignItems: 'center',
@@ -40,13 +45,8 @@ const useStyles = makeStyles<StyleProps>()(
       fontSize: theme.spacing(10)
     },
     label: {
-      color: disabled
-        ? theme.palette.action.disabled
-        : theme.palette.text.secondary,
-      fontSize: theme.typography.body1.fontSize,
-      fontWeight: equals(labelPlacement, 'top')
-        ? theme.typography.fontWeightBold
-        : theme.typography.fontWeightMedium,
+      fontSize: theme.typography.body2.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
       padding: getLabelSpacing(labelPlacement, theme)
     }
   })
@@ -74,7 +74,6 @@ const Checkbox = ({
   dataTestId
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
-    disabled,
     hasIcon: !!Icon,
     labelPlacement
   });
@@ -86,6 +85,7 @@ const Checkbox = ({
         control={
           <MuiCheckbox
             checked={checked}
+            className={classes.checkbox}
             color="primary"
             disabled={disabled}
             id={label}

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Delete as DeleteIcon, Save as SaveIcon } from '@mui/icons-material';
+
+import { IconButton } from '../..';
+
+import { ConfirmationTooltip } from './ConfirmationTooltip';
+
+const meta: Meta<typeof ConfirmationTooltip> = {
+  component: ConfirmationTooltip
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmationTooltip>;
+
+export const Default: Story = {
+  args: {
+    children: (toggleTooltip) => (
+      <IconButton icon={<SaveIcon />} onClick={toggleTooltip} />
+    ),
+    labels: {
+      cancel: 'Cancel',
+      confirm: {
+        label: 'Save'
+      }
+    },
+    onConfirm: () => undefined
+  }
+};
+
+export const WithConfirmVariant: Story = {
+  args: {
+    children: (toggleTooltip) => (
+      <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
+    ),
+    confirmVariant: 'error',
+    labels: {
+      cancel: 'Cancel',
+      confirm: {
+        label: 'Delete'
+      }
+    },
+    onConfirm: () => undefined
+  }
+};
+
+export const WithSecondaryLabel: Story = {
+  args: {
+    children: (toggleTooltip) => (
+      <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
+    ),
+    confirmVariant: 'error',
+    labels: {
+      cancel: 'Cancel',
+      confirm: {
+        label: 'Delete',
+        secondaryLabel: 'This action will delete the current item'
+      }
+    },
+    onConfirm: () => undefined
+  }
+};

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.styles.tsx

@@ -0,0 +1,19 @@
+import { equals } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+export const useStyles = makeStyles()((theme) => ({
+  list: {
+    padding: 0
+  },
+  paper: {
+    backgroundColor: equals(theme.palette.mode, ThemeMode.dark)
+      ? theme.palette.background.widget
+      : theme.palette.background.default,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[3],
+    marginLeft: theme.spacing(2),
+    maxWidth: '350px'
+  }
+}));

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -0,0 +1,67 @@
+import { MouseEvent, useState } from 'react';
+
+import { ClickAwayListener, Box, Popper } from '@mui/material';
+
+import TooltipContent from './TooltipContent';
+import { Props } from './models';
+import { useStyles } from './ConfirmationTooltip.styles';
+
+export const ConfirmationTooltip = ({
+  children,
+  labels,
+  onConfirm,
+  confirmVariant
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const [anchorElement, setAnchorElement] = useState<
+    HTMLButtonElement | undefined
+  >(undefined);
+
+  const close = (): void => {
+    setAnchorElement(undefined);
+  };
+
+  const open = (event: MouseEvent<HTMLButtonElement>): void => {
+    setAnchorElement(event.currentTarget);
+  };
+
+  const confirm = (): void => {
+    close();
+    onConfirm();
+  };
+
+  const actions = [
+    {
+      action: close,
+      label: labels.cancel
+    },
+    {
+      action: confirm,
+      label: labels.confirm.label,
+      secondaryLabel: labels.confirm.secondaryLabel,
+      variant: confirmVariant
+    }
+  ];
+
+  const isOpen = Boolean(anchorElement);
+
+  return (
+    <ClickAwayListener onClickAway={close}>
+      <div>
+        {children(isOpen ? close : open)}
+        <Popper
+          anchorEl={anchorElement}
+          open={isOpen}
+          popperOptions={{
+            placement: 'bottom-start'
+          }}
+        >
+          <Box className={classes.paper}>
+            <TooltipContent actions={actions} />
+          </Box>
+        </Popper>
+      </div>
+    </ClickAwayListener>
+  );
+};

package/src/components/Tooltip/ConfirmationTooltip/TooltipContent.tsx

@@ -0,0 +1,31 @@
+import { ActionVariants } from '../../../ActionsList/models';
+import { ActionsList } from '../../..';
+
+import { useStyles } from './ConfirmationTooltip.styles';
+
+interface Props {
+  actions: Array<{
+    action: () => void;
+    label: string;
+    secondaryLabel?: string;
+    variant?: ActionVariants;
+  }>;
+}
+
+const TooltipContent = ({ actions }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <ActionsList
+      actions={actions.map(({ label, action, variant, secondaryLabel }) => ({
+        label,
+        onClick: action,
+        secondaryLabel,
+        variant
+      }))}
+      className={classes.list}
+    />
+  );
+};
+
+export default TooltipContent;

package/src/components/Tooltip/ConfirmationTooltip/models.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+
+import { ActionVariants } from '../../../ActionsList/models';
+
+interface Labels {
+  cancel: string;
+  confirm: {
+    label: string;
+    secondaryLabel?: string;
+  };
+}
+
+export interface Props {
+  children: (toggleTooltip) => ReactElement;
+  confirmVariant?: ActionVariants;
+  labels: Labels;
+  onConfirm: () => void;
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -1,21 +1,35 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { Tooltip as MuiTooltip } from '@mui/material';
+import {
+  Tooltip as MuiTooltip,
+  TooltipProps as MuiTooltipProps
+} from '@mui/material';
 
 import { AriaLabelingAttributes } from '../../@types/aria-attributes';
 import { DataTestAttributes } from '../../@types/data-attributes';
 
-import { useStyles } from './Tooltip.styles';
-
 export type TooltipProps = {
   children: ReactElement;
   followCursor?: boolean;
   hasCaret?: boolean;
   isOpen?: boolean;
   label: ReactNode;
-  position?: 'top' | 'bottom' | 'left' | 'right';
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'bottom-end'
+    | 'bottom-start'
+    | 'left-end'
+    | 'left-start'
+    | 'right-end'
+    | 'right-start'
+    | 'top-end'
+    | 'top-start';
 } & AriaLabelingAttributes &
-  DataTestAttributes;
+  DataTestAttributes &
+  Omit<MuiTooltipProps, 'title'>;
 
 const Tooltip = ({
   children,
@@ -26,12 +40,9 @@ const Tooltip = ({
   hasCaret = false,
   ...attr
 }: TooltipProps): ReactElement => {
-  const { classes } = useStyles();
-
   return (
     <MuiTooltip
       arrow={hasCaret}
-      className={classes.tooltip}
       followCursor={followCursor}
       open={isOpen}
       placement={position}

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,5 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(() => ({
-  tooltip: {}
-}));