gatsby-core-theme 7.0.0 → 7.0.1

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [7.0.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v7.0.0...v7.0.1) (2022-05-05)
+
+
+### Bug Fixes
+
+* add alt from image_object ([c1e7c23](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c1e7c232bbc41b250d99104feaa7ec248408bf50))
+* add alt text, and also for operator added object logo_url_object ([64b0313](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/64b0313acc9e505191395b36896bf1886992b4f4))
+* add image_object for payment and software ([f848229](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f84822911c11c053f92e5a16cf80542a13781ffb))
+* add tests ([467919e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/467919e5b0f2b0ead4bdfb122d4c8278c9c2b0df))
+* added standardized logo attribute and added label in rating component ([7bf1cbe](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7bf1cbe9e15e91e210840bd32237f07bb90f7453))
+* fix error ([77e329d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/77e329d348be706dc040f28985e579cb4f29ff9b))
+* fix error ([736f9ec](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/736f9ec86df1f2d09a0597002551efb198138538))
+* tests fixes ([0972b4d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0972b4d37d368c5eef1d77b891b9ec531fa61254))
+
+
+### Code Refactoring
+
+* remove archive robot_options and update head meta robots ([b0f5e6c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b0f5e6ce03fa7bc07d5966351f7a40b41eee922a))
+* reorder author component ([282243f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/282243fdd41f2e1e70d2c04b76a3f1901a1a0d9b))
+* update archive robot_options ([9adf990](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9adf990fca081bed88eea6c2444fb39ed5fd36b2))
+
+
+* Merge branch 'tm-2834-logos-rating' into 'master' ([34e951b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/34e951b45c41cf37bd3acd99d0171819c40875ed))
+* Merge branch 'tm-2801-fact-checker' into 'master' ([55eda9f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/55eda9f01ef37f388168fcd7abab21fdd82fbc71))
+* Merge branch 'tm-2829-image-alt-text' into 'master' ([47ca5e5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/47ca5e5aa7d45df9ee7922aecc8ee05ef73f5d68))
+* Merge branch 'tm-2831-update-archive-noindex-nofollow' into 'master' ([c5a42f2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c5a42f21ab694af4c3d27c779fe1fc247bd2bdcb))
+* Merge branch 'tm-2829-image-alt-text' into 'master' ([9297107](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9297107e6e2667529c812d798ebbd99841be969f))
+
+
+### Tests
+
+* changes to test scripts ([8a7d401](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8a7d401eeda89e344fa8d54663fa759e80cb1cba))
+
 # [7.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v6.1.9...v7.0.0) (2022-05-03)
 
 

package/gatsby-node.esm.js

