Added seperation line between repeated groups

CHANGES.md

@@ -1,3 +1,9 @@
+## 16.3.2
+
+---
+
+- Added horizontal separation line between repeated groups
+
 ## 16.3.1
 
 ---

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helsenorge/refero",
-  "version": "16.3.1",
+  "version": "16.3.2",
   "description": "Refero is a library that uses a fhir r4 schema and creates a interactive form using helsenorge packages.",
   "keywords": [
     "react",

preview/styles/fieldset.scss

@@ -36,7 +36,9 @@
       top: 0;
       left: 0.5rem;
       bottom: 0;
-      border-left: 4px solid #333;
+      border-left: 4px solid #d6d4d3;
+      border-radius: 3px;
+
     }
 
     // Dersom fieldset ikke har legend, la streken gå høyere opp.
@@ -50,17 +52,7 @@
       top: 0.5rem;
       left: -2rem;
       height: 1.5rem;
-      border-left: 4px solid #333;
-    }
-
-    //ikke mer padding på nøsting > 2
-    fieldset,
-    .nested-fieldset {
-      padding-left: 0;
-
-      &:before {
-        content: none;
-      }
+      border-left: 4px solid #d6d4d3;
     }
   }
 }

preview/styles/skjemautfyller.scss

@@ -381,3 +381,9 @@
   width: 100%;
 
 }
+.page__refero__group__seperator {
+   margin: 1.5rem 0 1.5rem 0;
+   padding: 0 2rem;
+   height: 0px; 
+   border-bottom: 4px solid #d6d4d3; 
+}

src/components/formcomponents/group/DefaultGroup.tsx

