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/TextResource/TextResource.test.tsx

@@ -223,6 +223,50 @@ describe('TextResource', () => {
     expect(textbox.style.height).toBe('100px'); // the min height passed to the useAutoSizeTextArea hook from TextResourceValueEditor
     expect(textbox.style.overflow).toBe('hidden');
   });
+
+  it('Does not render the TextResourceEditor when disableEditor is true', async () => {
+    const label = 'Test';
+    renderTextResource({ label, disableEditor: true });
+    await user.click(screen.getByRole('button', { name: label }));
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+  });
+
+  it('Renders the TextResourceEditor when disableEditor is false', async () => {
+    const label = 'Test';
+    renderTextResource({ label, disableEditor: false });
+    await user.click(screen.getByRole('button', { name: label }));
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('Renders the TextResourceEditor when disableEditor is false', async () => {
+    const label = 'Test';
+    renderTextResource({ label, disableEditor: false });
+    await user.click(screen.getByRole('button', { name: label }));
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('Does not render the TextResourceEditor when disableEditor is true', async () => {
+    const label = 'Test';
+    renderTextResource({ label, disableEditor: true });
+    await user.click(screen.getByRole('button', { name: label }));
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+  });
+
+  it('Renders the delete button when disableEditor is false', async () => {
+    const label = 'Test';
+    renderTextResource({ label, disableEditor: false });
+    await user.click(screen.getByRole('button', { name: label }));
+    expect(screen.getByRole('button', { name: textMock('general.delete') })).toBeInTheDocument();
+  });
+
+  it('Does not render the delete button when disableEditor is true', async () => {
+    const label = 'Test';
+    renderTextResource({ label, disableEditor: true });
+    await user.click(screen.getByRole('button', { name: label }));
+    expect(
+      screen.queryByRole('button', { name: textMock('general.delete') }),
+    ).not.toBeInTheDocument();
+  });
 });
 
 const renderAndOpenSearchSection = async () => {

frontend/packages/ux-editor/src/components/TextResource/TextResource.tsx

@@ -17,6 +17,9 @@ export interface TextResourceProps {
   textResourceId?: string;
   generateIdOptions?: GenerateTextResourceIdOptions;
   compact?: boolean;
+  disableEditor?: boolean;
+  children?: React.ReactNode;
+  className?: string;
 }
 
 export interface GenerateTextResourceIdOptions {
@@ -39,6 +42,9 @@ export const TextResource = ({
   handleRemoveTextResource,
   label,
   textResourceId,
+  disableEditor,
+  children,
+  className,
 }: TextResourceProps) => {
   const { formItemId } = useFormItemContext();
   const { selectedFormLayoutName: formLayoutName } = useAppContext();
@@ -85,9 +91,13 @@ export const TextResource = ({
       onSetCurrentValue={setCurrentValue}
       onReferenceChange={handleIdChange}
       textResourceId={textResourceId}
-    />
+      showTextResourceEditor={!disableEditor}
+    >
+      {children}
+    </TextResourceFieldset>
   ) : (
     <TextResourceButton
+      className={className}
       compact={compact}
       label={label}
       onOpen={handleOpen}
@@ -104,6 +114,8 @@ type TextResourceFieldsetProps = {
   onReferenceChange: (id: string) => void;
   onSetCurrentValue: (value: string) => void;
   textResourceId: string;
+  showTextResourceEditor?: boolean;
+  children?: React.ReactNode;
 };
 
 const TextResourceFieldset = ({
@@ -114,6 +126,8 @@ const TextResourceFieldset = ({
   onReferenceChange,
   onSetCurrentValue,
   textResourceId,
+  showTextResourceEditor = true,
+  children,
 }: TextResourceFieldsetProps) => {
   const { t } = useTranslation();
 
@@ -123,27 +137,32 @@ const TextResourceFieldset = ({
       legend={legend}
       menubar={
         <>
-          <span>{t('language.' + DEFAULT_LANGUAGE)}</span>
+          {showTextResourceEditor && <span>{t('language.' + DEFAULT_LANGUAGE)}</span>}
           <StudioButton
             icon={<XMarkIcon />}
             onClick={onClose}
             title={t('general.close')}
             variant='secondary'
           />
-          <StudioDeleteButton
-            confirmMessage={t('ux_editor.text_resource_bindings.delete_confirm_question')}
-            disabled={!onDelete}
-            onDelete={() => onDelete?.()}
-            title={t('general.delete')}
-          />
+          {showTextResourceEditor && (
+            <StudioDeleteButton
+              confirmMessage={t('ux_editor.text_resource_bindings.delete_confirm_question')}
+              disabled={!onDelete}
+              onDelete={() => onDelete?.()}
+              title={t('general.delete')}
+            />
+          )}
         </>
       }
     >
-      <TextResourceEditor
-        textResourceId={textResourceId}
-        onReferenceChange={onReferenceChange}
-        onSetCurrentValue={onSetCurrentValue}
-      />
+      {showTextResourceEditor && (
+        <TextResourceEditor
+          textResourceId={textResourceId}
+          onReferenceChange={onReferenceChange}
+          onSetCurrentValue={onSetCurrentValue}
+        />
+      )}
+      {children}
     </StudioProperty.Fieldset>
   );
 };
@@ -153,16 +172,24 @@ type TextResourceButtonProps = {
   label: string;
   onOpen: () => void;
   textResourceId: string;
+  className?: string;
 };
 
 const TextResourceButton = ({
   compact,
   label,
   onOpen,
   textResourceId,
+  className,
 }: TextResourceButtonProps) => {
   const value = useTextResourceValue(textResourceId);
   return (
-    <StudioProperty.Button compact={compact} onClick={onOpen} property={label} value={value} />
+    <StudioProperty.Button
+      compact={compact}
+      onClick={onOpen}
+      property={label}
+      value={value}
+      className={className}
+    />
   );
 };

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,46 @@
+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;
+};
+
+export const CollapsiblePropertyEditor = ({
+  label,
+  children,
+  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>
+          <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;
+}