gatsby-core-theme 13.0.1-beta.2 → 13.0.1

package/CHANGELOG.md

@@ -1,22 +1,30 @@
-## [13.0.1-beta.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v13.0.1-beta.1...v13.0.1-beta.2) (2022-10-18)
+## [13.0.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v13.0.0...v13.0.1) (2022-10-24)
 
 
 ### Bug Fixes
 
+* add logic for ribbons ([95dfbd7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/95dfbd77ea4a42c1a8d82d1a8ecdf495a42625e3))
+* added babel react preset ([f3a9c5b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f3a9c5bd84ee651a2e759a4da2459b5db69b57e3))
+* added gatsby head instead of react helmet ([a5a6acc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a5a6acc7b9e494afbc11fa2caf496ffa2bc695af))
+* added ribbons in default row ([d93f0d9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d93f0d9078568ab2173b5e4cd4446137a324ba9f))
+* if ribbons are empty in toplist check to get data in the operator ([e32b044](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e32b0449364695be9a0a7b4e411462242fd90836))
+* if the ribbon is empty for toplist and oprator check the extra fields ([5d05607](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5d0560760ea6848b175c22e85ea60d938834aba0))
 * removed unused packages from package json ([7b4daa2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7b4daa21cd8318eb43a991bcf36d6f012e43d1f6))
+* ribbons logic ([a9c0500](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a9c05006f5f818a9847da6b6e94672b586595109))
+* validate data ([f111dda](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f111ddaaee78ca89040997966a91b71d8fbcc05f))
 
 
-* Merge branch 'tm-3076-head-api' into 'beta' ([a4778d1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a4778d1e81d2be2d2bca4f66c17267990f239f56))
-
-## [13.0.1-beta.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v13.0.0...v13.0.1-beta.1) (2022-10-17)
-
-
-### Bug Fixes
+### Code Refactoring
 
-* added gatsby head instead of react helmet ([a5a6acc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a5a6acc7b9e494afbc11fa2caf496ffa2bc695af))
+* update tabs forceCheck loading ([9b18a03](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9b18a032319ccbf971f404a2ed62ae4cbfebca1f))
+* update tabs loading in search and toplist tests ([4430a09](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4430a0984f9fd1c63e0fc2f5f5e5b8ec5034bd99))
+* update toplist component ([4dcede5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4dcede535cfd8a50f020d7fdf351fab6ab7d13b3))
+* update toplist component code splitting ([b36b57b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b36b57b6b3e974dfb180d0170146825b38fa9761))
 
 
-* Merge branch 'tm-3076-head-api' into 'beta' ([f7f1965](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f7f1965ae56db90af326c5fa1aca1e0e35d5dff4))
+* Merge branch 'tm-3051-ribbons' into 'master' ([4512811](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/45128114e4d1518bc6edf710d538678c24c68fc0))
+* Merge branch 'tm-3076-head-api' into 'master' ([a0cbf8b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a0cbf8bf960a8a2a7b096a4a5526d5bee5dfc2fc))
+* Merge branch 'tm-3076-pagespeed-improvements-toplist-tabs' into 'master' ([3df702f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3df702f34a7aec7e7a4f8f561ce8fd2cb7289425))
 
 # [13.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v12.0.4...v13.0.0) (2022-10-17)
 

package/babel.config.js

@@ -5,9 +5,10 @@ module.exports = {
       '@babel/preset-env',
       {
         targets: {
-          node: 'current'
-        }
-      }
-    ]
-  ]
-}
+          node: 'current',
+        },
+      },
+    ],
+    '@babel/preset-react',
+  ],
+};

package/package.json

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

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

@@ -6,7 +6,6 @@ import loadable from '@loadable/component';
 import LazyImage from '~hooks/lazy-image';
 import ConditionalWrapper from '~atoms/conditional-wrapper';
 import styles from './search.module.scss';
-import Tabs from '~hooks/tabs';
 import { getURLParam } from '~helpers/getters';
 import keygen from '~helpers/keygen';
 import { filterByKey, sortDateOn, sortIntOn, sortStringOn } from '~helpers/search';
@@ -248,6 +247,8 @@ const Search = ({
     );
   }
 
