Feature/button

src/app-components/button/Button.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { PropsWithChildren } from 'react';
+
+import { Button as DesignSystemButton, Spinner } from '@digdir/designsystemet-react';
+
+export interface ButtonProps {
+  id: string;
+  disabled?: boolean;
+  variant?: ButtonVariant;
+  color?: ButtonColor;
+  isLoading?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  onClick: () => void;
+}
+
+export type ButtonVariant = Parameters<typeof DesignSystemButton>[0]['variant'];
+export type ButtonColor = Parameters<typeof DesignSystemButton>[0]['color'];
+
+export const Button = ({ children, isLoading = false, ...props }: PropsWithChildren<ButtonProps>) => (
+  <DesignSystemButton
+    id={props.id}
+    disabled={props.disabled || isLoading}
+    variant={props.variant}
+    color={props.color}
+    size={props.size}
+    onClick={props.onClick}
+  >
+    {isLoading && (
+      <Spinner
+        aria-hidden='true'
+        color={props.color}
+        data-size={props.size}
+        title='button-spinner-loading'
+      />
+    )}
+    {children}
+  </DesignSystemButton>
+);

src/features/processEnd/confirm/components/ConfirmButton.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
+import { Button } from 'src/app-components/button/Button';
 import { useLaxProcessData } from 'src/features/instance/ProcessContext';
 import { useProcessNavigation } from 'src/features/instance/ProcessNavigationContext';
 import { Lang } from 'src/features/language/Lang';
-import { SubmitButton } from 'src/layout/Button/SubmitButton';
-import type { BaseButtonProps } from 'src/layout/Button/WrappedButton';
+import type { ButtonProps } from 'src/app-components/button/Button';
 
-type IConfirmButtonProps = Omit<BaseButtonProps, 'onClick'>;
+type IConfirmButtonProps = Omit<ButtonProps, 'onClick' | 'id'> & { nodeId: string };
 
 export const ConfirmButton = (props: IConfirmButtonProps) => {
   const { actions } = useLaxProcessData()?.currentTask || {};
@@ -22,14 +22,17 @@ export const ConfirmButton = (props: IConfirmButtonProps) => {
 
   return (
     <div style={{ marginTop: 'var(--button-margin-top)' }}>
-      <SubmitButton
+      <Button
+        id={nodeId}
         {...props}
-        busyWithId={processNextBusyId}
+        isLoading={!!processNextBusyId}
         onClick={handleConfirmClick}
         disabled={disabled}
+        color='success'
+        variant='primary'
       >
         <Lang id={'confirm.button_text'} />
-      </SubmitButton>
+      </Button>
     </div>
   );
 };

src/layout/ActionButton/ActionButtonComponent.tsx

@@ -1,18 +1,14 @@
 import React from 'react';
 
-import { Button } from '@digdir/designsystemet-react';
-
 import type { PropsFromGenericComponent } from '..';
 
+import { Button, type ButtonColor, type ButtonVariant } from 'src/app-components/button/Button';
 import { useProcessNavigation } from 'src/features/instance/ProcessNavigationContext';
 import { Lang } from 'src/features/language/Lang';
-import { ButtonLoader } from 'src/layout/Button/ButtonLoader';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { useActionAuthorization } from 'src/layout/CustomButton/CustomButtonComponent';
-import { LayoutPage } from 'src/utils/layout/LayoutPage';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { ActionButtonStyle } from 'src/layout/ActionButton/config.generated';
-import type { ButtonColor, ButtonVariant } from 'src/layout/Button/WrappedButton';
 
 export const buttonStyles: { [style in ActionButtonStyle]: { color: ButtonColor; variant: ButtonVariant } } = {
   primary: { variant: 'primary', color: 'success' },
@@ -35,30 +31,22 @@ export function ActionButtonComponent({ node }: IActionButton) {
     }
   }
 
-  const parentIsPage = node.parent instanceof LayoutPage;
-
   // FIXME: app crashes hard if buttonStyle is configured incorrectly
   const { color, variant } = buttonStyles[buttonStyle];
 
   return (
     <ComponentStructureWrapper node={node}>
-      <ButtonLoader
-        isLoading={isLoadingHere}
-        style={{
-          marginTop: parentIsPage ? 'var(--button-margin-top)' : undefined,
-        }}
+      <Button
+        size='sm'
+        id={`action-button-${id}`}
+        variant={variant}
+        color={color}
+        disabled={disabled || isLoadingHere || busy}
+        isLoading={!!isLoadingHere}
+        onClick={handleClick}
       >
-        <Button
-          size='small'
-          id={`action-button-${id}`}
-          variant={variant}
-          color={color}
-          disabled={disabled || isLoadingHere || busy}
-          onClick={handleClick}
-        >
-          <Lang id={textResourceBindings?.title ?? `actions.${action}`} />
-        </Button>
-      </ButtonLoader>
+        <Lang id={textResourceBindings?.title ?? `actions.${action}`} />
+      </Button>
     </ComponentStructureWrapper>
   );
 }

