feat: 14164 implement the legg til ny component for the last four standard choices

frontend/language/src/nb.json

@@ -1391,6 +1391,7 @@
   "ux_editor.component_properties.pagination": "Sidenummerering",
   "ux_editor.component_properties.position": "Plassering av valuta",
   "ux_editor.component_properties.preselectedOptionIndex": "Angi det valget som skal være forhåndsvalgt.",
+  "ux_editor.component_properties.preselectedOptionIndex_button": "Plassering av forhåndsvalgt verdi (indeks)",
   "ux_editor.component_properties.preselected_help_text": "Eksempel: Hvis du har 5 valg, kan du bruke tall fra 0-4.",
   "ux_editor.component_properties.queryParameters": "Parametere i spørringen",
   "ux_editor.component_properties.readOnly": "Feltet kan kun leses",
@@ -1419,7 +1420,7 @@
   "ux_editor.component_properties.showIcon": "Vis ikon",
   "ux_editor.component_properties.showLabelsInTable": "Alternativene skal alltid vises i tabeller",
   "ux_editor.component_properties.showPageInAccordion": "Vis side i trekkspilliste",
-  "ux_editor.component_properties.showValidations": "Vis valideringer",
+  "ux_editor.component_properties.showValidations": "Vis valideringstyper",
   "ux_editor.component_properties.simplified": "Forenklet visning",
   "ux_editor.component_properties.size": "Størrelse",
   "ux_editor.component_properties.sortOrder": "Sorteringsrekkefølge",

frontend/packages/ux-editor/src/components/config/CollapsiblePropertyEditor/CollapsiblePropertyEditor.module.css

@@ -0,0 +1,23 @@
+.collapsibleContainer {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: var(--fds-spacing-4);
+  padding-bottom: var(--fds-spacing-3);
+  padding-top: var(--fds-spacing-3);
+}
+
+.collapsibleContainerClosed {
+  padding: 0;
+}
+
+.editorContent {
+  flex: 1;
+}
+
+.button {
+  display: flex;
+  gap: var(--fds-spacing-3);
+  padding-left: 0;
+}

frontend/packages/ux-editor/src/components/config/CollapsiblePropertyEditor/CollapsiblePropertyEditor.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  CollapsiblePropertyEditor,
+  type CollapsiblePropertyEditorProps,
+} from './CollapsiblePropertyEditor';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
+import { renderWithProviders } from 'app-development/test/mocks';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+
+// Test data
+const label = 'Test label';
+const children = <div>Test children</div>;
+const icon = <div>Test icon</div>;
+
+describe('CollapsiblePropertyEditor', () => {
+  it('should render the label', () => {
+    renderCollapsiblePropertyEditor({ label: label });
+    expect(screen.getByText('Test label')).toBeInTheDocument();
+  });
+
+  it('should render the icon', () => {
+    renderCollapsiblePropertyEditor({ icon: <div>Test icon</div> });
+    expect(screen.getByText('Test icon')).toBeInTheDocument();
+  });
+
+  it('should render the children', () => {
+    renderCollapsiblePropertyEditor();
+    expect(screen.queryByText('Test children')).not.toBeInTheDocument();
+  });
+
+  it('should render the children when the button is clicked', async () => {
+    const user = userEvent.setup();
+    renderCollapsiblePropertyEditor();
+    await user.click(screen.getByText('Test label'));
+    expect(screen.getByText('Test children')).toBeInTheDocument();
+  });
+
+  it('should hide the children when the close button is clicked', async () => {
+    const user = userEvent.setup();
+    renderCollapsiblePropertyEditor();
+    await user.click(screen.getByText('Test label'));
+    expect(screen.getByText('Test children')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: textMock('general.close') }));
+    expect(screen.queryByText('Test children')).not.toBeInTheDocument();
+  });
+});
+
+const defaultProps: CollapsiblePropertyEditorProps = {
+  label,
+  children,
+  icon,
+};
+
+const renderCollapsiblePropertyEditor = (props: Partial<CollapsiblePropertyEditorProps> = {}) => {
+  renderWithProviders()(<CollapsiblePropertyEditor {...defaultProps} {...props} />);
+};

