Add custom content feature to FunctionalitiesModule and ListOptions components

This commit introduces a new feature that allows the FunctionalitiesModule and ListOptions components to display custom content. This is achieved by adding a `content` property to these components and their corresponding types. The `content` property is of type `React.ReactNode`, allowing for flexible rendering of custom content.

Updates have been made to the corresponding test and story files to reflect this new feature. A new story, `FunctionalitiesModuleWithContent`, has been added to demonstrate the usage of the new feature.

These changes enhance the flexibility of the FunctionalitiesModule and ListOptions components, allowing them to be used in a wider range of contexts within the application.

Author: Hector Arce De Las Heras

src/components/listOptions/__tests__/listOptions.test.tsx

@@ -31,6 +31,7 @@ const MOCK = {
       value: 2,
     },
   ],
+  content: <div>Content</div>,
   onOptionClick: jest.fn(),
 };
 

src/components/listOptions/listOptionsStandAlone.tsx

@@ -65,6 +65,7 @@ export const ListOptionsStandAlone = React.forwardRef(
             </Text>
           </TitleWrapperStyled>
         )}
+        {props.content}
         <OptionsWrapperStyled
           ref={listEl as React.RefObject<HTMLUListElement>}
           as={'ul'}
@@ -73,7 +74,12 @@ export const ListOptionsStandAlone = React.forwardRef(
           styles={props.styles}
         >
           {props.options.map((option, index) => {
-            const selected = isSelected(option, props.selectedValue, props.multiSelect);
+            const selected = isSelected(
+              option,
+              props.selectedValue,
+              props.multiSelect,
+              props.caseSensitive
+            );
             const optionComponent = (
               <Option
                 key={`${id}Option${index}`}

src/components/listOptions/stories/argtypes.ts

@@ -62,6 +62,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    content: {
+      description: 'Content to show before the options',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
     options: {
       description: 'List of options',
       type: { name: 'array', required: true },
@@ -188,5 +199,16 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.CUSTOMIZATION,
       },
     },
+    caseSensitive: {
+      description: 'Indicates if the search is case sensitive',
+      control: { type: 'boolean' },
+      type: { name: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
   };
 };

src/components/listOptions/types/listOptions.ts

@@ -25,9 +25,11 @@ export interface IListOptionsStandAlone {
   styles: ListOptionsPropsStylesType;
   type?: ListOptionsType;
   options: ListOptionsOptionType[];
+  caseSensitive?: boolean;
   charsHighlighted?: string;
   selectedValue?: string | number | string[] | number[] | null;
   title?: ListOptionsTitleType;
+  content?: React.ReactNode;
   onOptionClick?: (
     value,
     event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>

src/components/listOptions/utils/listOptions.utils.ts

@@ -3,13 +3,20 @@ import { ListOptionsOptionType } from '../types';
 export const isSelected = (
   option: ListOptionsOptionType,
   selectedValue?: string | number | (string | number)[] | null,
-  isMultiSelect?: boolean
+  isMultiSelect?: boolean,
+  caseSensitive?: boolean
 ): boolean => {
   if (selectedValue !== null && selectedValue !== undefined && option.value !== undefined) {
     if (isMultiSelect) {
       return Boolean(Array.isArray(selectedValue) && selectedValue.includes(option.value));
     }
-    return Boolean(selectedValue === option.value);
+    if (caseSensitive) {
+      return Boolean(selectedValue === option.value);
+    }
+    return Boolean(
+      selectedValue.toLocaleString().toLocaleLowerCase() ===
+        option.value.toLocaleString().toLocaleLowerCase()
+    );
   }
   return false;
 };

src/components/oliveMenu/oliveMenu.styled.tsx

@@ -14,6 +14,9 @@ export const OliveMenuStyled = styled.div<OliveMenuStylesProps>`
 
 export const ButtonContainer = styled.div<OliveMenuStylesProps>`
   ${({ styles }) => getStyles(styles.buttonContainer)};
+  > button {
+    ${({ styles }) => getStyles(styles.button)};
+  }
 `;
 
 export const ListboxStyled = styled.div<OliveMenuStylesProps>`

src/components/oliveMenu/types/oliveMenuTheme.ts

@@ -3,7 +3,7 @@ import { CommonStyleType, DeviceBreakpointsType, POSITIONS } from '@/types';
 export type OliveMenuGlobalStylesType = {
   container?: CommonStyleType;
   buttonContainer?: CommonStyleType;
-  button?: {
+  button?: CommonStyleType & {
     [key in DeviceBreakpointsType]?: {
       size?: string;
     };

src/components/popover/popoverControlled.tsx

@@ -9,6 +9,7 @@ import { useScrollBlock } from '@/hooks/useScrollBlock/useScrollBlock';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 import { focusFirstDescendant, trapFocus } from '@/utils';
+import { convertDurationToNumber } from '@/utils/stringUtility/string.utility';
 
 import { PopoverStandAlone } from './popoverStandAlone';
 import { PopoverComponentType, PopoverVariantStylesType } from './types';
@@ -146,18 +147,35 @@ const PopoverControlledComponent = React.forwardRef(
       }
     }, [props.open]);
 
+    // deprecated - Remove the condition when `exitDuration`, `duration` and `delay' are type string
+    const animationExitDuration = () => {
+      if (
+        typeof animationConfig?.animationOptions?.exitDuration === 'string' ||
+        typeof animationConfig?.animationOptions?.duration === 'string' ||
+        typeof animationConfig?.animationOptions?.delay === 'string'
+      ) {
+        const exitDuration = convertDurationToNumber(
+          animationConfig?.animationOptions?.exitDuration
+        );
+        const duration = convertDurationToNumber(animationConfig?.animationOptions?.duration);
+        const delay = convertDurationToNumber(animationConfig?.animationOptions?.delay);
+
+        return (exitDuration || duration || 0) + (delay || 0);
+      }
+      return (
+        ((animationConfig?.animationOptions?.exitDuration ||
+          animationConfig?.animationOptions?.duration ||
+          0) +
+          (animationConfig?.animationOptions?.delay || 0)) *
+        MILISECONDS
+      );
+    };
+
     const waitForAnimation = () => {
       return new Promise<void>(resolve => {
-        setTimeout(
-          () => {
-            resolve();
-          },
-          ((animationConfig.animationOptions?.exitDuration ||
-            animationConfig.animationOptions?.duration ||
-            0) +
-            (animationConfig.animationOptions?.delay || 0)) *
-            MILISECONDS
-        );
+        setTimeout(() => {
+          resolve();
+        }, animationExitDuration());
       });
     };