@@ -72,6 +72,7 @@ function createArchivePage(pageObject, marketSections, prefilledModules, createP
           ? pageObject.path
           : `${pageObject.path}/page/${archive.currentPage}`;
       page.sections.main.modules[archiveModuleIndex] = archive;
+
       createPage({
         path: page.path,
         component: require.resolve(appName),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/atoms/author/author.module.scss

@@ -1,6 +1,5 @@
 .authorInfo {
   font-size: 1.5rem;
-  margin-right: 2rem;
 }
 .date {
   font-size: 1.5rem;
@@ -10,7 +9,7 @@
   font-size: 1.8rem;
 }
 .authorIcon,
-.date,
+.dateTimeWrapper,
 .authorInfo {
   height: 2rem;
   display: inline-block;
@@ -20,3 +19,16 @@
     color: #09f;
   }
 }
+
+.authorWrapper {
+  display: flex;
+  flex-direction: column;
+  column-gap: 0.5rem;
+
+  > div {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    column-gap: 0.5rem;
+  }
+}

package/src/components/atoms/author/author.test.js

@@ -37,7 +37,7 @@ describe('Author Component', () => {
         date="2020-04-24 15:37:42"
       />
     );
-    expect(container.querySelector('.date')).toBeTruthy();
+    expect(container.querySelector('.dateTimeWrapper')).toBeTruthy();
     const info = getByText('with mohsen');
     expect(info).toBeTruthy();
     expect(container.querySelector('i')).toBeTruthy();

package/src/components/atoms/author/index.js

@@ -15,42 +15,66 @@ const Author = ({
   date = '',
   dateFormat = 'DD.MM.YYYY',
   dateSeparator = '.',
+  readingTime = '',
+  reviewer = {},
 }) => {
   return (
-    <>
-      {link && icon && (
-        <div className={styles.authorIcon}>
-          <a
-            href={link}
-            target="_blank"
-            rel="noreferrer"
-            aria-label={`${name} Link`}
-            className="author-gtm"
-          >
-            {icon}
-          </a>
-        </div>
-      )}
-      {!link && icon && <div className={styles.authorIcon}>{icon}</div>}
+    <div className={styles.authorWrapper}>
+      <div>
+        {link && icon && (
+          <div className={styles.authorIcon}>
+            <a
+              href={link}
+              target="_blank"
+              rel="noreferrer"
+              aria-label={`${name} Link`}
+              className="author-gtm"
+            >
+              {icon}
+            </a>
+          </div>
+        )}
+        {!link && icon && <div className={styles.authorIcon}>{icon}</div>}
 
-      <div className={styles.authorInfo}>
-        {name &&
-          (authorProfile ? (
-            <>
-              {`${prefix} `}
-              <Link to={authorProfile} className="author-gtm" title={name}>
-                {name}
-              </Link>
-            </>
-          ) : (
-            `${prefix} ${name}`
-          ))}
+        <div className={styles.authorInfo}>
+          {name &&
+            (authorProfile ? (
+              <>
+                {`${prefix} `}
+                <Link to={authorProfile} className="author-gtm" title={name}>
+                  {name}
+                </Link>
+              </>
+            ) : (
+              `${prefix} ${name}`
+            ))}
+        </div>
+        {readingTime && (
+          <div className={date && styles.readingWithBorder}>
+            <span>Reading time</span>
+            {` ${readingTime} min`}
+          </div>
+        )}
       </div>
-
-      {date && (
-        <div className={styles.date}>{formatDate(date, dateFormat, dateSeparator, 'en-GB')}</div>
-      )}
-    </>
+      <div>
+        {reviewer.name && (
+          <div className={date && styles.reviewer}>
+            <span>Fact checked by</span>
+            {` `}
+            <Link to={reviewer.profile_page_path} title={reviewer.name}>
+              {reviewer.name}
+            </Link>
+          </div>
+        )}
+        {date && (
+          <div className={styles.dateTimeWrapper}>
+            <span>Published on</span>
+            {` `}
+            {formatDate(date, dateFormat, dateSeparator, 'en-GB')}
+          </div>
+        )}
+      </div>
+    </div>
   );
 };
 
@@ -63,6 +87,8 @@ Author.propTypes = {
   date: PropTypes.string,
   dateFormat: PropTypes.string,
   dateSeparator: PropTypes.string,
+  readingTime: PropTypes.string,
+  reviewer: PropTypes.shape({}),
 };
 
 export default Author;

package/src/components/atoms/author-box/index.js

@@ -2,7 +2,7 @@
 import React, { useContext } from 'react';
 import { FaInstagram, FaFacebookSquare, FaTwitter, FaLinkedin } from 'react-icons/fa';
 import PropTypes from 'prop-types';
-import { translate, imagePrettyUrl } from '~helpers/getters';
+import { translate, imagePrettyUrl, getAltText } from '~helpers/getters';
 import styles from './author-box.module.scss';
 import LazyImage from '~hooks/lazy-image';
 import Link from '~hooks/link';
@@ -24,7 +24,7 @@ export default function AuthorBox({ author }) {
           {author.image_object && (
             <LazyImage
               src={imagePrettyUrl(author.image_object.filename)}
-              alt={author.image_alt || author.name}
+              alt={getAltText(author?.image_object, author.image_alt || author.name)}
               width={author.image_object?.width}
               height={author.image_object?.height}
             />
@@ -110,6 +110,7 @@ AuthorBox.propTypes = {
       width: PropTypes.number,
       height: PropTypes.number,
       filename: PropTypes.string,
+      alt: PropTypes.string,
     }),
     image_alt: PropTypes.string,
     name: PropTypes.string,

package/src/components/atoms/spotlights/index.js

@@ -7,7 +7,7 @@ import { GrFormNextLink } from 'react-icons/gr';
 import Button from '~atoms/button';
 import LazyImage from '~hooks/lazy-image';
 import keygen from '~helpers/keygen';
-import { imagePrettyUrl, getImageFilename } from '~helpers/getters';
+import { imagePrettyUrl, getImageFilename, getAltText } from '~helpers/getters';
 import Link from '~hooks/link';
 import styles from './spotlights.module.scss';
 
@@ -18,14 +18,13 @@ const Spotlights = ({ module, themeStyles = {} }) => {
     const img = mode === 'icon' ? item.icon : item.image;
     const imageSrc = imagePrettyUrl(img);
     const fileName = getImageFilename(imageSrc);
-
     return (
       <>
         {img && (
           <LazyImage
             width={100}
             height={50}
-            alt={item.label || item?.link_text || fileName}
+            alt={getAltText(item?.image_object, item.label || item?.link_text || fileName)}
             src={imageSrc}
           />
         )}

package/src/components/molecules/carousel/default-slide/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import LazyImage from '~hooks/lazy-image';
-import { imagePrettyUrl } from '~helpers/getters';
+import { imagePrettyUrl, getAltText } from '~helpers/getters';
 import Button from '~atoms/button';
 import styles from './default-slide.module.scss';
 
@@ -22,7 +22,7 @@ const Slide = ({
         <LazyImage
           className={styles.image}
           src={imagePrettyUrl(item.image, imageSizes.width, imageSizes.height)}
-          alt={item.title || slideTitle}
+          alt={getAltText(item?.image_object, item.title || slideTitle)}
         />
       )}
       {item.content && <p className={styles.content}>{item.content}</p>}

package/src/components/molecules/header/header.module.scss

@@ -26,9 +26,18 @@
     z-index: 1;
     padding: 2.4rem;
 
-    .readingTime {
-      > span {
-        font-weight: bold;
+    .topSection {
+      display: flex;
+      justify-content: space-between;
+
+      > div { 
+        padding-top: 1rem; 
+      }
+
+      .readingTime {
+        > span {
+          font-weight: bold;
+        }
       }
     }
   }

package/src/components/molecules/header/header.test.js

@@ -14,7 +14,7 @@ describe('header component', () => {
     expect(container.querySelectorAll('.headerContent')).toHaveLength(1);
 
     // Inner HTML
-    expect(container.querySelectorAll('p')).toHaveLength(3);
+    expect(container.querySelectorAll('p')).toHaveLength(1);
     expect(container.querySelectorAll('i')).toHaveLength(1);
 
     // Testing image

package/src/components/molecules/header/index.js

@@ -62,6 +62,8 @@ function Header({ section, content = null, backgroundImage = true }) {
                 authorProfile={section.page.author?.profile_page_path}
                 name={section.page.author?.name}
                 date={section.page.updated_at ? section.page.updated_at : section.page.created_at}
+                readingTime={section.page.reading_time}
+                reviewer={section.page.reviewer}
               />
             </div>
           )}
@@ -72,15 +74,6 @@ function Header({ section, content = null, backgroundImage = true }) {
           section.page.template !== 'article_casino' &&
           section.page.template !== 'article_sports' &&
           section.page.template !== 'game_review' && <h1>{section.page.title}</h1>}
-        <p className={styles.readingTime}>
-          Reading Time: <span>{section.page.reading_time}</span>
-        </p>
-        {section.page.reviewer && (
-          <p className={styles.readingTime}>
-            Fact checked by:{' '}
-            <a href={section.page.reviewer.profile_page_path}>{section.page.reviewer.name}</a>
-          </p>
-        )}
         <div className={!content && styles.headerText}>{headerContent()}</div>
       </div>
     </header>

package/src/components/molecules/link-list/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import keygen from '~helpers/keygen';
-import { imagePrettyUrl } from '~helpers/getters';
+import { imagePrettyUrl, getAltText } from '~helpers/getters';
 import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 
@@ -29,7 +29,7 @@ const LinkList = ({
     const LinkImage = () => (
       <LazyImage
         src={imagePrettyUrl(item.image)}
-        alt={item.title}
+        alt={getAltText(item?.image_object, item.title)}
         width={width}
         height={height}
         loading={disableLazyLoad ? 'eager' : 'lazy'}

package/src/components/molecules/star-rating/one-star.js

@@ -1,20 +1,30 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import { Context } from '~context/TranslationsProvider';
 import { getRating } from '~helpers/rating';
+import { translate } from '~helpers/getters';
 
 import styles from './one-star.module.scss';
 
-const OneStar = ({ numOfStars, rating, active = true }) => (
-  <div className={`${styles.starRatingContainer} ${!active && styles.inactive}`}>
-    <span className={styles.fullStar} />
-    <span className={styles.rateNr}>{`${getRating(rating)}/${numOfStars}`}</span>
-  </div>
-);
+const OneStar = ({ numOfStars, rating, active = true, showLabel = false }) => {
+  const { translations } = useContext(Context) || {};
+
+  return (
+    <div className={`${styles.starRatingContainer} ${!active && styles.inactive}`}>
+      {showLabel && (
+        <span className={styles.text}>{translate(translations, 'rating', 'Rating')}</span>
+      )}
+      <span className={styles.fullStar} />
+      <span className={styles.text}>{`${getRating(rating)}/${numOfStars}`}</span>
+    </div>
+  );
+};
 
 OneStar.propTypes = {
   numOfStars: PropTypes.oneOf([5, 10]).isRequired,
   rating: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]).isRequired,
   active: PropTypes.bool,
+  showLabel: PropTypes.bool,
 };
 
 export default OneStar;

package/src/components/molecules/star-rating/one-star.module.scss

@@ -7,22 +7,23 @@
   line-height: 2.1rem;
   border-radius: 0.4rem;
   border: 1px solid var(--main-star-wrapper-color);
-
-  .fullStar {
-    @include star(var(--full-star-fill-color), var(--full-star-border-color), unset, 2.1rem);
-  }
-
-  .rateNr {
-    color: #17182f;
-    font-weight: 700;
-    font-size: 1.3rem;
-    margin-left: 0.33rem;
-    line-height: 2.1rem;
-  }
-
+  
   &.inactive {
     .fullStar {
       @include star(var(--empty-star-border-color), var(--empty-star-border-color), unset, 2.1rem);
     }
   }
 }
+
+.fullStar {
+  @include star(var(--full-star-fill-color), var(--full-star-border-color), unset, 2.1rem);
+}
+
+.text {
+  color: #17182f;
+  font-weight: 700;
+  font-size: 1.3rem;
+  margin: 0 0.33rem;
+  line-height: 2.1rem;
+}
+

package/src/components/molecules/toplist/default-row/index.js

@@ -4,10 +4,10 @@ import { MdCheck } from 'react-icons/md';
 import Bonus from '~atoms/bonus';
 import { Context } from '~context/TranslationsProvider';
 import SellingPoints from '~atoms/selling-points';
-import StarRating from '~molecules/star-rating';
+import StarRating from '~molecules/star-rating/one-star';
 import Link from '~hooks/link';
 import OperatorCta from '~atoms/operator-cta';
-import { prettyTracker, imagePrettyUrl, translate } from '~helpers/getters';
+import { prettyTracker, imagePrettyUrl, translate, getAltText } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 
 import styles from './default-row.module.scss';
@@ -17,6 +17,8 @@ const Row = ({ item, oneliner = 'main', layout = 'list', tracker = 'main' }) =>
   const itemRating = item.rating;
   const { translations } = useContext(Context) || {};
 
+  const imageObject = item?.standardised_logo_url_object || item?.logo_url_object;
+
   return (
     <div className={`${styles.row} ${styles[layout]}`}>
       <a
@@ -37,10 +39,10 @@ const Row = ({ item, oneliner = 'main', layout = 'list', tracker = 'main' }) =>
         aria-label={`${item.name} Link`}
       >
         <LazyImage
-          alt={item.name}
-          src={imagePrettyUrl(item.logo_url, 100)}
-          width={150}
-          height={40}
+          alt={getAltText(imageObject, item.name)}
+          src={imagePrettyUrl(imageObject?.filename || item?.logo_url, 100)}
+          width={100}
+          height={100}
         />
       </a>
       <a
@@ -51,7 +53,7 @@ const Row = ({ item, oneliner = 'main', layout = 'list', tracker = 'main' }) =>
       >
         <Bonus item={item} tracker={oneliner} />
       </a>
-      <StarRating numOfStars={5} rating={itemRating} />
+      <StarRating numOfStars={5} rating={itemRating} showLabel />
       <SellingPoints icon={<MdCheck />} sellingPoints={item.selling_points} />
       <div>
         <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={item.review_link}>
@@ -80,6 +82,12 @@ Row.propTypes = {
         one_liner: PropTypes.string,
       }),
     }),
+    logo_url_object: PropTypes.shape({
+      filename: PropTypes.string,
+    }),
+    standardised_logo_url_object: PropTypes.shape({
+      filename: PropTypes.string,
+    }),
     bonus: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   }).isRequired,
 };

package/src/components/organisms/head/index.js

@@ -49,10 +49,7 @@ const Head = ({ page = {}, siteInfo }) => {
         <meta name="robots" content={page.meta_robots.join()} />
       )}
 
-      {page.robot_options && !page.path.includes('/page/') && (
-        <meta name="robots" content={getRobotOptions(page.robot_options)} />
-      )}
-      {page.path.includes('/page/') && <meta name="robots" content="noindex,follow" />}
+      {page.robot_options && <meta name="robots" content={getRobotOptions(page.robot_options)} />}
 
       {process.env.GATSBY_ACTIVE_ENV === 'development' && (
         <meta name="googlebot" content="noindex,follow" />

package/src/constants/pick-keys.js

@@ -12,6 +12,8 @@ export const pickPageKeys = [
 ];
 
 export const topListPickKeys = [
+  'standardised_logo_url_object',
+  'logo_url_object',
   'logo_url',
   'one_liner',
   'one_liners',
@@ -35,6 +37,8 @@ export const topListPickKeys = [
 export const pickRelationKeys = {
   tournament: ['tournaments'],
   operator: [
+    'standardised_logo_url_object',
+    'logo_url_object',
     'logo_url',
     'one_liner',
     'one_liners',
@@ -60,9 +64,10 @@ export const pickRelationKeys = {
     'third_rating',
     'fourth_rating',
     'thumbnail_filename',
+    'thumbnail_filename_object',
   ],
-  software_provider: ['logo', 'games_count', 'name'],
-  payment_method: ['logo', 'name'],
+  software_provider: ['logo_object', 'logo', 'games_count', 'name'],
+  payment_method: ['logo_object', 'logo', 'name'],
 };
 
 export const pickHTMLSitemapPageKeys = ['title', 'path', 'template_id'];

package/src/helpers/getters.js

@@ -368,3 +368,7 @@ export const getRoundMinutes = (time) => {
   const value = seconds > 30 ? Number(minutes) + 1 : Number(minutes);
   return value === 0 ? 1 : value;
 };
+
+export function getAltText(imageObject, defaultAlt = 'missing alt') {
+  return imageObject && imageObject.alt ? imageObject.alt : defaultAlt;
+}

package/src/helpers/getters.test.js

@@ -245,10 +245,12 @@ describe('Getters Helper', () => {
     Getters.shiftFirstOperator(11607, module, pagesMappedById);
     expect(module.items[0].id).toBe(11607);
   });
+
   test('move opeartor first postion', () => {
     Getters.shiftFirstOperator(13212, module, pagesMappedById);
     expect(module.items[0].id).toBe(13212);
   });
+
   test('check when we have the operator in first postion', () => {
     Getters.shiftFirstOperator(13212, module, pagesMappedById);
     expect(module.items[0].id).toBe(13212);
@@ -257,7 +259,18 @@ describe('Getters Helper', () => {
   test('If the reading time is bigger than half, it should return the next number ', () => {
     expect(Getters.getRoundMinutes('3:52')).toBe(4);
   });
+
   test('If reading time is less than half, it should return the last number ', () => {
     expect(Getters.getRoundMinutes('3:29')).toBe(3);
   });
+
+  test('Test altText', () => {
+    const alt = Getters.getAltText({ alt: 'imageAlt' }, 'default');
+    expect(alt).toEqual('imageAlt');
+  });
+
+  test('Test without altText', () => {
+    const altText = Getters.getAltText(null, 'default');
+    expect(altText).toEqual('default');
+  });
 });