+
onLayoutSetClick(event.target.value)}
value={selectedFormLayoutSetName}
className={classes.layoutSetsDropDown}
diff --git a/frontend/packages/ux-editor/src/components/Preview/Preview.test.tsx b/frontend/packages/ux-editor/src/components/Preview/Preview.test.tsx
index 8466c45fcec..0f756774937 100644
--- a/frontend/packages/ux-editor/src/components/Preview/Preview.test.tsx
+++ b/frontend/packages/ux-editor/src/components/Preview/Preview.test.tsx
@@ -60,18 +60,22 @@ describe('Preview', () => {
it('should be possible to toggle preview window', async () => {
const user = userEvent.setup();
- render();
+ const view = render();
const hidePreviewButton = screen.getByRole('button', {
name: textMock('ux_editor.close_preview'),
});
await user.click(hidePreviewButton);
+ expect(collapseToggle).toHaveBeenCalledTimes(1);
+ view.rerender();
expect(hidePreviewButton).not.toBeInTheDocument();
const showPreviewButton = screen.getByRole('button', {
name: textMock('ux_editor.open_preview'),
});
await user.click(showPreviewButton);
+ expect(collapseToggle).toHaveBeenCalledTimes(2);
+ view.rerender();
expect(showPreviewButton).not.toBeInTheDocument();
});
@@ -91,7 +95,7 @@ describe('Preview', () => {
const newSelectedFormLayoutName = 'test';
appContextMock.selectedFormLayoutName = newSelectedFormLayoutName;
- view.rerender();
+ view.rerender();
expect(appContextMock.previewIframeRef?.current?.src).toBe(
'http://localhost' +
@@ -106,5 +110,11 @@ describe('Preview', () => {
});
});
-export const render = (options: Partial = {}) =>
- renderWithProviders(, options);
+const collapseToggle = jest.fn();
+
+export const render = (options: Partial = {}) => {
+ return renderWithProviders(
+ ,
+ options,
+ );
+};
diff --git a/frontend/packages/ux-editor/src/components/Preview/Preview.tsx b/frontend/packages/ux-editor/src/components/Preview/Preview.tsx
index 09ec6bf48fa..eb907396a9b 100644
--- a/frontend/packages/ux-editor/src/components/Preview/Preview.tsx
+++ b/frontend/packages/ux-editor/src/components/Preview/Preview.tsx
@@ -6,30 +6,32 @@ import { useTranslation } from 'react-i18next';
import { useAppContext, useSelectedTaskId } from '../../hooks';
import { useChecksum } from '../../hooks/useChecksum.ts';
import { previewPage } from 'app-shared/api/paths';
-import { Paragraph } from '@digdir/design-system-react';
+import { Paragraph } from '@digdir/designsystemet-react';
import { StudioButton, StudioCenter } from '@studio/components';
import type { SupportedView } from './ViewToggler/ViewToggler';
import { ViewToggler } from './ViewToggler/ViewToggler';
-import { ArrowRightIcon } from '@studio/icons';
+import { ShrinkIcon } from '@studio/icons';
import { PreviewLimitationsInfo } from 'app-shared/components/PreviewLimitationsInfo/PreviewLimitationsInfo';
-export const Preview = () => {
+export type PreviewProps = {
+ collapsed: boolean;
+ onCollapseToggle: () => void;
+ hidePreview?: boolean;
+};
+
+export const Preview = ({ collapsed, onCollapseToggle, hidePreview }: PreviewProps) => {
const { t } = useTranslation();
- const [isPreviewHidden, setIsPreviewHidden] = useState(false);
const { selectedFormLayoutName } = useAppContext();
const noPageSelected =
selectedFormLayoutName === 'default' || selectedFormLayoutName === undefined;
- const togglePreview = (): void => {
- setIsPreviewHidden((prev: boolean) => !prev);
- };
-
- return isPreviewHidden ? (
+ return collapsed ? (
{t('ux_editor.open_preview')}
@@ -38,12 +40,30 @@ export const Preview = () => {
}
+ icon={}
title={t('ux_editor.close_preview')}
className={classes.closePreviewButton}
- onClick={togglePreview}
+ onClick={onCollapseToggle}
/>
- {noPageSelected ? : }
+ {noPageSelected ? (
+
+ ) : (
+ <>
+ {hidePreview && (
+
+ )}
+
+
+ )}
);
};
diff --git a/frontend/packages/ux-editor/src/components/Preview/ViewToggler/ViewToggler.tsx b/frontend/packages/ux-editor/src/components/Preview/ViewToggler/ViewToggler.tsx
index 859d5176291..f6b77821b1a 100644
--- a/frontend/packages/ux-editor/src/components/Preview/ViewToggler/ViewToggler.tsx
+++ b/frontend/packages/ux-editor/src/components/Preview/ViewToggler/ViewToggler.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Switch } from '@digdir/design-system-react';
+import { Switch } from '@digdir/designsystemet-react';
import { useTranslation } from 'react-i18next';
import classes from './ViewToggler.module.css';
diff --git a/frontend/packages/ux-editor/src/components/Properties/ConditionalRendering.tsx b/frontend/packages/ux-editor/src/components/Properties/ConditionalRendering.tsx
index 540f3559cd5..6b56c40e9f0 100644
--- a/frontend/packages/ux-editor/src/components/Properties/ConditionalRendering.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/ConditionalRendering.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { Alert } from '@digdir/design-system-react';
+import { Alert } from '@digdir/designsystemet-react';
import classes from './ConditionalRendering.module.css';
import { PlusIcon } from '@studio/icons';
import { ConditionalRenderingModal } from '../toolbar/ConditionalRenderingModal';
diff --git a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx
index 87ef49d5505..d595d4c9e64 100644
--- a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { EditDataModelBindings } from '../config/editModal/EditDataModelBindings/EditDataModelBindings';
import { StudioProperty, StudioSpinner } from '@studio/components';
-import { Alert, Switch } from '@digdir/design-system-react';
+import { Alert, Switch } from '@digdir/designsystemet-react';
import { useComponentSchemaQuery } from '../../hooks/queries/useComponentSchemaQuery';
import { useFormItemContext } from '../../containers/FormItemContext';
import { useText, useSelectedFormLayout } from '../../hooks';
diff --git a/frontend/packages/ux-editor/src/components/Properties/Dynamics.tsx b/frontend/packages/ux-editor/src/components/Properties/Dynamics.tsx
index 10766fc59ab..7e69fec82f3 100644
--- a/frontend/packages/ux-editor/src/components/Properties/Dynamics.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/Dynamics.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { Switch } from '@digdir/design-system-react';
+import { Switch } from '@digdir/designsystemet-react';
import { ConditionalRendering } from './ConditionalRendering';
import { Expressions } from '../config/Expressions';
import { useText } from '../../hooks';
diff --git a/frontend/packages/ux-editor/src/components/Properties/OldDynamicsInfo.tsx b/frontend/packages/ux-editor/src/components/Properties/OldDynamicsInfo.tsx
index fa8538b1318..389c845e348 100644
--- a/frontend/packages/ux-editor/src/components/Properties/OldDynamicsInfo.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/OldDynamicsInfo.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
import { giteaEditLink, altinnDocsUrl } from 'app-shared/ext-urls';
import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
import { useAppContext } from '../../hooks';
-import { Link } from '@digdir/design-system-react';
+import { Link } from '@digdir/designsystemet-react';
export const OldDynamicsInfo = () => {
const { t } = useTranslation();
diff --git a/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigPanel.tsx b/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigPanel.tsx
index 4f657641a32..7f72891f4f8 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigPanel.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigPanel.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react';
-import { Accordion } from '@digdir/design-system-react';
+import { Accordion } from '@digdir/designsystemet-react';
import { FileIcon } from '@studio/icons';
import { StudioSectionHeader } from '@studio/components';
import { useText, useTextResourcesSelector, useAppContext, useFormLayouts } from '../../../hooks';
diff --git a/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigWarning.tsx b/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigWarning.tsx
index 91a69ac5f6a..29c92844698 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigWarning.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigWarning.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { List, Link, Heading } from '@digdir/design-system-react';
+import { List, Link, Heading } from '@digdir/designsystemet-react';
import { repositoryLayoutPath } from 'app-shared/api/paths';
import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
import { getDuplicatedIds } from '../../../utils/formLayoutUtils';
diff --git a/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigWarningModal/PageConfigWarningModal.tsx b/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigWarningModal/PageConfigWarningModal.tsx
index e8a3c001a64..a3898bc2ae3 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigWarningModal/PageConfigWarningModal.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigWarningModal/PageConfigWarningModal.tsx
@@ -1,7 +1,7 @@
import type { ReactNode } from 'react';
import React from 'react';
import classes from './PageConfigWarningModal.module.css';
-import { Modal } from '@digdir/design-system-react';
+import { Modal } from '@digdir/designsystemet-react';
import { useTranslation } from 'react-i18next';
export interface PageConfigWarningModalProps {
diff --git a/frontend/packages/ux-editor/src/components/Properties/Properties.tsx b/frontend/packages/ux-editor/src/components/Properties/Properties.tsx
index 6e8fb180f57..219262ee772 100644
--- a/frontend/packages/ux-editor/src/components/Properties/Properties.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/Properties.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { Calculations } from './Calculations';
import { Text } from './Text';
import { useTranslation } from 'react-i18next';
-import { Accordion } from '@digdir/design-system-react';
+import { Accordion } from '@digdir/designsystemet-react';
import { useFormItemContext } from '../../containers/FormItemContext';
import classes from './Properties.module.css';
import { Dynamics } from './Dynamics';
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx
index 03794fbee67..0f0c87c0ffe 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { StudioToggleableTextfieldSchema, type SchemaValidationError } from '@studio/components';
-import { Alert } from '@digdir/design-system-react';
+import { Alert } from '@digdir/designsystemet-react';
import { KeyVerticalIcon } from '@studio/icons';
import classes from './EditComponentIdRow.module.css';
import { idExists } from '../../../../utils/formLayoutsUtils';
diff --git a/frontend/packages/ux-editor/src/components/Properties/Text.test.tsx b/frontend/packages/ux-editor/src/components/Properties/Text.test.tsx
index c09522b99d6..6387c959e2f 100644
--- a/frontend/packages/ux-editor/src/components/Properties/Text.test.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/Text.test.tsx
@@ -114,23 +114,6 @@ describe('TextTab', () => {
expect(screen.getByText(descriptionTextValue)).toBeInTheDocument();
});
- it('should not render options section if component schema does not have options/optionsId property', () => {
- render({
- props: {
- ...props,
- formItem: {
- ...layoutMock.components[component1IdMock],
- },
- },
- });
-
- expect(
- screen.queryByRole('heading', {
- name: textMock('ux_editor.properties_panel.texts.options_title'),
- }),
- ).not.toBeInTheDocument();
- });
-
it('should render options section if component schema has options property', () => {
render({
props: {
diff --git a/frontend/packages/ux-editor/src/components/Properties/Text.tsx b/frontend/packages/ux-editor/src/components/Properties/Text.tsx
index 9945d8d3264..df4de0d79c7 100644
--- a/frontend/packages/ux-editor/src/components/Properties/Text.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/Text.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { useFormItemContext } from '../../containers/FormItemContext';
import { useTranslation } from 'react-i18next';
-import { Alert } from '@digdir/design-system-react';
+import { Alert } from '@digdir/designsystemet-react';
import { EditTextResourceBindings } from '../config/editModal/EditTextResourceBindings/EditTextResourceBindings';
import { useComponentSchemaQuery } from '../../hooks/queries/useComponentSchemaQuery';
import { StudioSpinner } from '@studio/components';
diff --git a/frontend/packages/ux-editor/src/components/TextResource/TextResource.test.tsx b/frontend/packages/ux-editor/src/components/TextResource/TextResource.test.tsx
index 6f8be04c011..1083b8f3eeb 100644
--- a/frontend/packages/ux-editor/src/components/TextResource/TextResource.test.tsx
+++ b/frontend/packages/ux-editor/src/components/TextResource/TextResource.test.tsx
@@ -8,7 +8,7 @@ import { renderWithProviders } from '../../testing/mocks';
import { screen } from '@testing-library/react';
import { textMock } from '@studio/testing/mocks/i18nMock';
import { DEFAULT_LANGUAGE } from 'app-shared/constants';
-import { typedLocalStorage } from 'app-shared/utils/webStorage';
+import { typedLocalStorage } from '@studio/components/src/hooks/webStorage';
import { QueryKey } from 'app-shared/types/QueryKey';
import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
import { appContextMock } from '../../testing/appContextMock';
diff --git a/frontend/packages/ux-editor/src/components/TextResource/TextResourceEditor/TextResourceEditor.tsx b/frontend/packages/ux-editor/src/components/TextResource/TextResourceEditor/TextResourceEditor.tsx
index 9389f2be27c..4d88686b07a 100644
--- a/frontend/packages/ux-editor/src/components/TextResource/TextResourceEditor/TextResourceEditor.tsx
+++ b/frontend/packages/ux-editor/src/components/TextResource/TextResourceEditor/TextResourceEditor.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { Tabs } from '@digdir/design-system-react';
+import { Tabs } from '@digdir/designsystemet-react';
import { TextResourceValueEditor } from './TextResourceValueEditor';
import { TextResourcePicker } from './TextResourcePicker';
import classes from './TextResourceEditor.module.css';
diff --git a/frontend/packages/ux-editor/src/components/TextResource/TextResourceEditor/TextResourceValueEditor/TextResourceValueEditor.test.tsx b/frontend/packages/ux-editor/src/components/TextResource/TextResourceEditor/TextResourceValueEditor/TextResourceValueEditor.test.tsx
index 0c60e910619..80968127efa 100644
--- a/frontend/packages/ux-editor/src/components/TextResource/TextResourceEditor/TextResourceValueEditor/TextResourceValueEditor.test.tsx
+++ b/frontend/packages/ux-editor/src/components/TextResource/TextResourceEditor/TextResourceValueEditor/TextResourceValueEditor.test.tsx
@@ -8,7 +8,7 @@ import { renderWithProviders } from '../../../../testing/mocks';
import { screen } from '@testing-library/react';
import { textMock } from '@studio/testing/mocks/i18nMock';
import { DEFAULT_LANGUAGE } from 'app-shared/constants';
-import { typedLocalStorage } from 'app-shared/utils/webStorage';
+import { typedLocalStorage } from '@studio/components/src/hooks/webStorage';
import { QueryKey } from 'app-shared/types/QueryKey';
import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
import { appContextMock } from '../../../../testing/appContextMock';
diff --git a/frontend/packages/ux-editor/src/components/UnknownComponentAlert/UnknownComponentAlert.tsx b/frontend/packages/ux-editor/src/components/UnknownComponentAlert/UnknownComponentAlert.tsx
index 57ea58affa6..e5e927980d5 100644
--- a/frontend/packages/ux-editor/src/components/UnknownComponentAlert/UnknownComponentAlert.tsx
+++ b/frontend/packages/ux-editor/src/components/UnknownComponentAlert/UnknownComponentAlert.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import type { AlertProps } from '@digdir/design-system-react';
-import { Alert } from '@digdir/design-system-react';
+import type { AlertProps } from '@digdir/designsystemet-react';
+import { Alert } from '@digdir/designsystemet-react';
import { useTranslation } from 'react-i18next';
export type UnknownComponentAlertProps = {
diff --git a/frontend/packages/ux-editor/src/components/UnsupportedVersionMessage/UnsupportedVersionMessage.tsx b/frontend/packages/ux-editor/src/components/UnsupportedVersionMessage/UnsupportedVersionMessage.tsx
index ea05de3a7ba..b68a82c5671 100644
--- a/frontend/packages/ux-editor/src/components/UnsupportedVersionMessage/UnsupportedVersionMessage.tsx
+++ b/frontend/packages/ux-editor/src/components/UnsupportedVersionMessage/UnsupportedVersionMessage.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import classes from './UnsupportedVersionMessage.module.css';
-import { Alert, Heading, Paragraph } from '@digdir/design-system-react';
+import { Alert, Heading, Paragraph } from '@digdir/designsystemet-react';
import { useTranslation } from 'react-i18next';
export interface UnsupportedVersionMessageProps {
diff --git a/frontend/packages/ux-editor/src/components/config/EditFormComponent.tsx b/frontend/packages/ux-editor/src/components/config/EditFormComponent.tsx
index d0d00005ba9..c113d2850b4 100644
--- a/frontend/packages/ux-editor/src/components/config/EditFormComponent.tsx
+++ b/frontend/packages/ux-editor/src/components/config/EditFormComponent.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { ComponentSpecificContent } from './componentSpecificContent';
-import { Fieldset } from '@digdir/design-system-react';
+import { Fieldset } from '@digdir/designsystemet-react';
import classes from './EditFormComponent.module.css';
import { useComponentSchemaQuery } from '../../hooks/queries/useComponentSchemaQuery';
import { StudioSpinner } from '@studio/components';
diff --git a/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.tsx b/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.tsx
index c5c1e1c8949..6e5d2825994 100644
--- a/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.tsx
+++ b/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.tsx
@@ -6,7 +6,7 @@ import { DataLookupFuncName, StudioDeleteButton } from '@studio/components';
import { useFormLayoutsQuery } from '../../../hooks/queries/useFormLayoutsQuery';
import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
import { useDataModelMetadataQuery } from '../../../hooks/queries/useDataModelMetadataQuery';
-import { Paragraph } from '@digdir/design-system-react';
+import { Paragraph } from '@digdir/designsystemet-react';
import classes from './ExpressionContent.module.css';
import { Expression as ExpressionWithTexts } from 'app-shared/components/Expression';
import { useText, useAppContext } from '../../../hooks';
diff --git a/frontend/packages/ux-editor/src/components/config/Expressions/Expressions.tsx b/frontend/packages/ux-editor/src/components/config/Expressions/Expressions.tsx
index 5d022ae73bb..c893b4d655f 100644
--- a/frontend/packages/ux-editor/src/components/config/Expressions/Expressions.tsx
+++ b/frontend/packages/ux-editor/src/components/config/Expressions/Expressions.tsx
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
-import { Paragraph, Link } from '@digdir/design-system-react';
+import { Paragraph, Link } from '@digdir/designsystemet-react';
import { ExpressionContent } from '../ExpressionContent';
import classes from './Expressions.module.css';
import { FormItemContext } from '../../../containers/FormItemContext';
diff --git a/frontend/packages/ux-editor/src/components/config/Expressions/NewExpressionButton/NewExpressionButton.tsx b/frontend/packages/ux-editor/src/components/config/Expressions/NewExpressionButton/NewExpressionButton.tsx
index 9a21f9b9b75..61fb368a6f4 100644
--- a/frontend/packages/ux-editor/src/components/config/Expressions/NewExpressionButton/NewExpressionButton.tsx
+++ b/frontend/packages/ux-editor/src/components/config/Expressions/NewExpressionButton/NewExpressionButton.tsx
@@ -1,5 +1,4 @@
import React from 'react';
-import { DropdownMenu } from '@digdir/design-system-react';
import { PlusIcon } from '@studio/icons';
import { useText } from '../../../../hooks';
import { StudioDropdownMenu } from '@studio/components';
@@ -48,7 +47,7 @@ const MenuItem = ({ property }: { property: FormItemProperty }) => {
await debounceSave(); // Todo: handleSave does not work here. Will probably be fixed by https://github.com/Altinn/altinn-studio/issues/12383.
};
- return
{text};
+ return
{text};
};
const useAddExpressionText = (property: FormItemProperty) => {
diff --git a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx
index 41c11e378ae..f74c62576b7 100644
--- a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx
+++ b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Alert, Card, Heading, Paragraph } from '@digdir/design-system-react';
+import { Alert, Card, Heading, Paragraph } from '@digdir/designsystemet-react';
import type { FormComponent } from '../../types/FormComponent';
import { EditBooleanValue } from './editModal/EditBooleanValue';
import { EditNumberValue } from './editModal/EditNumberValue';
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.module.css b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.module.css
deleted file mode 100644
index 63eaa171d31..00000000000
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.root > div {
- display: flex;
- flex-direction: column;
- gap: var(--fieldset-gap);
-}
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.test.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.test.tsx
deleted file mode 100644
index 7f9f59fdd91..00000000000
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.test.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import type { IGenericEditComponent } from '../../componentConfig';
-import { renderWithProviders, renderHookWithProviders } from '../../../../testing/mocks';
-import { useLayoutSchemaQuery } from '../../../../hooks/queries/useLayoutSchemaQuery';
-import { AddressComponent } from './AddressComponent';
-import { ComponentType } from 'app-shared/types/ComponentType';
-import type { FormAddressComponent } from '../../../../types/FormComponent';
-import { waitFor, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-// Test data:
-const component: FormAddressComponent = {
- type: ComponentType.Address,
- dataModelBindings: {
- address: 'address',
- zipCode: 'zipCode',
- postPlace: 'postPlace',
- },
- id: '1',
- simplified: false,
- itemType: 'COMPONENT',
-};
-const handleComponentChange = jest.fn();
-const defaultProps: IGenericEditComponent
= {
- component,
- handleComponentChange,
-};
-
-const user = userEvent.setup();
-
-describe('AddressComponent', () => {
- it('Renders without errors', async () => {
- await render();
- expect(screen.getByRole('group')).toBeInTheDocument();
- });
-
- it('Handles switch toggle correctly', async () => {
- await render();
- const switchElement = screen.getByRole('checkbox');
- await user.click(switchElement);
- expect(handleComponentChange).toHaveBeenCalledWith({
- ...component,
- simplified: true,
- });
- });
-});
-
-const waitForData = async () => {
- const layoutSchemaResult = renderHookWithProviders(() => useLayoutSchemaQuery()).result;
- await waitFor(() => expect(layoutSchemaResult.current[0].isSuccess).toBe(true));
-};
-
-const render = async (props?: Partial>) => {
- await waitForData();
-
- return renderWithProviders();
-};
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.tsx
deleted file mode 100644
index 87ae8211b49..00000000000
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { Switch, Fieldset } from '@digdir/design-system-react';
-import classes from './AddressComponent.module.css';
-import { useText } from '../../../../hooks';
-import type { IGenericEditComponent } from '../../componentConfig';
-import { AddressKeys, getTextResourceByAddressKey } from '../../../../utils/component';
-import { EditDataModelBindings } from '../../editModal/EditDataModelBindings/EditDataModelBindings';
-import type { FormAddressComponent } from '../../../../types/FormComponent';
-import { FormField } from '../../../FormField';
-import type { ComponentType } from 'app-shared/types/ComponentType';
-import { StudioProperty } from '@studio/components';
-
-export const AddressComponent = ({
- component,
- handleComponentChange,
-}: IGenericEditComponent) => {
- const t = useText();
-
- const handleToggleAddressSimple = (isChecked: boolean) => {
- handleComponentChange({
- ...component,
- simplified: isChecked,
- });
- };
-
- return (
-
- );
-};
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/index.ts b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/index.ts
deleted file mode 100644
index 4d019dd6e83..00000000000
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { AddressComponent } from './AddressComponent';
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/AttachmentList/AttachmentListContent.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/AttachmentList/AttachmentListContent.tsx
index 9334485ab05..ea62c6e78c0 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/AttachmentList/AttachmentListContent.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/AttachmentList/AttachmentListContent.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Combobox, Label, Checkbox } from '@digdir/design-system-react';
+import { Combobox, Label, Checkbox } from '@digdir/designsystemet-react';
import { useTranslation } from 'react-i18next';
import classes from './AttachmentListContent.module.css';
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/AttachmentList/AttachmentListInternalFormat.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/AttachmentList/AttachmentListInternalFormat.tsx
index 808de95fe80..090d52729fb 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/AttachmentList/AttachmentListInternalFormat.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/AttachmentList/AttachmentListInternalFormat.tsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
-import { Fieldset, Switch } from '@digdir/design-system-react';
+import { Fieldset, Switch } from '@digdir/designsystemet-react';
import { AttachmentListContent } from './AttachmentListContent';
import { useTranslation } from 'react-i18next';
import { extractCurrentAvailableAttachments, isSelectionValid } from './attachmentListUtils';
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/FileUpload/FileUploadComponent.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/FileUpload/FileUploadComponent.tsx
index 327bc3729d6..a88d1b211c2 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/FileUpload/FileUploadComponent.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/FileUpload/FileUploadComponent.tsx
@@ -1,5 +1,6 @@
import React from 'react';
-import { Fieldset, LegacyTextField, Radio, Textfield } from '@digdir/design-system-react';
+import { Fieldset, Radio, Textfield } from '@digdir/designsystemet-react';
+import { LegacyTextField } from '@digdir/design-system-react';
import classes from './FileUploadComponent.module.css';
import { useText } from '../../../../hooks';
import type { IGenericEditComponent } from '../../componentConfig';
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Image/ImageComponent.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Image/ImageComponent.tsx
index 9ca411d4b15..477fd22dc09 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Image/ImageComponent.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Image/ImageComponent.tsx
@@ -1,5 +1,6 @@
import React from 'react';
-import { LegacySelect, Textfield, Fieldset } from '@digdir/design-system-react';
+import { Textfield, Fieldset } from '@digdir/designsystemet-react';
+import { LegacySelect } from '@digdir/design-system-react';
import classes from './ImageComponent.module.css';
import { useText } from '../../../../hooks';
import type { IGenericEditComponent } from '../../componentConfig';
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Panel/PanelComponent.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Panel/PanelComponent.tsx
index 4db26f612b6..550e790294c 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Panel/PanelComponent.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Panel/PanelComponent.tsx
@@ -1,5 +1,6 @@
import React from 'react';
-import { Switch, LegacySelect } from '@digdir/design-system-react';
+import { Switch } from '@digdir/designsystemet-react';
+import { LegacySelect } from '@digdir/design-system-react';
import type { IGenericEditComponent } from '../../componentConfig';
import { useText } from '../../../../hooks';
import { FormPanelVariant } from 'app-shared/types/FormPanelVariant';
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/RepeatingGroup/RepeatingGroupComponent.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/RepeatingGroup/RepeatingGroupComponent.tsx
index 8d5b0d829fb..6fd098a35c5 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/RepeatingGroup/RepeatingGroupComponent.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/RepeatingGroup/RepeatingGroupComponent.tsx
@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import classes from './RepeatingGroupComponent.module.css';
-import { Checkbox, LegacyFieldSet, LegacyTextField } from '@digdir/design-system-react';
+import { Checkbox } from '@digdir/designsystemet-react';
+import { LegacyFieldSet, LegacyTextField } from '@digdir/design-system-react';
import { FormField } from '../../../FormField';
import { getTextResource } from '../../../../utils/language';
import {
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditAutoComplete.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditAutoComplete.tsx
index 5f1e7576240..504b89f9c2d 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditAutoComplete.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditAutoComplete.tsx
@@ -1,7 +1,7 @@
import type { ChangeEvent } from 'react';
import React from 'react';
import type { IGenericEditComponent } from '../componentConfig';
-import { NativeSelect } from '@digdir/design-system-react';
+import { NativeSelect } from '@digdir/designsystemet-react';
import { HTMLAutoCompleteValue } from 'app-shared/types/HTMLAutoCompleteValue';
import { useTranslation } from 'react-i18next';
import type { ComponentType } from 'app-shared/types/ComponentType';
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx
index 195cb35407d..7a4b09c74d1 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Switch } from '@digdir/design-system-react';
+import { Switch } from '@digdir/designsystemet-react';
import type { IGenericEditComponent } from '../componentConfig';
import { useText } from '../../../hooks';
import { FormField } from '../../FormField';
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.tsx
index b653e6d6c1b..af4364dce4c 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.tsx
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';
-import { Alert, LegacySelect, Textfield, ErrorMessage } from '@digdir/design-system-react';
+import { Alert, Textfield, ErrorMessage } from '@digdir/designsystemet-react';
+import { LegacySelect } from '@digdir/design-system-react';
import type { IGenericEditComponent } from '../../componentConfig';
import { useOptionListIdsQuery } from '../../../../hooks/queries/useOptionListIdsQuery';
import { useTranslation, Trans } from 'react-i18next';
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.tsx
index feddfea47f2..5b17a0971ec 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.tsx
@@ -1,7 +1,7 @@
import type { ReactNode } from 'react';
import React, { useState } from 'react';
import type { IGenericEditComponent } from '../../componentConfig';
-import { Tabs } from '@digdir/design-system-react';
+import { Tabs } from '@digdir/designsystemet-react';
import classes from './EditGrid.module.css';
import { EditGridForGivenViewSize } from './EditGridForGivenViewSize';
import { LaptopIcon, MobileIcon, MobileSmallIcon, MonitorIcon, TabletIcon } from '@studio/icons';
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGridForGivenViewSize.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGridForGivenViewSize.tsx
index 88c1271e157..b58843d9f85 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGridForGivenViewSize.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGridForGivenViewSize.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useText } from '../../../../hooks';
import type { GridSize } from '@studio/components';
import { StudioGridSelector } from '@studio/components';
-import { Paragraph, Switch } from '@digdir/design-system-react';
+import { Paragraph, Switch } from '@digdir/designsystemet-react';
import { PadlockLockedFillIcon } from '@studio/icons';
import classes from './EditGridForGivenViewSize.module.css';
import { ObjectUtils } from '@studio/pure-functions';
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.tsx
index 1727d636554..31e956d33c5 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions.tsx
@@ -1,6 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import type { IOption } from '../../../types/global';
-import { Paragraph, Switch, ErrorMessage } from '@digdir/design-system-react';
+import { Paragraph, Switch, ErrorMessage } from '@digdir/designsystemet-react';
import classes from './EditOptions.module.css';
import type { IGenericEditComponent } from '../componentConfig';
import { EditCodeList } from './EditCodeList';
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditPreselectedIndex.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditPreselectedIndex.tsx
index 697e3f86f68..875064bc7a2 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditPreselectedIndex.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditPreselectedIndex.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Textfield } from '@digdir/design-system-react';
+import { Textfield } from '@digdir/designsystemet-react';
import type { IGenericEditComponent } from '../componentConfig';
import { useText } from '../../../hooks';
import { ComponentType } from 'app-shared/types/ComponentType';
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditReadOnly.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditReadOnly.tsx
index c46d788ed59..83d5b533426 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditReadOnly.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditReadOnly.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Switch } from '@digdir/design-system-react';
+import { Switch } from '@digdir/designsystemet-react';
import type { IGenericEditComponent } from '../componentConfig';
import { useText } from '../../../hooks';
import { FormField } from '../../FormField';
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditRequired.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditRequired.tsx
index ab2dc649cd5..d168e981cb1 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditRequired.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditRequired.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Switch } from '@digdir/design-system-react';
+import { Switch } from '@digdir/designsystemet-react';
import type { IGenericEditComponent } from '../componentConfig';
import { useText } from '../../../hooks';
import { FormField } from '../../FormField';
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.tsx
index 6afe9ebf795..56f13a1b107 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditStringValue.tsx
@@ -2,7 +2,8 @@ import React from 'react';
import type { IGenericEditComponent } from '../componentConfig';
import { useTranslation } from 'react-i18next';
import { FormField } from '../../FormField';
-import { LegacySelect, Textfield } from '@digdir/design-system-react';
+import { Textfield } from '@digdir/designsystemet-react';
+import { LegacySelect } from '@digdir/design-system-react';
import { useComponentPropertyLabel } from '../../../hooks/useComponentPropertyLabel';
export interface EditStringValueProps extends IGenericEditComponent {
diff --git a/frontend/packages/ux-editor/src/components/toolbar/InformationPanelComponent.tsx b/frontend/packages/ux-editor/src/components/toolbar/InformationPanelComponent.tsx
index b215b5fde31..b73cc6def6a 100644
--- a/frontend/packages/ux-editor/src/components/toolbar/InformationPanelComponent.tsx
+++ b/frontend/packages/ux-editor/src/components/toolbar/InformationPanelComponent.tsx
@@ -9,7 +9,7 @@ import {
import { useTranslation } from 'react-i18next';
import { StudioLabelAsParagraph, StudioPopover } from '@studio/components';
import { InformationIcon } from '@studio/icons';
-import { Paragraph } from '@digdir/design-system-react';
+import { Paragraph } from '@digdir/designsystemet-react';
export type InformationPanelProvidedProps = {
isOpen: boolean;
diff --git a/frontend/packages/ux-editor/src/components/toolbar/ToolbarItemComponent.module.css b/frontend/packages/ux-editor/src/components/toolbar/ToolbarItemComponent.module.css
index 821b8f93db5..003a59688f3 100644
--- a/frontend/packages/ux-editor/src/components/toolbar/ToolbarItemComponent.module.css
+++ b/frontend/packages/ux-editor/src/components/toolbar/ToolbarItemComponent.module.css
@@ -16,7 +16,6 @@
}
.componentLabel {
- white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.test.tsx
index 3bde49dd736..008d933fd70 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.test.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.test.tsx
@@ -8,7 +8,7 @@ import { DragAndDrop } from 'app-shared/components/dragAndDrop';
import { BASE_CONTAINER_ID } from 'app-shared/constants';
import userEvent from '@testing-library/user-event';
import { queriesMock } from 'app-shared/mocks/queriesMock';
-import { typedLocalStorage } from 'app-shared/utils/webStorage';
+import { typedLocalStorage } from '@studio/components/src/hooks/webStorage';
import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
import { QueryKey } from 'app-shared/types/QueryKey';
import {
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx
index 8afe256569c..5ad26dae871 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx
@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
import classes from './DesignView.module.css';
import { useTranslation } from 'react-i18next';
import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
-import { Accordion } from '@digdir/design-system-react';
+import { Accordion } from '@digdir/designsystemet-react';
import type { IFormLayouts } from '../../types/global';
import type { FormLayoutPage } from '../../types/FormLayoutPage';
import { useFormLayoutSettingsQuery } from '../../hooks/queries/useFormLayoutSettingsQuery';
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.tsx b/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.tsx
index 96a51bff4a2..0627bc6018e 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.tsx
@@ -3,7 +3,7 @@ import { FormTree } from './FormTree';
import React from 'react';
import { hasMultiPageGroup } from '../../utils/formLayoutUtils';
import { useTranslation } from 'react-i18next';
-import { Alert, Paragraph } from '@digdir/design-system-react';
+import { Alert, Paragraph } from '@digdir/designsystemet-react';
import { FormLayoutWarning } from './FormLayoutWarning';
export interface FormLayoutProps {
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/FormLayoutWarning.tsx b/frontend/packages/ux-editor/src/containers/DesignView/FormLayoutWarning.tsx
index 87c618e1bdc..67747e90b86 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/FormLayoutWarning.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/FormLayoutWarning.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import type { IInternalLayout } from '../../types/global';
import { getDuplicatedIds } from '../../utils/formLayoutUtils';
-import { Paragraph } from '@digdir/design-system-react';
+import { Paragraph } from '@digdir/designsystemet-react';
import { useTranslation } from 'react-i18next';
import classes from './FormLayoutWarning.module.css';
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/UnknownReferencedItem/UnknownReferencedItem.tsx b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/UnknownReferencedItem/UnknownReferencedItem.tsx
index a612494dfa1..b8c13f8fa3f 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/UnknownReferencedItem/UnknownReferencedItem.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/UnknownReferencedItem/UnknownReferencedItem.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
-import { HelpText } from '@digdir/design-system-react';
+import { HelpText } from '@digdir/designsystemet-react';
import { StudioButton } from '@studio/components';
import { QuestionmarkDiamondIcon, TrashIcon } from '@studio/icons';
import type { IInternalLayout } from '../../../../types/global';
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx
index e3bae9ccb0d..2c29c3d7d38 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { DropdownMenu } from '@digdir/design-system-react';
+import { DropdownMenu } from '@digdir/designsystemet-react';
import { MenuElipsisVerticalIcon, ArrowUpIcon, ArrowDownIcon } from '@studio/icons';
import { useFormLayoutSettingsQuery } from '../../../../hooks/queries/useFormLayoutSettingsQuery';
import { useUpdateLayoutOrderMutation } from '../../../../hooks/mutations/useUpdateLayoutOrderMutation';
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.module.css b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.module.css
index cd2f4365f14..08dc35e2277 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.module.css
+++ b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.module.css
@@ -19,7 +19,7 @@
background-color: var(--fds-semantic-surface-neutral-default);
}
-.accordionItem {
+.accordionItem:not(:first-child) {
border-top: 1px solid var(--fds-semantic-border-neutral-subtle);
}
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx
index b72a1872f6a..eb11e0b3df8 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
import React from 'react';
import classes from './PageAccordion.module.css';
import cn from 'classnames';
-import { Accordion } from '@digdir/design-system-react';
+import { Accordion } from '@digdir/designsystemet-react';
import { NavigationMenu } from './NavigationMenu';
import { pageAccordionContentId } from '@studio/testing/testids';
import { TrashIcon } from '@studio/icons';
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/ReceiptContent/ReceiptContent.tsx b/frontend/packages/ux-editor/src/containers/DesignView/ReceiptContent/ReceiptContent.tsx
index 2b4e3bee2dd..9c7a239dc9d 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/ReceiptContent/ReceiptContent.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/ReceiptContent/ReceiptContent.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import classes from './ReceiptContent.module.css';
import type { FormLayoutPage } from '../../../types/FormLayoutPage';
import { PageAccordion } from '../PageAccordion';
-import { Accordion } from '@digdir/design-system-react';
+import { Accordion } from '@digdir/designsystemet-react';
import { FormTree } from '../FormTree';
export type ReceiptContentProps = {
diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.module.css b/frontend/packages/ux-editor/src/containers/FormDesigner.module.css
index 871738b7c49..1a73b049ba4 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesigner.module.css
+++ b/frontend/packages/ux-editor/src/containers/FormDesigner.module.css
@@ -29,9 +29,10 @@
}
.container > * {
+ --header-with-toolbar-height: calc(var(--header-height) + var(--subtoolbar-height));
padding: 0;
overflow-y: auto;
- max-height: calc(100vh - var(--header-height));
+ max-height: calc(100vh - var(--header-with-toolbar-height));
}
.container > div:not(:last-child) {
diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx b/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx
index f422ccbcfb3..4bb3ba30717 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx
@@ -19,12 +19,14 @@ import { FormItemContext } from './FormItemContext';
import { formItemContextProviderMock } from '../testing/formItemContextMocks';
import { appContextMock } from '../testing/appContextMock';
import { app, org } from '@studio/testing/testids';
+import userEvent from '@testing-library/user-event';
// Test data:
const defaultTexts: ITextResources = {
[DEFAULT_LANGUAGE]: [],
};
const dataModelName = undefined;
+const user = userEvent.setup();
const render = () => {
const queryClient = createQueryClientMock();
@@ -128,4 +130,34 @@ describe('FormDesigner', () => {
expect(appContextMock.refetchLayouts).toHaveBeenCalledTimes(1);
expect(appContextMock.refetchLayouts).toHaveBeenCalledWith('test-layout-set');
});
+
+ it('should be able to collapse and uncollapse components', async () => {
+ await waitForData();
+ render();
+
+ await waitFor(() =>
+ expect(screen.queryByText(textMock('ux_editor.loading_form_layout'))).not.toBeInTheDocument(),
+ );
+
+ await user.click(screen.getByTitle(textMock('left_menu.close_components')));
+ expect(screen.getByTitle(textMock('left_menu.open_components'))).toBeInTheDocument();
+
+ await user.click(screen.getByTitle(textMock('left_menu.open_components')));
+ expect(screen.getByTitle(textMock('left_menu.close_components'))).toBeInTheDocument();
+ });
+
+ it('should be able to collapse and uncollapse preview', async () => {
+ await waitForData();
+ render();
+
+ await waitFor(() =>
+ expect(screen.queryByText(textMock('ux_editor.loading_form_layout'))).not.toBeInTheDocument(),
+ );
+
+ await user.click(screen.getByTitle(textMock('ux_editor.open_preview')));
+ expect(screen.getByTitle(textMock('ux_editor.close_preview'))).toBeInTheDocument();
+
+ await user.click(screen.getByTitle(textMock('ux_editor.close_preview')));
+ expect(screen.getByTitle(textMock('ux_editor.open_preview'))).toBeInTheDocument();
+ });
});
diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx
index e40b35505d5..63e3e56e810 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import { Properties } from '../components/Properties';
import { DesignView } from './DesignView';
import classes from './FormDesigner.module.css';
@@ -9,10 +9,10 @@ import { useFormLayoutsQuery } from '../hooks/queries/useFormLayoutsQuery';
import { useFormLayoutSettingsQuery } from '../hooks/queries/useFormLayoutSettingsQuery';
import { useRuleModelQuery } from '../hooks/queries/useRuleModelQuery';
import { ErrorPage } from '../components/ErrorPage';
-import { StudioPageSpinner } from '@studio/components';
+import { StudioPageSpinner, StudioResizableLayout } from '@studio/components';
import { BASE_CONTAINER_ID } from 'app-shared/constants';
import { useRuleConfigQuery } from '../hooks/queries/useRuleConfigQuery';
-import { useInstanceIdQuery } from 'app-shared/hooks/queries';
+import { useInstanceIdQuery, useUserQuery } from 'app-shared/hooks/queries';
import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
import type { HandleAdd, HandleMove } from 'app-shared/types/dndTypes';
import type { ComponentType } from 'app-shared/types/ComponentType';
@@ -28,10 +28,12 @@ import { useAddItemToLayoutMutation } from '../hooks/mutations/useAddItemToLayou
import { useFormLayoutMutation } from '../hooks/mutations/useFormLayoutMutation';
import { Preview } from '../components/Preview';
import { DragAndDropTree } from 'app-shared/components/DragAndDropTree';
+import { FormDesignerToolbar } from './FormDesignerToolbar';
export const FormDesigner = (): JSX.Element => {
const { org, app } = useStudioEnvironmentParams();
const { data: instanceId } = useInstanceIdQuery(org, app);
+ const { data: user } = useUserQuery();
const { selectedFormLayoutSetName, selectedFormLayoutName, refetchLayouts } = useAppContext();
const { data: formLayouts, isError: layoutFetchedError } = useFormLayoutsQuery(
org,
@@ -61,6 +63,9 @@ export const FormDesigner = (): JSX.Element => {
selectedFormLayoutSetName,
);
const { handleEdit } = useFormItemContext();
+ const [previewCollapsed, setPreviewCollapsed] = useState(true);
+ const [elementsCollapsed, setElementsCollapsed] = useState(false);
+ const [hidePreview, setHidePreview] = useState(false);
const t = useText();
@@ -142,11 +147,41 @@ export const FormDesigner = (): JSX.Element => {
return (
+
-
-
-
-
+
+
+ setElementsCollapsed((prev) => !prev)}
+ />
+
+
+
+
+ setHidePreview(resizing)}>
+
+
+
+ setPreviewCollapsed((prev) => !prev)}
+ hidePreview={hidePreview}
+ />
+
+