Merge branch 'main' into org-library-mvp

Author: TomasEng

frontend/language/src/nb.json

@@ -1932,6 +1932,10 @@
   "ux_editor.search_text_resources_close": "Lukk tekstsøk",
   "ux_editor.search_text_resources_label": "Velg eksisterende tekst basert på ID",
   "ux_editor.search_text_resources_none": "Ingen",
+  "ux_editor.settings.data_model_tab": "Datamodell",
+  "ux_editor.settings.navigation_tab": "Navigasjon",
+  "ux_editor.settings.other_settings": "Andre innstillinger",
+  "ux_editor.settings.wip_message": "Denne fanen er under utvikling - innhold kommer snart.",
   "ux_editor.show_icon": "Skal ikonet vises?",
   "ux_editor.subdomains_label": "Subdomener (kommaseparert)",
   "ux_editor.subdomains_placeholder": "domene1, domene2, domene3",

frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css

@@ -0,0 +1,15 @@
+.heading {
+  color: #1e2b3c;
+  font-family: var(--studio-font-family);
+  letter-spacing: 1px;
+  margin-bottom: var(--fds-spacing-7);
+}
+
+.icon {
+  font-size: var(--fds-sizing-6);
+  margin-right: var(--fds-spacing-1);
+}
+
+.wipMessage {
+  display: inline-grid;
+}

frontend/packages/ux-editor/src/components/Settings/SettingsTabs.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders } from '../../testing/mocks';
+import { SettingsTabs } from './SettingsTabs';
+
+describe('SettingsTabs', () => {
+  afterEach(jest.clearAllMocks);
+
+  it('should render component and select Navigation as default tab', () => {
+    renderSettingsTabs();
+
+    const navigationTab = screen.getByRole('tab', {
+      name: textMock('ux_editor.settings.navigation_tab'),
+    });
+    expect(navigationTab).toBeInTheDocument();
+    expect(navigationTab).toHaveAttribute('aria-selected', 'true');
+
+    const dataModelTab = screen.getByRole('tab', {
+      name: textMock('ux_editor.settings.data_model_tab'),
+    });
+    expect(dataModelTab).toBeInTheDocument();
+  });
+
+  it('should switch to Navigation tab when clicking Navigation tab', async () => {
+    const user = userEvent.setup();
+    renderSettingsTabs();
+
+    const navigationTab = screen.getByRole('tab', {
+      name: textMock('ux_editor.settings.navigation_tab'),
+    });
+    await user.click(navigationTab);
+
+    expect(navigationTab).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('should switch to Data model tab when clicking Data model tab', async () => {
+    const user = userEvent.setup();
+    renderSettingsTabs();
+
+    const dataModelTab = screen.getByRole('tab', {
+      name: textMock('ux_editor.settings.data_model_tab'),
+    });
+    await user.click(dataModelTab);
+
+    expect(dataModelTab).toHaveAttribute('aria-selected', 'true');
+  });
+});
+
+const renderSettingsTabs = () => {
+  return renderWithProviders(<SettingsTabs />);
+};

frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx

@@ -0,0 +1,45 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { StudioAlert, StudioHeading, StudioTabs } from '@studio/components';
+import { useTranslation } from 'react-i18next';
+import classes from './SettingsTabs.module.css';
+import { CompassIcon, DatabaseIcon } from '@studio/icons';
+
+enum Tabs {
+  Navigation = 'navigation',
+  Database = 'database',
+}
+
+export const SettingsTabs = (): ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <StudioHeading level={2} size='xsmall' className={classes.heading}>
+        {t('ux_editor.settings.other_settings')}
+      </StudioHeading>
+      <StudioTabs defaultValue={Tabs.Navigation}>
+        <StudioTabs.List>
+          <StudioTabs.Tab value={Tabs.Navigation}>
+            <CompassIcon className={classes.icon} />
+            {t('ux_editor.settings.navigation_tab')}
+          </StudioTabs.Tab>
+          <StudioTabs.Tab value={Tabs.Database}>
+            <DatabaseIcon className={classes.icon} />
+            {t('ux_editor.settings.data_model_tab')}
+          </StudioTabs.Tab>
+        </StudioTabs.List>
+        <StudioTabs.Content value={Tabs.Navigation}>
+          <StudioAlert severity='info' className={classes.wipMessage}>
+            {t('ux_editor.settings.wip_message')}
+          </StudioAlert>
+        </StudioTabs.Content>
+        <StudioTabs.Content value={Tabs.Database}>
+          <StudioAlert severity='info' className={classes.wipMessage}>
+            {t('ux_editor.settings.wip_message')}
+          </StudioAlert>
+        </StudioTabs.Content>
+      </StudioTabs>
+    </div>
+  );
+};

frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx

@@ -4,6 +4,7 @@ import classes from './FormDesignerNavigation.module.css';
 import { useTranslation } from 'react-i18next';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useAppConfigQuery } from 'app-development/hooks/queries';
+import { SettingsTabs } from '../../components/Settings/SettingsTabs';
 
 export const FormDesignerNavigation = () => {
   const { t } = useTranslation();
@@ -15,6 +16,7 @@ export const FormDesignerNavigation = () => {
         <div className={classes.panel}>
           <div className={classes.content}>
             <div className={classes.header}>{appConfigData?.serviceName}</div>
+            <SettingsTabs />
           </div>
           <footer className={classes.footer}>
             <Link href='/contact'>{t('general.contact')}</Link>