refactors all old fieldset to new, deletes old and adds tests to new

Altinn · Nov 27, 2024 · 7c95726 · 7c95726
1 parent 0d6f1ce
commit 7c95726
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 131 deletions.
diff --git a/src/components/form/Fieldset.test.tsx → src/app-components/Label/Fieldset.test.tsx b/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();
   });

diff --git a/src/app-components/Label/Fieldset.tsx b/src/app-components/Label/Fieldset.tsx
@@ -9,9 +9,9 @@ import type { LabelProps as DesignsystemetLabelProps } from '@digdir/designsyste
 import labelClasses from 'src/app-components/Label/Label.module.css';
 import type { GridSize } from 'src/app-components/Label/types';
 
-type FieldsetProps = {
+export type FieldsetProps = {
   id?: string;
-  legend: string | undefined;
+  legend: string | ReactElement | undefined;
   className?: string;
   grid?: GridSize;
   optionalIndicator?: ReactElement;

diff --git a/src/app-components/Label/Label.tsx b/src/app-components/Label/Label.tsx
@@ -11,28 +11,28 @@ import type { GridSize } from 'src/app-components/Label/types';
 
 type LabelProps = {
   label: string | undefined;
+  htmlFor?: DesignsystemetLabelProps['htmlFor'];
+  required?: boolean;
+  requiredIndicator?: JSX.Element;
   optionalIndicator?: ReactElement;
   help?: ReactElement;
   description?: ReactElement;
   className?: string;
   grid?: GridSize;
-  required?: boolean;
-  requiredIndicator?: JSX.Element;
-  htmlFor?: DesignsystemetLabelProps['htmlFor'];
   style?: DesignsystemetLabelProps['style'];
 };
 
 export function Label({
   label,
+  htmlFor,
   required,
   requiredIndicator,
   optionalIndicator,
   help,
   description,
-  htmlFor,
-  style,
   className,
   grid,
+  style,
   children,
 }: PropsWithChildren<LabelProps>) {
   if (!label) {

diff --git a/src/components/form/Fieldset.tsx b/src/components/form/Fieldset.tsx
diff --git a/src/layout/Grid/GridComponent.tsx b/src/layout/Grid/GridComponent.tsx
@@ -4,9 +4,9 @@ import type { PropsWithChildren } from 'react';
 import { Table } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
+import { Fieldset } from 'src/app-components/Label/Fieldset';
 import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { Caption } from 'src/components/form/caption/Caption';
-import { Fieldset } from 'src/components/form/Fieldset';
 import { FullWidthWrapper } from 'src/components/form/FullWidthWrapper';
 import { HelpTextContainer } from 'src/components/form/HelpTextContainer';
 import { LabelContent } from 'src/components/label/LabelContent';
@@ -26,6 +26,7 @@ import { getColumnStyles } from 'src/utils/formComponentUtils';
 import { BaseLayoutNode } from 'src/utils/layout/LayoutNode';
 import { LayoutPage } from 'src/utils/layout/LayoutPage';
 import { Hidden, useNode } from 'src/utils/layout/NodesContext';
+import { useLabel } from 'src/utils/layout/useLabel';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type { ITableColumnFormatting, ITableColumnProperties } from 'src/layout/common.generated';
@@ -287,19 +288,19 @@ function CellWithLabel({ className, columnStyleOptions, labelFrom, isHeader = fa
   );
 }
 
-function MobileGrid({ node }: PropsFromGenericComponent<'Grid'>) {
-  const { textResourceBindings, id, labelSettings } = useNodeItem(node);
-  const { title, description, help } = textResourceBindings ?? {};
+function MobileGrid({ node, overrideDisplay }: PropsFromGenericComponent<'Grid'>) {
+  const { id } = useNodeItem(node);
   const nodeIds = useNodeIdsFromGrid(node);
   const isHidden = Hidden.useIsHiddenSelector();
 
+  const { labelText, getDescriptionComponent, getHelpTextComponent } = useLabel({ node, overrideDisplay });
+
   return (
     <Fieldset
       id={id}
-      legend={title && <Lang id={title} />}
-      description={title && <Lang id={description} />}
-      helpText={help}
-      labelSettings={labelSettings}
+      legend={labelText}
+      description={getDescriptionComponent()}
+      help={getHelpTextComponent()}
       className={css.mobileFieldset}
     >
       {nodeIds

diff --git a/src/layout/Group/GroupComponent.tsx b/src/layout/Group/GroupComponent.tsx
@@ -4,8 +4,9 @@ import type { JSX } from 'react';
 import { Heading } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
+import { Fieldset } from 'src/app-components/Label/Fieldset';
 import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
-import { Fieldset } from 'src/components/form/Fieldset';
+import { Description } from 'src/components/form/Description';
 import { FullWidthWrapper } from 'src/components/form/FullWidthWrapper';
 import { Lang } from 'src/features/language/Lang';
 import classes from 'src/layout/Group/GroupComponent.module.css';
@@ -65,31 +66,28 @@ export function GroupComponent({
       condition={isPanel && !isSummary}
       wrapper={(child) => <FullWidthWrapper className={classes.panelPadding}>{child}</FullWidthWrapper>}
     >
-      {/* If the group does not have a legend, we don't want to render the Fieldset because it breaks WCAG tests*/}
-      <ConditionalWrapper
-        condition={!!legend}
-        wrapper={(child) => (
-          <Fieldset
-            legend={
-              legend && (
-                <Heading
-                  level={headingLevel}
-                  size={headingSize}
-                >
-                  <Lang id={legend} />
-                </Heading>
-              )
-            }
-            className={cn({
-              [classes.summary]: isSummary,
-              [classes.group]: !isSummary,
-              [classes.panel]: isPanel && !isSummary,
-            })}
-            description={description && !isSummary && <Lang id={description} />}
-          >
-            {child}
-          </Fieldset>
-        )}
+      <Fieldset
+        legend={
+          legend && (
+            <Heading
+              level={headingLevel}
+              size={headingSize}
+            >
+              <Lang id={legend} />
+            </Heading>
+          )
+        }
+        className={cn({
+          [classes.summary]: isSummary,
+          [classes.group]: !isSummary,
+          [classes.panel]: isPanel && !isSummary,
+        })}
+        description={
+          <Description
+            componentId={id}
+            description={description}
+          />
+        }
       >
         <div
           data-componentid={container.id}
@@ -107,7 +105,7 @@ export function GroupComponent({
         >
           {children.map((n) => renderLayoutNode(n))}
         </div>
-      </ConditionalWrapper>
+      </Fieldset>
     </ConditionalWrapper>
   );
 }
diff --git a/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx b/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
@@ -3,7 +3,7 @@ import type { JSX } from 'react';
 
 import { Heading } from '@digdir/designsystemet-react';
 
-import { Fieldset } from 'src/components/form/Fieldset';
+import { Fieldset } from 'src/app-components/Label/Fieldset';
 import { Lang } from 'src/features/language/Lang';
 import classes from 'src/layout/Likert/Summary/LikertSummaryComponent.module.css';
 import { Hidden } from 'src/utils/layout/NodesContext';