Add divider to Likert

src/codegen/Common.ts

@@ -427,7 +427,37 @@ const common = {
           maxHeight: 2,
         },
       }),
-
+  ILikertColumnProperties: () =>
+    new CG.obj(
+      new CG.prop(
+        'columns',
+        new CG.arr(
+          new CG.obj(
+            new CG.prop(
+              'value',
+              new CG.union(new CG.str().setPattern(/^\d+$/), new CG.num())
+                .setTitle('Value')
+                .setDescription('The value of the answer column'),
+            ),
+            new CG.prop(
+              'addLeftDivider',
+              new CG.bool()
+                .optional()
+                .setDescription('Set this to true if you would like to have a divider on the left-hand side.'),
+            ),
+            new CG.prop(
+              'addRightDivider',
+              new CG.bool()
+                .optional()
+                .setDescription('Set this to true if you would like to have a divider on the right-hand side.'),
+            ),
+          ),
+        )
+          .optional()
+          .setTitle('Columns')
+          .setDescription('Add customization to the columns of the likert component'),
+      ),
+    ),
   // Types that component definitions extend:
   ComponentBase: () =>
     new CG.obj(

src/layout/Likert/Generator/LikertGeneratorChildren.tsx

@@ -97,6 +97,7 @@ const GenerateRow = React.memo(function GenerateRow({ rowIndex, questionsBinding
       hidden: parentItem.hidden,
       pageBreak: parentItem.pageBreak,
       renderAsSummary: parentItem.renderAsSummary,
+      columns: parentItem.columns,
     }),
     [parentItem, childId],
   );

src/layout/Likert/LikertComponent.tsx

@@ -31,6 +31,7 @@ export const LikertComponent = ({ node }: LikertComponentProps) => {
   const firstLikertNodeId = rowNodeIds[0];
   const firstLikertNode = useNode(firstLikertNodeId) as LayoutNode<'LikertItem'> | undefined;
   const { options: calculatedOptions, isFetching } = useNodeOptions(firstLikertNode);
+  const columns = useNodeItem(node, (item) => item.columns);
 
   const id = node.id;
 
@@ -122,15 +123,24 @@ export const LikertComponent = ({ node }: LikertComponentProps) => {
                   <Lang id={textResourceBindings?.leftColumnHeader ?? 'likert.left_column_default_header_text'} />
                 </span>
               </Table.HeaderCell>
-              {calculatedOptions.map((option, index) => (
-                <Table.HeaderCell
-                  key={option.value}
-                  scope='col'
-                  id={`${id}-likert-columnheader-${index}`}
-                >
-                  <Lang id={option.label} />
-                </Table.HeaderCell>
-              ))}
+              {calculatedOptions.map((option, index) => {
+                const addLeftDivider = columns?.find((column) => column.value == option.value)?.addLeftDivider;
+                const addRightDivider = columns?.find((column) => column.value == option.value)?.addRightDivider;
+
+                return (
+                  <Table.HeaderCell
+                    key={option.value}
+                    scope='col'
+                    id={`${id}-likert-columnheader-${index}`}
+                    className={cn({
+                      [classes.likertCellLeftDivider]: addLeftDivider,
+                      [classes.likertCellRightDivider]: addRightDivider,
+                    })}
+                  >
+                    <Lang id={option.label} />
+                  </Table.HeaderCell>
+                );
+              })}
             </Table.Row>
           </Table.Head>
           <Table.Body>

src/layout/Likert/config.ts

@@ -88,4 +88,5 @@ export const Config = new CG.component({
         .exportAs('ILikertFilter'),
     ),
   )
+  .extends(CG.common('ILikertColumnProperties'))
   .addPlugin(new OptionsPlugin({ supportsPreselection: false, type: 'single' }));

src/layout/LikertItem/LikertItemComponent.module.css

@@ -69,3 +69,11 @@ Altinn, and making sure they are consistent. */
   margin: 0;
   gap: 0;
 }
+
+.likertCellLeftDivider {
+  border-left: 1px solid #dde3e5;
+}
+
+.likertCellRightDivider {
+  border-right: 1px solid #dde3e5;
+}

src/layout/LikertItem/LikertItemComponent.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 
 import { Label, Radio, Table } from '@digdir/designsystemet-react';
+import cn from 'classnames';
 
 import { RequiredIndicator } from 'src/components/form/RequiredIndicator';
 import { getLabelId } from 'src/components/label/Label';
@@ -15,6 +16,7 @@ import { BaseLayoutNode } from 'src/utils/layout/LayoutNode';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type { IControlledRadioGroupProps } from 'src/layout/RadioButtons/ControlledRadioGroup';
+import type { NodeItemFromNode } from 'src/utils/layout/types';
 
 export const LikertItemComponent = forwardRef<HTMLTableRowElement, PropsFromGenericComponent<'LikertItem'>>(
   (props, ref) => {
@@ -45,6 +47,9 @@ const RadioGroupTableRow = forwardRef<HTMLTableRowElement, IControlledRadioGroup
   const groupContainer =
     node.parent instanceof BaseLayoutNode && node.parent.isType('Likert') ? node.parent : undefined;
 
+  const item = useNodeItem(props.node) as NodeItemFromNode<BaseLayoutNode<'LikertItem'>>;
+  const columns = item.columns;
+
   return (
     <Table.Row
       data-componentid={node.id}
@@ -72,9 +77,17 @@ const RadioGroupTableRow = forwardRef<HTMLTableRowElement, IControlledRadioGroup
         const isChecked = selectedValues[0] === option.value;
         const rowLabelId = getLabelId(id);
         const labelledby = `${rowLabelId} ${groupContainer?.baseId}-likert-columnheader-${index}`;
+        const addLeftDivider = columns?.find((column) => column.value == option.value)?.addLeftDivider;
+        const addRightDivider = columns?.find((column) => column.value == option.value)?.addRightDivider;
 
         return (
-          <Table.Cell key={option.value}>
+          <Table.Cell
+            key={option.value}
+            className={cn({
+              [classes.likertCellLeftDivider]: addLeftDivider,
+              [classes.likertCellRightDivider]: addRightDivider,
+            })}
+          >
             <Radio
               checked={isChecked}
               readOnly={readOnly}

src/layout/LikertItem/config.ts

@@ -48,5 +48,6 @@ export const Config = new CG.component({
         .setDescription('Boolean value indicating if the label should be visible when only one option exists in table'),
     ),
   )
+  .extends(CG.common('ILikertColumnProperties'))
   .addPlugin(new OptionsPlugin({ supportsPreselection: true, type: 'single' }))
   .addProperty(new CG.prop('layout', CG.common('LayoutStyle').optional()));