gatsby-matrix-theme 6.0.6 → 6.0.7

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## [6.0.7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v6.0.6...v6.0.7) (2022-04-28)
+
+
+### Bug Fixes
+
+* a typo in the string test file ([b8d5cc8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b8d5cc846eb47e8e6d86f1d8452487d257f38b70))
+* add test to the getRoundMinutes component ([0644d6b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0644d6be076a6436f58e5caea5595615569cc543))
+* added launch date in toplist ([5320a13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5320a132deedeeee500bd22c665de518c9e1778c))
+* moved the getRoundMinutes function to strings helpers ([8deae92](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8deae92112931733161e6b9f666b68a75129fd73))
+* removed getRoundMinutes from matrix theme ([02629bd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/02629bd88cb22d4131963a05ac0c1a06c4cd9344))
+* removed getRoundMinutes tests ([82774ff](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/82774ffd74000cff214ba634deaf8f273354682d))
+* removed helper class ([c3f78f2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c3f78f23e246c339fb9f19446be4e158f72f3be2))
+* removed unecessary code ([01ec93e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/01ec93e1c1976d3a72f497d4469d18d5334270f0))
+* removing the review links for the first operator in Comparison Table ([8c577c5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8c577c5dda35e7ca27d083b2a43fef39f11a4213))
+* solve conflicts ([56978ea](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/56978ea195cfe99ee3df64d4b127ec11605a1887))
+* time to read in OG is rounded to the closest minute ([813930d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/813930d70cfb4914d45825d4e73953e12b1a1c93))
+* update package.json with the new core version ([35d986f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/35d986f270e5c5867b3afc696b70e2d7a021bbab))
+* update project with the latest changes with git pull ([c57e491](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c57e491755eb41dd485b063c7af65a6cac2bc226))
+
+
+### Config
+
+* add yarn.lock ([e3f236b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e3f236bc787703ba17bccaf6bd155a7b0f87dd08))
+* update version of gatsby core ([4778af2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4778af2f291a6f2983b133a530114c6420a7d934))
+
+
+* Merge branch 'tm-2832-fix-time-to-read-in-OG' into 'master' ([4848cf2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4848cf2d4ecbf02db60d243e20075f323736acc3))
+* Merge branch 'tm-2814-launch-date' into 'master' ([a18a26a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a18a26a432140468c8b53367b1d3026007f31bb9))
+* Merge branch 'tm-2832-fix-time-to-read-in-OG' into 'master' ([1cb7db4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1cb7db4f851935cb55c692e2772c5a76aa7ff007))
+* Merge branch 'tm-2823-removing-the-review-links' into 'master' ([8e706e3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8e706e3ddc0856be2ace23e63b13f858c5381e24))
+
+
+### Tests
+
+* add tests to string helper file ([bfa7e57](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bfa7e5718c0376c6665d01caca4497b1ab2c0726))
+
 ## [6.0.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v6.0.5...v6.0.6) (2022-04-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "6.0.6",
+  "version": "6.0.7",
   "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": "^6.1.7"
+    "gatsby-core-theme": "^6.1.9"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

package/src/components/atoms/cards/comparison-table/index.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import styles from './comparison-table.module.scss';
 import Table from './table';
 
