fix: simplify studioToggleableTextfield

frontend/language/src/nb.json

@@ -696,7 +696,7 @@
   "process_editor.configuration_panel_actions_set_server_action_info": "Angir at handlingen knyttes til neste steg i prosessen.",
   "process_editor.configuration_panel_actions_set_server_action_label": "Knytt handlingen til neste steg.",
   "process_editor.configuration_panel_actions_title": "Handlinger",
-  "process_editor.configuration_panel_change_task_id": "Endre ID",
+  "process_editor.configuration_panel_change_task_id_label": "Oppgave-ID",
   "process_editor.configuration_panel_confirmation_task": "Oppgave: Bekreftelse",
   "process_editor.configuration_panel_custom_receipt_accordion_header": "Kvittering",
   "process_editor.configuration_panel_custom_receipt_cancel_button": "Avbryt",
@@ -710,7 +710,6 @@
   "process_editor.configuration_panel_custom_receipt_delete_receipt": "Er du sikker på at du vil slette kvitteringen din?",
   "process_editor.configuration_panel_custom_receipt_heading": "Opprett din egen kvittering",
   "process_editor.configuration_panel_custom_receipt_info": "Hvis du heller vil lage din egen kvittering, kan du opprette den her. Kvitteringen du lager selv vil overstyre standardkvitteringen.",
-  "process_editor.configuration_panel_custom_receipt_layout_set_name": "Navn på kvittering: ",
   "process_editor.configuration_panel_custom_receipt_layout_set_name_validation": "Navnet må ha minst 2 tegn",
   "process_editor.configuration_panel_custom_receipt_navigate_to_design_button": "Gå til Utforming",
   "process_editor.configuration_panel_custom_receipt_navigate_to_design_title": "Gå til Utforming for å utforme kvitteringen din",
@@ -1567,7 +1566,6 @@
   "ux_editor.file_upload_component.valid_file_endings": "Innstillinger for filopplastingskomponent",
   "ux_editor.formLayout.warning_duplicates": "Du har den samme ID-en på flere komponenter: ",
   "ux_editor.formLayout.warning_duplicates.cannot_publish": "Du kan ikke publisere appen eller konfigurere komponentene før du har rettet opp feilen.",
-  "ux_editor.id_identifier": "ID: {{item}}",
   "ux_editor.image_component.settings": "Innstillinger for bilde",
   "ux_editor.info": "Informasjon",
   "ux_editor.input_popover_label": "Gi nytt navn til siden",

frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.module.css