frontend/packages/ux-editor/src/components/config/CollapsiblePropertyEditor/CollapsiblePropertyEditor.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { PlusCircleIcon, XMarkIcon } from '@studio/icons';
+import { StudioButton, StudioProperty } from '@studio/components';
+import classes from './CollapsiblePropertyEditor.module.css';
+import { useTranslation } from 'react-i18next';
+import cn from 'classnames';
+
+export type CollapsiblePropertyEditorProps = {
+  label?: string;
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  disabledCloseButton?: boolean;
+};
+
+export const CollapsiblePropertyEditor = ({
+  label,
+  children,
+  disabledCloseButton = false,
+  icon = <PlusCircleIcon />,
+}: CollapsiblePropertyEditorProps) => {
+  const { t } = useTranslation();
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div
+      className={cn(isVisible ? classes.collapsibleContainer : classes.collapsibleContainerClosed)}
+    >
+      {!isVisible ? (
+        <StudioProperty.Button
+          className={classes.button}
+          icon={icon}
+          onClick={() => setIsVisible(true)}
+          property={label}
+        />
+      ) : (
+        <>
+          <div className={classes.editorContent}>{children}</div>
+          {!disabledCloseButton && (
+            <StudioButton
+              icon={<XMarkIcon />}
+              onClick={() => setIsVisible(false)}
+              title={t('general.close')}
+              variant='secondary'
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+};

frontend/packages/ux-editor/src/components/config/CollapsiblePropertyEditor/index.ts

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

frontend/packages/ux-editor/src/components/config/FormComponentConfig.module.css

@@ -12,3 +12,7 @@
 .downIcon {
   font-size: var(--fds-sizing-6);
 }
+
+.gridButton {
+  padding: 0;
+}

frontend/packages/ux-editor/src/components/config/FormComponentConfig.test.tsx

@@ -160,6 +160,88 @@ describe('FormComponentConfig', () => {
     expect(screen.queryByText('unsupportedProperty')).not.toBeInTheDocument();
   });
 
+  it('should render CollapsiblePropertyEditor for the "sortOrder" property', () => {
+    render({
+      props: {
+        schema: {
+          ...InputSchema,
+          properties: {
+            ...InputSchema.properties,
+            sortOrder: {
+              type: 'array',
+              items: {
+                type: 'string',
+                enum: ['option1', 'option2'],
+              },
+            },
+          },
+        },
+      },
+    });
+    expect(
+      screen.getByText(textMock('ux_editor.component_properties.sortOrder')),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('combobox', {
+        name: textMock('ux_editor.component_properties.sortOrder'),
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('should render CollapsiblePropertyEditor for the "showValidations" property and EditStringValue for other properties', () => {
+    render({
+      props: {
+        schema: {
+          ...InputSchema,
+          properties: {
+            ...InputSchema.properties,
+            showValidations: {
+              type: 'array',
+              items: {
+                type: 'string',
+                enum: ['true', 'false'],
+              },
+            },
+            anotherProperty: {
+              type: 'array',
+              items: {
+                type: 'string',
+                enum: ['option1', 'option2'],
+              },
+            },
+          },
+        },
+      },
+    });
+    expect(
+      screen.getByText(textMock('ux_editor.component_properties.showValidations')),
+    ).toBeInTheDocument();
+  });
+
+  it('should render CollapsiblePropertyEditor for "preselectedOptionIndex" and EditNumberValue for other properties', () => {
+    render({
+      props: {
+        schema: {
+          ...InputSchema,
+          properties: {
+            ...InputSchema.properties,
+            preselectedOptionIndex: {
+              type: 'number',
+              enum: [0, 1, 2],
+            },
+            anotherNumberProperty: {
+              type: 'number',
+              description: 'A sample number property',
+            },
+          },
+        },
+      },
+    });
+    expect(
+      screen.getByText(textMock('ux_editor.component_properties.preselectedOptionIndex_button')),
+    ).toBeInTheDocument();
+  });
+
   it('should not render property if it is null', () => {
     render({
       props: {