feat 1265: Grid summary compact

src/layout/Grid/GridSummary.tsx

@@ -24,20 +24,20 @@ import type {
   ITableColumnProperties,
 } from 'src/layout/common.generated';
 import type { ITextResourceBindings } from 'src/layout/layout';
+import type { GridSummaryOverrideProps } from 'src/layout/Summary2/config.generated';
 import type { BaseLayoutNode, LayoutNode } from 'src/utils/layout/LayoutNode';
 
 type GridSummaryProps = {
   componentNode: LayoutNode<'Grid'>;
+  summaryOverrides?: GridSummaryOverrideProps;
 };
 
 export const GridSummary = ({ componentNode }: GridSummaryProps) => {
   const { rows, textResourceBindings } = componentNode.item;
   const { title } = textResourceBindings ?? {};
-
   const columnSettings: ITableColumnFormatting = {};
   const isMobile = useIsMobile();
   const pdfModeActive = usePdfModeActive();
-
   const isSmall = isMobile && !pdfModeActive;
 
   const tableSections: JSX.Element[] = [];
@@ -156,7 +156,6 @@ export function GridRowRenderer({ row, mutableColumnSettings, node, currentHeade
   const pdfModeActive = usePdfModeActive();
 
   const isSmall = isMobile && !pdfModeActive;
-
   const firstComponentCell = row.cells.find((cell) => cell && 'node' in cell);
   const firstComponentNode =
     firstComponentCell &&

src/layout/Grid/config.ts

@@ -1,6 +1,21 @@
 import { CG } from 'src/codegen/CG';
 import { CompCategory } from 'src/layout/common';
 
+export const GRID_SUMMARY_PROPS = new CG.obj(
+  new CG.prop(
+    'isCompact',
+    new CG.bool()
+      .optional()
+      .setTitle('Compact summary')
+      .setDescription('Boolean value indicating if the summary should be compact'),
+  ),
+)
+  .extends(CG.common('ISummaryOverridesCommon'))
+  .optional()
+  .setTitle('Summary properties')
+  .setDescription('Properties for how to display the summary of the component')
+  .exportAs('GridSummaryOverrideProps');
+
 export const Config = new CG.component({
   category: CompCategory.Container,
   rendersWithLabel: false,

src/layout/Grid/index.tsx

@@ -11,6 +11,7 @@ import { GridHierarchyGenerator } from 'src/layout/Grid/hierarchy';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type { CompExternalExact } from 'src/layout/layout';
 import type { SummaryRendererProps } from 'src/layout/LayoutComponent';
+import type { GridSummaryOverrideProps } from 'src/layout/Summary2/config.generated';
 import type { ComponentHierarchyGenerator } from 'src/utils/layout/HierarchyGenerator';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
@@ -27,8 +28,13 @@ export class Grid extends GridDef {
     return <GridSummaryComponent {...props} />;
   }
 
-  renderSummary2(componentNode: LayoutNode<'Grid'>): JSX.Element | null {
-    return <GridSummary componentNode={componentNode} />;
+  renderSummary2(componentNode: LayoutNode<'Grid'>, summaryOverrides?: GridSummaryOverrideProps): JSX.Element | null {
+    return (
+      <GridSummary
+        componentNode={componentNode}
+        summaryOverrides={summaryOverrides}
+      />
+    );
   }
 
   renderSummaryBoilerplate(): boolean {

src/layout/Group/GroupSummary.tsx

@@ -6,14 +6,13 @@ import type { HeadingProps } from '@digdir/designsystemet-react';
 
 import classes from 'src/layout/Group/GroupSummary.module.css';
 import { ComponentSummary } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
-import type { CompGroupInternal } from 'src/layout/Group/config.generated';
-import type { CompSummary2Internal } from 'src/layout/Summary2/config.generated';
+import type { GroupSummaryOverrideProps } from 'src/layout/Summary2/config.generated';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 type GroupComponentSummaryProps = {
   componentNode: LayoutNode<'Group'>;
   hierarchyLevel?: number;
-  summaryOverrides?: CompGroupInternal['summaryProps'] | CompSummary2Internal['overrides'];
+  summaryOverrides?: GroupSummaryOverrideProps;
 };
 
 type HeadingLevel = HeadingProps['level'];
@@ -43,7 +42,7 @@ const RenderChildComponents = ({ componentNode, hierarchyLevel, summaryOverrides
             componentNode={child as LayoutNode<'Group'>}
             hierarchyLevel={hierarchyLevel ? hierarchyLevel + 1 : 1}
             key={componentNode.item.id}
-            summaryOverrides={summaryOverrides as CompGroupInternal['summaryProps']}
+            summaryOverrides={summaryOverrides as GroupSummaryOverrideProps}
           />
         );
       } else {

src/layout/Group/config.ts

@@ -68,5 +68,4 @@ export const Config = new CG.component({
         .setTitle('Heading level')
         .setDescription('The heading level of the group title.'),
     ),
-  )
-  .addProperty(new CG.prop('summaryProps', GROUP_SUMMARY_PROPS).onlyIn(Variant.Internal));
+  );

src/layout/Group/index.tsx

@@ -10,8 +10,8 @@ import { SummaryGroupComponent } from 'src/layout/Group/SummaryGroupComponent';
 import type { LayoutValidationCtx } from 'src/features/devtools/layoutValidation/types';
 import type { ComponentValidation, ValidationDataSources } from 'src/features/validation';
 import type { PropsFromGenericComponent, ValidateComponent } from 'src/layout';
-import type { CompGroupInternal } from 'src/layout/Group/config.generated';
 import type { SummaryRendererProps } from 'src/layout/LayoutComponent';
+import type { GroupSummaryOverrideProps } from 'src/layout/Summary2/config.generated';
 import type { ComponentHierarchyGenerator } from 'src/utils/layout/HierarchyGenerator';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
@@ -57,10 +57,7 @@ export class Group extends GroupDef implements ValidateComponent {
     );
   }
 
-  renderSummary2(
-    componentNode: LayoutNode<'Group'>,
-    summaryOverrides?: CompGroupInternal['summaryProps'],
-  ): JSX.Element | null {
+  renderSummary2(componentNode: LayoutNode<'Group'>, summaryOverrides?: GroupSummaryOverrideProps): JSX.Element | null {
     return (
       <GroupSummary
         componentNode={componentNode}

src/layout/Summary2/config.tsx

@@ -2,6 +2,8 @@ import { CG } from 'src/codegen/CG';
 import { CHECKBOX_SUMMARY_OVERRIDE_PROPS } from 'src/layout/Checkboxes/config';
 import { CompCategory } from 'src/layout/common';
 import { DROPDOWN_SUMMARY_OVERRIDE_PROPS } from 'src/layout/Dropdown/config';
+import { GRID_SUMMARY_PROPS } from 'src/layout/Grid/config';
+import { GROUP_SUMMARY_PROPS } from 'src/layout/Group/config';
 import { INPUT_SUMMARY_OVERRIDE_PROPS } from 'src/layout/Input/config';
 import { MULTIPLE_SELECT_SUMMARY_OVERRIDE_PROPS } from 'src/layout/MultipleSelect/config';
 import { RADIO_SUMMARY_OVERRIDE_PROPS } from 'src/layout/RadioButtons/config';
@@ -50,6 +52,8 @@ export const Config = new CG.component({
           RADIO_SUMMARY_OVERRIDE_PROPS,
           DROPDOWN_SUMMARY_OVERRIDE_PROPS,
           MULTIPLE_SELECT_SUMMARY_OVERRIDE_PROPS,
+          GROUP_SUMMARY_PROPS,
+          GRID_SUMMARY_PROPS,
         ),
       ).optional(),
     ),