hds-web 1.23.7 → 1.23.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.23.7",
+  "version": "1.23.8",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Cards/Announcement/announcementMd.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Typography } from "../../../foundation/Typography";
 import { HDSColor } from "../../../foundation/ColorPalette";
 import { Icon } from '../../../components/common-components/Icon';
@@ -12,13 +12,41 @@ const tagColorVariants = {
   green: 'bg-neutral-0 tb:bg-green-500 text-green-500 tb:text-neutral-0',
 }
 
+const isBrowser = typeof window !== "undefined";
+
 export default function AnnouncementMd(props) {
   const [isBannerActive, toggleBanner] = useState(true);
   const bgClass = props.bgColorClass ? HDSColor(props.bgColorClass) : 'bg-neutral-0';
   const linkTextClass = props.linkTextColorClass ? HDSColor(props.linkTextColorClass) : 'text-neutral-600';
   const tagClass = props.tagColor ? props.tagColor : 'purple';
   const iconBgClass = props.iconBgColor ? HDSColor(props.iconBgColor) : 'bg-blue-200'
-  if (isBannerActive) {
+
+  const [isConsentForm, setIsConsentForm] = useState(false);
+  const onCloseBanner = () => {
+    toggleBanner(false);
+    if (isBrowser) {
+      window.sessionStorage.setItem("announcementConsent", "true");
+    }
+  };
+
+  useEffect(() => {
+    if (isBrowser) {
+      if (
+        "sessionStorage" in window &&
+        window.sessionStorage &&
+        "getItem" in window.sessionStorage
+      ) {
+        const localSessionStorage = window.sessionStorage.getItem(
+          "announcementConsent"
+        );
+        if (localSessionStorage) {
+          setIsConsentForm(true);
+        }
+      }
+    }
+  }, []);
+
+  if (isBannerActive && !isConsentForm) {
     return (
       <div className="py-6">
         <div className={`${bgClass} flex justify-between relative rounded-2xl tb:rounded-full shadow p-4 tb:justify-center tb:items-center`}>
@@ -49,7 +77,7 @@ export default function AnnouncementMd(props) {
               </Typography>
             </a>
           </div>
-          <div className="static mt-[2px] tb:mt-0 ml-3 tb:ml-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-6 cursor-pointer w-5 h-5 min-w-[20px] tb:w-8 tb:min-w-[32px] tb:h-8 rounded-full bg-neutral-100 flex items-center justify-center" onClick={()=>toggleBanner(false)}>
+          <div className="static mt-[2px] tb:mt-0 ml-3 tb:ml-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-6 cursor-pointer w-5 h-5 min-w-[20px] tb:w-8 tb:min-w-[32px] tb:h-8 rounded-full bg-neutral-100 flex items-center justify-center" onClick={()=>onCloseBanner()}>
             <Icon height={'block w-4 h-4 tb:w-6 tb:h-6 stroke-[2px] transition ease-in-out'} variant='xclose' strokeClass='stroke-neutral-800' />
           </div>
         </div>