gatsby-matrix-theme 34.0.10 → 34.0.12

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [34.0.12](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.11...v34.0.12) (2023-10-11)
+
+
+### Bug Fixes
+
+* moved card type into helper ([bec3a06](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bec3a063293ce77bf1d91ff7f933f8dd6cf696ba))
+* moved card type into helper ([9461dd8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9461dd8eca9daf727fa876c0fb617be28feb3f7b))
+
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "34.0.10",
+  "version": "34.0.12",
   "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/template-one/index.js

@@ -6,6 +6,7 @@ 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';
@@ -15,7 +16,7 @@ const TemplateOne = ({
   imgWidth = 128,
   imgHeight = 146,
   tnc = false,
-  operatorImg = false,
+  operatorImg = true,
 }) => {
   const { translations } = useContext(Context) || {};
   const operatorData = page?.relation;
@@ -31,6 +32,7 @@ const TemplateOne = ({
         <h2>{translate(translations, 'expert_casino_review', 'Expert Casino Review')}</h2>
         <div className={styles.img}>
           <LazyImage src={imagePrettyUrl(img)} width={imgWidth} height={imgHeight} alt={name} />
+          {operatorImg && <Ratings rating={operatorData?.rating} />}
         </div>
         <div className={styles.author}>
           <Author

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/gatsby-core-theme/components/organisms/cards/index.js

@@ -2,94 +2,14 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
-import loadable from '@loadable/component';
 import Card from 'gatsby-core-theme/src/components/organisms/cards/index';
-import GameCards from '../../../../components/atoms/cards/game-cards';
+import { getCard } from '../../../../helpers/cards';
 
 export default (props) => {
-  let customCardComponent = null;
-  const type = props.module.model_type || props.module.cards_page_type;
-  switch (type) {
-    case 'operator':
-      switch (props.module.style) {
-        case 'advanced':
-          customCardComponent = loadable(() =>
-            import(`../../../../components/atoms/cards/operator-card/template-two`)
-          );
-          break;
-        case 'template_two':
-          customCardComponent = loadable(() =>
-            import(`../../../../components/atoms/cards/operator-card/template-two`)
-          );
-          break;
-        case 'template_three':
-          customCardComponent = loadable(() =>
-            import(`../../../../components/atoms/cards/operator-card/template-three`)
-          );
-          break;
-        case 'template_four':
-          customCardComponent = loadable(() =>
-            import(`../../../../components/atoms/cards/operator-card/template-four`)
-          );
-          break;
-        default:
-          customCardComponent = loadable(() =>
-            import(`../../../../components/atoms/cards/operator-card/template-one`)
-          );
-      }
-      break;
-    case 'game':
-      customCardComponent = GameCards(props.module.style);
-      break;
-    case 'payment_method':
-      if (props.module.style === 'template_three') {
-        customCardComponent = loadable(() =>
-          import(`../../../../components/atoms/cards/payment-method/template-three`)
-        );
-      } else if (props.module.style === 'template_two') {
-        customCardComponent = loadable(() =>
-          import(`../../../../components/atoms/cards/payment-method/template-two`)
-        );
-      } else {
-        customCardComponent = loadable(() =>
-          import(`../../../../components/atoms/cards/payment-method/template-one`)
-        );
-      }
-      break;
-    case 'software_provider':
-      customCardComponent = loadable(() =>
-        import(`../../../../components/atoms/cards/software-provider-card/index`)
-      );
-      break;
-    case 'article':
-    case 'page':
-      if (props.module.style === 'template_two') {
-        customCardComponent = loadable(() =>
-          import('../../../../components/atoms/cards/article-card/template-two')
-        );
-      } else {
-        customCardComponent = loadable(() =>
-          import(`../../../../components/atoms/cards/article-card/template-one`)
-        );
-      }
-
-      break;
-    case 'author':
-      if (props.module.style === 'template_two') {
-        customCardComponent = loadable(() =>
-          import(`../../../../components/atoms/cards/author/template-two`)
-        );
-      } else {
-        customCardComponent = loadable(() =>
-          import(`../../../../components/atoms/cards/author/template-one`)
-        );
-      }
-      break;
-    default:
-      customCardComponent = loadable(() =>
-        import(`../../../../components/atoms/cards/article-card/template-one`)
-      );
-  }
+  const customCardComponent = getCard(
+    props.module.model_type || props.module.cards_page_type,
+    props.module.style
+  );
 
   return (
     <Card

package/src/helpers/cards.js

@@ -0,0 +1,92 @@
+/* eslint-disable import/prefer-default-export */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import loadable from '@loadable/component';
+import GameCards from '../components/atoms/cards/game-cards';
+
+export function getCard(type, style) {
+  let customCardComponent = null;
+
+  switch (type) {
+    case 'operator':
+      switch (style) {
+        case 'advanced':
+          customCardComponent = loadable(() =>
+            import(`../components/atoms/cards/operator-card/template-two`)
+          );
+          break;
+        case 'template_two':
+          customCardComponent = loadable(() =>
+            import(`../components/atoms/cards/operator-card/template-two`)
+          );
+          break;
+        case 'template_three':
+          customCardComponent = loadable(() =>
+            import(`../components/atoms/cards/operator-card/template-three`)
+          );
+          break;
+        case 'template_four':
+          customCardComponent = loadable(() =>
+            import(`../components/atoms/cards/operator-card/template-four`)
+          );
+          break;
+        default:
+          customCardComponent = loadable(() =>
+            import(`../components/atoms/cards/operator-card/template-one`)
+          );
+      }
+      break;
+    case 'game':
+      customCardComponent = GameCards(style);
+      break;
+    case 'payment_method':
+      if (style === 'template_three') {
+        customCardComponent = loadable(() =>
+          import(`../components/atoms/cards/payment-method/template-three`)
+        );
+      } else if (style === 'template_two') {
+        customCardComponent = loadable(() =>
+          import(`../components/atoms/cards/payment-method/template-two`)
+        );
+      } else {
+        customCardComponent = loadable(() =>
+          import(`../components/atoms/cards/payment-method/template-one`)
+        );
+      }
+      break;
+    case 'software_provider':
+      customCardComponent = loadable(() =>
+        import(`../components/atoms/cards/software-provider-card/index`)
+      );
+      break;
+    case 'article':
+    case 'page':
+      if (style === 'template_two') {
+        customCardComponent = loadable(() =>
+          import('../components/atoms/cards/article-card/template-two')
+        );
+      } else {
+        customCardComponent = loadable(() =>
+          import(`../components/atoms/cards/article-card/template-one`)
+        );
+      }
+
+      break;
+    case 'author':
+      if (style === 'template_two') {
+        customCardComponent = loadable(() =>
+          import(`../components/atoms/cards/author/template-two`)
+        );
+      } else {
+        customCardComponent = loadable(() =>
+          import(`../components/atoms/cards/author/template-one`)
+        );
+      }
+      break;
+    default:
+      customCardComponent = loadable(() =>
+        import(`../components/atoms/cards/article-card/template-one`)
+      );
+  }
+
+  return customCardComponent;
+}