diff --git a/src/codegen/Common.ts b/src/codegen/Common.ts index 84094d96a9..b875fea2c4 100644 --- a/src/codegen/Common.ts +++ b/src/codegen/Common.ts @@ -427,7 +427,34 @@ 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( + 'divider', + new CG.enum('before', 'after', 'both') + .setTitle('Divider') + .setDescription( + "Choose if the divider should be shown 'before', 'after' or on 'both' sides of the column.", + ) + .optional(), + ), + ), + ) + .optional() + .setTitle('Columns') + .setDescription('Add customization to the columns of the likert component'), + ), + ), // Types that component definitions extend: ComponentBase: () => new CG.obj( diff --git a/src/layout/Likert/Generator/LikertGeneratorChildren.tsx b/src/layout/Likert/Generator/LikertGeneratorChildren.tsx index 017177cd15..28a7730617 100644 --- a/src/layout/Likert/Generator/LikertGeneratorChildren.tsx +++ b/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], ); diff --git a/src/layout/Likert/LikertComponent.tsx b/src/layout/Likert/LikertComponent.tsx index 450ee7c39b..378a290daf 100644 --- a/src/layout/Likert/LikertComponent.tsx +++ b/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) => { - {calculatedOptions.map((option, index) => ( - - - - ))} + {calculatedOptions.map((option, index) => { + const divider = columns?.find((column) => column.value == option.value)?.divider; + + return ( + + + + ); + })} diff --git a/src/layout/Likert/config.ts b/src/layout/Likert/config.ts index 013fe7ae59..79229917c3 100644 --- a/src/layout/Likert/config.ts +++ b/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' })); diff --git a/src/layout/LikertItem/LikertItemComponent.module.css b/src/layout/LikertItem/LikertItemComponent.module.css index bf9f9fe9f0..89497ed486 100644 --- a/src/layout/LikertItem/LikertItemComponent.module.css +++ b/src/layout/LikertItem/LikertItemComponent.module.css @@ -69,3 +69,16 @@ Altinn, and making sure they are consistent. */ margin: 0; gap: 0; } + +.likertCellDividerStart { + border-inline-start: 1px solid #dde3e5; +} + +.likertCellDividerEnd { + border-inline-end: 1px solid #dde3e5; +} + +.likertCellDividerBoth { + border-inline-start: 1px solid #dde3e5; + border-inline-end: 1px solid #dde3e5; +} diff --git a/src/layout/LikertItem/LikertItemComponent.tsx b/src/layout/LikertItem/LikertItemComponent.tsx index ff56cecb25..bd529bbbbe 100644 --- a/src/layout/LikertItem/LikertItemComponent.tsx +++ b/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'; @@ -14,7 +15,6 @@ import { useRadioButtons } from 'src/layout/RadioButtons/radioButtonsUtils'; 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'; export const LikertItemComponent = forwardRef>( (props, ref) => { @@ -36,7 +36,7 @@ export const LikertItemComponent = forwardRef((props, ref) => { +const RadioGroupTableRow = forwardRef>((props, ref) => { const { node } = props; const { selectedValues, handleChange, calculatedOptions, fetchingOptions } = useRadioButtons(props); const validations = useUnifiedValidationsForNode(node); @@ -45,6 +45,8 @@ const RadioGroupTableRow = forwardRef i.columns); + return ( column.value == option.value)?.divider; return ( - +