Merge pull request #912 from navikt/css-container-fix

Fiks "Del skjerm med veileder"
navikt · Jan 21, 2021 · db5d7fc · db5d7fc
2 parents 37e983a + 7b04654
commit db5d7fc
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 118 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "nav-dekoratoren",
-    "version": "1.29.38-prod",
+    "version": "1.29.42-test",
     "private": true,
     "scripts": {
         "start": "npm-run-all -p -r build-and-watch start-server-and-watch typecheck-watch",

diff --git a/src/komponenter/footer/common/Lenker.tsx b/src/komponenter/footer/common/Lenker.tsx
@@ -6,6 +6,7 @@ import { MenyNode } from 'store/reducers/menu-duck';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { genererUrl } from 'utils/Environment';
+import { LinkLoader } from '../../common/content-loaders/LinkLoader';
 
 interface Props {
     node?: MenyNode;
@@ -15,7 +16,11 @@ export const FooterLenker = ({ node }: Props) => {
     const { XP_BASE_URL } = useSelector((state: AppState) => state.environment);
 
     if (!node || !node.children) {
-        return null;
+        return (
+            <li>
+                <LinkLoader id={'personvern-loader'} />
+            </li>
+        );
     }
 
     return (

diff --git a/src/komponenter/footer/common/del-skjerm-lenke/DelSkjermLenke.tsx b/src/komponenter/footer/common/del-skjerm-lenke/DelSkjermLenke.tsx
@@ -0,0 +1,42 @@
+import LenkeMedIkon from '../lenke-med-ikon/LenkeMedIkon';
+import Tekst from 'tekster/finn-tekst';
+import DelSkjerm from 'ikoner/del-skjerm/DelSkjerm';
+import React, { useState } from 'react';
+import DelSkjermModal from '../del-skjerm-modal/DelSkjermModal';
+import { AnalyticsCategory, analyticsEvent } from 'utils/analytics';
+import { Normaltekst } from 'nav-frontend-typografi';
+
+export const DelSkjermLenke = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const openModal = () => {
+        analyticsEvent({
+            category: AnalyticsCategory.Footer,
+            action: `kontakt/del-skjerm-open`,
+        });
+        setIsOpen(true);
+    };
+
+    const closeModal = () => {
+        analyticsEvent({
+            category: AnalyticsCategory.Footer,
+            action: `kontakt/del-skjerm-close`,
+        });
+        setIsOpen(false);
+    };
+
+    return (
+        <>
+            <li>
+                <Normaltekst>
+                    <LenkeMedIkon
+                        onClick={openModal}
+                        tekst={<Tekst id="footer-del-skjerm" />}
+                        ikon={<DelSkjerm style={{ height: '24px', width: '24px' }} />}
+                    />
+                </Normaltekst>
+            </li>
+            {isOpen && <DelSkjermModal isOpen={isOpen} onClose={closeModal} />}
+        </>
+    );
+};
diff --git a/src/komponenter/footer/common/del-skjerm-modal/DelSkjermModal.less b/src/komponenter/footer/common/del-skjerm-modal/DelSkjermModal.less
@@ -54,15 +54,14 @@
 
     &__header {
         width: 100%;
-        top: -2.5rem;
+        top: -3rem;
         left: 0;
         display: flex;
         position: absolute;
         justify-content: center;
     }
 
     &__veileder {
-        height: 5rem;
         width: 5rem;
         border-radius: 2.25rem;
     }

diff --git a/src/komponenter/footer/common/del-skjerm-modal/DelSkjermModal.tsx b/src/komponenter/footer/common/del-skjerm-modal/DelSkjermModal.tsx
@@ -69,15 +69,9 @@ const DelSkjermModal = (props: Props) => {
     };
 
     const setOverlayCss = () => {
-        const elementsArray = document.getElementsByClassName(
-            'ReactModal__Overlay'
-        );
+        const elementsArray = document.getElementsByClassName('ReactModal__Overlay');
         const element = elementsArray[0] as HTMLElement;
-        if (
-            !element ||
-            !element.children[0] ||
-            !element.children[0].classList.contains(classname)
-        ) {
+        if (!element || !element.children[0] || !element.children[0].classList.contains(classname)) {
             return;
         }
         element.style.zIndex = '9999';
@@ -93,38 +87,22 @@ const DelSkjermModal = (props: Props) => {
             onRequestClose={props.onClose}
         >
             <div className={'delskjerm__header'}>
-                <Bilde
-                    className={'delskjerm__veileder'}
-                    asset={veileder}
-                    altText={''}
-                />
+                <Bilde className={'delskjerm__veileder'} asset={veileder} altText={''} />
             </div>
             <div className={'delskjerm__content'}>
                 <Undertittel>
                     <Tekst id={'delskjerm-modal-overskrift'} />
                 </Undertittel>
-                <div className={'delskjerm__beskrivelse'}>
+                <div className={'delskjerm__beskrivelse typo-normal'}>
                     <Normaltekst>
                         <Tekst id={'delskjerm-modal-beskrivelse'} />
                     </Normaltekst>
-                    <Lesmerpanel
-                        apneTekst={
-                            <Normaltekst>
-                                <Tekst
-                                    id={
-                                        'delskjerm-modal-hjelpetekst-overskrift'
-                                    }
-                                />
-                            </Normaltekst>
-                        }
-                    >
+                    <Lesmerpanel apneTekst={finnTekst('delskjerm-modal-hjelpetekst-overskrift', language)}>
                         <ul>
                             {[...Array(3)].map((_, i) => (
                                 <li key={i}>
                                     <Normaltekst>
-                                        <Tekst
-                                            id={`delskjerm-modal-hjelpetekst-${i}`}
-                                        />
+                                        <Tekst id={`delskjerm-modal-hjelpetekst-${i}`} />
                                     </Normaltekst>
                                 </li>
                             ))}

diff --git a/src/komponenter/footer/footer-regular/footer-bottom/FooterBottom.less b/src/komponenter/footer/footer-regular/footer-bottom/FooterBottom.less
@@ -5,7 +5,7 @@
     padding: 2rem 1rem;
     justify-content: center;
     @media @screen-desktop {
-        padding: 1rem @margins-sides-footer @margins-sides-footer;
+        padding: 1rem @margins-sides-footer;
     }
 
     @media @screen-desktop-small-width-down {
@@ -15,22 +15,25 @@
 
 .footer-bottom-content {
     display: flex;
-    flex-direction: column;
     justify-content: center;
     width: 100%;
     max-width: 1344px;
 
+    @media @screen-desktop {
+        flex-direction: row;
+    }
+
+    @media @screen-mobile {
+        flex-direction: column;
+    }
+
     .top-row {
         position: relative;
         display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: flex-start;
 
         .nav-logo-lenke {
             width: 68px;
-            padding: 0.25rem;
-            margin-bottom: 0.25rem;
+            padding: 0.325rem 1rem 0.325rem 0;
         }
     }
 
@@ -47,14 +50,15 @@
 
         &__bottom-lenker {
             display: flex;
+            padding: 1.5rem 0;
             justify-content: space-between;
             align-items: flex-end;
             width: 100%;
         }
 
         &__personvern-lenker {
             display: flex;
-            margin: 0;
+            margin: 0.5rem 0 0 0;
             li {
                 padding-right: 2rem;
             }

diff --git a/src/komponenter/footer/footer-regular/footer-bottom/FooterBottom.tsx b/src/komponenter/footer/footer-regular/footer-bottom/FooterBottom.tsx
@@ -2,25 +2,20 @@ import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Normaltekst } from 'nav-frontend-typografi';
 import BEMHelper from 'utils/bem';
-import { AnalyticsCategory, analyticsEvent } from 'utils/analytics';
-import DelSkjerm from 'ikoner/del-skjerm/DelSkjerm';
+import { AnalyticsCategory } from 'utils/analytics';
 import { AppState } from 'store/reducers';
 import Tekst from 'tekster/finn-tekst';
 import { findNode, getLanguageNode } from 'utils/meny-storage-utils';
 import { MenyNode } from 'store/reducers/menu-duck';
 import FooterLenker from 'komponenter/footer/common/Lenker';
-import LenkeMedIkon from 'komponenter/footer/common/lenke-med-ikon/LenkeMedIkon';
-import DelSkjermModal from 'komponenter/footer/common/del-skjerm-modal/DelSkjermModal';
-import { LinkLoader } from '../../../common/content-loaders/LinkLoader';
 import NavLogoLenke from 'komponenter/common/nav-logo/NavLogoLenke';
 import { ChatbotWrapper } from 'komponenter/footer/chatbot/ChatbotWrapper';
-import './FooterBottom.less';
-
+import { DelSkjermLenke } from 'komponenter/footer/common/del-skjerm-lenke/DelSkjermLenke';
 import Logo from 'ikoner/meny/nav-logo-black.svg';
+import './FooterBottom.less';
 
 const FooterBottom = () => {
     const cls = BEMHelper('footer-bottom-content');
-    const [visDelSkjermModal, setVisDelSkjermModal] = useState(false);
     const { language } = useSelector((state: AppState) => state.language);
     const { data } = useSelector((state: AppState) => state.menypunkt);
     const [personvernNode, settPersonvernNode] = useState<MenyNode>();
@@ -33,24 +28,6 @@ const FooterBottom = () => {
         }
     }, [data, personvernNode]);
 
-    const openModal = () => {
-        analyticsEvent({
-            context: arbeidsflate,
-            category: AnalyticsCategory.Footer,
-            action: `kontakt/del-skjerm-open`,
-        });
-        setVisDelSkjermModal(true);
-    };
-
-    const closeModal = () => {
-        analyticsEvent({
-            context: arbeidsflate,
-            category: AnalyticsCategory.Footer,
-            action: `kontakt/del-skjerm-close`,
-        });
-        setVisDelSkjermModal(false);
-    };
-
     return (
         <div className="menylinje-bottom">
             <div className={cls.className}>
@@ -71,24 +48,11 @@ const FooterBottom = () => {
                             <Tekst id="footer-arbeids-og-veldferdsetaten" />
                         </Normaltekst>
                         <ul className={cls.element('personvern-lenker')}>
-                            {personvernNode ? (
-                                <FooterLenker node={personvernNode} />
-                            ) : (
-                                <li>
-                                    <LinkLoader id={'personvern-loader'} />
-                                </li>
-                            )}
+                            <FooterLenker node={personvernNode} />
+                            <DelSkjermLenke />
                         </ul>
                     </div>
-
-                    <LenkeMedIkon
-                        className={cls.element('del-skjerm')}
-                        onClick={openModal}
-                        tekst={<Tekst id="footer-del-skjerm" />}
-                        ikon={<DelSkjerm style={{ height: '24px', width: '24px' }} />}
-                    />
                 </div>
-                {visDelSkjermModal && <DelSkjermModal isOpen={visDelSkjermModal} onClose={closeModal} />}
             </div>
         </div>
     );

diff --git a/src/komponenter/footer/footer-simple/FooterSimple.less b/src/komponenter/footer/footer-simple/FooterSimple.less
@@ -4,7 +4,7 @@
     &__container {
         min-height: 5.5rem;
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         border-top: 2px solid #0067c5;
         justify-content: center;
         padding: 0.5rem @margins-sides-footer;
@@ -21,11 +21,16 @@
         max-width: @desktopMaxWidth;
 
         @media @screen-desktop-medium-up {
-            justify-content: flex-start;
+            justify-content: space-between;
             align-items: center;
         }
 
+        @media @screen-desktop-medium-down {
+            padding: 0 1rem;
+        }
+
         @media @screen-desktop-small-width-down {
+            padding: 0;
             flex-direction: column;
         }
     }

diff --git a/src/komponenter/footer/footer-simple/FooterSimple.tsx b/src/komponenter/footer/footer-simple/FooterSimple.tsx
@@ -1,25 +1,17 @@
 import React, { Fragment, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-
 import { MenyNode } from 'store/reducers/menu-duck';
 import { AppState } from 'store/reducers';
-import Tekst from 'tekster/finn-tekst';
-import DelSkjerm from 'ikoner/del-skjerm/DelSkjerm';
-import { AnalyticsCategory, analyticsEvent } from 'utils/analytics';
 import { findNode, getLanguageNode } from 'utils/meny-storage-utils';
 import BEMHelper from 'utils/bem';
-
-import DelSkjermModal from '../common/del-skjerm-modal/DelSkjermModal';
-import LenkeMedIkon from '../common/lenke-med-ikon/LenkeMedIkon';
 import FooterLenker from 'komponenter/footer/common/Lenker';
-
-import './FooterSimple.less';
 import { ChatbotWrapper } from 'komponenter/footer/chatbot/ChatbotWrapper';
+import { DelSkjermLenke } from '../common/del-skjerm-lenke/DelSkjermLenke';
+import './FooterSimple.less';
 
 const cls = BEMHelper('simple-footer');
 
 const FooterSimple = () => {
-    const [isOpen, setIsOpen] = useState(false);
     const { language } = useSelector((state: AppState) => state.language);
     const { data } = useSelector((state: AppState) => state.menypunkt);
     const [personvernNode, settPersonvernNode] = useState<MenyNode>();
@@ -31,37 +23,15 @@ const FooterSimple = () => {
         }
     }, [data, personvernNode]);
 
-    const openModal = () => {
-        analyticsEvent({
-            category: AnalyticsCategory.Footer,
-            action: `kontakt/del-skjerm-open`,
-        });
-        setIsOpen(true);
-    };
-
-    const closeModal = () => {
-        analyticsEvent({
-            category: AnalyticsCategory.Footer,
-            action: `kontakt/del-skjerm-close`,
-        });
-        setIsOpen(false);
-    };
-
     return (
         <Fragment>
             <div className={cls.element('container')}>
                 <ChatbotWrapper />
                 <div className={cls.element('content')}>
                     <ul className={cls.element('personvern-lenker')}>
                         <FooterLenker node={personvernNode} />
+                        <DelSkjermLenke />
                     </ul>
-                    <LenkeMedIkon
-                        className={cls.element('del-skjerm')}
-                        onClick={openModal}
-                        tekst={<Tekst id="footer-del-skjerm" />}
-                        ikon={<DelSkjerm style={{ height: '24px', width: '24px' }} />}
-                    />
-                    {isOpen && <DelSkjermModal isOpen={isOpen} onClose={closeModal} />}
                 </div>
             </div>
         </Fragment>