gatsby-matrix-theme 35.0.6 → 36.0.0

package/.storybook/preview.js

@@ -44,6 +44,7 @@ export const parameters = {
           'Modules',
           [
             'Anchor',
+            'Toplist',
             'Cards',
             [
               'Game',

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [36.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v35.0.6...v36.0.0) (2023-11-08)
+
+
+### Code Refactoring
+
+* add storybook ([6fd83b6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6fd83b61ed90f6563e3bb0da790370667ee8664d))
+* changes to toplist ([e5e4cc5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e5e4cc5287b488791db4ca568df1895e986ef4a5))
+* style changes ([34d11b9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/34d11b943a6db6e145078466975b068916c6361b))
+* toplist changes ([5cbd4db](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5cbd4db57cf8e7a8133999a2f2f1cdc89b49fb26))
+
+
+* Merge branch 'tm-3691-toplist-1' into 'master' ([7b73b20](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7b73b20a2a2fb541b5e47d7b4c55418f2ca8c0fc))
+* Merge branch 'master' into tm-3691-toplist-1 ([189329d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/189329dbea8964fd4a160da9f5abdf58f571d6c2))
+
+
+### Tests
+
+* fix test ([59fa022](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/59fa0226c2f5ba086b613054ea2369e62a76c608))
+
 ## [35.0.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v35.0.5...v35.0.6) (2023-11-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "35.0.6",
+  "version": "36.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/molecules/operator-details/index.js

@@ -49,7 +49,7 @@ const OperatorDetails = ({
 
   const reviewPath = item?.review_link ? `/${item?.review_link}` : item?.path || null;
 
-  const rating = item.rating || item?.relation?.rating;
+  const rating = item?.rating || item?.relation?.rating;
 
   const StarRating =
     // eslint-disable-next-line no-nested-ternary

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

@@ -21,6 +21,7 @@ export default function Row({
   showAuthor,
   useOneStarRating,
   template,
+  verifyIcon = '../../../../images/verifiedAuthor.svg',
 }) {
   const tandcEnabled = item?.extra_fields?.terms_and_conditions_text_enabled === '1';
   const sellingPoints = item.selling_points;
@@ -32,13 +33,10 @@ export default function Row({
     }
   };
 
-  return (
-    <li
-      className={`${className || ''} ${styles?.row || ''} ${
-        !tandcEnabled ? styles?.rowNoTandC || '' : ''
-      }`}
-      ref={(el) => addToRefs(el, index)}
-    >
+  const firstRowItems = index === 0 || index === 1 || index === 2;
+
+  const Content = () => (
+    <>
       <CasinoDetails
         item={item}
         tracker={tracker}
@@ -47,9 +45,10 @@ export default function Row({
         showAuthor={showAuthor}
         useOneStarRating={useOneStarRating}
         costumeStyle={styles.operatorDetails}
-        authorTemplateTwo={authorTemplateTwo}
+        authorTemplateTwo={!!(firstRowItems || authorTemplateTwo)}
         ribbons={ribbons}
         showRibbon
+        icon={verifyIcon}
       />
 
       <Bonus item={item} tracker={oneliner} />
@@ -62,8 +61,28 @@ export default function Row({
         gtmClass="toplist-operator-cta-gtm"
         pageTemplate={template}
       />
+    </>
+  );
 
-      {tandcEnabled && <Tnc onlyMobile={layout === 'list'} operator={item} />}
+  return (
+    <li
+      className={`${className || ''} ${styles?.row || ''} ${
+        layout === 'grid' && firstRowItems ? styles.grid || '' : styles.list || ''
+      } ${!tandcEnabled ? styles?.rowNoTandC || '' : ''}`}
+      ref={(el) => addToRefs(el, index)}
+    >
+      {tandcEnabled ? (
+        <>
+          <div className={styles.container}>
+            <Content />
+          </div>
+          <div className={styles.tnc || ''}>
+            <Tnc isFixed hasCollapse={false} operator={item} />
+          </div>
+        </>
+      ) : (
+        <Content />
+      )}
     </li>
   );
 }
@@ -112,4 +131,5 @@ Row.propTypes = {
   }).isRequired,
   showAuthor: PropTypes.bool,
   useOneStarRating: PropTypes.bool,
+  verifyIcon: PropTypes.string,
 };

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

@@ -5,184 +5,85 @@
   text-align: center;
   @include flex-direction(column);
   @include flex-align(stretch, stretch);
-  padding: 2.4rem;
-  gap: 2.4rem;
   box-shadow: 0px 4px 4px -2px rgba(27, 27, 28, 0.04), 0px 6px 8px -2px rgba(27, 27, 28, 0.06);
 
-  @include min(tablet) {
-    display: grid;
-    grid-template-columns: 1.5fr 1.5fr 1fr;
-    column-gap: 2.4rem;
-    text-align: inherit;
-    row-gap: 2.4rem;
-  }
-
-  @include min(laptop) {
-    grid-template-columns: 2.5fr 2fr 2fr 0.5fr;
-  }
-
-  > div {
-    @include min(tablet) {
-      @include flex-direction(column);
-      grid-row: 1 / span 2;
-    }
-    @include min(laptop) {
-      @include flex-direction(row);
-      grid-row: 1;
+  a {
+    > span {
+      width: auto;
     }
   }
+}
 
-  ul {
-    @include flex-align(center, center);
-
+.list {
+  &.rowNoTandC,
+  > .container {
     @include min(tablet) {
-      order: 3;
-      padding-left: 3rem;
-      grid-row: 1 / span 2;
-    }
-
-    @include min(laptop) {
-      grid-row: 1;
-    }
-
-    @include min(desktop) {
-      order: 3;
-    }
-
-    li {
-      color: #150e06;
-      text-align: left;
-
-      &::before {
-        top: 0.5rem;
+      grid-template-columns: 1.5fr 1.5fr 1fr;
+      text-align: inherit;
+      column-gap: 2.4rem;
+      row-gap: 2.4rem;
+      align-items: center;
+      
+      ul {
+        grid-row: 1/span 2;
+        grid-column: 2;
+        padding-left: 3rem;
       }
     }
-  }
-
-  &.grid {
-    border-radius: 1.2rem;
-    padding: 2rem 2rem 0.5rem 2rem;
-    text-align: center;
-    min-height: 39rem;
-
+  
     @include min(laptop) {
-      grid-template-columns: 1fr;
-    }
-
-    @include min(tablet) {
-      grid-template-columns: 1fr;
-    }
-
-    .numbers {
-      position: absolute;
-      text-align: center;
-      width: 2.4rem;
-      height: 2.4rem;
-      background-color: var(--toplist-ranking-base-color);
-      border-radius: 0.8rem 0 0.8rem 0;
-      color: #fff;
-      font-size: 1.4rem;
-      line-height: 2.4rem;
-      left: 0;
-      top: 0;
-
-      &.num_1 {
-        background-color: var(--toplist-ranking-first-color);
-      }
-
-      &.num_2 {
-        background-color: var(--toplist-ranking-second-color);
-      }
-
-      &.num_3 {
-        background-color: var(--toplist-ranking-third-color);
+      grid-template-columns: 2.5fr 2fr 2fr 0.5fr;
+  
+      ul {
+        grid-row: 1;
       }
     }
+  }
+}
 
-    .tandc {
-      grid-column: 1;
-      background: transparent;
-    }
-
-    .casinoDetails {
-      padding-left: 0;
-      height: 8.5rem;
-
-      @include min(tablet) {
-        @include flex-align(center, space-between);
-        padding-left: 0;
-      }
-
-      > div {
-        width: 80%;
-        margin: 0 auto;
-      }
-    }
-
-    .bonus {
-      flex-direction: column !important;
-      justify-content: flex-start;
-      background: transparent;
-      height: 9.3rem;
-
-      @include min(tablet) {
-        order: unset;
-        grid-column: 1;
-
-        > * {
-          padding-right: 0 !important;
-        }
-      }
+.rowNoTandC {
+  padding: 1.6rem;
+  gap: 2.4rem;
 
-      a > div {
-        width: 100%;
-        text-align: center;
-        @include flex-align(center, flex-start);
-        flex-direction: column;
+  @include min(laptop) {
+    padding: 2.4rem;
+  }
+}
 
-        div:first-child {
-          padding-right: 0 !important;
+.grid {
+  @include flex-align(stretch, space-between);
+  @include min(tablet) {
+    display: flex !important;
+    
+    > div {
+      > a {
+        > img {
+          width: 8.8rem;
+          height: 8.8rem;
         }
       }
     }
+  }
+}
 
-    .cta {
-      @include flex-align(center, center);
-      @include flex-direction(column);
-
-      a:first-child {
-        width: 90%;
-        margin-top: 1rem;
-      }
-
-      a:nth-child(2) {
-        padding-top: 1.5rem;
-        display: inline-block;
-      }
-    }
+.container {
+  padding: 1.6rem;
+  @include flex-direction(column);
+  @include flex-align(stretch, stretch);
+  gap: 2.4rem;
+  flex: 1;
 
-    .pros {
-      height: 6.25rem;
-    }
+  @include min(tablet) {
+    display: grid;
   }
 
-  > a:last-child {
-    order: 4;
-    @include flex-align(center, center);
-    
-    @include min(tablet) {
-      grid-column: 3;
-      grid-row: 2;
-    }
-
-    @include min(laptop) {
-      grid-column: 4;
-      grid-row: 1;
-      align-self: center;
-    }
+  @include min(laptop) {
+    padding: 2.4rem;
   }
 }
 
-.rowNoTandC {
-  padding-bottom: 2.4rem;
-}
+.tnc {
+  padding: 0.8rem 2.4rem;
+  background-color: #fafafa;
+  border-radius: 0px 0px 16px 16px;
+}

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

@@ -0,0 +1,130 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  Stories,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import verifyIcon from '../../../../../storybook-images/verifiedAuthor.svg';
+import { getToplistItem } from '../../../../../tests/factories/modules/toplist.factory';
+import Row from './variant-one';
+
+export default {
+  title: 'Theme/Modules/Toplist/Row/Variant One',
+  component: Row,
+  argTypes: {
+    item: {
+      name: 'item',
+      type: { name: 'object', required: true },
+      defaultValue: getToplistItem(),
+      description: 'toplist item',
+    },
+    tracker: {
+      name: 'tracker',
+      type: { name: 'string', required: false },
+      defaultValue: 'main',
+      description: 'tracker name',
+    },
+    oneliner: {
+      name: 'oneliner',
+      type: { name: 'string', required: false },
+      defaultValue: 'main',
+      description: 'oneliner name',
+    },
+    layout: {
+      name: 'layout',
+      type: { name: 'string', required: false },
+      defaultValue: 'list',
+      description: 'Layout for toplist (Check Theme > Modules > Toplist > Layout for differences)',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'list' },
+      },
+      control: {
+        type: 'inline-radio',
+        options: ['list', 'grid'],
+      },
+    },
+    index: {
+      name: 'index',
+      type: { name: 'number', required: false },
+      defaultValue: 4,
+      description: 'Index of current item',
+    },
+    className: {
+      name: 'className',
+      type: { name: 'string', required: false },
+      defaultValue: '',
+      description: 'classes names passed from parent component',
+    },
+    itemRefs: {
+      name: 'itemRefs',
+      type: { name: 'string', required: false },
+      defaultValue: '',
+      description: 'itemRefs passed from parent component',
+    },
+    authorTemplateTwo: {
+      name: 'authorTemplateTwo',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show the correct author template',
+    },
+    showAuthor: {
+      name: 'showAuthor',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/hide author data',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    useOneStarRating: {
+      name: 'useOneStarRating',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/hide one star rating',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    template: {
+      name: 'template',
+      type: { name: 'string', required: false },
+      defaultValue: 'operator_review',
+      description: 'Page Template',
+    },
+    verifyIcon: {
+      name: 'verifyIcon',
+      type: { name: 'string', required: false },
+      defaultValue: verifyIcon,
+      description: 'Show the correct author',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'List of casinos typically displaying bonus information, unique selling points and a CTA. Depending on the data received from Hercules, the toplist will display as a multi-toplist with tabs, single toplist, and/or with a load more button. The toplist rows are customizable, reusable and can even be displayed in grid style rather than rows.',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <Stories />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <Row {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {};

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

@@ -23,13 +23,12 @@ describe('toplist row component', () => {
     expect(container.querySelector('img')).toBeTruthy();
 
     // Selling Points
-    expect(container.querySelectorAll('.sellingPoint li')).toHaveLength(3);
-    expect(getByText('1')).toBeTruthy();
-    expect(getByText('2')).toBeTruthy();
-    expect(getByText('3')).toBeTruthy();
+    expect(container.querySelectorAll('.sellingPoint li')).toHaveLength(2);
+    expect(getByText('200% Bonus')).toBeTruthy();
+    expect(getByText('Nice design')).toBeTruthy();
 
     // CTA
-    expect(getByText('Visit').closest('a').getAttribute('href')).toEqual('/shortName1');
+    expect(getByText('Visit').closest('a').getAttribute('href')).toEqual('/slotum');
   });
 });
 afterEach(() => {

package/src/gatsby-core-theme/components/molecules/tnc/tnc.module.scss

@@ -1,33 +1,30 @@
 .isFixed {
   max-height: 45px;
   overflow-y: auto;
-  text-align: center;
-}
+  padding-right: 1.6rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.4rem;
+  color: #515156;
 
-.storybook {
-  max-width: 34.3rem;
-  margin: 0 auto;
-
-  .isFixed {
-    text-align: justify;
-    padding-right: 1.6rem;
-    max-height: 7.2rem;
-
-    &::-webkit-scrollbar {
-      -webkit-appearance: none;
-      width: 0.4rem;
-    }
+  a {
+    font-weight: 500;
+    color: #165af8;
+  }
 
-    &::-webkit-scrollbar-thumb {
-      border-radius: 2px;
-      background-color: #6b6a72;
-    }
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 0.4rem;
+  }
 
-    /* Track */
-    &::-webkit-scrollbar-track {
-      background: #e9e9e9;
-      border-radius: 2px;
-    }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background-color: #6b6a72;
   }
-}
 
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: #e9e9e9;
+    border-radius: 2px;
+  }
+}

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

@@ -5,36 +5,35 @@ import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import keygen from '~helpers/keygen';
 import List from './list';
-import Row from '../../../../components/molecules/toplist/row/variant-one';
 import styles from './toplist.module.scss';
 
 const TopList = ({
   module,
   toplistHeading,
-  CustomRow = Row,
   page,
   isHomepageFirstModule = false,
+  verifyIcon = '../../../../images/verifiedAuthor.svg',
 }) => {
   const showTabs = module.items.length > 1;
+  const moduleStyle = module?.style;
+
   const content = module.items.map((toplist) => (
     <div label={toplist.title} key={keygen()}>
       {toplistHeading}
       <List
-        pagePath={page.path}
+        pagePath={page?.path}
         toplist={toplist}
-        CustomRow={CustomRow}
         modulestyle={module?.style}
         hasLoadMoreButton={toplist.show_load_more}
         initItemsCount={toplist.num_items_initial_load}
         loadItemsCount={toplist.num_items_load_more}
         pageTemplate={page?.template}
         template={page?.template}
+        verifyIcon={verifyIcon}
       />
     </div>
   ));
 
-  const moduleStyle = module?.style;
-
   const Tabs = showTabs && loadable(() => import('~hooks/tabs'));
   const Title =
     !showTabs &&
@@ -85,8 +84,8 @@ TopList.propTypes = {
   }),
   isHomepageFirstModule: PropTypes.bool,
   toplistHeading: PropTypes.element,
-  CustomRow: PropTypes.func,
   page: PropTypes.shape({ template: PropTypes.string, path: PropTypes.string }),
+  verifyIcon: PropTypes.string,
 };
 
 export default TopList;