From a8700098f286fdda377e9c2eb2e068d8162f2e86 Mon Sep 17 00:00:00 2001 From: Carl-OW <142233642+Carl-OW@users.noreply.github.com> Date: Thu, 31 Oct 2024 14:22:21 +0100 Subject: [PATCH 1/2] Various Fixes --- src/main/resources/assets/styles/_popup.scss | 89 +++++++++---------- .../resources/react4xp/_entries/Popup.tsx | 20 +++-- 2 files changed, 55 insertions(+), 54 deletions(-) diff --git a/src/main/resources/assets/styles/_popup.scss b/src/main/resources/assets/styles/_popup.scss index bdfd99edb..e37d3a61e 100644 --- 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; } -} \ No newline at end of file +} diff --git a/src/main/resources/react4xp/_entries/Popup.tsx b/src/main/resources/react4xp/_entries/Popup.tsx index 0356878f6..48a7363bf 100644 --- 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) @@ -12,8 +13,9 @@ const Popup = () => { useEffect(() => { const checkCookie = document.cookie.split(';').some((cookie) => cookie.trim().startsWith('hidePopup=')) if (!checkCookie) { + const savedIsOpen = localStorage.getItem('popupOpen') === 'true' setIsVisible(true) - setIsOpen(true) + setIsOpen(savedIsOpen) } }, []) @@ -30,10 +32,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) } @@ -53,6 +58,7 @@ const Popup = () => { const toggleOpen = () => { setIsOpen(!isOpen) + localStorage.setItem('popupOpen', (!isOpen).toString()) setIsScrolled(false) setHasUserScrolled(false) if (!isOpen && popupContainerRef.current) { @@ -116,8 +122,8 @@ const Popup = () => {

- - + +
)} From d2243c374616bd0c07dfa536cf1cf677dc82938f Mon Sep 17 00:00:00 2001 From: Carl-OW <142233642+Carl-OW@users.noreply.github.com> Date: Thu, 31 Oct 2024 16:03:03 +0100 Subject: [PATCH 2/2] Localstorage reflect openstate - default open --- .../resources/react4xp/_entries/Popup.tsx | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/main/resources/react4xp/_entries/Popup.tsx b/src/main/resources/react4xp/_entries/Popup.tsx index 48a7363bf..1ff4d752a 100644 --- a/src/main/resources/react4xp/_entries/Popup.tsx +++ b/src/main/resources/react4xp/_entries/Popup.tsx @@ -12,11 +12,14 @@ const Popup = () => { useEffect(() => { const checkCookie = document.cookie.split(';').some((cookie) => cookie.trim().startsWith('hidePopup=')) - if (!checkCookie) { - const savedIsOpen = localStorage.getItem('popupOpen') === 'true' - setIsVisible(true) - setIsOpen(savedIsOpen) + + if (!localStorage.getItem('popupOpen')) { + localStorage.setItem('popupOpen', 'true') } + + const savedIsOpen = localStorage.getItem('popupOpen') === 'true' + setIsOpen(savedIsOpen) + setIsVisible(!checkCookie) }, []) useEffect(() => { @@ -57,8 +60,9 @@ const Popup = () => { }, [isMobile, isOpen, hasUserScrolled]) const toggleOpen = () => { - setIsOpen(!isOpen) - localStorage.setItem('popupOpen', (!isOpen).toString()) + const newState = !isOpen + setIsOpen(newState) + localStorage.setItem('popupOpen', newState.toString()) setIsScrolled(false) setHasUserScrolled(false) if (!isOpen && popupContainerRef.current) { @@ -68,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()}` @@ -97,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} @@ -110,7 +115,9 @@ const Popup = () => { ) : ( <>