chore: replace imageupload card with studioconfigcard

src/Designer/frontend/language/src/nb.json

@@ -1480,6 +1480,7 @@
   "ux_editor.component_properties.compact": "Bruk kompakt visning",
   "ux_editor.component_properties.componentRef": "ID på komponenten det gjelder (componentRef)",
   "ux_editor.component_properties.config_is_expression_message": "Denne egenskapen er konfigurert som et uttrykk, og kan foreløpig ikke redigeres her.",
+  "ux_editor.component_properties.crop_card.delete_confirm_message": "Er du sikker på at du vil slette oppsettet til beskjæringen?",
   "ux_editor.component_properties.crop_card.title": "Form og størrelse",
   "ux_editor.component_properties.crop_circle": "Sirkel",
   "ux_editor.component_properties.crop_description": "Vi anbefaler ikke større enn 270 piksler for å ta hensyn til mobilvisning.",

src/Designer/frontend/packages/ux-editor/src/components/config/componentSpecificContent/ImageUpload/ImageUploadCard.tsx/ImageUploadCard.test.tsx

@@ -45,6 +45,16 @@ describe('ImageUploadCard', () => {
       height: 250,
     });
   });
+
+  it('should call handleSaveChanges with null when clicking delete button', async () => {
+    const user = userEvent.setup();
+    const handleSaveChangesMock = jest.fn();
+    jest.spyOn(window, 'confirm').mockReturnValue(true);
+    renderImageUploadCard({ handleSaveChanges: handleSaveChangesMock });
+    const deleteButton = screen.getByRole('button', { name: textMock('general.delete') });
+    await user.click(deleteButton);
+    expect(handleSaveChangesMock).toHaveBeenCalledWith(null);
+  });
 });
 
 const renderImageUploadCard = (props: Partial<ImageUploadCardProps> = {}) => {

src/Designer/frontend/packages/ux-editor/src/components/config/componentSpecificContent/ImageUpload/ImageUploadCard.tsx/ImageUploadCard.tsx

@@ -1,10 +1,14 @@
 import React, { useState } from 'react';
-import { StudioCard, StudioDivider, StudioParagraph } from '@studio/components';
+import { StudioConfigCard, StudioParagraph } from '@studio/components';
 import type { ErrorProps, ExternalCrop, InternalCrop } from '../ImageUploadTypes';
-import { getInitialValues, validateCrop } from '../ImageUploadUtils';
+import {
+  getCropToBeSaved,
+  getDisabledState,
+  getInitialValues,
+  validateCrop,
+} from '../ImageUploadUtils';
 import classes from './ImageUploadCard.module.css';
 import { ImageUploadSize } from './ImageUploadSize';
-import { ImageUploadActions } from './ImageUploadActions';
 import { ImageUploadShape } from './ImageUploadShape';
 import { useTranslation } from 'react-i18next';
 
@@ -22,29 +26,56 @@ export const ImageUploadCard = ({
   const [internalCrop, setInternalCrop] = useState<InternalCrop>(getInitialValues(externalCrop));
   const [errors, setErrors] = useState<ErrorProps>({});
   const { t } = useTranslation();
+  const isSaveDisabled = getDisabledState({ errors, internalCrop, externalCrop });
 
   const handleNewCrop = (newCrop: InternalCrop) => {
     const validationErrors = validateCrop(newCrop);
     setErrors(validationErrors);
     setInternalCrop(newCrop);
   };
 
+  const handleSave = () => {
+    handleSaveChanges(getCropToBeSaved(internalCrop));
+    setOpenCard(false);
+  };
+
+  const handleCancel = () => {
+    setOpenCard(false);
+  };
+
+  const handleDelete = () => {
+    handleSaveChanges(null);
+    setOpenCard(false);
+  };
+
   return (
-    <StudioCard className={classes.cardWrapper}>
-      <StudioParagraph>{t('ux_editor.component_properties.crop_card.title')}</StudioParagraph>
-      <StudioDivider />
-      <StudioParagraph className={classes.cardDescription}>
-        {t('ux_editor.component_properties.crop_description')}
-      </StudioParagraph>
-      <ImageUploadShape internalCrop={internalCrop} handleNewCrop={handleNewCrop} />
-      <ImageUploadSize handleNewCrop={handleNewCrop} internalCrop={internalCrop} errors={errors} />
-      <ImageUploadActions
-        internalCrop={internalCrop}
-        externalCrop={externalCrop}
-        errors={errors}
-        setOpenCard={setOpenCard}
-        handleSaveChanges={handleSaveChanges}
+    <StudioConfigCard className={classes.cardWrapper}>
+      <StudioConfigCard.Header
+        cardLabel={t('ux_editor.component_properties.crop_card.title')}
+        deleteAriaLabel={t('general.delete')}
+        confirmDeleteMessage={t('ux_editor.component_properties.crop_card.delete_confirm_message')}
+        onDelete={handleDelete}
+        isDeleteDisabled={!externalCrop}
+      />
+
+      <StudioConfigCard.Body>
+        <StudioParagraph className={classes.cardDescription}>
+          {t('ux_editor.component_properties.crop_description')}
+        </StudioParagraph>
+        <ImageUploadShape internalCrop={internalCrop} handleNewCrop={handleNewCrop} />
+        <ImageUploadSize
+          handleNewCrop={handleNewCrop}
+          internalCrop={internalCrop}
+          errors={errors}
+        />
+      </StudioConfigCard.Body>
+      <StudioConfigCard.Footer
+        isDisabled={isSaveDisabled}
+        onSave={handleSave}
+        onCancel={handleCancel}
+        saveLabel={t('general.save')}
+        cancelLabel={t('general.cancel')}
       />
-    </StudioCard>
+    </StudioConfigCard>
   );
 };

src/Designer/frontend/packages/ux-editor/src/components/config/componentSpecificContent/ImageUpload/ImageUploadComponent.tsx

@@ -35,7 +35,7 @@ export const ImageUploadComponent = ({
     );
   }
 
-  const handleSaveChanges = (cropToBeSaved: ExternalCrop) => {
+  const handleSaveChanges = (cropToBeSaved: ExternalCrop | null) => {
     handleComponentChange({
       ...component,
       crop: cropToBeSaved,