bug: fixed required fields information placement + jump nav target (#236

) * bug: fixed required fields information placement + jump nav target * test: updated snapshot * cypress rewrite
Altinn · Jun 20, 2022 · 8abfadb · 8abfadb
1 parent 2db4ae2
commit 8abfadb
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 37 deletions.
diff --git a/src/altinn-app-frontend/src/features/form/components/MessageBanner.tsx b/src/altinn-app-frontend/src/features/form/components/MessageBanner.tsx
@@ -7,14 +7,14 @@ import classNames from 'classnames';
 
 const useStyles = makeStyles({
   banner: {
-    margin: '0px -24px 36px -24px',
+    margin: '-36px -24px 36px -24px',
     padding: '10px 24px',
     '@media (min-width:768px)': {
-      margin: '0px -84px 36px -84px',
+      margin: '-36px -84px 36px -84px',
       padding: '10px 84px',
     },
     '@media (min-width:993px)': {
-      margin: '0px -96px 36px -96px',
+      margin: '-36px -96px 36px -96px',
       padding: '10px 96px',
     },
   },

diff --git a/src/altinn-app-frontend/src/features/form/containers/Form.tsx b/src/altinn-app-frontend/src/features/form/containers/Form.tsx
@@ -67,7 +67,6 @@ function RenderLayoutGroup(layoutGroup: ILayoutGroup, layout: ILayout): JSX.Elem
 
 export function Form() {
   const [filteredLayout, setFilteredLayout] = React.useState<any[]>([]);
-  const [navComponent, setNavComponent] = React.useState<ILayoutComponent | undefined>();
   const [currentLayout, setCurrentLayout] = React.useState<string>();
   const [requiredFieldsMissing, setRequiredFieldsMissing] = React.useState(false);
 
@@ -98,41 +97,29 @@ export function Form() {
         }
         renderedInGroup = renderedInGroup.concat(childList);
       });
-      const componentsToRender = layout.filter((component) => (!renderedInGroup.includes(component.id) && component.type !== 'NavigationBar'));
+      const componentsToRender = layout.filter((component) => !renderedInGroup.includes(component.id));
       setFilteredLayout(componentsToRender);
-      setNavComponent(layout.find((c) => c.type === 'NavigationBar') as ILayoutComponent);
     }
   }, [layout]);
 
   return (
     <div>
-      {navComponent &&
-        <Grid
-          container={true}
-          spacing={3}
-          alignItems='flex-start'
-        >
-          {renderLayoutComponent(navComponent, layout)}
-        </Grid>
+      {hasRequiredFields(layout) &&
+        <MessageBanner
+          language={language}
+          error={requiredFieldsMissing}
+          messageKey={'form_filler.required_description'}
+        />
       }
-      <section id='main-content'>
-        {hasRequiredFields(layout) &&
-          <MessageBanner
-            language={language}
-            error={requiredFieldsMissing}
-            messageKey={'form_filler.required_description'}
-          />
-        }
-        <Grid
-          container={true}
-          spacing={3}
-          alignItems='flex-start'
-        >
-          {currentView === currentLayout && filteredLayout && filteredLayout.map((component) => {
-            return renderLayoutComponent(component, layout);
-          })}
-        </Grid>
-      </section>
+      <Grid
+        container={true}
+        spacing={3}
+        alignItems='flex-start'
+      >
+        {currentView === currentLayout && filteredLayout && filteredLayout.map((component) => {
+          return renderLayoutComponent(component, layout);
+        })}
+      </Grid>
     </div>
   );
 }

diff --git a/src/altinn-app-frontend/src/shared/containers/Presentation.tsx b/src/altinn-app-frontend/src/shared/containers/Presentation.tsx
@@ -133,12 +133,12 @@ const PresentationComponent = (props: IPresentationProvidedProps) => {
             <div className='a-modal-content-target'>
               <div className='a-page a-current-page'>
                 <div className='modalPage'>
-                  <div className='modal-content'>
+                  <section className='modal-content' id='main-content'>
                     <Header {...props} language={language} />
                     <div className='modal-body a-modal-body'>
                       {props.children}
                     </div>
-                  </div>
+                  </section>
                 </div>
               </div>
             </div>

diff --git a/src/altinn-app-frontend/src/shared/containers/__snapshots__/Presentation.test.tsx.snap b/src/altinn-app-frontend/src/shared/containers/__snapshots__/Presentation.test.tsx.snap
@@ -244,8 +244,9 @@ exports[`containers/Presentation.tsx should match snapshot 1`] = `
             <div
               className="modalPage"
             >
-              <div
+              <section
                 className="modal-content"
+                id="main-content"
               >
                 <header
                   className="modal-header a-modal-header"
@@ -281,7 +282,7 @@ exports[`containers/Presentation.tsx should match snapshot 1`] = `
                 <div
                   className="modal-body a-modal-body"
                 />
-              </div>
+              </section>
             </div>
           </div>
         </div>

diff --git a/test/cypress/e2e/integration/app-frontend/components.js b/test/cypress/e2e/integration/app-frontend/components.js
@@ -80,8 +80,8 @@ describe('UI Components', () => {
       cy.get(button).should('be.visible').click();
       cy.wait('@getLayoutChangeName');
     });
-    cy.get(appFrontend.navMenu).should('be.visible');
     cy.get(appFrontend.navMenu)
+      .should('be.visible')
       .find('li > button')
       .then((navButtons) => {
         cy.get(navButtons).should('be.visible').and('have.length', 2);