introducing the new notification popup

resources/js/notifications.js

@@ -0,0 +1,18 @@
+export default function NotificationsInit() {
+  const notificationsContainer = document.querySelector('.homegrade-notifications');
+
+  if (!notificationsContainer) return;
+  const notifications = notificationsContainer.querySelectorAll('.notification');
+
+  notifications.forEach((notification) => {
+    const notificationClose = notification.querySelector('.notification__close');
+    const notificationId = notification.getAttribute('data-notification-id');
+    console.log(notificationId);
+
+    notificationClose.addEventListener('click', () => {
+      notification.classList.add('notification--dismissed');
+      document.cookie = `${notificationId}=dismissed; path=/; max-age=30`;
+      // document.cookie = `${notificationId}=dismissed; path=/; max-age=${30 * 86400}`; // 86400 = 1 day
+    });
+  });
+}

template-components/notifications/notifications-popup.css

@@ -0,0 +1,81 @@
+.notification {
+  @apply p-8 relative;
+  z-index: ;
+
+  &--alert {
+    @apply bg-secondary-light text-secondary;
+
+    .notification__inner:before {
+      background-image: url('../resources/img/graphic-assets/icon-info-red.svg');
+    }
+    .notification__close {
+      @apply filter-secondary;
+    }
+    a[target='_blank'] {
+      @apply !text-secondary;
+      &:after {
+        @apply filter-secondary;
+      }
+      &:hover,
+      &:focus-visible {
+        @apply outline-secondary;
+        /* background: rgba(253, 245, 246, 1) !important; */
+        background: rgba(223, 30, 30, 0.1) !important;
+      }
+    }
+  }
+  &--info {
+    @apply bg-primary-light text-primary;
+    .notification__inner:before {
+      background-image: url('../resources/img/graphic-assets/icon-info-purple.svg');
+    }
+    .notification__close {
+      @apply filter-primary;
+    }
+    a[target='_blank'] {
+      @apply !text-primary;
+      &:after {
+        @apply filter-primary;
+      }
+      &:hover,
+      &:focus-visible {
+        @apply outline-primary;
+        background: rgba(47, 1, 84, 0.1) !important;
+      }
+    }
+  }
+
+  &--dismissed {
+    @apply hidden;
+  }
+  &__inner {
+    @apply max-w-screen-xl px-8 mx-auto relative;
+    &:before {
+      @apply absolute top-1 left-0 w-5 h-5 bg-contain bg-no-repeat bg-center;
+      content: '';
+    }
+  }
+  &__title,
+  &__content {
+    @apply inline;
+  }
+  &__title {
+    @apply font-bold text-lg mr-2;
+  }
+  &__content {
+    @apply !text-base;
+
+    > * {
+      @apply inline;
+    }
+    a {
+      @apply font-bold underline;
+    }
+  }
+  &__close {
+    @apply absolute flex justify-center items-center top-0  right-0 z-10;
+    z-index: 10 !important;
+
+    @apply inline-block w-6 h-6;
+  }
+}

template-components/notifications/notifications-popup.php

@@ -0,0 +1,44 @@
+<?php
+
+/**
+ * Notifications Popup
+ *
+ * @package Deligraph_Homegrade
+ */
+
+$notifications = get_field('notifications', 'option');
+
+
+?>
+
+<div class="homegrade-notifications">
+	<?php if ($notifications) : ?>
+		<?php foreach ($notifications as $notification) : ?>
+			<?php
+			$notification_id = 'homegrade_notification_' . md5($notification['title']);
+			$cookie_already_hidden = isset($_COOKIE[$notification_id]) && $_COOKIE[$notification_id] === 'dismissed';
+			$notificationType = $notification['type'] ?? 'info';
+
+			if (!isset($_COOKIE[$notification_id])) {
+				// setcookie($notification_id, "visible", time() + (86400 * 30), "/"); // 86400 = 1 day
+				setcookie($notification_id, "visible", time() + 30, "/"); // 30 seconds
+			}
+
+			?>
+			<div class="notification notification--<?php echo $notificationType ?> <?php echo $cookie_already_hidden ? "notification--dismissed" : "" ?> " data-notification-id="<?php echo $notification_id; ?>">
+				<div class="notification__inner">
+
+					<h3 class="notification__title"><?php echo $notification['title']; ?></h3>
+					<div class="notification__content"><?php echo $notification['content']; ?></div>
+					<button class="notification__close" aria-label="<?php echo __("Fermer cette notification", "homegrade-theme__texte-fonctionnel") ?>">
+
+						<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/close_submenu_icon_transparent.svg' ?>" alt="">
+
+					</button>
+				</div>
+
+
+			</div>
+		<?php endforeach; ?>
+	<?php endif; ?>
+</div>