-export default function ComparisonTable({ module }) {
+export default function ComparisonTable({ module, page }) {
   const ele = useRef('');
 
   let pos = { top: 0, left: 0, x: 0, y: 0 };
@@ -44,7 +45,7 @@ export default function ComparisonTable({ module }) {
   return (
     <div className={styles.comparisonTable}>
       <div ref={ele} className={styles.contentTable}>
-        <Table items={module?.items} />
+        <Table type={page?.type} items={module?.items} />
       </div>
     </div>
   );
@@ -54,4 +55,7 @@ ComparisonTable.propTypes = {
   module: PropTypes.shape({
     items: PropTypes.shape({}),
   }),
+  page: PropTypes.shape({
+    type: PropTypes.string,
+  }),
 };

package/src/components/atoms/cards/comparison-table/table/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/anchor-is-valid */
@@ -56,7 +58,12 @@ const listHeadings = [
     key: 'licenses',
   },
 ];
-export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKey = 'play_now' }) {
+export default function ComparisonTable({
+  items,
+  tabelInfo = listHeadings,
+  ctaKey = 'play_now',
+  type,
+}) {
   const { translations } = useContext(Context) || {};
   const [showAllPayment, setShowAllPayment] = useState([]);
 
@@ -97,7 +104,9 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
         return (
           <td key={key} className={styles.raiting}>
             <StarRating numOfStars={5} rating={item?.relation?.rating} />
-            <Link to={item.path}> {translate(translations, 'review', 'Review')} </Link>
+            {type === 'operator' && index === 0 ? null : (
+              <Link to={item.path}> {translate(translations, 'review', 'Review')} </Link>
+            )}
           </td>
         );
       case 'bonus':

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

@@ -17,6 +17,7 @@ import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import { getLaunchDate } from '../../../../helpers/strings';
 import styles from './variant-one.module.scss';
 
 export default function Row({
@@ -43,6 +44,7 @@ export default function Row({
   }
   const trackerType = tracker.toLowerCase().replace(' ', '_');
   const prettyLink = prettyTracker(item, trackerType);
+  const launchDate = getLaunchDate(item.founded);
 
   return (
     <div className={`${styles.row} ${layout === 'grid' ? styles.grid : ''}`}>
@@ -111,6 +113,14 @@ export default function Row({
       <div className={styles.pros}>
         <SellingPoints icon={<MdCheck />} sellingPoints={sellingPoints} limit={3} />
       </div>
+      <div className={styles.launchDate}>
+        {launchDate && (
+          <>
+            <p>{translate(translations, 'launch_date', 'Launch Date')}</p>
+            <p>{launchDate}</p>
+          </>
+        )}
+      </div>
       <div className={styles.cta}>
         <OperatorCta operator={item} tracker={tracker} gtmClass="toplist-operator-cta-gtm" />
         {!isPPC && (
@@ -134,6 +144,7 @@ Row.propTypes = {
   layout: PropTypes.oneOf(['list', 'grid']),
   item: PropTypes.shape({
     path: PropTypes.string,
+    founded: PropTypes.string,
     name: PropTypes.string,
     logo_url: PropTypes.string,
     rating: PropTypes.string,

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

@@ -7,14 +7,14 @@
 
   @include min(tablet) {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    column-gap: 3rem;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    column-gap: 1rem;
     padding: 0 0 0 2.4rem;
     text-align: inherit;
   }
 
   @include min(laptop) {
-    grid-template-columns: 1fr 1.5fr 1.5fr 1fr;
+    grid-template-columns: 1fr 1.5fr 1.5fr 1fr 1fr;
     padding: 1rem 0 0 2rem;
   }
 
@@ -107,7 +107,7 @@
     @include flex-direction(column);
 
     @include min(tablet) {
-      grid-column: 1/5;
+      grid-column: 1/6;
       order: -1;
       flex-direction: row;
       justify-content: center;
@@ -181,9 +181,15 @@
     }
   }
 
-  .pros {
+  .pros, .launchDate {
     @include flex-align(center, flex-start);
-    margin: 0 1.5rem 1.5rem;
+    margin: 1.5rem 0;
+  }
+
+  .launchDate {
+    flex-direction: column;
+    font-size: 1.4rem;
+    font-weight: 700;
   }
 
   .cta {
@@ -206,7 +212,7 @@
   }
 
   .tandc {
-    grid-column: 1/5;
+    grid-column: 1/6;
     border-radius: 0 0 var(--border-radius) 0;
     color: var(--color-34);
     font-size: 0.8rem;

package/src/gatsby-core-theme/components/atoms/author/index.js

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable arrow-body-style */
 import React, { useContext } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
@@ -29,12 +30,6 @@ const Author = ({
     ? translate(translations, 'reviewed_by', 'Review by')
     : translate(translations, 'written_by', 'Written by');
 
-  const getRoundMinutes = (time) => {
-    const [minutes, seconds] = time.split(':');
-    const value = seconds > 30 ? Number(minutes) + 1 : Number(minutes);
-    return value === 0 ? 1 : value;
-  };
-
   return (
     <div className={`${styles.authorWraper} ${isCardsAuthor && styles.authorCard} `}>
       <div className={`${styles.infoContainer} ${isCardsAuthor && styles.infoCardContainer}`}>
@@ -59,9 +54,11 @@ const Author = ({
         {date && <div>{formatDate(date, dateFormat, splitDateFormat, 'en-GB')}</div>}
         {readingTime && (
           <div className={date && styles.readingWithBorder}>
-            {`${translate(translations, 'reading_time', 'Reading time')} ${getRoundMinutes(
-              readingTime
-            )} ${translate(translations, 'minutes', 'min')}`}
+            {`${translate(translations, 'reading_time', 'Reading time')} ${readingTime} ${translate(
+              translations,
+              'minutes',
+              'min'
+            )}`}
           </div>
         )}
       </div>

package/src/helpers/strings.js

@@ -43,3 +43,14 @@ export function getTwitterUsername(url) {
 
   return null;
 }
+
+export const getLaunchDate = (foundedDate) => {
+  if (foundedDate) {
+    const arr = foundedDate.split('-');
+    if (arr.length === 3) {
+      return `${arr[1]}/${arr[0]}`;
+    }
+  }
+
+  return null;
+};

package/src/helpers/strings.test.js

@@ -0,0 +1,37 @@
+import {
+  capitalize,
+  anchorLink,
+  leftTrim,
+  truncateString,
+  getTwitterUsername,
+  getLaunchDate,
+} from './strings';
+
+describe('String helper component', () => {
+  test('A letter to be uppercase', () => {
+    expect(capitalize('capitalize')).toBe('Capitalize');
+  });
+
+  test("The whitespace from the link should be replaced with '-'", () => {
+    expect(anchorLink('anchor tag')).toBe('anchor-tag');
+  });
+  test('If space on the left, trim the left, else trim multiple space in between', () => {
+    expect(leftTrim(' trim left')).toBe('trim left');
+    expect(leftTrim('trim multiple spaces')).toBe('trim multiple spaces');
+  });
+  test('Truncate the string based on the given number', () => {
+    expect(truncateString('gzim', 2)).toBe('gz...');
+  });
+  test('If it is a space between the string cut it and truncate', () => {
+    expect(truncateString('cut the string', 6)).toBe('cut...');
+  });
+  test('If the string is smaller than the number just return the string', () => {
+    expect(truncateString('cut', 6)).toBe('cut');
+  });
+  test('Twitter helper', () => {
+    expect(getTwitterUsername('https://twitter.com/LebronJames')).toBe('LebronJames');
+  });
+  test('Launch Date', () => {
+    expect(getLaunchDate('2022-03-05')).toBe('03/2022');
+  });
+});