src/layout/Button/ButtonComponent.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
+import { Button } from 'src/app-components/button/Button';
 import { useSetReturnToView } from 'src/features/form/layout/PageNavigationContext';
 import { useLaxProcessData, useTaskTypeFromBackend } from 'src/features/instance/ProcessContext';
 import { useProcessNavigation } from 'src/features/instance/ProcessNavigationContext';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { getComponentFromMode } from 'src/layout/Button/getComponentFromMode';
-import { SubmitButton } from 'src/layout/Button/SubmitButton';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { ProcessTaskType } from 'src/types';
 import { LayoutPage } from 'src/utils/layout/LayoutPage';
@@ -67,15 +67,19 @@ export const ButtonComponent = ({ node, ...componentProps }: IButtonReceivedProp
   return (
     <ComponentStructureWrapper node={node}>
       <div style={{ marginTop: parentIsPage ? 'var(--button-margin-top)' : undefined }}>
-        <SubmitButton
-          nodeId={node.id}
+        <Button
+          id={node.id}
           onClick={submitTask}
-          busyWithId={busyWithId}
-          disabled={disabled}
-          message={attachmentsPending ? langAsString('general.wait_for_attachments') : undefined}
+          isLoading={busyWithId === node.id}
+          disabled={disabled || !!busyWithId}
+          color='success'
+          variant='primary'
         >
           <Lang id={item.textResourceBindings?.title} />
-        </SubmitButton>
+        </Button>
+        {attachmentsPending && (
+          <span style={{ position: 'absolute' }}>{langAsString('general.wait_for_attachments')}</span>
+        )}
       </div>
     </ComponentStructureWrapper>
   );

src/layout/CustomButton/CustomButtonComponent.tsx

@@ -17,9 +17,9 @@ import { isSpecificClientAction } from 'src/layout/CustomButton/typeHelpers';
 import { NodesInternal } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { promisify } from 'src/utils/promisify';
+import type { ButtonColor, ButtonVariant } from 'src/app-components/button/Button';
 import type { BackendValidationIssueGroups } from 'src/features/validation';
 import type { PropsFromGenericComponent } from 'src/layout';
-import type { ButtonColor, ButtonVariant } from 'src/layout/Button/WrappedButton';
 import type * as CBTypes from 'src/layout/CustomButton/config.generated';
 import type { ClientActionHandlers } from 'src/layout/CustomButton/typeHelpers';
 import type { IInstance, IUserAction } from 'src/types/shared';

src/layout/InstantiationButton/InstantiationButton.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import { Button } from 'src/app-components/button/Button';
 import { FD } from 'src/features/formData/FormDataWrite';
 import { useInstantiation } from 'src/features/instantiate/InstantiationContext';
 import { useCurrentParty } from 'src/features/party/PartiesProvider';
-import { WrappedButton } from 'src/layout/Button/WrappedButton';
 import type { IInstantiationButtonComponentProvidedProps } from 'src/layout/InstantiationButton/InstantiationButtonComponent';
 
 type Props = Omit<React.PropsWithChildren<IInstantiationButtonComponentProvidedProps>, 'text'>;
@@ -14,15 +14,14 @@ export const InstantiationButton = ({ children, ...props }: Props) => {
   const prefill = FD.useMapping(props.mapping);
   const party = useCurrentParty();
 
-  const instantiate = () => {
+  const onClick = () => {
     instantiateWithPrefill(props.node, {
       prefill,
       instanceOwner: {
         partyId: party?.partyId.toString(),
       },
     });
   };
-  const busyWithId = isLoading ? props.id : '';
 
   React.useEffect(() => {
     if (error) {
@@ -31,13 +30,13 @@ export const InstantiationButton = ({ children, ...props }: Props) => {
   }, [error]);
 
   return (
-    <WrappedButton
+    <Button
       {...props}
-      nodeId={props.node.id}
-      onClick={instantiate}
-      busyWithId={busyWithId}
+      id={props.node.id}
+      onClick={onClick}
+      isLoading={isLoading}
     >
       {children}
-    </WrappedButton>
+    </Button>
   );
 };

src/layout/Link/LinkComponent.tsx

@@ -9,7 +9,7 @@ import { useLanguage } from 'src/features/language/useLanguage';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { LayoutPage } from 'src/utils/layout/LayoutPage';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
-import type { ButtonColor, ButtonVariant } from 'src/layout/Button/WrappedButton';
+import type { ButtonColor, ButtonVariant } from 'src/app-components/button/Button';
 import type { LinkStyle } from 'src/layout/Link/config.generated';
 
 export const buttonStyles: {