refactor: migrated Button and Spinner to form-component (#18753)

Author: adamhaeger

libs/form-component/package.json

@@ -21,6 +21,7 @@
   },
   "peerDependencies": {
     "@digdir/designsystemet-react": "^1.11.1",
+    "classnames": "2.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

libs/form-component/src/app-components/Button/Button.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from './Button';
+
+const meta = {
+  title: 'AppComponents/Button',
+  component: Button,
+  args: {
+    children: 'Save',
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    color: 'first',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    color: 'first',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    variant: 'tertiary',
+    color: 'second',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: 'primary',
+    color: 'danger',
+    children: 'Delete',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    children: 'Submitting…',
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    fullWidth: true,
+  },
+  parameters: {
+    layout: 'padded',
+  },
+};

libs/form-component/src/app-components/Button/Button.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('renders children and forwards click events', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Button onClick={onClick}>Save</Button>);
+
+    const btn = screen.getByRole('button', { name: 'Save' });
+    await user.click(btn);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('disables and shows a spinner when isLoading', () => {
+    render(<Button isLoading>Submitting</Button>);
+
+    const btn = screen.getByRole('button', { name: /Submitting/ });
+    expect(btn).toBeDisabled();
+  });
+
+  it('respects an explicit disabled prop', () => {
+    render(<Button disabled>Save</Button>);
+
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled();
+  });
+
+  it('passes through aria-label and title as already-translated strings', () => {
+    render(
+      <Button aria-label='Lukk dialog' title='Lukk dialog'>
+        X
+      </Button>,
+    );
+
+    const btn = screen.getByRole('button', { name: 'Lukk dialog' });
+    expect(btn).toHaveAttribute('title', 'Lukk dialog');
+  });
+
+  it('forwards refs to the underlying button element', () => {
+    const ref = { current: null as HTMLButtonElement | null };
+
+    render(<Button ref={ref}>Save</Button>);
+
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+});

…end/src/app-components/Button/Button.tsx …ent/src/app-components/Button/Button.tsxsrc/App/frontend/src/app-components/Button/Button.tsx renamed to libs/form-component/src/app-components/Button/Button.tsx src/App/frontend/src/app-components/Button/Button.tsx renamed to libs/form-component/src/app-components/Button/Button.tsx

@@ -4,9 +4,7 @@ import type { PropsWithChildren } from 'react';
 import { Button as DesignSystemButton } from '@digdir/designsystemet-react';
 import type { ButtonProps as DesignSystemButtonProps } from '@digdir/designsystemet-react';
 
-import { useTranslation } from 'src/app-components/AppComponentsProvider';
-import { Spinner } from 'src/app-components/loading/Spinner/Spinner';
-import type { TranslationKey } from 'src/app-components/types';
+import { Spinner } from '../Spinner';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | undefined;
 export type ButtonColor = 'first' | 'second' | 'success' | 'danger' | undefined;
@@ -16,14 +14,23 @@ export type ButtonProps = {
   variant?: ButtonVariant;
   color?: ButtonColor;
   isLoading?: boolean;
+  loadingLabel?: string;
   size?: 'sm' | 'md' | 'lg';
   fullWidth?: boolean;
   textAlign?: TextAlign;
-  title?: TranslationKey;
-  'aria-label'?: TranslationKey;
+  title?: string;
+  'aria-label'?: string;
 } & Omit<DesignSystemButtonProps, 'variant' | 'color' | 'size' | 'title' | 'aria-label'>;
 
-type DSButtonColor = 'accent' | 'neutral' | 'success' | 'danger' | 'brand1' | 'brand2' | 'brand3' | undefined;
+type DSButtonColor =
+  | 'accent'
+  | 'neutral'
+  | 'success'
+  | 'danger'
+  | 'brand1'
+  | 'brand2'
+  | 'brand3'
+  | undefined;
 
 function mapColorNames(color: ButtonColor): DSButtonColor {
   switch (color) {
@@ -47,34 +54,30 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
     fullWidth,
     style,
     textAlign,
-    title,
-    'aria-label': ariaLabel,
+    loadingLabel,
     ...rest
   },
   ref,
 ) {
-  const { translate } = useTranslation();
   const expandedStyle = { ...style, justifyContent: textAlign ? textAlign : undefined };
   return (
     <DesignSystemButton
       {...rest}
-      title={title ? translate(title) : undefined}
       disabled={disabled || isLoading}
       variant={variant}
       data-color={mapColorNames(color)}
       data-size={size}
       data-fullwidth={fullWidth ? true : undefined}
       ref={ref}
       style={expandedStyle}
-      aria-label={ariaLabel ? translate(ariaLabel) : undefined}
     >
       {isLoading ? (
         <>
           <Spinner
             aria-hidden='true'
+            aria-label={loadingLabel}
             data-color={color}
             data-size={size === 'lg' ? 'sm' : 'xs'}
-            aria-label={translate('general.loading')}
           />
           {children}
         </>

libs/form-component/src/app-components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonColor, TextAlign } from './Button';

libs/form-component/src/app-components/DisplayDate/DisplayDate.module.css

@@ -0,0 +1,4 @@
+.icon {
+  width: 24px;
+  margin-right: 12px;
+}

libs/form-component/src/app-components/DisplayDate/DisplayDate.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DisplayDate } from './DisplayDate';
+
+const meta = {
+  title: 'AppComponents/DisplayDate',
+  component: DisplayDate,
+  args: {
+    value: '15.03.2025',
+  },
+} satisfies Meta<typeof DisplayDate>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Preview: Story = {};
+
+export const WithIcon: Story = {
+  args: {
+    iconUrl: 'https://altinncdn.no/orgs/digdir/digdir.png',
+    iconAltText: 'Calendar icon',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    labelId: 'date-label',
+  },
+  render: (args) => (
+    <>
+      <span id='date-label'>Date of birth</span>
+      <DisplayDate {...args} />
+    </>
+  ),
+};
+
+export const EmptyValue: Story = {
+  args: {
+    value: null,
+  },
+};

libs/form-component/src/app-components/DisplayDate/DisplayDate.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+
+import { DisplayDate } from './DisplayDate';
+
+describe('DisplayDate', () => {
+  it('renders the value inside a span', () => {
+    render(<DisplayDate value='15.03.2025' />);
+
+    expect(screen.getByText('15.03.2025')).toBeInTheDocument();
+  });
+
+  it('renders an icon with alt text when iconUrl is provided', () => {
+    render(<DisplayDate value='15.03.2025' iconUrl='/icon.svg' iconAltText='Calendar icon' />);
+
+    const icon = screen.getByRole('img', { name: 'Calendar icon' });
+    expect(icon).toHaveAttribute('src', '/icon.svg');
+  });
+
+  it('omits the icon when iconUrl is not provided', () => {
+    render(<DisplayDate value='15.03.2025' iconAltText='unused' />);
+
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('associates the value span with labelId via aria-labelledby', () => {
+    render(<DisplayDate value='15.03.2025' labelId='date-label' />);
+
+    expect(screen.getByText('15.03.2025')).toHaveAttribute('aria-labelledby', 'date-label');
+  });
+});

libs/form-component/src/app-components/DisplayDate/DisplayDate.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import classes from './DisplayDate.module.css';
+
+export type DisplayDateProps = {
+  value: React.ReactNode;
+  iconUrl?: string;
+  iconAltText?: string;
+  labelId?: string;
+};
+
+export function DisplayDate({ value, iconUrl, iconAltText, labelId }: DisplayDateProps) {
+  return (
+    <>
+      {iconUrl && <img src={iconUrl} className={classes.icon} alt={iconAltText} />}
+      <span aria-labelledby={labelId}>{value}</span>
+    </>
+  );
+}

libs/form-component/src/app-components/DisplayDate/index.ts

@@ -0,0 +1,2 @@
+export { DisplayDate } from './DisplayDate';
+export type { DisplayDateProps } from './DisplayDate';