@@ -1,15 +1,14 @@
 .container {
   display: flex;
   gap: var(--fds-spacing-2);
-  padding: var(--fds-spacing-3);
-  box-sizing: border-box;
+  align-items: flex-start;
+  padding: var(--fds-spacing-2);
 }
 
 .prefixIcon {
   color: var(--fds-semantic-text-neutral-default);
-  margin-top: var(--fds-spacing-7);
+  margin-top: var(--fds-spacing-10);
   font-size: var(--fds-sizing-4);
-  align-content: center;
 }
 
 .textfield {

frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.stories.tsx

@@ -20,6 +20,7 @@ export const Preview: Story = (args) => <StudioIconTextfield {...args}></StudioI
 
 Preview.args = {
   icon: <PencilIcon />,
+  label: 'Write a text',
   value: 2.3,
   error: 'Your custom error message!',
 };

frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { RenderResult } from '@testing-library/react';
 import { render, screen } from '@testing-library/react';
 import { StudioIconTextfield } from './StudioIconTextfield';
 import type { StudioIconTextfieldProps } from './StudioIconTextfield';
@@ -7,43 +8,52 @@ import userEvent from '@testing-library/user-event';
 import { testCustomAttributes } from '../../test-utils/testCustomAttributes';
 
 describe('StudioIconTextfield', () => {
-  it('render the icon', async () => {
-    renderStudioIconTextfield({
-      icon: <KeyVerticalIcon title='my key icon title' />,
-    });
-    expect(screen.getByTitle('my key icon title')).toBeInTheDocument();
-  });
+  afterEach(jest.clearAllMocks);
 
   it('should render label', () => {
-    renderStudioIconTextfield({
-      icon: <div />,
-      label: 'id',
-    });
-    expect(screen.getByLabelText('id')).toBeInTheDocument();
+    renderStudioIconTextfield();
+    expect(screen.getByLabelText(label)).toBeInTheDocument();
   });
 
-  it('should execute onChange callback when input value changes', async () => {
-    const user = userEvent.setup();
-    const onChangeMock = jest.fn();
+  it('should render value when provided', () => {
+    const value = 'value';
+    renderStudioIconTextfield({ value });
+    expect(screen.getByRole('textbox', { name: label })).toHaveValue(value);
+  });
 
-    renderStudioIconTextfield({
-      icon: <div />,
-      label: 'Your ID',
-      onChange: onChangeMock,
-    });
+  it('render icon when provided', () => {
+    const icon = <KeyVerticalIcon />;
+    renderStudioIconTextfield({ icon });
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
 
-    const input = screen.getByLabelText('Your ID');
+  it('does not render the icon if not provided', () => {
+    renderStudioIconTextfield();
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
 
+  it('should execute onChange callback when input value changes', async () => {
+    const user = userEvent.setup();
+    renderStudioIconTextfield();
+    const input = screen.getByRole('textbox', { name: label });
     const inputValue = 'my id is 123';
     await user.type(input, inputValue);
-    expect(onChangeMock).toHaveBeenCalledTimes(inputValue.length);
+    expect(onChange).toHaveBeenCalledTimes(inputValue.length);
   });
 
   it('should forward the rest of the props to the input', () => {
     const getTextbox = (): HTMLInputElement => screen.getByRole('textbox') as HTMLInputElement;
     testCustomAttributes<HTMLInputElement>(renderStudioIconTextfield, getTextbox);
   });
 });
-const renderStudioIconTextfield = (props: StudioIconTextfieldProps) => {
-  return render(<StudioIconTextfield {...props} />);
+
+const label = 'label';
+const onChange = jest.fn();
+const defaultProps: StudioIconTextfieldProps = {
+  label,
+  onChange,
+};
+
+const renderStudioIconTextfield = (props: Partial<StudioIconTextfieldProps> = {}): RenderResult => {
+  return render(<StudioIconTextfield {...defaultProps} {...props} />);
 };

frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.tsx

@@ -1,16 +1,20 @@
 import React, { forwardRef } from 'react';
 import { StudioTextfield, type StudioTextfieldProps } from '../StudioTextfield';
 import cn from 'classnames';
-
 import classes from './StudioIconTextfield.module.css';
+import type { Override } from '../../types/Override';
 
-export type StudioIconTextfieldProps = {
-  icon: React.ReactNode;
-} & StudioTextfieldProps;
+export type StudioIconTextfieldProps = Override<
+  {
+    icon?: React.ReactNode;
+    label: string;
+  },
+  StudioTextfieldProps
+>;
 
 export const StudioIconTextfield = forwardRef<HTMLDivElement, StudioIconTextfieldProps>(
   (
-    { icon, className: givenClassName, ...rest }: StudioIconTextfieldProps,
+    { icon, label, className: givenClassName, ...rest }: StudioIconTextfieldProps,
     ref,
   ): React.ReactElement => {
     const className = cn(givenClassName, classes.container);
@@ -19,7 +23,7 @@ export const StudioIconTextfield = forwardRef<HTMLDivElement, StudioIconTextfiel
         <div aria-hidden className={classes.prefixIcon}>
           {icon}
         </div>
-        <StudioTextfield {...rest} className={classes.textfield} />
+        <StudioTextfield className={classes.textfield} label={label} size='small' {...rest} />
       </div>
     );
   },

frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 import { StudioToggleableTextfield } from './StudioToggleableTextfield';
-import { KeyVerticalIcon } from '@studio/icons';
 
 type Story = StoryFn<typeof StudioToggleableTextfield>;
 
@@ -16,19 +15,10 @@ export const Preview: Story = (args) => (
 
 Preview.args = {
   onIsViewMode: () => {},
-  viewProps: {
-    variant: 'tertiary',
-    size: 'small',
-    label: 'My awesome label',
-    children: 'My awesome value',
-  },
-  inputProps: {
-    icon: <KeyVerticalIcon />,
-    label: 'My awesome label',
-    size: 'small',
-    placeholder: 'Placeholder',
-    error: '',
-  },
+  label: 'My awesome label',
+  title: 'My awesome title',
+  value: 'My awesome value',
+  error: '',
 };
 
 export default meta;