+  const Tabs = searchResultsRef.current.length !== 0 && loadable(() => import('~hooks/tabs'));
+
   return (
     <>
       {formSearchOptionsCopy !== null && (

package/src/components/molecules/toplist/default-row/default-row.module.scss

@@ -45,3 +45,17 @@
     @include flex-align(center, center);
   }
 }
+
+.ribbons {
+  position: absolute;
+  top: -1rem;
+  @include flex-direction(row);
+  gap: 1rem;
+
+  > span {
+    color: white;
+    padding: .2rem 1rem;
+    background-color: red;
+    border-radius: 1rem;
+  }
+}

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

@@ -20,6 +20,9 @@ const Row = ({ item, oneliner = 'main', layout = 'list', tracker = 'main' }) =>
 
   return (
     <div className={`${styles.row} ${styles[layout]}`}>
+      <div className={styles.ribbons}>
+        {item.ribbons && item.ribbons.map((ribbon) => <span>{ribbon}</span>)}
+      </div>
       <a
         href={prettyLink}
         className="casinos-top-list-gtm name-cta"
@@ -72,6 +75,7 @@ Row.propTypes = {
   tracker: PropTypes.string,
   item: PropTypes.shape({
     name: PropTypes.string,
+    ribbons: PropTypes.arrayOf(PropTypes.string),
     logo_url: PropTypes.string,
     selling_points: PropTypes.arrayOf(PropTypes.string),
     review_link: PropTypes.string,

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

@@ -1,27 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
 import keygen from '~helpers/keygen';
 import List from './list';
-import Tabs from '~hooks/tabs';
+import styles from './toplist.module.scss';
 
 const TopList = ({ module, toplistHeading, CustomRow, page }) => {
-  const template = page?.template;
-  return (
-    <Tabs tabsAlign="right" gtmClass="toplist-tabs-menu-gtm">
-      {module.items.map((toplist) => (
-        <div label={toplist.title} key={keygen()}>
-          {toplistHeading}
-          <List
-            toplist={toplist}
-            CustomRow={CustomRow}
-            hasLoadMoreButton={toplist.show_load_more}
-            initItemsCount={toplist.num_items_initial_load}
-            loadItemsCount={toplist.num_items_load_more}
-            pageTemplate={template}
-          />
-        </div>
-      ))}
-    </Tabs>
+  const showTabs = module.items.length > 1;
+  const content = module.items.map((toplist) => (
+    <div className={!showTabs && styles.toplistContainer} label={toplist.title} key={keygen()}>
+      {toplistHeading}
+      <List
+        toplist={toplist}
+        CustomRow={CustomRow}
+        hasLoadMoreButton={toplist.show_load_more}
+        initItemsCount={toplist.num_items_initial_load}
+        loadItemsCount={toplist.num_items_load_more}
+        pageTemplate={page?.template}
+      />
+    </div>
+  ));
+  const Tabs = showTabs && loadable(() => import('~hooks/tabs'));
+
+  return showTabs ? (
+    <Tabs tabsAlign="right" gtmClass="toplist-tabs-menu-gtm" children={content} />
+  ) : (
+    content
   );
 };
 

package/src/components/organisms/toplist/toplist.module.scss

@@ -1 +1,3 @@
-
+.toplistContainer > ul {
+  margin-top: 2rem;
+}

package/src/components/organisms/toplist/toplist.test.js

@@ -9,21 +9,19 @@ import { getListToplistItems } from '~tests/factories/modules/toplist.factory';
 
 describe('Organisms/TopList', () => {
   test('render with props', () => {
-    const { container } = render(<TopList module={{ items: getListToplistItems(3) }} />);
+    const { container } = render(<TopList module={{ items: getListToplistItems(1) }} />);
     expect(container).toBeTruthy();
     expect(container.querySelector('.list')).toBeTruthy();
   });
-
   test('headerExtra', () => {
     const { container } = render(
       <TopList
-        module={{ items: getListToplistItems(3) }}
+        module={{ items: getListToplistItems(1) }}
         toplistHeading={<div className="my-header" />}
       />
     );
     expect(container.querySelector('.my-header')).toBeTruthy();
   });
-
   test('CustomRow', () => {
     const Row = ({ item, tracker }) => (
       <div className="my-row">
@@ -32,7 +30,7 @@ describe('Organisms/TopList', () => {
       </div>
     );
     const { container } = render(
-      <TopList module={{ items: getListToplistItems(3) }} CustomRow={Row} />
+      <TopList module={{ items: getListToplistItems(1) }} CustomRow={Row} />
     );
     expect(container.querySelector('.my-row')).toBeTruthy();
   });

package/src/constants/pick-keys.js

@@ -32,6 +32,7 @@ export const topListPickKeys = [
   'short_name',
   'status',
   'founded',
+  'ribbons',
 ];
 
 export const pickRelationKeys = {
@@ -56,6 +57,7 @@ export const pickRelationKeys = {
     'links',
     'extra_fields',
     'status',
+    'ribbons',
   ],
   game: [
     'game_provider',

package/src/helpers/processor/index.js

@@ -261,6 +261,20 @@ export default {
             transformedPages[market][pageType][index].relation =
               relations[page.type][page.relation_id] || null;
 
+            if (page.type === 'operator') {
+              // eslint-disable-next-line camelcase, prefer-const
+              const { ribbons, extra_fields } = page.relation;
+
+              // eslint-disable-next-line no-unused-expressions
+              ribbons.length > 0 &&
+                ribbons.forEach((res, index) => {
+                  ribbons[index] = data.ribbons[res] ? data.ribbons[res].label : res;
+                });
+
+              if (ribbons.length === 0 && extra_fields.ribbon_text) {
+                page.relation.ribbons = extra_fields.ribbon_text.split(',');
+              }
+            }
             // Linking game provider path to the game
             if (page.type === 'game') {
               const providerId =

package/src/helpers/processor/modules.js

@@ -248,6 +248,9 @@ export function processArchiveModule(module, pages) {
 export function processTopListModule(module, relations, pages) {
   module.items = module.items.map((listItem) => {
     listItem.items = listItem.items.map((item) => {
+      // Remove the ribbons if are empty, will be add ribbons from operator
+      if (item.ribbons && item.ribbons.length === 0) delete item.ribbons;
+
       const clone = pick(cloneDeep(relations.operator[item.operator_id]), topListPickKeys);
       const operatorPage =
         pages && pages.operator

package/src/hooks/tabs/index.js

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { forceCheck } from 'react-lazyload';
 import loadable from '@loadable/component';
 import styles from './tabs.module.scss';
 
@@ -14,28 +13,25 @@ const Tabs = ({
   gtmClass = '',
 }) => {
   const showAllTabId = `${showAll}_0`;
-  const showTabs = children.length > 1;
   const [activeTab, setActiveTab] = useState(
     showAll ? showAllTabId : `${children[0].props.label}_0`
   );
-
-  const TabList = showTabs ? loadable(() => import('./tab/tab-list')) : null;
-
+  const showTabs = children.length > 1;
+  const TabList = showTabs && loadable(() => import('./tab/tab-list'));
+  const { forceCheck } = TabList && loadable(() => import('react-lazyload'));
   const tabHeaderClass = `${styles.tabsHeader} ${!HeaderComp && styles.tabsOnly} ${
     styles[headerClass]
   } ${tabsAlign === 'right' && styles.invertOrder}`;
 
-  function onClickTabItem(tabId) {
-    setActiveTab(tabId);
-    setTimeout(forceCheck);
-  }
-
   return (
     <>
       <div className={tabHeaderClass}>
         {TabList && (
           <TabList
-            onClick={onClickTabItem}
+            onClick={(tabId) => {
+              setActiveTab(tabId);
+              setTimeout(forceCheck);
+            }}
             items={children}
             activeTab={activeTab}
             activeTabClass={activeTabClass}
@@ -46,17 +42,14 @@ const Tabs = ({
         )}
         {HeaderComp && <div className={styles.headerComp}>{HeaderComp}</div>}
       </div>
-
       <div className="tab-content">
-        {children.map((child, index) => {
-          if (
-            child === null ||
-            (`${child.props.label}_${showAll ? index + 1 : index}` !== activeTab &&
-              activeTab !== showAllTabId)
-          )
-            return undefined;
-          return child.props.children;
-        })}
+        {children.map(
+          (child, index) =>
+            child !== null &&
+            (`${child.props.label}_${showAll ? index + 1 : index}` === activeTab ||
+              activeTab === showAllTabId) &&
+            child.props.children
+        )}
       </div>
     </>
   );