Feat/2062 group (#2208)

* Add support for compact display type for groups

* chore: renamed compact to isCompact

---------

Co-authored-by: Adam Haeger <adamgullerud@gmail.com>
Co-authored-by: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Co-authored-by: Adam Haeger <adam.haeger@Adams-MacBook-Pro-2.local>

Author: 4 people

src/layout/Checkboxes/index.tsx

@@ -52,6 +52,7 @@ export class Checkboxes extends CheckboxesDef {
   renderSummary2(
     componentNode: LayoutNode<'Checkboxes'>,
     summaryOverrides?: CheckboxSummaryOverrideProps,
+    isCompact?: boolean,
   ): JSX.Element | null {
     const displayData = this.useDisplayData(componentNode);
     const maxStringLength = 75;
@@ -64,6 +65,7 @@ export class Checkboxes extends CheckboxesDef {
         title={<Lang id={title} />}
         componentNode={componentNode}
         showAsList={showAsList}
+        isCompact={isCompact}
       />
     );
   }

src/layout/Group/GroupSummary.tsx

@@ -43,17 +43,19 @@ const RenderChildComponents = ({ componentNode, hierarchyLevel, summaryOverrides
             componentNode={child as LayoutNode<'Group'>}
             hierarchyLevel={hierarchyLevel ? hierarchyLevel + 1 : 1}
             key={componentNode.item.id}
+            summaryOverrides={summaryOverrides as CompGroupInternal['summaryProps']}
           />
         );
       } else {
+        const isCompact = summaryOverrides?.['isCompact'];
         return (
           <div
             key={child?.item?.id}
             className={cn(classes.childItem)}
           >
             <ComponentSummary
               componentNode={child}
-              summaryOverrides={summaryOverrides as CompSummary2Internal['overrides']}
+              isCompact={isCompact}
             />
           </div>
         );
@@ -68,6 +70,7 @@ export const GroupSummary = ({ componentNode, hierarchyLevel = 0, summaryOverrid
   const headingLevel = getHeadingLevel(hierarchyLevel);
   const isGroup = componentNode.item.type === 'Group';
   const isNestedGroup = isGroup && hierarchyLevel > 0;
+
   return (
     <section className={isNestedGroup ? cn(classes.groupContainer, classes.nested) : cn(classes.groupContainer)}>
       <div className={cn(classes.groupHeading)}>

src/layout/Group/config.ts

@@ -1,11 +1,20 @@
 import { CG, Variant } from 'src/codegen/CG';
 import { CompCategory } from 'src/layout/common';
 
-export const GROUP_SUMMARY_PROPS = new CG.obj()
+export const GROUP_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');
+  .setDescription('Properties for how to display the summary of the component')
+  .exportAs('GroupSummaryOverrideProps');
 
 export const Config = new CG.component({
   category: CompCategory.Container,

src/layout/Input/InputSummary.tsx

@@ -4,15 +4,14 @@ import { Lang } from 'src/features/language/Lang';
 import { useUnifiedValidationsForNode } from 'src/features/validation/selectors/unifiedValidationsForNode';
 import { validationsOfSeverity } from 'src/features/validation/utils';
 import { SingleValueSummary } from 'src/layout/Summary2/CommonSummaryComponents/SingleValueSummary';
-import type { InputSummaryOverrideProps } from 'src/layout/Summary2/config.generated';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 type InputComponentSummaryProps = {
+  isCompact?: boolean;
   componentNode: LayoutNode<'Input'>;
   displayData: string;
-  summaryOverrides?: InputSummaryOverrideProps;
 };
-export const InputSummary = ({ componentNode, displayData }: InputComponentSummaryProps) => {
+export const InputSummary = ({ componentNode, displayData, isCompact }: InputComponentSummaryProps) => {
   const validations = useUnifiedValidationsForNode(componentNode);
   const errors = validationsOfSeverity(validations, 'error');
   const title = componentNode.item.textResourceBindings?.title;
@@ -23,6 +22,7 @@ export const InputSummary = ({ componentNode, displayData }: InputComponentSumma
       displayData={displayData}
       errors={errors}
       componentNode={componentNode}
+      isCompact={isCompact}
     />
   );
 };

src/layout/Input/index.tsx

@@ -46,12 +46,16 @@ export class Input extends InputDef {
     return <SummaryItemSimple formDataAsString={displayData} />;
   }
 
-  renderSummary2(componentNode: LayoutNode<'Input'>, summaryOverrides?: InputSummaryOverrideProps): JSX.Element | null {
+  renderSummary2(
+    componentNode: LayoutNode<'Input'>,
+    _?: InputSummaryOverrideProps,
+    isCompact?: boolean,
+  ): JSX.Element | null {
     return (
       <InputSummary
         componentNode={componentNode}
-        summaryOverrides={summaryOverrides}
         displayData={this.useDisplayData(componentNode)}
+        isCompact={isCompact}
       />
     );
   }

src/layout/RadioButtons/RadioButtonsSummary.tsx

@@ -8,12 +8,13 @@ import type { RadioSummaryOverrideProps } from 'src/layout/Summary2/config.gener
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 type RadioButtonsSummaryProps = {
+  isCompact?: boolean;
   componentNode: LayoutNode<'RadioButtons'>;
   displayData: string;
   summaryOverrides?: RadioSummaryOverrideProps;
 };
 
-export const RadioButtonsSummary = ({ componentNode, displayData }: RadioButtonsSummaryProps) => {
+export const RadioButtonsSummary = ({ componentNode, displayData, isCompact }: RadioButtonsSummaryProps) => {
   const validations = useUnifiedValidationsForNode(componentNode);
   const errors = validationsOfSeverity(validations, 'error');
   const title = componentNode.item.textResourceBindings?.title;
@@ -23,6 +24,7 @@ export const RadioButtonsSummary = ({ componentNode, displayData }: RadioButtons
       displayData={displayData}
       errors={errors}
       componentNode={componentNode}
+      isCompact={isCompact}
     />
   );
 };

src/layout/RadioButtons/index.tsx

@@ -37,13 +37,15 @@ export class RadioButtons extends RadioButtonsDef {
   renderSummary2(
     componentNode: LayoutNode<'RadioButtons'>,
     summaryOverrides?: RadioSummaryOverrideProps,
+    isCompact?: boolean,
   ): JSX.Element | null {
     const displayData = this.useDisplayData(componentNode);
     return (
       <RadioButtonsSummary
         componentNode={componentNode}
         summaryOverrides={summaryOverrides}
         displayData={displayData}
+        isCompact={isCompact}
       />
     );
   }

src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css

@@ -1,3 +1,17 @@
+.labelValueWrapper:not(.compact) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fds-spacing-2);
+}
+
+.labelValueWrapper.compact {
+  display: inline-block;
+}
+
+.labelValueWrapper.compact label {
+  margin-right: var(--fds-spacing-2);
+}
+
 .formValue {
   font-weight: 500;
 }
@@ -11,12 +25,6 @@
   border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
 }
 
-.labelValueWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--fds-spacing-2);
-}
-
 .checkboxSummaryItem {
   display: flex;
   align-items: flex-start;

src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx

@@ -19,6 +19,7 @@ type MultipleValueSummaryProps = {
   title: React.ReactNode;
   componentNode: LayoutNode;
   showAsList?: boolean;
+  isCompact?: boolean;
 };
 
 function getSummaryData(
@@ -36,7 +37,21 @@ function getSummaryData(
   return getCommaSeparatedOptionsToText(value, optionList, langTools);
 }
 
-export const MultipleValueSummary = ({ title, componentNode, showAsList }: MultipleValueSummaryProps) => {
+function getDisplayType(
+  displayValues: string[],
+  showAsList?: boolean,
+  compact?: boolean,
+): 'list' | 'inline' | 'empty' | null {
+  if (!displayValues || displayValues?.length < 1) {
+    return 'empty';
+  }
+  if (compact || !showAsList) {
+    return 'inline';
+  }
+  return 'list';
+}
+
+export const MultipleValueSummary = ({ title, componentNode, showAsList, isCompact }: MultipleValueSummaryProps) => {
   const formDataSelector = FD.useDebouncedSelector();
 
   const langTools = useLanguage();
@@ -47,11 +62,15 @@ export const MultipleValueSummary = ({ title, componentNode, showAsList }: Multi
   const validations = useUnifiedValidationsForNode(componentNode);
   const errors = validationsOfSeverity(validations, 'error');
 
+  const displayType = getDisplayType(displayValues, showAsList, isCompact);
+
   return (
     <div className={classes.checkboxSummaryItem}>
-      <div className={cn(classes.labelValueWrapper, { [classes.error]: errors.length > 0 })}>
+      <div
+        className={cn(classes.labelValueWrapper, { [classes.error]: errors.length > 0, [classes.compact]: isCompact })}
+      >
         <Label weight={'regular'}>{title}</Label>
-        {displayValues?.length > 0 && showAsList && (
+        {displayType === 'list' && (
           <List.Root>
             <List.Unordered>
               {displayValues?.map((item) => (
@@ -65,25 +84,24 @@ export const MultipleValueSummary = ({ title, componentNode, showAsList }: Multi
             </List.Unordered>
           </List.Root>
         )}
-        {displayValues?.length > 0 && !showAsList && (
+        {displayType === 'inline' && (
           <Paragraph
             asChild
             className={classes.formValue}
           >
             <span>{displayValues.join(', ')}</span>
           </Paragraph>
         )}
-        {!displayValues ||
-          (displayValues?.length < 1 && (
-            <Paragraph
-              asChild
-              className={classes.emptyValue}
-            >
-              <span>
-                <Lang id={'general.empty_summary'}></Lang>
-              </span>
-            </Paragraph>
-          ))}
+        {displayType === 'empty' && (
+          <Paragraph
+            asChild
+            className={classes.emptyValue}
+          >
+            <span>
+              <Lang id={'general.empty_summary'}></Lang>
+            </span>
+          </Paragraph>
+        )}
         {errors.length > 0 &&
           errors.map(({ message }) => (
             <ErrorMessage key={message.key}>

src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css

@@ -1,3 +1,23 @@
+.inputSummaryItem {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.labelValueWrapper:not(.compact) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fds-spacing-2);
+}
+
+.labelValueWrapper.compact {
+  display: inline-block;
+}
+
+.labelValueWrapper.compact label {
+  margin-right: var(--fds-spacing-2);
+}
+
 .formValue {
   font-weight: 500;
 }
@@ -7,22 +27,10 @@
   font-style: italic;
 }
 
-.inputSummaryItem {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-}
-
 .error {
   border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
 }
 
-.labelValueWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--fds-spacing-2);
-}
-
 .editButton {
   margin-left: auto;
   min-width: unset;

src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx

@@ -16,6 +16,7 @@ type SingleValueSummaryProps = {
   displayData?: string;
   hideEditButton?: boolean;
   multiline?: boolean;
+  isCompact?: boolean;
 };
 
 export const SingleValueSummary = ({
@@ -25,10 +26,17 @@ export const SingleValueSummary = ({
   displayData,
   hideEditButton,
   multiline,
+  isCompact,
 }: SingleValueSummaryProps) => (
   <div className={classes.inputSummaryItem}>
-    <div className={classes.labelValueWrapper}>
-      <Label weight={'regular'}>{title}</Label>
+    <div className={cn(classes.labelValueWrapper, isCompact && classes.compact)}>
+      <Label
+        weight={'regular'}
+        className={classes.formLabel}
+      >
+        {title}
+        {!!title?.toString()?.length && isCompact && ':'}
+      </Label>
       <Paragraph
         asChild
         className={cn({

src/layout/Summary2/SummaryComponent2/ComponentSummary.tsx

@@ -12,17 +12,18 @@ import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 interface ComponentSummaryProps {
   componentNode: LayoutNode;
   summaryOverrides?: CompSummary2Internal['overrides'];
+  isCompact?: boolean;
 }
 
 interface ResolveComponentProps {
   summaryProps: CompSummary2External;
   summaryOverrides?: CompSummary2Internal['overrides'];
 }
-export function ComponentSummary({ componentNode, summaryOverrides }: ComponentSummaryProps) {
+export function ComponentSummary({ componentNode, summaryOverrides, isCompact }: ComponentSummaryProps) {
   const override = summaryOverrides?.find((override) => override.componentId === componentNode.item.id);
 
   const renderedComponent = componentNode.def.renderSummary2
-    ? componentNode.def.renderSummary2(componentNode as LayoutNode<any>, override)
+    ? componentNode.def.renderSummary2(componentNode as LayoutNode<any>, override, isCompact)
     : null;
 
   if (!renderedComponent) {