Merge pull request #3002 from statisticsnorway/MIM-2066-Popup-fixes-2

[MIM-2066] Various Fixes
statisticsnorway · Oct 31, 2024 · 9517999 · 9517999
2 parents e26a956 + d2243c3
commit 9517999
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 59 deletions.
diff --git a/src/main/resources/assets/styles/_popup.scss b/src/main/resources/assets/styles/_popup.scss
@@ -50,26 +50,26 @@
     &.open {
       left: 50%;
       transform: translateX(-50%);
-      
-        @media (max-width: 380px) {
-          transform: translateX(-50%) scale(0.9);
-          bottom: 12px;
-        }
-      
-        @media (max-width: 360px) {
-          transform: translateX(-50%) scale(0.9);
-          bottom: 12px;
-        }
-      
-        @media (max-width: 345px) {
-          transform: translateX(-50%) scale(0.85);
-          bottom: 6px;
-        }
-      
-        @media (max-width: 330px) {
-          transform: translateX(-50%) scale(0.8);
-          bottom: -2px;
-        }
+
+      @media (max-width: 380px) {
+        transform: translateX(-50%) scale(0.9);
+        bottom: 12px;
+      }
+
+      @media (max-width: 360px) {
+        transform: translateX(-50%) scale(0.9);
+        bottom: 12px;
+      }
+
+      @media (max-width: 345px) {
+        transform: translateX(-50%) scale(0.85);
+        bottom: 6px;
+      }
+
+      @media (max-width: 330px) {
+        transform: translateX(-50%) scale(0.8);
+        bottom: -2px;
+      }
     }
 
     &.closed,
@@ -132,7 +132,7 @@
   padding: 0;
   outline: none;
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
+  transition: background-color 0.3s ease-in-out;
   background: none;
 }
 
@@ -172,35 +172,30 @@
   justify-content: space-between;
   background-color: #ecfeed;
   border-top: 1px solid #00824d;
-}
 
-.popup-button {
-  width: 169px;
-  height: 44px;
-  background-color: #00824d;
-  color: white;
-  font-family: Roboto, sans-serif;
-  font-weight: 700;
-  border: none;
-  border-radius: 2px;
-  cursor: pointer;
-}
+  .ssb-primary-button,
+  .ssb-secondary-button {
+    height: 44px;
+  }
 
-.popup-secondary-button {
-  width: 126px;
-  height: 44px;
-  background-color: #ecfeed;
-  color: #00824d;
-  font-family: Roboto, sans-serif;
-  font-weight: 700;
-  border: 2px solid #00824d;
-  border-radius: 2px;
-  cursor: pointer;
+  .ssb-primary-button {
+    width: 169px;
+  }
+
+  .ssb-secondary-button {
+    width: 126px;
+    background-color: #ecfeed;
+    color: #00824d;
+
+    &:hover,
+    &:focus {
+      background-color: transparent;
+      color: #00824d;
+    }
+  }
 }
 
-.popup-container:focus-visible,
-.popup-button:focus-visible,
-.popup-secondary-button:focus-visible {
+.popup-container:focus-visible {
   outline: 2px solid #9272fc;
   outline-offset: 2px;
   border-radius: 2px;
@@ -210,4 +205,4 @@
   .header-text {
     font-size: 20px;
   }
-}
+}
diff --git a/src/main/resources/react4xp/_entries/Popup.tsx b/src/main/resources/react4xp/_entries/Popup.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { X, Clipboard } from 'react-feather'
+import { Button } from '@statisticsnorway/ssb-component-library'
 
 const Popup = () => {
   const [isOpen, setIsOpen] = useState(false)
@@ -11,10 +12,14 @@ const Popup = () => {
 
   useEffect(() => {
     const checkCookie = document.cookie.split(';').some((cookie) => cookie.trim().startsWith('hidePopup='))
-    if (!checkCookie) {
-      setIsVisible(true)
-      setIsOpen(true)
+
+    if (!localStorage.getItem('popupOpen')) {
+      localStorage.setItem('popupOpen', 'true')
     }
+
+    const savedIsOpen = localStorage.getItem('popupOpen') === 'true'
+    setIsOpen(savedIsOpen)
+    setIsVisible(!checkCookie)
   }, [])
 
   useEffect(() => {
@@ -30,10 +35,13 @@ const Popup = () => {
 
   useEffect(() => {
     const handleScroll = () => {
-      if (!isOpen && isMobile && hasUserScrolled) {
+      if (window.scrollY === 0) {
+        setIsScrolled(false)
+      } else if (!isOpen && isMobile && hasUserScrolled) {
         setIsScrolled(true)
       }
     }
+
     const onManualScroll = () => {
       setHasUserScrolled(true)
     }
@@ -52,7 +60,9 @@ const Popup = () => {
   }, [isMobile, isOpen, hasUserScrolled])
 
   const toggleOpen = () => {
-    setIsOpen(!isOpen)
+    const newState = !isOpen
+    setIsOpen(newState)
+    localStorage.setItem('popupOpen', newState.toString())
     setIsScrolled(false)
     setHasUserScrolled(false)
     if (!isOpen && popupContainerRef.current) {
@@ -62,6 +72,7 @@ const Popup = () => {
 
   const closePopup = () => {
     setIsVisible(false)
+    localStorage.removeItem('popupOpen')
     const date = new Date()
     date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000)
     const expires = `expires=${date.toUTCString()}`
@@ -91,7 +102,7 @@ const Popup = () => {
       className={`popup-container ${isOpen ? 'open' : isScrolled ? 'scrolled' : 'closed'}`}
       ref={popupContainerRef}
       role='dialog'
-      aria-labelledby='popup-header'
+      aria-labelledby='popup-title'
       aria-describedby='popup-content'
       tabIndex={isOpen ? -1 : 0}
       onKeyDown={!isOpen ? handleClosedButtonKeyDown : undefined}
@@ -104,7 +115,9 @@ const Popup = () => {
       ) : (
         <>
           <div className='popup-header' id='popup-header'>
-            <h4 className='header-text'>Hvordan opplever du ssb.no?</h4>
+            <h4 className='header-text' id='popup-title'>
+              Hvordan opplever du ssb.no?
+            </h4>
             <button className='close-icon-wrapper' aria-label='Lukk' tabIndex={0} onClick={closePopup}>
               <X className='close-icon' size={24} />
             </button>
@@ -116,8 +129,8 @@ const Popup = () => {
             </p>
           </div>
           <div className='button-group'>
-            <button
-              className='popup-secondary-button'
+            <Button
+              className='ssb-secondary-button'
               onClick={() => {
                 toggleOpen()
                 if (popupContainerRef.current) {
@@ -126,10 +139,10 @@ const Popup = () => {
               }}
             >
               Svar senere
-            </button>
-            <button className='popup-button' onClick={handlePrimaryButtonClick}>
+            </Button>
+            <Button primary className='ssb-primary-button' onClick={handlePrimaryButtonClick}>
               Til undersøkelsen
-            </button>
+            </Button>
           </div>
         </>
       )}