Move CardGroup into shared components dir

src/modules/formBuilder/components/itemEditor/conditionals/CardGroup.tsx → src/components/elements/CardGroup.tsx

@@ -10,6 +10,7 @@ interface RemovableCardProps {
   removeTooltip?: string;
   sx?: SxProps;
 }
+
 export const RemovableCard: React.FC<RemovableCardProps> = ({
   children,
   onRemove,
@@ -31,7 +32,11 @@ export const RemovableCard: React.FC<RemovableCardProps> = ({
       {children}
       <Box component='span' sx={{ position: 'absolute', right: 4, top: 4 }}>
         <ButtonTooltipContainer title={removeTooltip}>
-          <IconButton onClick={onRemove} size='small'>
+          <IconButton
+            onClick={onRemove}
+            size='small'
+            aria-label={removeTooltip || 'Remove'}
+          >
             <CloseIcon fontSize='small' />
           </IconButton>
         </ButtonTooltipContainer>
@@ -47,6 +52,7 @@ interface CardGroupProps {
   maxItems?: number;
   disableAdd?: boolean;
 }
+
 const CardGroup: React.FC<CardGroupProps> = ({
   children,
   onAddItem,
@@ -74,4 +80,5 @@ const CardGroup: React.FC<CardGroupProps> = ({
     </Box>
   );
 };
+
 export default CardGroup;

src/modules/admin/components/formRules/NewFormRuleDialog.tsx

@@ -8,6 +8,7 @@ import {
 } from '@mui/material';
 import { Stack } from '@mui/system';
 import React, { useCallback, useMemo, useState } from 'react';
+import CardGroup, { RemovableCard } from '@/components/elements/CardGroup';
 import CommonDialog from '@/components/elements/CommonDialog';
 import theme from '@/config/theme';
 import { useIsMobile } from '@/hooks/useIsMobile';
@@ -18,9 +19,6 @@ import FormSelect from '@/modules/form/components/FormSelect';
 import { usePickList } from '@/modules/form/hooks/usePickList';
 import { isPickListOption } from '@/modules/form/types';
 import { localResolvePickList } from '@/modules/form/util/formUtil';
-import CardGroup, {
-  RemovableCard,
-} from '@/modules/formBuilder/components/itemEditor/conditionals/CardGroup';
 import {
   DataCollectedAbout,
   FormRole,

src/modules/formBuilder/components/itemEditor/conditionals/AutofillProperties.tsx

@@ -1,7 +1,7 @@
 import { useFieldArray, UseFormSetValue } from 'react-hook-form';
 import { FormItemControl, FormItemState } from '../types';
 import AutofillValueCard from './AutofillValueCard';
-import CardGroup, { RemovableCard } from './CardGroup';
+import CardGroup, { RemovableCard } from '@/components/elements/CardGroup';
 import { ItemMap } from '@/modules/form/types';
 import { ItemType } from '@/types/gqlTypes';
 

src/modules/formBuilder/components/itemEditor/conditionals/InitialValue.tsx

@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react';
 import { Controller, useFieldArray, useWatch } from 'react-hook-form';
 import { FormItemControl } from '../types';
 import { useLocalConstantsPickList } from '../useLocalConstantsPickList';
-import CardGroup, { RemovableCard } from './CardGroup';
+import CardGroup, { RemovableCard } from '@/components/elements/CardGroup';
 import LabeledCheckbox from '@/components/elements/input/LabeledCheckbox';
 import YesNoRadio from '@/components/elements/input/YesNoRadio';
 import ControlledRadioGroupInput from '@/modules/form/components/rhf/ControlledRadioGroupInput';

src/modules/formBuilder/components/itemEditor/conditionals/ManageEnableWhen.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { useFieldArray, UseFormSetValue } from 'react-hook-form';
 import { FormItemControl, FormItemState } from '../types';
-import CardGroup, { RemovableCard } from './CardGroup';
 import EnableWhenCondition from './EnableWhenCondition';
 import { useItemPickList } from './useItemPickList';
+import CardGroup, { RemovableCard } from '@/components/elements/CardGroup';
 import ControlledRadioGroupInput from '@/modules/form/components/rhf/ControlledRadioGroupInput';
 import { ItemMap } from '@/modules/form/types';
 import { EnableBehavior } from '@/types/gqlTypes';

src/modules/formBuilder/components/itemEditor/conditionals/ValueBounds.tsx

@@ -1,8 +1,8 @@
 import { useFieldArray } from 'react-hook-form';
 import { v4 } from 'uuid';
 import { FormItemControl } from '../types';
-import CardGroup, { RemovableCard } from './CardGroup';
 import ValueBoundCard from './ValueBoundCard';
+import CardGroup, { RemovableCard } from '@/components/elements/CardGroup';
 import { ItemMap } from '@/modules/form/types';
 import { BoundType, ValidationSeverity } from '@/types/gqlTypes';
 interface Props {

src/modules/formBuilder/components/itemEditor/pickLists/ManagePickListOptions.tsx

@@ -1,11 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 import { useFieldArray, UseFormSetValue, useWatch } from 'react-hook-form';
 import PickListOption from './PickListOption';
+import CardGroup, { RemovableCard } from '@/components/elements/CardGroup';
 import ControlledSelect from '@/modules/form/components/rhf/ControlledSelect';
 import { chooseSelectComponentType } from '@/modules/form/util/formUtil';
-import CardGroup, {
-  RemovableCard,
-} from '@/modules/formBuilder/components/itemEditor/conditionals/CardGroup';
 import {
   FormItemControl,
   FormItemState,