gatsby-core-theme 44.28.0 → 44.30.0

package/src/components/atoms/notifications/notification-items/cards-v2/index.js

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react-hooks/rules-of-hooks */
-/* eslint-disable react/no-danger */
 import React from "react";
 import PropTypes from "prop-types";
 import LazyImage from "~hooks/lazy-image";
@@ -17,120 +16,133 @@ import useTranslate from "~hooks/useTranslate/useTranslate";
 import { getTimeAgo } from "~helpers/date-time";
 import styles from "./notification-items.module.scss";
 
-const CardsItems = ({ module, onClose, wordLimit = 12 }) => {
-  const { items } = module;
-  const noNewUpdates = useTranslate("noNewUpdates", "No new items");
+const CategoryTag = ({ category }) => {
+  const label = useTranslate(
+    `category_${category.short_name}`,
+    category?.name || ""
+  );
 
-  const Content = ({ item }) => {
-    const isDefaultOrArticlePage = ["article", "page"].includes(
-      item?.relation_type
-    );
+  if (!label) return null;
 
-    const img =  item?.relation?.logo?.filename;
+  return <span className={styles.tag}>{label}</span>;
+};
+
+const CardsItems = ({ module, wordLimit = 12, showUnread = false }) => {
+  const { items } = module || {};
+  const noNewUpdates = useTranslate("noNewUpdates", "No new items");
+  const updatedLabel = useTranslate("updated", "Updated");
 
+  const renderItem = (item) => {
+    const isArticleOrPage = ["article", "page"].includes(item?.relation_type);
+    const img = isArticleOrPage
+      ? item?.banner
+      : item?.relation?.logo?.filename;
     const imageSrc = imagePrettyUrl(img, 40, 40);
     const fileName = getImageFilename(imageSrc);
-
     const TitleTag = item?.title_tag || "label";
-  
-    
     const ribbon = getExtraField(item?.extra_fields, "notification_ribbon");
     const title = getExtraField(item?.extra_fields, "notification_title");
     const subtitle = getExtraField(item?.extra_fields, "notification_subtitle");
-
+    const categories = item?.categories || [];
+    const description =
+      subtitle || item?.short_description || item?.description || "";
     const timeData =
       getTimeAgo(
-        item?.manual_updated_at ||
+        item?.manual_updated_date ||
           item?.updated_at ||
-          item?.manual_created_at ||
+          item?.manual_published_date ||
           item?.created_at
       ) || {};
-
-    const timeAgo = timeData
-      ? `${timeData?.value} ${useTranslate(
-          timeData?.key,
-          timeData?.key?.replace("_", " ")
+    const timeAgo = timeData.value
+      ? `${updatedLabel} ${timeData.value} ${useTranslate(
+          timeData.key,
+          timeData.key?.replace(/_/g, " ")
         )}`
       : "";
 
+    const thumbnail = img ? (
+      <LazyImage
+        width={40}
+        height={40}
+        alt={getAltText(
+          item?.image_object,
+          item?.title || item?.label || item?.link_text || fileName
+        )}
+        src={imageSrc}
+      />
+    ) : (
+      isArticleOrPage && <ArticleIcon />
+    );
+
     return (
       <div className={styles.notificationContent}>
-        {!isDefaultOrArticlePage ? img && (
-          <LazyImage
-            width={40}
-            height={40}
-            alt={getAltText(
-              item?.image_object,
-              item?.label || item?.link_text || fileName
+        {showUnread && <span className={styles.unreadDot} />}
+        <div className={styles.topRow}>
+          <div className={styles.thumbnail}>{thumbnail}</div>
+          <div className={styles.text}>
+            {(item?.title || title) && (
+              <TitleTag className={styles.title}>
+                {title || item?.title}
+              </TitleTag>
+            )}
+            {description && (
+              <p className={styles.subtitle}>
+                {textWordsLimit(
+                  description.replace(/<\/?[^>]+(>|$)/g, ""),
+                  wordLimit
+                )}
+              </p>
             )}
-            src={imageSrc}
-          />
-        ) : <ArticleIcon />}
-        <div className={styles.innerContent}>
-          {(item?.title || title) && (
-            <TitleTag>{title || item?.title}</TitleTag>
-          )}
-          {(item?.description || subtitle) && (
-            <p className={styles.subtitle}>
-              {textWordsLimit(
-                (subtitle || item?.description || "").replace(
-                  /<\/?[^>]+(>|$)/g,
-                  ""
-                ),
-                wordLimit
-              )}
-            </p>
-          )}
-          {item?.template && (
-            <div className={styles.ribbonAndTime}>
-              {ribbon && <span className={styles.ribbon}>{ribbon}</span>}
-              <span className={styles.extraContent}>{timeAgo}</span>
-            </div>
-          )}
+          </div>
+          <span className={styles.cta} aria-hidden="true" />
         </div>
+        {(categories.length > 0 || ribbon || timeAgo) && (
+          <div className={styles.meta}>
+            {(categories.length > 0 || ribbon) && (
+              <div className={styles.tags}>
+                {categories.length > 0
+                  ? categories.map((category) => (
+                      <CategoryTag
+                        key={category.short_name || category.name}
+                        category={category}
+                      />
+                    ))
+                  : (
+                    <span className={styles.tag}>
+                      {useTranslate(ribbon, ribbon)}
+                    </span>
+                  )}
+              </div>
+            )}
+            {timeAgo && <span className={styles.timestamp}>{timeAgo}</span>}
+          </div>
+        )}
       </div>
     );
   };
 
+  if (!items?.length) {
+    return <p className={styles.empty}>{noNewUpdates}</p>;
+  }
+
   return (
-    <div className={styles.container || ""}>
-      <div className={styles.notificationsContainer || ""}>
-        <span>{useTranslate("latestUpdates", "Latest Updates")}</span>
-        {items?.length ? (
-          <ul className={styles.notifications || ""}>
-            {items.map((item) => (
-              <li
-                className={`${styles.notification} notification-item-gtm`}
-                key={keygen()}
-              >
-                <Link
-                  to={item?.path}
-                  title={item?.title}
-                  className={`${styles.notificationLink} cards-gtm`}
-                  aria-label={`${item?.title} Link`}
-                >
-                  <Content item={item} />
-                </Link>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <>{noNewUpdates}</>
-        )}
-      </div>
-      <div className={styles.triangle} />
-      <div
-        className={styles.overlay}
-        onKeyDown={onClose}
-        onClick={onClose}
-        role="button"
-        aria-label={useTranslate(
-          "ariaLabel-notificationBellIcon",
-          "Notification Bell Icon"
-        )}
-        tabIndex={0}
-      />
-    </div>
+    <ul className={`${styles.notifications} ${styles.embeddedList}`}>
+      {items.map((item) => (
+        <li
+          className={`${styles.notification} ${styles.embedded} notification-item-gtm`}
+          key={keygen()}
+        >
+          <Link
+            to={item?.path}
+            title={item?.title}
+            className={`${styles.notificationLink} cards-gtm`}
+            aria-label={`${item?.title} Link`}
+          >
+            {renderItem(item)}
+          </Link>
+        </li>
+      ))}
+    </ul>
   );
 };
 
@@ -138,7 +150,7 @@ CardsItems.propTypes = {
   module: PropTypes.shape({
     items: PropTypes.arrayOf(PropTypes.shape({})),
   }),
-  onClose: PropTypes.func,
+  showUnread: PropTypes.bool,
 };
 
 export default CardsItems;

package/src/components/atoms/notifications/notification-items/cards-v2/notification-items.module.scss

@@ -1,270 +1,220 @@
-.container {
-  position: relative;
-  position: fixed;
-  left: 0;
-  top: 7.6rem;
-  background: #fff;
-
-  @include min(tablet) {
-    left: auto;
-    top: calc(100% + 8px);
-    right: 3.8rem;
-    border-radius: 1rem;
-    box-shadow: 0 8px 8px -4px rgb(27 27 28 / 4%),
-      0 20px 24px -4px rgb(27 27 28 / 7%);
-    padding-bottom: 1px;
-  }
-
-  @include min(tablet) {
-    position: absolute;
-    right: 0;
-  }
-}
-
-.notificationsContainer {
-  width: 100vw;
-  max-height: 58.4rem;
-  padding: 1.6rem 1.6rem 2.4rem;
-
-  @include flex-align(stretch, stretch);
+.notifications {
   @include flex-direction(column);
 
   gap: 0.8rem;
-  transition: 0.5s ease-in;
-  overflow-y: hidden;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
+.notification {
+  position: relative;
+  isolation: isolate;
+}
 
-  &::-webkit-scrollbar-track {
-    background: #e0e0e2;
+.notificationLink {
+  display: block;
+  width: 100%;
+  color: inherit;
+  text-decoration: none;
+}
 
-    @include min(tablet) {
-      border-radius: 0 10px 10px 0;
-    }
-  }
+.notificationContent {
+  @include flex-direction(column);
+}
 
-  &::-webkit-scrollbar-thumb {
-    background-color: #515156;
+.topRow {
+  @include flex-align(flex-start, flex-start);
 
-    @include min(tablet) {
-      border-radius: 0 10px 10px 0;
-    }
-  }
+  gap: 0.8rem;
+}
 
-  @include min(tablet) {
-    border-radius: 4px;
-    padding: 1.6rem;
-    font-size: 1rem;
-    z-index: 100;
-    white-space: wrap;
-    max-width: 40.6rem;
-    width: 40.6rem;
-    max-height: 60rem;
-  }
+.unreadDot {
+  position: absolute;
+  z-index: 3;
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 100%;
+  background: var(--notification-unread-dot, #f55d41);
+}
 
-  span {
-    font-size: 1.8rem;
-    font-weight: 600;
-    color: #1b1b1c;
-    line-height: 2.8rem;
-    margin: 0;
-    height: 3.2rem;
+.thumbnail {
+  @include flex-align(center, center);
 
-    @include flex-align(center, space-between);
+  flex-shrink: 0;
+  overflow: hidden;
+
+  img,
+  svg {
+    display: block;
+    width: 4rem;
+    height: 4rem;
+    border-radius: 0.4rem;
   }
 }
 
-.notifications {
-  @include flex-align(stretch, flex-start);
+.text {
   @include flex-direction(column);
 
-  gap: 0.8rem;
-  overflow-y: auto;
+  flex: 1;
+  min-width: 0;
+  gap: 0.4rem;
+}
 
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
+.title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 2.2rem;
+  color: #1b1b1c;
+}
 
-  &::-webkit-scrollbar-track {
-    background: #e0e0e2;
-    border-radius: 1rem;
-  }
+.subtitle {
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: 400;
+  line-height: 1.8rem;
+  color: #515156;
+}
 
-  &::-webkit-scrollbar-thumb {
-    background-color: #515156;
-    border-radius: 1rem;
-  }
+.meta {
+  @include flex-align(center, flex-start);
 
-  @include min(tablet) {
-    max-height: 50.4rem;
-  }
+  gap: 0.5rem;
+  font-weight: 500;
 }
 
-.close {
-  align-self: flex-start;
-  padding-right: 1.6rem;
+.tags {
+  @include flex-align(center, flex-start);
+
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-width: 0;
 }
 
-.triangle {
-  @include min(tablet) {
-    display: block;
-    position: absolute;
-    bottom: 99%;
-    left: 50%;
-    margin-top: -9px;
-    background-color: #fff;
-    width: 20px;
-    height: 20px;
-    border-top-right-radius: 5px;
-    transform: rotate(300deg) skewX(-30deg) scale(1, 0.866);
-    z-index: -1;
-
-    &::before,
-    &::after {
-      content: "";
-      position: absolute;
-      background-color: inherit;
-      width: 20px;
-      height: 20px;
-      border-top-right-radius: 5px;
-    }
+.tag {
+  @include flex-align(center, center);
+
+  padding: 0.4rem 0.8rem;
+  border-radius: 10rem;
+  background: var(--primary-button-color, #6e33e5);
+  color: #fff;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1.1rem;
+  letter-spacing: 0.05rem;
+  text-transform: uppercase;
+}
 
-    &::before {
-      transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707)
-        translate(0, -50%);
-    }
+.timestamp {
+  color: #64646d;
+  font-size: 1.2rem;
+  font-weight: 500;
+  line-height: 1.8rem;
+}
 
-    &::after {
-      transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
-    }
-  }
+.empty {
+  margin: 0;
+  font-size: 1.4rem;
+  color: var(--notification-empty-color, #515156);
 }
 
-.notification {
-  border-radius: 8px;
-  background: #f4f4f4;
-  gap: 0 0.8rem;
-  position: relative;
-  border: 1px solid transparent;
+.embedded {
+  background: transparent;
 
-  &:hover {
-    border-color: var(--primary-button-color, #6e33e5);
-    background-color: #fbfaf9;
+  .notificationLink {
+    padding: 0 0 0.8rem;
+    border-bottom: 1px solid
+      var(--notification-trending-item-border, var(--notification-item-border, #e3e6ef));
   }
 
-  &::after {
-    display: block;
-    content: "";
-    width: 6px;
-    height: 6px;
-    position: absolute;
-    right: 1.6rem;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: var(--primary-button-color, #6e33e5);
-    border-radius: 100%;
+  .notificationContent {
+    position: relative;
+    gap: 0.8rem;
   }
-}
 
-.notificationLink {
-  padding: 1.2rem;
-  width: 100%;
-}
+  .unreadDot {
+    left: -1.2rem;
+    top: -0.8rem;
+  }
 
-.overlay {
-  position: fixed;
-  width: 100vw;
-  height: calc(100vh);
-  z-index: -1;
-  opacity: 0.45;
-  background: #0a0e19;
+  .thumbnail {
+    box-sizing: border-box;
+    overflow: hidden;
+    width: 5.2rem;
+    height: 5.2rem;
+    border: 1px solid var(--notification-logo-border, #dedede);
+    border-radius: var(--notification-logo-border-radius, 0.8rem);
 
-  @include min(tablet) {
-    display: none;
+    img,
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: 0;
+      border-radius: 0;
+      object-fit: cover;
+    }
   }
-}
 
-.notificationContent {
-  @include flex-align(stretch, stretch);
-  @include flex-direction(row);
+  .text {
+    padding-right: 2.4rem;
+  }
 
-  column-gap: 0.8rem;
+  .title {
+    font-weight: 700;
+    color: var(--notification-oneliner-color, #1b1b1c);
+  }
 
-  img, svg {
-    width: 4rem;
-    height: 4rem;
-    grid-row: 1 / span 2;
-    border-radius: 4px;
+  .subtitle {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--notification-trending-description-color, #6e6e84);
   }
 
-  h2,
-  h3,
-  h4,
-  h5,
-  label {
-    color: #1b1b1c;
-    font-size: 1.4rem;
-    font-weight: 600;
-    line-height: 2.2rem;
-    margin: 0;
+  .meta {
+    @include flex-align(center, space-between);
+
+    min-height: 2.4rem;
   }
 
-  > div {
-    color: #f4f4f4;
+  .tag {
+    height: 2.4rem;
+    border-radius: var(--notification-trending-tag-border-radius, 0.8rem);
+    background: var(--notification-trending-tag-bg, #f4f4f4);
+    color: var(--notification-trending-tag-color, #515156);
     font-size: 1.2rem;
     font-weight: 400;
     line-height: 1.8rem;
+    letter-spacing: normal;
+    text-transform: none;
   }
-}
-
-.innerContent {
-  @include flex-direction(column);
-}
 
-.subtitle {
-  margin-bottom: 0.8rem;
-  grid-column: 2;
-  width: 26rem;
-  text-overflow: ellipsis;
-  color: rgb(81 81 86);
-
-  @include max(mobile-m) {
-    width: 20rem;
+  .timestamp {
+    flex-shrink: 0;
+    margin-left: auto;
+    color: var(--notification-meta-color, #515156);
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.4rem;
+    white-space: nowrap;
   }
-}
-
-.ribbonAndTime {
-  @include flex-align(center, flex-start);
-
-  gap: 0.5rem;
-  font-weight: 500;
-  grid-column: 2;
-  height: 1.9rem;
-
-  .ribbon {
-    border-radius: 100px;
-    background: var(--primary-button-color, #6e33e5);
-    padding: 4px 8px;
 
+  .cta {
     @include flex-align(center, center);
 
-    color: #fff;
-    text-align: center;
-    font-size: 0.9rem;
-    font-weight: 700;
-    line-height: 1.1rem;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-    height: 1.9rem;
+    flex-shrink: 0;
+    width: 3.6rem;
+    height: 3.6rem;
+    border-radius: var(--notification-cta-border-radius, 4.8rem);
+    background: var(--notification-trending-cta-bg, #f4f4f4)
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2.5L8 6L4.5 9.5' stroke='%236B6A72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+      no-repeat center;
+    pointer-events: none;
   }
+}
 
-  .extraContent {
-    background: transparent;
-    color: #64646d;
-    font-size: 1.2rem;
-    font-weight: 500;
-    line-height: 1.8rem;
-  }
+.embeddedList {
+  gap: 1.2rem;
+  padding: 0.8rem 0 0 1.2rem;
 }