Extract <Fieldset /> component

src/components/form/Fieldset.test.tsx → src/app-components/Label/Fieldset.test.tsx

@@ -1,43 +1,48 @@
 import React from 'react';
 
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
-import { Fieldset } from 'src/components/form/Fieldset';
-import { renderWithoutInstanceAndLayout } from 'src/test/renderWithProviders';
-import type { FieldsetProps } from 'src/components/form/Fieldset';
+import { Fieldset } from 'src/app-components/Label/Fieldset';
 
 describe('Fieldset', () => {
-  const render = async (props?: Partial<FieldsetProps>) =>
-    await renderWithoutInstanceAndLayout({
-      renderer: () => (
-        <Fieldset
-          legend='legend test'
-          description='description test'
-          {...props}
-        />
-      ),
-    });
-
   it('renders with accessible legend', async () => {
-    await render();
+    render(<Fieldset legend='legend test' />);
     const fieldset = screen.getByRole('group', { name: /legend test/i });
     expect(fieldset).toBeInTheDocument();
   });
 
   it('renders with accessible description', async () => {
-    await render();
+    render(
+      <Fieldset
+        legend='legend test'
+        description={<span>description test</span>}
+      />,
+    );
+
     const description = screen.getByText('description test');
     expect(description).toBeInTheDocument();
   });
 
   it('provides an optional indicator', async () => {
-    await render({ required: false, labelSettings: { optionalIndicator: true } });
+    render(
+      <Fieldset
+        legend='legend test'
+        required={false}
+        optionalIndicator={<span>(valgfri)</span>}
+      />,
+    );
     const fieldset = screen.getByRole('group', { name: /legend test \(valgfri\)/i });
     expect(fieldset).toBeInTheDocument();
   });
 
   it('provides an required indicator', async () => {
-    await render({ required: true });
+    render(
+      <Fieldset
+        legend='legend test'
+        required={true}
+        requiredIndicator={<span>*</span>}
+      />,
+    );
     const fieldset = screen.getByRole('group', { name: /legend test \*/i });
     expect(fieldset).toBeInTheDocument();
   });

src/app-components/Label/Fieldset.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import type { JSX, PropsWithChildren, ReactElement } from 'react';
+
+import { Fieldset as DesignsystemetFieldset, Label as DesignsystemetLabel } from '@digdir/designsystemet-react';
+import { Grid } from '@material-ui/core';
+import cn from 'classnames';
+import type { LabelProps as DesignsystemetLabelProps } from '@digdir/designsystemet-react';
+
+import labelClasses from 'src/app-components/Label/Label.module.css';
+import type { GridSize } from 'src/app-components/Label/types';
+
+export type FieldsetProps = {
+  id?: string;
+  legend: string | ReactElement | undefined;
+  className?: string;
+  grid?: GridSize;
+  optionalIndicator?: ReactElement;
+  help?: ReactElement;
+  description?: ReactElement;
+  required?: boolean;
+  requiredIndicator?: JSX.Element;
+  style?: DesignsystemetLabelProps['style'];
+};
+
+export function Fieldset({
+  id,
+  children,
+  className,
+  legend,
+  grid,
+  style,
+  help,
+  description,
+  required,
+  requiredIndicator,
+  optionalIndicator,
+}: PropsWithChildren<FieldsetProps>) {
+  if (!legend) {
+    return (
+      <Grid
+        id={id}
+        container
+        spacing={2}
+      >
+        <Grid
+          item
+          {...(grid ?? { xs: 12 })}
+          className={className}
+        >
+          {children}
+        </Grid>
+      </Grid>
+    );
+  }
+
+  return (
+    <Grid
+      id={id}
+      container
+      spacing={2}
+    >
+      <Grid
+        item
+        {...(grid ?? { xs: 12 })}
+      >
+        <DesignsystemetFieldset
+          className={cn(className)}
+          legend={
+            <span className={cn(labelClasses.labelAndHelpWrapper)}>
+              <DesignsystemetLabel
+                weight='medium'
+                size='md'
+                style={style}
+                asChild
+              >
+                <span>
+                  {legend}
+                  {required && requiredIndicator}
+                  {!required && optionalIndicator}
+                </span>
+              </DesignsystemetLabel>
+              {help}
+            </span>
+          }
+          // FIXME: find a way to use classnames for setting font size. Not working currently
+          description={description && <div style={{ fontSize: '1rem' }}>{description}</div>}
+        >
+          {children}
+        </DesignsystemetFieldset>
+      </Grid>
+    </Grid>
+  );
+}

src/app-components/Label/Label.module.css

@@ -1,16 +1,16 @@
-.label {
+.labelAndHelpWrapper {
   display: flex;
   gap: var(--fds-spacing-2);
   align-items: center;
 }
 
-.description {
-  padding-bottom: var(--fds-spacing-2);
-}
-
 .labelAndDescWrapper {
   display: flex;
   flex-direction: column;
   gap: var(--fds-spacing-1);
   align-items: flex-start;
 }
+
+.description {
+  padding-bottom: var(--fds-spacing-2);
+}

src/app-components/Label/Label.tsx

@@ -2,36 +2,37 @@ import React from 'react';
 import type { JSX, PropsWithChildren, ReactElement } from 'react';
 
 import { Label as DesignsystemetLabel } from '@digdir/designsystemet-react';
-import { Grid, type GridProps } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import cn from 'classnames';
 import type { LabelProps as DesignsystemetLabelProps } from '@digdir/designsystemet-react';
 
 import classes from 'src/app-components/Label/Label.module.css';
-
-type GridSize = Pick<GridProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
+import type { GridSize } from 'src/app-components/Label/types';
 
 type LabelProps = {
-  label: string | undefined;
+  label: string | ReactElement | undefined;
+  htmlFor?: DesignsystemetLabelProps['htmlFor'];
+  required?: boolean;
+  requiredIndicator?: JSX.Element;
   optionalIndicator?: ReactElement;
   help?: ReactElement;
   description?: ReactElement;
   className?: string;
   grid?: GridSize;
-  required?: boolean;
-  requiredIndicator?: JSX.Element;
-} & Pick<DesignsystemetLabelProps, 'htmlFor' | 'style'>;
+  style?: DesignsystemetLabelProps['style'];
+};
 
 export function Label({
   label,
+  htmlFor,
   required,
   requiredIndicator,
   optionalIndicator,
   help,
   description,
-  htmlFor,
-  style,
   className,
   grid,
+  style,
   children,
 }: PropsWithChildren<LabelProps>) {
   if (!label) {
@@ -48,20 +49,20 @@ export function Label({
         {...(grid ?? { xs: 12 })}
       >
         <span className={classes.labelAndDescWrapper}>
-          <DesignsystemetLabel
-            weight='medium'
-            size='md'
-            htmlFor={htmlFor}
-            className={cn(classes.label, className)}
-            style={style}
-          >
-            <div>
+          <span className={classes.labelAndHelpWrapper}>
+            <DesignsystemetLabel
+              weight='medium'
+              size='md'
+              htmlFor={htmlFor}
+              className={cn(className)}
+              style={style}
+            >
               {label}
               {required && requiredIndicator}
               {!required && optionalIndicator}
-            </div>
+            </DesignsystemetLabel>
             {help}
-          </DesignsystemetLabel>
+          </span>
           {description && <div className={classes.description}>{description}</div>}
         </span>
       </Grid>

src/app-components/Label/types.ts

@@ -0,0 +1,3 @@
+import type { GridProps } from '@material-ui/core';
+
+export type GridSize = Pick<GridProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;

src/app-components/Panel/Panel.module.css

@@ -76,6 +76,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--fds-spacing-1);
+  width: 100%;
 }
 
 .panelHeader {

src/app-components/Panel/Panel.tsx

@@ -21,6 +21,7 @@ type PanelProps = PropsWithChildren<{
   showIcon?: boolean;
   forceMobileLayout?: boolean;
   title?: JSX.Element;
+  style?: React.CSSProperties;
 }>;
 
 type PanelIconProps = {
@@ -68,6 +69,7 @@ export const Panel: React.FC<PanelProps> = ({
   showIcon = false,
   forceMobileLayout = false,
   title,
+  style,
   children,
 }) => {
   const isMobile = useIsMobile();
@@ -78,6 +80,7 @@ export const Panel: React.FC<PanelProps> = ({
       className={cn(classes.panel, {
         [classes.panelMobileLayout]: isMobileLayout,
       })}
+      style={style}
     >
       <div className={cn(classes.panelContentWrapper, classes[`panelContentWrapper_${variant}`])}>
         {showIcon && (

src/components/ConditionalWrapper.tsx

@@ -1,13 +1,12 @@
-import type { JSX } from 'react';
+import type { JSX, PropsWithChildren } from 'react';
 import type React from 'react';
 
 interface IConditionalWrapperProps {
   condition: boolean;
   wrapper: (children: React.ReactNode) => JSX.Element;
-  children: JSX.Element;
 }
 
-export const ConditionalWrapper = ({ condition, wrapper, children }: IConditionalWrapperProps) => {
+export const ConditionalWrapper = ({ condition, wrapper, children }: PropsWithChildren<IConditionalWrapperProps>) => {
   if (condition) {
     return wrapper(children);
   } else {