Feature/signing cta

eslint.config.mjs

@@ -174,6 +174,7 @@ export default tseslint.config(
     rules: {
       'testing-library/await-async-queries': ['warn'],
       'jsx-a11y/label-has-associated-control': ['off'],
+      '@typescript-eslint/consistent-type-imports': ['off'],
     },
   },
   {

sonar-project.properties

@@ -2,7 +2,7 @@ sonar.projectKey=Altinn_app-frontend-react
 sonar.organization=altinn
 
 sonar.sources=src/
-sonar.exclusions=src/**/*.test.ts*,src/language/texts/**
+sonar.exclusions=src/**/*.test.ts*,src/language/texts/**,src/layout/**/config.ts
 
 sonar.tests=src/,test/
 sonar.test.inclusions=src/**/*.test.tsx,src/**/*.test.ts

src/app-components/Button/Button.tsx

@@ -34,6 +34,7 @@ export type ButtonProps = {
   | 'aria-labelledby'
   | 'aria-describedby'
   | 'onKeyUp'
+  | 'asChild'
 >;
 
 export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(function Button(
@@ -54,6 +55,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
     tabIndex,
     onMouseDown,
     onKeyUp,
+    asChild,
     'aria-label': ariaLabel,
     'aria-busy': ariaBusy,
     'aria-controls': ariaControls,
@@ -65,6 +67,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
   ref,
 ) {
   const { langAsString } = useLanguage();
+
   return (
     <DesignSystemButton
       id={id}
@@ -82,6 +85,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       tabIndex={tabIndex}
       onMouseDown={onMouseDown}
       onKeyUp={onKeyUp}
+      asChild={asChild}
       aria-label={ariaLabel}
       aria-busy={ariaBusy}
       aria-controls={ariaControls}
@@ -90,15 +94,19 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       aria-labelledby={ariaLabelledBy}
       aria-describedby={ariaDescribedBy}
     >
-      {isLoading && (
-        <Spinner
-          aria-hidden='true'
-          color={color}
-          size={size === 'lg' ? 'sm' : 'xs'}
-          title={langAsString('general.loading')}
-        />
+      {isLoading ? (
+        <>
+          <Spinner
+            aria-hidden='true'
+            color={color}
+            size={size === 'lg' ? 'sm' : 'xs'}
+            title={langAsString('general.loading')}
+          />
+          {children}
+        </>
+      ) : (
+        children
       )}
-      {children}
     </DesignSystemButton>
   );
 });

src/components/ConditionalWrapper.test.tsx → src/app-components/ConditionalWrapper/ConditionalWrapper.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { jest } from '@jest/globals';
 import { render as rtlRender, screen } from '@testing-library/react';
 
-import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
+import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 
 describe('ConditionalWrapper', () => {
   it('should pass children to wrapper callback when condition is true', () => {

src/components/form/FullWidthWrapper.tsx → src/app-components/FullWidthWrapper/FullWidthWrapper.tsx

@@ -3,7 +3,7 @@ import type { HTMLProps } from 'react';
 
 import cn from 'classnames';
 
-import classes from 'src/components/form/FullWidthWrapper.module.css';
+import classes from 'src/app-components/FullWidthWrapper/FullWidthWrapper.module.css';
 
 export interface IFullWidthWrapperProps extends HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;

src/app-components/Panel/Panel.tsx

@@ -10,18 +10,24 @@ import {
 } from '@navikt/aksel-icons';
 import cn from 'classnames';
 
+import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
+import { FullWidthWrapper } from 'src/app-components/FullWidthWrapper/FullWidthWrapper';
 import { PANEL_VARIANT } from 'src/app-components/Panel/constants';
 import classes from 'src/app-components/Panel/Panel.module.css';
 import { useIsMobile } from 'src/hooks/useDeviceWidths';
 
 export type PanelVariant = (typeof PANEL_VARIANT)[keyof typeof PANEL_VARIANT];
 
-type PanelProps = PropsWithChildren<{
+export type PanelProps = PropsWithChildren<{
   variant: PanelVariant;
   showIcon?: boolean;
   forceMobileLayout?: boolean;
   title?: JSX.Element;
   style?: React.CSSProperties;
+  className?: string;
+  fullWidth?: boolean;
+  isOnBottom?: boolean;
+  isOnTop?: boolean;
 }>;
 
 type PanelIconProps = {
@@ -68,42 +74,62 @@ export const Panel: React.FC<PanelProps> = ({
   variant,
   showIcon = false,
   forceMobileLayout = false,
+  fullWidth = true,
+  isOnBottom,
+  isOnTop,
   title,
   style,
+  className,
   children,
 }) => {
   const isMobile = useIsMobile();
   const isMobileLayout = forceMobileLayout || isMobile;
 
   return (
-    <div
-      className={cn(classes.panel, {
-        [classes.panelMobileLayout]: isMobileLayout,
-      })}
-      style={style}
+    <ConditionalWrapper
+      condition={fullWidth}
+      wrapper={(child) => (
+        <FullWidthWrapper
+          isOnBottom={isOnBottom}
+          isOnTop={isOnTop}
+        >
+          {child}
+        </FullWidthWrapper>
+      )}
     >
-      <div className={cn(classes.panelContentWrapper, classes[`panelContentWrapper_${variant}`])}>
-        {showIcon && (
-          <div className={cn(classes.panelIconWrapper, classes[`panelIconWrapper_${variant}`])}>
-            <PanelIcon
-              isMobileLayout={isMobileLayout}
-              variant={variant}
-            />
-          </div>
+      <div
+        className={cn(
+          classes.panel,
+          {
+            [classes.panelMobileLayout]: isMobileLayout,
+          },
+          className,
         )}
-        <div className={classes.panelContent}>
-          {title && (
-            <Heading
-              level={2}
-              size={isMobileLayout ? 'xs' : 'sm'}
-              className={classes.panelHeader}
-            >
-              {title}
-            </Heading>
+        style={style}
+      >
+        <div className={cn(classes.panelContentWrapper, classes[`panelContentWrapper_${variant}`])}>
+          {showIcon && (
+            <div className={cn(classes.panelIconWrapper, classes[`panelIconWrapper_${variant}`])}>
+              <PanelIcon
+                isMobileLayout={isMobileLayout}
+                variant={variant}
+              />
+            </div>
           )}
-          <div>{children}</div>
+          <div className={classes.panelContent}>
+            {title && (
+              <Heading
+                level={2}
+                size={isMobileLayout ? 'xs' : 'sm'}
+                className={classes.panelHeader}
+              >
+                {title}
+              </Heading>
+            )}
+            <div>{children}</div>
+          </div>
         </div>
       </div>
-    </div>
+    </ConditionalWrapper>
   );
 };

src/components/altinnAppHeader.tsx

@@ -10,7 +10,7 @@ import { LandmarkShortcuts } from 'src/components/LandmarkShortcuts';
 import { AltinnLogo, LogoColor } from 'src/components/logo/AltinnLogo';
 import { Lang } from 'src/features/language/Lang';
 import { renderParty } from 'src/utils/party';
-import { returnUrlToAllSchemas, returnUrlToMessagebox, returnUrlToProfile } from 'src/utils/urls/urlHelper';
+import { returnUrlToAllSchemas, returnUrlToMessageBox, returnUrlToProfile } from 'src/utils/urls/urlHelper';
 import type { IProfile } from 'src/types/shared';
 
 export interface IHeaderProps {
@@ -49,7 +49,7 @@ export const AltinnAppHeader = ({ profile }: IHeaderProps) => {
               <li className={classes.headerLink}>
                 <a
                   className='altinnLink'
-                  href={returnUrlToMessagebox(window.location.origin, party?.partyId) || '#'}
+                  href={returnUrlToMessageBox(window.location.origin, party?.partyId) || '#'}
                 >
                   <Lang id='instantiate.inbox' />
                 </a>

src/components/form/RadioButton.tsx

@@ -4,7 +4,7 @@ import { HelpText, Radio } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 import type { RadioProps } from '@digdir/designsystemet-react';
 
-import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
+import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import classes from 'src/components/form/RadioButton.module.css';
 import { DeleteWarningPopover } from 'src/features/alertOnChange/DeleteWarningPopover';
 import { useAlertOnChange } from 'src/features/alertOnChange/useAlertOnChange';

src/components/message/ErrorReport.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { Flex } from 'src/app-components/Flex/Flex';
 import { PANEL_VARIANT } from 'src/app-components/Panel/constants';
 import { Panel } from 'src/app-components/Panel/Panel';
-import { FullWidthWrapper } from 'src/components/form/FullWidthWrapper';
 import classes from 'src/components/message/ErrorReport.module.css';
 import { useNavigateToNode } from 'src/features/form/layout/NavigateToNode';
 import { Lang } from 'src/features/language/Lang';
@@ -33,50 +32,49 @@ export const ErrorReport = ({ renderIds, formErrors, taskErrors }: IErrorReportP
 
   return (
     <div data-testid='ErrorReport'>
-      <FullWidthWrapper isOnBottom={true}>
-        <Panel
-          title={<Lang id='form_filler.error_report_header' />}
-          variant={PANEL_VARIANT.Error}
+      <Panel
+        title={<Lang id='form_filler.error_report_header' />}
+        variant={PANEL_VARIANT.Error}
+        isOnBottom
+      >
+        <Flex
+          container
+          item
+          spacing={6}
+          alignItems='flex-start'
         >
           <Flex
-            container
             item
-            spacing={6}
-            alignItems='flex-start'
+            size={{ xs: 12 }}
           >
-            <Flex
-              item
-              size={{ xs: 12 }}
-            >
-              <ul className={classes.errorList}>
-                {taskErrors.map((error) => (
-                  <li
-                    key={getUniqueKeyFromObject(error)}
-                    style={{ listStyleImage: listStyleImg }}
-                  >
-                    <Lang
-                      id={error.message.key}
-                      params={error.message.params}
-                    />
-                  </li>
-                ))}
-                {formErrors.map((error) => (
-                  <Error
-                    key={getUniqueKeyFromObject(error)}
-                    error={error}
+            <ul className={classes.errorList}>
+              {taskErrors.map((error) => (
+                <li
+                  key={getUniqueKeyFromObject(error)}
+                  style={{ listStyleImage: listStyleImg }}
+                >
+                  <Lang
+                    id={error.message.key}
+                    params={error.message.params}
                   />
-                ))}
-              </ul>
-            </Flex>
-            {renderIds.map((id) => (
-              <GenericComponentById
-                key={id}
-                id={id}
-              />
-            ))}
+                </li>
+              ))}
+              {formErrors.map((error) => (
+                <Error
+                  key={getUniqueKeyFromObject(error)}
+                  error={error}
+                />
+              ))}
+            </ul>
           </Flex>
-        </Panel>
-      </FullWidthWrapper>
+          {renderIds.map((id) => (
+            <GenericComponentById
+              key={id}
+              id={id}
+            />
+          ))}
+        </Flex>
+      </Panel>
     </div>
   );
 };

src/components/presentation/NavBar.tsx

@@ -15,7 +15,7 @@ import { useNavigatePage, usePreviousPageKey } from 'src/hooks/useNavigatePage';
 import { PresentationType, ProcessTaskType } from 'src/types';
 import { httpGet } from 'src/utils/network/networking';
 import { getRedirectUrl } from 'src/utils/urls/appUrlHelper';
-import { returnUrlToMessagebox } from 'src/utils/urls/urlHelper';
+import { returnUrlToMessageBox } from 'src/utils/urls/urlHelper';
 
 export interface INavBarProps {
   type: PresentationType | ProcessTaskType;
@@ -43,7 +43,7 @@ export const NavBar = ({ type }: INavBarProps) => {
   const handleModalCloseButton = async () => {
     const queryParameterReturnUrl = new URLSearchParams(window.location.search).get('returnUrl');
 
-    const messageBoxUrl = returnUrlToMessagebox(window.location.origin, party?.partyId);
+    const messageBoxUrl = returnUrlToMessageBox(window.location.origin, party?.partyId);
 
     if (queryParameterReturnUrl) {
       const returnUrl =

src/components/presentation/Presentation.test.tsx

@@ -11,7 +11,7 @@ import { renderWithInstanceAndLayout } from 'src/test/renderWithProviders';
 import { AltinnPalette } from 'src/theme/altinnAppTheme';
 import { ProcessTaskType } from 'src/types';
 import { HttpStatusCodes } from 'src/utils/network/networking';
-import { returnUrlToMessagebox } from 'src/utils/urls/urlHelper';
+import { returnUrlToMessageBox } from 'src/utils/urls/urlHelper';
 import type { IPresentationProvidedProps } from 'src/components/presentation/Presentation';
 
 jest.mock('axios');
@@ -59,7 +59,7 @@ describe('Presentation', () => {
     const returnUrl = 'https://altinn.cloud.no';
     const mockedLocation = { ...realLocation, search: `?returnUrl=${returnUrl}`, assign: assignMock, origin };
     jest.spyOn(window, 'location', 'get').mockReturnValue(mockedLocation);
-    const messageBoxUrl = returnUrlToMessagebox(origin, getPartyMock().partyId);
+    const messageBoxUrl = returnUrlToMessageBox(origin, getPartyMock().partyId);
 
     mockedAxios.get.mockRejectedValue({
       data: 'Error',
@@ -83,7 +83,7 @@ describe('Presentation', () => {
   it('should change window.location.href to default messagebox url if query parameter returnUrl is not found', async () => {
     const origin = 'https://local.altinn.cloud';
     const partyId = getPartyMock().partyId;
-    const messageBoxUrl = returnUrlToMessagebox(origin, partyId);
+    const messageBoxUrl = returnUrlToMessageBox(origin, partyId);
     const mockedLocation = { ...realLocation, assign: assignMock, origin, search: '' };
 
     jest.spyOn(window, 'location', 'get').mockReturnValue(mockedLocation);

src/features/expressions/expression-functions.ts

@@ -244,6 +244,7 @@ export const ExprFunctions = {
         confirm: true,
         sign: true,
         reject: true,
+        complete: true,
       };
 
       if (key === null || authContextKeys[key] !== true) {