@groupeactual/ui-kit 1.7.9 → 1.8.1

package/dist/es/src/components/Modal/Drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ModalProps } from '@/components/Modal/modal.interface';
-declare const Drawer: ({ title, open, onClose, component, footer, cardProps, size, ...props }: Omit<ModalProps, "withHeaderDivider" | "icon">) => React.JSX.Element;
+import { DrawerProps } from '@/components/Modal/modal.interface';
+declare const Drawer: ({ title, open, hideCloseButton, titleLeftComponent, footer, cardProps, size, children, onClose, ...props }: DrawerProps) => React.JSX.Element;
 export default Drawer;

package/dist/es/src/components/Modal/modal.interface.d.ts

@@ -10,13 +10,16 @@ export interface ModalProps extends Omit<ModalPropsMUI, 'component' | 'open' | '
     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> & {
     children?: ReactNode;
     icon?: IconDefinition | null;

package/dist/es/src/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ToggleButtonGroupProps } from '@mui/material';
+interface Props extends ToggleButtonGroupProps {
+    selectedValue: string | string[];
+    options: {
+        value: string;
+        label: string;
+    }[];
+}
+declare const ToggleButtonGroup: ({ selectedValue, options, ...props }: Props) => React.JSX.Element;
+export default ToggleButtonGroup;

package/dist/es/src/components/ToggleButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ToggleButtonGroup';

package/dist/es/src/components/index.d.ts

@@ -32,3 +32,4 @@ export { default as TimePicker } from './Form/TimePicker';
 export { default as Datatable } from './Datatable/Datatable';
 export { default as DatatableCellRender } from './Datatable/DatatableCellRender';
 export { default as IconButton } from './IconButton/IconButton';
+export { default as ToggleButtonGroup } from './ToggleButtonGroup/ToggleButtonGroup';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.7.9",
+  "version": "1.8.1",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "main": "dist/cjs/index.js",
@@ -33,7 +33,7 @@
     "@mui/x-date-pickers": "7.15.0",
     "@mui/x-date-pickers-pro": "7.15.0",
     "styled-components": "^6.1.13",
-    "@groupeactual/design-tokens": "1.7.9"
+    "@groupeactual/design-tokens": "1.8.1"
   },
   "scripts": {
     "build": "rollup -c",

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

@@ -10,18 +10,20 @@ import {
 } from '@mui/material';
 
 import IconButton from '@/components/IconButton';
-import { ModalProps } from '@/components/Modal/modal.interface';
+import { DrawerProps } from '@/components/Modal/modal.interface';
 
 const Drawer = ({
   title,
   open,
-  onClose,
-  component,
+  hideCloseButton,
+  titleLeftComponent,
   footer,
   cardProps,
   size = 'small',
+  children,
+  onClose,
   ...props
-}: Omit<ModalProps, 'withHeaderDivider' | 'icon'>) => {
+}: DrawerProps) => {
   return (
     <DrawerMUI
       anchor="right"
@@ -55,19 +57,24 @@ const Drawer = ({
       >
         <CardHeader
           action={
-            <IconButton
-              aria-label="close"
-              data-testid="close-button"
-              onClick={() => onClose?.()}
-              variant="table"
-              size="medium"
-              icon={faClose}
-            />
+            !hideCloseButton ? (
+              <IconButton
+                aria-label="close"
+                data-testid="close-button"
+                onClick={() => onClose?.()}
+                variant="table"
+                size="medium"
+                icon={faClose}
+              />
+            ) : null
           }
           title={
             title ? (
               <Box display="flex">
-                <Box mt="2px">{title}</Box>
+                <Box mt="2px">
+                  {titleLeftComponent}
+                  {title}
+                </Box>
               </Box>
             ) : (
               ''
@@ -76,7 +83,7 @@ const Drawer = ({
           subheader=""
         />
         <CardContent>
-          <Box pb={footer ? '94px !important' : 0}>{component}</Box>
+          <Box pb={footer ? '94px !important' : 0}>{children}</Box>
         </CardContent>
         {footer}
       </Card>

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/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+
+import {
+  styled,
+    ToggleButton,
+      ToggleButtonGroup as ToggleButtonGroupMUI,
+    ToggleButtonGroupProps,
+    useTheme,
+  } from '@mui/material';
+import { ToggleButtonGroupStyle } from '@groupeactual/design-tokens';
+
+  interface Props extends ToggleButtonGroupProps {
+    selectedValue: string | string[];
+    options: { value: string; label: string }[];
+  }
+
+  const ToggleButtonGroup = ({
+    selectedValue,
+    options = [],
+    ...props
+  }: Props) => {
+        const theme = useTheme();
+        const StyledToggleButtonGroup = useMemo(
+          () => styled(ToggleButtonGroupMUI)(ToggleButtonGroupStyle(theme)),
+          [theme],
+        );
+    return <StyledToggleButtonGroup orientation='horizontal' exclusive={props.exclusive} disabled={props.disabled} value={selectedValue}>
+        {options.map(option => <ToggleButton value={option.value}>{option.label}</ToggleButton>)}
+    </StyledToggleButtonGroup>;
+  };
+  export default ToggleButtonGroup;

package/src/components/ToggleButtonGroup/index.ts

@@ -0,0 +1 @@
+export { default } from './ToggleButtonGroup';

package/src/components/index.ts

@@ -35,3 +35,4 @@ export { default as TimePicker } from './Form/TimePicker';
 export { default as Datatable } from './Datatable/Datatable';
 export { default as DatatableCellRender } from './Datatable/DatatableCellRender';
 export { default as IconButton } from './IconButton/IconButton';
+export { default as ToggleButtonGroup } from './ToggleButtonGroup/ToggleButtonGroup';