gatsby-matrix-theme 25.1.3 → 25.1.5

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [25.1.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v25.1.4...v25.1.5) (2023-06-12)
+
+
+### Bug Fixes
+
+* updated to the latest core version ([cd21d03](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cd21d03faa79c4f21187b00eecc9f2cfbcfbb933))
+
+## [25.1.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v25.1.3...v25.1.4) (2023-06-09)
+
+
+### Bug Fixes
+
+* add author image and checkmark to toplist ([302accf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/302accf8637e0309a3000dc7a23df33b2aabb99f))
+* add more checkers to show author image ([113afd7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/113afd7730485f1632fd7a0b50ccb2c48ac28c64))
+* update core theme ([fc6dc80](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fc6dc802e3ec8e8494fd3acf43427f657a407bb1))
+* update star rating ([94af34e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/94af34e4538187a3d5d9a219635d561c0dee7414))
+
+
+* Merge branch 'tm-3223-toplist' into 'master' ([aa1d457](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa1d45740db5e3e95cb2f881ec420e9c51fe032f))
+
 ## [25.1.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v25.1.2...v25.1.3) (2023-06-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "25.1.3",
+  "version": "25.1.5",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "22.0.7",
+    "gatsby-core-theme": "22.0.9",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

package/src/components/molecules/toplist/row/variant-one.js

@@ -31,6 +31,7 @@ export default function Row({
   number = 1,
   index,
   activeAuthor = false,
+  showAuthorImage = false,
   isPPC = false,
   showLaunchDate = true,
   showCtaReviewLink = false,
@@ -38,7 +39,10 @@ export default function Row({
   itemRefs,
   endLink = false,
   template,
+  icon = null,
 }) {
+  const { authorImage } = item;
+  const { authorImageObject } = item;
   const result = item.authorName?.split(/\s+/);
   const itemName = item.name;
   const itemRating = item.rating;
@@ -124,7 +128,26 @@ export default function Row({
           >
             {itemName}
           </a>
-          <StarRating numOfStars={5} rating={itemRating} showLabel />
+          <div className={styles.ratingWithAuthor}>
+            <StarRating numOfStars={5} rating={itemRating} showLabel />
+            {showAuthorImage && (authorImage || authorImageObject) && (
+              <div className={styles.authorAndIcon}>
+                <LazyImage
+                  alt={getAltText(authorImage, item.name)}
+                  src={imagePrettyUrl(authorImageObject?.filename || authorImage, 80, 80)}
+                  width={20.3}
+                  height={20.3}
+                />
+                <LazyImage
+                  alt="check-mark"
+                  src={icon || '../../../../images/verify.svg'}
+                  width={10.15}
+                  height={10.15}
+                />
+              </div>
+            )}
+          </div>
+
           {!isPPC && !showCtaReviewLink && reviewPath && (
             <ReviewLink
               className={`${styles?.reviewLink || ''} toplist-variant-one-gtm`}

package/src/components/molecules/toplist/row/variant-one.module.scss

@@ -89,18 +89,18 @@
       order: 1;
     }
 
-    >a {
+    > a {
       display: flex;
       flex: 0 0 8rem;
     }
 
-    img {
+    > img {
       width: 8rem;
       height: 8rem;
       border-radius: 0.8rem;
     }
 
-    >div {
+    > div {
       @include flex-align(flex-start, space-between);
       flex-direction: column;
       gap: 0.8rem;
@@ -112,7 +112,7 @@
         line-height: 22px;
       }
 
-      >div {
+      > div {
         border: 0;
       }
 
@@ -121,10 +121,26 @@
         font-size: 13px;
         line-height: 16px;
       }
+
+      > .ratingWithAuthor {
+        display: flex;
+        gap: 8px;
+        > div {
+          border: 0;
+        }
+        .authorAndIcon {
+          position: relative;
+          > img:last-child {
+            position: absolute;
+            bottom: 2px;
+            right: -1px;
+          }
+        }
+      }
     }
   }
 
-  >a.bonus {
+  > a.bonus {
     @include flex-direction(column);
     gap: 0.8rem;
     padding-top: 0;
@@ -215,7 +231,7 @@
     }
   }
 
-  >ul,
+  > ul,
   .launchDate {
     @include flex-align(center, center);
   }
@@ -238,7 +254,7 @@
     }
   }
 
-  >a:not(.bonus) {
+  > a:not(.bonus) {
     @include flex-align(center, center);
     width: 100%;
     word-break: inherit;
@@ -254,7 +270,7 @@
     }
   }
 
-  >div:last-child {
+  > div:last-child {
     border-radius: 0 0 var(--border-radius) 0;
     color: var(--color-34);
     font-size: 0.8rem;
@@ -333,7 +349,7 @@
         padding-left: 0;
       }
 
-      >div {
+      > div {
         width: 80%;
         margin: 0 auto;
       }
@@ -349,12 +365,12 @@
         order: unset;
         grid-column: 1;
 
-        >* {
+        > * {
           padding-right: 0 !important;
         }
       }
 
-      a>div {
+      a > div {
         width: 100%;
         text-align: center;
         @include flex-align(center, flex-start);
@@ -401,13 +417,12 @@
   margin-right: 2.4rem;
   display: flex;
   flex-direction: column;
-
 }
 
 .activeAuthor {
   font-size: 10px;
 
-  >a {
+  > a {
     font-size: 10px;
   }
-}
+}