@@ -21,15 +21,15 @@ type DefaultGroup = QuestionnaireComponentItemProps & {
 };
 const DefaultGroup = ({ isHelpVisible, setIsHelpVisible, children, ...rest }: DefaultGroup): JSX.Element => {
   const { headerTag, includeSkipLink, path, linkId, index, id } = rest;
-
-  const item = useSelector<GlobalState, QuestionnaireItem | undefined>(state => findQuestionnaireItem(state, linkId));
-
   const { onRenderMarkdown, resources } = useExternalRenderContext();
+  const item = useSelector<GlobalState, QuestionnaireItem | undefined>(state => findQuestionnaireItem(state, linkId));
   const formDefinition = useSelector((state: GlobalState) => getFormDefinition(state));
   const questionnaire = formDefinition?.Content;
 
   return (
     <section id={getId(id)} data-sectionname={getHeaderText(item, questionnaire, resources, onRenderMarkdown)}>
+      {item?.repeats && path.length > 1 && index > 0 && <div data-testid="group-seperator" className="page__refero__group__seperator" />}
+
       <GroupHeader
         headerTag={headerTag}
         isHelpVisible={isHelpVisible}

src/components/formcomponents/group/__tests__/__data__/index.ts

@@ -3,3 +3,5 @@ import { Questionnaire } from 'fhir/r4';
 
 export const q: Questionnaire = JSON.parse(fs.readFileSync(__dirname + '/q.json').toString());
 export const repeatQ: Questionnaire = JSON.parse(fs.readFileSync(__dirname + '/repeatQ.json').toString());
+//Dette skjemaet innholder en repeterende gruppe inni en repeterende gruppe
+export const repeatQ2: Questionnaire = JSON.parse(fs.readFileSync(__dirname + '/repeatQ2.json').toString());

src/components/formcomponents/group/__tests__/__data__/repeatQ2.json

@@ -0,0 +1,103 @@
+{
+  "resourceType": "Questionnaire",
+  "language": "nb-NO",
+  "id": "122e17a7-e34d-4886-99dc-cdfe5684e044",
+  "status": "draft",
+  "publisher": "NHN",
+  "meta": {
+    "profile": ["http://ehelse.no/fhir/StructureDefinition/sdf-Questionnaire"],
+    "tag": [
+      {
+        "system": "urn:ietf:bcp:47",
+        "code": "nb-NO",
+        "display": "Bokmål"
+      }
+    ],
+    "security": [
+      {
+        "code": "3",
+        "display": "Helsehjelp (Full)",
+        "system": "urn:oid:2.16.578.1.12.4.1.1.7618"
+      }
+    ]
+  },
+  "contact": [
+    {
+      "name": "http://www.nhn.no"
+    }
+  ],
+  "subjectType": ["Patient"],
+  "extension": [
+    {
+      "url": "http://helsenorge.no/fhir/StructureDefinition/sdf-sidebar",
+      "valueCoding": {
+        "system": "http://helsenorge.no/fhir/ValueSet/sdf-sidebar",
+        "code": "1"
+      }
+    },
+    {
+      "url": "http://helsenorge.no/fhir/StructureDefinition/sdf-information-message",
+      "valueCoding": {
+        "system": "http://helsenorge.no/fhir/ValueSet/sdf-information-message",
+        "code": "1"
+      }
+    },
+    {
+      "url": "http://helsenorge.no/fhir/StructureDefintion/sdf-itemControl-visibility",
+      "valueCodeableConcept": {
+        "coding": [
+          {
+            "system": "http://helsenorge.no/fhir/CodeSystem/AttachmentRenderOptions",
+            "code": "hide-help",
+            "display": "Hide help texts"
+          },
+          {
+            "system": "http://helsenorge.no/fhir/CodeSystem/AttachmentRenderOptions",
+            "code": "hide-sublabel",
+            "display": "Hide sublabel texts"
+          }
+        ]
+      }
+    }
+  ],
+  "item": [
+    {
+      "linkId": "bb872176-bda2-44ee-879c-1600f745abd7",
+      "type": "group",
+      "text": "REPEATEABLE GROUP",
+      "required": false,
+      "repeats": true,
+      "item": [
+        {
+          "linkId": "de3b3697-3f30-4848-8c29-f19486ce5d9f",
+          "type": "group",
+          "text": "REPEATABLE GROUP INSIDE REPEATABLE GROUP",
+          "item": [
+            {
+              "linkId": "a511b461-8271-4f11-fc6e-1e0d0247f48c",
+              "type": "integer",
+              "text": "REPEATABLE INT",
+              "repeats": true,
+              "extension": [
+                {
+                  "url": "http://hl7.org/fhir/StructureDefinition/minValue",
+                  "valueInteger": 0
+                },
+                {
+                  "url": "http://hl7.org/fhir/StructureDefinition/maxValue",
+                  "valueInteger": 10
+                },
+                {
+                  "url": "http://ehelse.no/fhir/StructureDefinition/validationtext",
+                  "valueString": "Custom error"
+                }
+              ]
+            }
+          ],
+          "required": false,
+          "repeats": true
+        }
+      ]
+    }
+  ]
+}

src/components/formcomponents/group/__tests__/group-component-spec.tsx

@@ -1,12 +1,14 @@
 import '../../../../util/__tests__/defineFetch';
 import { queryByText, renderRefero, screen, userEvent } from '@test/test-utils.tsx';
-import { repeatQ, q } from './__data__';
+import { repeatQ, q, repeatQ2 } from './__data__';
 import Constants from '../../../../constants';
 import { Questionnaire } from 'fhir/r4';
 import { ReferoProps } from '../../../../types/referoProps';
 import { Extensions } from '../../../../constants/extensions';
 import { getResources } from '../../../../../preview/resources/referoResources';
 import { clickButtonTimes, repeatGroupNTimes } from '../../../../../test/selectors';
+import { render } from '@testing-library/react';
+import DefaultGroup from '../DefaultGroup';
 
 const resources = { ...getResources(''), formRequiredErrorMessage: 'Du må fylle ut dette feltet', oppgiGyldigVerdi: 'ikke gyldig tall' };
 
@@ -125,6 +127,26 @@ describe('group', () => {
 
       expect(screen.queryByTestId(/-delete-button/i)).not.toBeInTheDocument();
     });
+
+    it('Should show horizontal separation line between repeated groups', async () => {
+      const questionnaire: Questionnaire = {
+        ...repeatQ2,
+        item: repeatQ2.item?.map(x => ({
+          ...x,
+          repeats: true,
+          readOnly: false,
+        })),
+      };
+      createWrapper(questionnaire);
+      const input = '5';
+
+      //Type in the first integer field
+      await userEvent.type(screen.queryAllByLabelText(/REPEATABLE INT/i)[0], input);
+      //Click the second repeat button to repeat the group
+      await userEvent.click(screen.queryAllByTestId(/-repeat-button/i)[1]);
+
+      expect(screen.getByTestId('group-seperator')).toBeInTheDocument();
+    });
   });
 });
 const createWrapper = (questionnaire: Questionnaire, props: Partial<ReferoProps> = {}) => {