gatsby-matrix-theme 7.1.21 → 7.1.24

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [7.1.24](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.23...v7.1.24) (2022-06-20)
+
+
+### Bug Fixes
+
+* cards-v2-for-ogsa ([a10c8a3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a10c8a3c8fe686c47347b84141843fa6f59024eb))
+
+
+### Config
+
+* update-core-version ([da78b14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/da78b14adfbee21c9c2e27b85c3bbd5589e82012))
+
+
+* Merge branch 'update-core' into 'master' ([c3b1b8c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c3b1b8cf429fcd9cc0dd736139148f6dcd0cad73))
+* Merge branch 'tm-2871-cards-v2' into 'master' ([c763403](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c763403ea4cab5caa690bb336f29ca39a9117c16))
+
+## [7.1.23](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.22...v7.1.23) (2022-06-17)
+
+
+### Bug Fixes
+
+* toplist launch date styling ([873e56a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/873e56ab9a0a70996ac7ac0d03169eafabfac3e1))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([7a37ab3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7a37ab3835dc8496b93fff3a0677d44b3e03205a))
+
+## [7.1.22](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.21...v7.1.22) (2022-06-16)
+
+
+### Config
+
+* update gatsby theme ([c3f589a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c3f589a9336ebcd44f9fca459902d8aea66ef956))
+
 ## [7.1.21](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.20...v7.1.21) (2022-06-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.1.21",
+  "version": "7.1.24",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -29,7 +29,7 @@
     "react": "^17.0.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "react-dom": "^17.0.2",
-    "gatsby-core-theme": "^7.0.11"
+    "gatsby-core-theme": "^8.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

package/src/components/atoms/cards/game-card-two/game-card-two.module.scss

@@ -0,0 +1,52 @@
+.cardContent {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 1.6rem;
+  color: var(--color-44);
+  .cardTitle {
+    font-size: 1.6rem;
+    color: #000;
+    margin: 0;
+  }
+  .cardMeta {
+    @include flex-direction(row);
+    justify-content: space-between;
+    margin: 0.8rem 0 1rem;
+    width: 100%;
+  }
+  .cardProvider {
+    font-size: 1.4rem;
+    font-weight: 400;
+  }
+  .playNow {
+    display: block;
+  }
+  &.featured {
+    color: #fff;
+    .cardTitle {
+      color: #fff;
+      font-size: 1.8rem;
+    }
+    .cardProvider {
+      font-size: 1.6rem;
+    }
+  }
+}
+.cardBanner {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  a {
+    display: block;
+    width: 100%;
+  }
+  img {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    height: 13rem;
+    width: 100%;
+    object-fit: cover;
+  }
+}

package/src/components/atoms/cards/game-card-two/index.js

@@ -0,0 +1,112 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
+import Button from 'gatsby-core-theme/src/components/atoms/button';
+import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import {
+  imagePrettyUrl,
+  getSectionExtraField,
+  translate,
+  getAltText,
+} from 'gatsby-core-theme/src/helpers/getters';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+
+import BaseCard from '../base-card';
+import styles from './game-card-two.module.scss';
+
+const GameCard = ({
+  item,
+  button_text = 'play_now',
+  width = 300,
+  height = 250,
+  useOneStarRating = false,
+}) => {
+  const { relation, title, path, banner } = item;
+  const cardBackgroundImage = getSectionExtraField(null, item, 'card_background_image');
+  const featured = !!cardBackgroundImage;
+  const { translations } = useContext(Context) || {};
+
+  const logUrlObject = relation?.thumbnail_filename_object;
+  const StarRating = useOneStarRating
+    ? loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'))
+    : loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating'));
+
+  return (
+    <BaseCard item={item} isLinked cardType="game">
+      {!featured && (
+        <Link
+          to={path}
+          className={`game-card-gtm ${styles.cardBanner}`}
+          aria-label={`${title} Link`}
+        >
+          {banner ? (
+            <LazyImage
+              width={width}
+              height={height}
+              src={imagePrettyUrl(banner, width, height)}
+              alt={getAltText(logUrlObject, title)}
+            />
+          ) : (
+            <GatsbyImg filename="default-slot.jpg" alt={title} />
+          )}
+        </Link>
+      )}
+      <div className={`${styles.cardContent} ${featured && styles.featured}`}>
+        <Link to={path} className="game-card-gtm">
+          <span className={styles.cardTitle}>{title}</span>
+        </Link>
+        <div className={styles.cardMeta}>
+          <div className={styles.cardProvider}>{relation && relation?.game_provider?.name}</div>
+          <div className={styles.cardRating}>
+            {relation && (
+              <StarRating
+                numOfStars={5}
+                halfStars={false}
+                rating={[
+                  relation.first_rating,
+                  relation.second_rating,
+                  relation.third_rating,
+                  relation.fourth_rating,
+                ]}
+              />
+            )}
+          </div>
+        </div>
+        <Button
+          to={path}
+          primaryColor={!featured}
+          btnText={translate(translations, button_text, 'Play now')}
+          className={styles.playNow}
+          gtmClass="game-card-gtm btn-cta"
+        />
+      </div>
+    </BaseCard>
+  );
+};
+
+GameCard.propTypes = {
+  item: PropTypes.shape({
+    relation: PropTypes.shape({
+      first_rating: PropTypes.string,
+      second_rating: PropTypes.string,
+      third_rating: PropTypes.string,
+      fourth_rating: PropTypes.string,
+      game_provider: PropTypes.shape({ name: PropTypes.string }),
+      thumbnail_filename_object: PropTypes.shape({
+        alt: PropTypes.string,
+      }),
+    }),
+    title: PropTypes.string,
+    path: PropTypes.string,
+    banner: PropTypes.string,
+  }).isRequired,
+  button_text: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  useOneStarRating: PropTypes.bool,
+};
+
+export default GameCard;

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

@@ -122,6 +122,11 @@ export default function Row({
         } ${hasRibbon ? styles.withRibbon : ''}`}
       >
         <Bonus item={item} tracker={oneliner} />
+        {showLaunchDate && (
+          <span>
+            {translate(translations, 'launch_date', 'Launch Date')}: {launchDate}
+          </span>
+        )}
       </a>
       <SellingPoints icon={<MdCheck />} sellingPoints={sellingPoints} limit={3} />
 

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

@@ -132,6 +132,23 @@
       padding: 0;
     }
 
+    span:last-child {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 23px;
+      color: #150e06;
+      display: none;
+
+      @include min(tablet) {
+        display: block;
+      }
+
+      @include min(laptop) {
+        display: none;
+      }
+    }
+
+
     &.withRibbon {
       @include min(tablet) {
         padding-top: 2rem !important;

package/src/gatsby-core-theme/components/organisms/cards/index.js

@@ -31,7 +31,15 @@ export default (props) => {
       }
       break;
     case 'game':
-      customCardComponent = loadable(() => import(`../../../../components/atoms/cards/game-card`));
+      if (props.module.style === 'game_template_2') {
+        customCardComponent = loadable(() =>
+          import(`../../../../components/atoms/cards/game-card-two/index`)
+        );
+      } else {
+        customCardComponent = loadable(() =>
+          import(`../../../../components/atoms/cards/game-card`)
+        );
+      }
       break;
     case 'payment_method':
       // TODO change BaseCard to PaymetMethodCard