gatsby-matrix-theme 34.0.9 → 34.0.11

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [34.0.11](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.10...v34.0.11) (2023-10-10)
+
+
+### Bug Fixes
+
+* add rating for template one summery and update theme ([d76dd2a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d76dd2a46091d6c127d10ea06cb4635220a2394f))
+
+## [34.0.10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.9...v34.0.10) (2023-10-10)
+
+
+### Bug Fixes
+
+* add author image for main image ([b98930a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b98930a555700abf0cb1dfd48968044d071b3ed7))
+* add correct img for storybook ([c803fad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c803fad6f66866641f0a1b2ffcbaea95bff9b1c9))
+* add img for operator and author ([142acec](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/142acec08cc26e0f6c5b05b536c54a355bb658c7))
+
 ## [34.0.9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.8...v34.0.9) (2023-10-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "34.0.9",
+  "version": "34.0.11",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "30.0.6",
+    "gatsby-core-theme": "30.0.7",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

package/src/components/molecules/operator-summary/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import TemplateOne from './template-one';
 import TemplateTwo from './template-two';
 
-export default function index({ template = 'template_two', ...props }) {
+export default function index({ template = 'template_one', ...props }) {
   switch (template) {
     case 'template_two':
       return <TemplateTwo {...props} />;

package/src/components/molecules/operator-summary/template-one/index.js

@@ -6,29 +6,33 @@ import { formatDate } from 'gatsby-core-theme/src/helpers/date-time';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import Ratings from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
 import Author from '../../../atoms/author/template-one';
 import OperatorBanner from '../../../atoms/header-operator-bannner';
 import styles from './template-one.module.scss';
 
-const TemplateOne = ({ page, imgWidth = 128, imgHeight = 146, tnc = false }) => {
+const TemplateOne = ({
+  page,
+  imgWidth = 128,
+  imgHeight = 146,
+  tnc = false,
+  operatorImg = true,
+}) => {
   const { translations } = useContext(Context) || {};
   const operatorData = page?.relation;
   const { standardised_logo_url_object, logo_url_object, name } = operatorData;
   const operatorSummary = getExtraField(page.extra_fields, 'operator_review_summary', null);
   const author = page?.reviewer;
+  const img = operatorImg
+    ? standardised_logo_url_object?.filename || logo_url_object?.filename
+    : author?.image;
   return (
     <div className={styles?.summaryLayout || ''}>
       <div className={styles.details}>
         <h2>{translate(translations, 'expert_casino_review', 'Expert Casino Review')}</h2>
         <div className={styles.img}>
-          <LazyImage
-            src={imagePrettyUrl(
-              standardised_logo_url_object?.filename || logo_url_object?.filename
-            )}
-            width={imgWidth}
-            height={imgHeight}
-            alt={name}
-          />
+          <LazyImage src={imagePrettyUrl(img)} width={imgWidth} height={imgHeight} alt={name} />
+          {operatorImg && <Ratings rating={operatorData?.rating} />}
         </div>
         <div className={styles.author}>
           <Author
@@ -64,6 +68,7 @@ TemplateOne.propTypes = {
   imgWidth: PropTypes.number,
   imgHeight: PropTypes.string,
   tnc: PropTypes.bool,
+  operatorImg: PropTypes.bool,
   page: PropTypes.shape({
     reviewer: PropTypes.shape({}),
     relation_type: PropTypes.string,

package/src/components/molecules/operator-summary/template-one/template-one.module.scss

@@ -9,15 +9,19 @@
   width: calc(100% - 32px);
   gap: 2.4rem;
   padding: 0 1.6rem;
-  @include min(tablet){
+
+  @include min(tablet) {
     padding: 0 2.4rem;
   }
+
   //operator-banner
   >div:nth-child(2) {
     margin-bottom: 2.4rem;
-    @include min(tablet){
+
+    @include min(tablet) {
       padding: 1.6rem;
     }
+
     >div>div {
       >a:nth-child(2) {
         height: 3.5rem;
@@ -27,6 +31,7 @@
         font-weight: 700;
         line-height: 1.4rem;
         text-transform: capitalize;
+
         @include min(tablet) {
           height: 6.4rem;
           font-size: 1.8rem;
@@ -38,10 +43,12 @@
     }
   }
 }
+
 .details {
   margin-top: 2.4rem;
   gap: 2.4rem;
   @include flex-direction(column);
+
   >h2 {
     color: var(--operator-summery-title-color, #1C1A28);
     text-align: center;
@@ -52,9 +59,11 @@
     text-transform: capitalize;
     margin: 0;
   }
+
   @include min(tablet) {
     display: grid;
     grid-template-columns: repeat(3, auto);
+
     h2 {
       grid-column: 1/3;
       grid-row: 1/2;
@@ -64,21 +73,46 @@
     }
   }
 }
+
 .img {
+  @include flex-direction(column);
   @include flex-align(center, center);
+
   >img {
     border-radius: 1.6rem;
   }
+
+  >div {
+    border-radius: 100px;
+    background: #F6F6F6;
+    width: 7.9rem;
+    height: 3.8rem;
+    border: 1px solid #F6F6F6;
+    @include flex-align(center, center);
+    margin-top: -1.9rem;
+    color: var(--black-900, #1C1A28);
+    font-size: 1.4rem;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 2.2rem;
+
+    >span:first-child {
+      margin-right: .2rem;
+    }
+  }
+
   @include min(tablet) {
     grid-column: 1/2;
     grid-row: 2/3;
     margin-right: 2.4rem
   }
 }
+
 .author {
   @include flex-direction(column);
   @include flex-align(center, center);
   gap: 1.6rem;
+
   >span:first-child {
     >a {
       color: #165AF8 !important;
@@ -91,6 +125,7 @@
       position: relative;
       @include flex-direction(row);
       padding-left: 3.6rem;
+
       &::before {
         content: 'By';
         color: #6B6A72;
@@ -99,6 +134,7 @@
         font-weight: 100;
         background-color: white;
       }
+
       >img {
         position: absolute;
         left: 0;
@@ -108,6 +144,7 @@
       }
     }
   }
+
   >span:nth-child(2) {
     border-radius: 100px;
     background: var(--review-summery-backgorund-color, #5CE482);
@@ -121,6 +158,7 @@
     text-transform: uppercase;
     padding: .6rem 1.2rem;
   }
+
   >p {
     font-size: 1.4rem;
     font-style: normal;
@@ -128,18 +166,22 @@
     line-height: 2.2rem;
     color: #3E3C47;
   }
+
   @include min(tablet) {
     display: grid;
     grid-template-columns: repeat(3, auto);
     gap: 1.6rem;
+
     >p {
       grid-column: 1/2;
       grid-row: 1/2;
     }
   }
 }
+
 .description {
   color: #3e3c47;
+
   p {
     color: #3E3C47;
     font-size: 1.6rem;
@@ -147,6 +189,7 @@
     font-weight: 400;
     line-height: 2.7rem;
   }
+
   @include min(tablet) {
     grid-column: 2/4;
     grid-row: 2/3

package/src/components/molecules/operator-summary/template-two/index.js

@@ -11,21 +11,27 @@ import Author from '../../../atoms/author/template-one';
 import OperatorBanner from '../../../atoms/header-operator-bannner';
 import styles from './template-two.module.scss';
 
-const TemplateTwo = ({ page, imgWidth = 128, imgHeight = 146, tnc = false }) => {
+const TemplateTwo = ({
+  page,
+  imgWidth = 128,
+  imgHeight = 146,
+  tnc = false,
+  operatorImg = false,
+}) => {
   const { translations } = useContext(Context) || {};
   const operatorData = page?.relation;
   const { name } = operatorData;
   const imageObject = operatorData?.standardised_logo_url_object || operatorData?.logo_url_object;
   const operatorSummary = getExtraField(page.extra_fields, 'operator_review_summary', null);
   const author = page?.reviewer;
-
+  const img = operatorImg ? imageObject : author?.image;
   return (
     <div>
       <div className={styles?.summaryLayout || ''}>
         <div className={styles.details}>
           <div className={styles.img}>
             <LazyImage
-              src={imagePrettyUrl(imageObject?.filename, imgWidth, imgHeight)}
+              src={imagePrettyUrl(img, imgWidth, imgHeight)}
               width={imgWidth}
               height={imgHeight}
               alt={name}
@@ -69,6 +75,7 @@ TemplateTwo.propTypes = {
   imgWidth: PropTypes.number,
   imgHeight: PropTypes.string,
   tnc: PropTypes.bool,
+  operatorImg: PropTypes.bool,
   page: PropTypes.shape({
     reviewer: PropTypes.shape({}),
     relation_type: PropTypes.string,