diff --git a/CHANGES.md b/CHANGES.md index 901a31ba..f22f558f 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,3 +1,9 @@ +## 16.3.2 + +--- + +- Added horizontal separation line between repeated groups + ## 16.3.1 --- diff --git a/package-lock.json b/package-lock.json index cefa4daa..ed301965 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@helsenorge/refero", - "version": "16.3.1", + "version": "16.3.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@helsenorge/refero", - "version": "16.3.1", + "version": "16.3.2", "license": "MIT", "dependencies": { "@helsenorge/core-utils": "^33.0.0", diff --git a/package.json b/package.json index 8f572250..cfe4ea69 100644 --- a/package.json +++ b/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", diff --git a/preview/styles/fieldset.scss b/preview/styles/fieldset.scss index c01f041f..b030ad7f 100644 --- a/preview/styles/fieldset.scss +++ b/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; } } } diff --git a/preview/styles/skjemautfyller.scss b/preview/styles/skjemautfyller.scss index 0b1d7722..21cefb1e 100644 --- a/preview/styles/skjemautfyller.scss +++ b/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; +} \ No newline at end of file diff --git a/src/components/formcomponents/group/DefaultGroup.tsx b/src/components/formcomponents/group/DefaultGroup.tsx index 5551d5b5..be5bb4ee 100644 --- a/src/components/formcomponents/group/DefaultGroup.tsx +++ b/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(state => findQuestionnaireItem(state, linkId)); - const { onRenderMarkdown, resources } = useExternalRenderContext(); + const item = useSelector(state => findQuestionnaireItem(state, linkId)); const formDefinition = useSelector((state: GlobalState) => getFormDefinition(state)); const questionnaire = formDefinition?.Content; return (
+ {item?.repeats && path.length > 1 && index > 0 &&
} + { 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 = {}) => {