gatsby-matrix-theme 3.1.1 → 3.1.2

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [3.1.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.1.1...v3.1.2) (2021-12-23)
+
+
+### Bug Fixes
+
+*  operator bonus added dividor ([98538a9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/98538a94160ef27a2a4d33334f8534aa6baff32e))
+* fixed parsing metadescription ([f3f7568](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f3f75682e88341ebc90f3f532594e4a816605fc9))
+* new testimonials styling ([7f16177](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7f1617700a339d7e0edd183769b040fb9a419255))
+* removed an useless line ([6320358](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/63203585e3ee6362f1250033b0b41a1180f61ad2))
+* tests ([0d2794f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0d2794feb4f5a93eb08f40c1776330a25aed0850))
+
+
+### Config
+
+* updated core theme version ([8ead1a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8ead1a7c4fec1a4f30acced891b9eaa262d2c104))
+
+
+* Merge branch 'tm-2629-spotlight-testimonials' into 'master' ([52f20ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/52f20abf60df594d49e7eac3c4a5a099e7c2842a))
+* Merge branch 'tm-2610-operator-bonus' into 'master' ([8c80938](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8c80938101df09f25d6458c423f4eaf09e8da5ca))
+* Merge branch 'fix-parse-metadescription' into 'master' ([fbed07c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fbed07cb84ba1d34a296ebc5cbf059eadfecdd72))
+
 ## [3.1.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.1.0...v3.1.1) (2021-12-17)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^2.0.2",
+    "gatsby-core-theme": "^2.0.7",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

package/src/components/atoms/cards/popup-card/index.js

@@ -23,7 +23,7 @@ const PopupCard = ({ item, tracker }) => {
         </div>
         <div className={styles.textContainer}>
           <p className={styles.primaryText}>{one}</p>
-          <p className={styles.secondaryText}>{second}</p>
+          <p className={styles.secondaryText}>{`+${second}`}</p>
         </div>
       </div>
       <div className={styles.buttonContainer}>

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

@@ -17,7 +17,7 @@ describe('toplist row component', () => {
 
     // Bonus
     expect(getByText('€100 welcome bonus')).toBeTruthy();
-    expect(getByText('150 free spins')).toBeTruthy();
+    expect(getByText('+150 free spins')).toBeTruthy();
 
     // Rating & Logo
     // expect(container.querySelector('img')).toBeFalsy();
@@ -47,7 +47,7 @@ describe('toplist row component', () => {
 
     // Bonus
     expect(getByText('€100 welcome bonus')).toBeTruthy();
-    expect(getByText('150 free spins')).toBeTruthy();
+    expect(getByText('+150 free spins')).toBeTruthy();
 
     // Rating & Logo
     // expect(container.querySelector('img')).toBeFalsy();

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

@@ -99,8 +99,9 @@ const Popup = ({ module, isStorybook = false }) => {
                 <MdClose />
               </button>
             </div>
-            {shownItems?.map((item) => (
-              <PopupCard item={item} tracker={tracker} />
+            {shownItems?.map((item, index) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <PopupCard key={index} item={item} tracker={tracker} />
             ))}
           </div>
         </div>
@@ -111,7 +112,7 @@ const Popup = ({ module, isStorybook = false }) => {
 
 Popup.propTypes = {
   module: PropTypes.shape({
-    items: PropTypes.arrayOf({}),
+    items: PropTypes.arrayOf(PropTypes.object),
     style: PropTypes.string,
   }).isRequired,
   isStorybook: PropTypes.bool,

package/src/gatsby-core-theme/components/atoms/bonus/bonus.test.js

@@ -10,7 +10,6 @@ describe('Bonus Component', () => {
     const item = getToplistItem();
     const { getByText } = render(<Bonus item={item} tracker="main" />);
     expect(getByText('€100 welcome bonus')).toBeTruthy();
-    expect(getByText('150 free spins')).toBeTruthy();
   });
   test('without oneLiner', () => {
     const { container } = render(

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

@@ -22,7 +22,7 @@ export default function Bonus({ item, tracker }) {
   return (
     <div className={styles.bonus}>
       {!isInoperative && <div className={styles.title}>{mainLine && mainLine}</div>}
-      {!isInoperative && <div className={styles.desc}>{secondLine && secondLine}</div>}
+      {!isInoperative && <div className={styles.desc}>{secondLine && `+${secondLine}`}</div>}
     </div>
   );
 }

package/src/gatsby-core-theme/components/atoms/spotlights/spotlights.module.scss

@@ -1,121 +1,90 @@
 .spotlightsContainer {
-    margin: 0 auto;
-    width: 100%;
-    max-width: var(--main-container-max);
-    ul {
-      display: grid;
-      grid-template-columns: repeat(1, 1fr);
-      column-gap: 1rem;
-      @include min(tablet) {
-        grid-template-columns: repeat(2, 1fr);
-      }
-  
+  margin: 0 auto;
+  width: 100%;
+  max-width: var(--main-container-max);
+  ul {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    column-gap: 1rem;
+    @include min(tablet) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @include min(desktop) {
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: 1.6rem;
+    }
+    li {
+      text-align: center;
+      background-color: var(--color-9);
+      border: none;
+      margin-bottom: 1rem;
       @include min(desktop) {
-        grid-template-columns: repeat(3, 1fr);
-        column-gap: 1.6rem;
+        margin-bottom: 1.6rem;
       }
-      &.lessThanThreeGrids {
-        @include min(desktop) {
-          grid-template-columns: repeat(2, 1fr);
-          column-gap: 1.6rem;
-        }
+      @include flex-direction(column);
+      span {
+        display: block;
       }
-      li {
-        margin-bottom: 1rem;
-        text-align: center;
-        @include min(desktop) {
-          margin-bottom: 1.6rem;
-        }
-        @include flex-direction(column);
-        span {
-          display: block;
+      .itemImage {
+        width: 100%;
+        height: 15rem;
+        img {
+          width: auto;
+          height: 100%;
+          object-fit: cover;
         }
-  
-        .pillarCards {
-          background-color: var(--color-9);
-          padding: 1.6rem;
-          border-radius: var(--border-radius);
-          .body {
-            padding: 0 0 1.6rem 0;
-          }
-          .itemImage {
-            width: 100%;
-            img {
-              height: 5.6rem;
-              width: auto;
-            }
-          }
-          .label {
-            font-weight: 700;
-            font-size: 1.6rem;
-            color: var(--color-12);
-            margin: 1.6rem 0;
-          }
-          .text {
-            font-size: 1.6rem;
-            color: #5a4e51;
-          }
+      }
+
+      .content {
+        padding: 1rem;
+        .label {
+          font-weight: 700;
+          font-size: 2rem;
+          color: black;
         }
       }
-      &.about {
-        li {
-          background-color: white;
-          .body {
-            padding: 0 1.6rem 1.6rem 1.6rem;
-          }
-          .itemImage {
-            width: 100%;
-            height: 20rem;
-            img {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-            }
-          }
-          .label {
-            font-weight: 700;
-            font-size: 1.6rem;
-            color: black;
-            margin: 1.6rem 0 0 0.9rem;
-          }
-          .text {
-            font-size: 1.4rem;
-            color: #000;
-            p[class*='job-position'] {
-              color: var(--color-40);
-            }
-            p[class*='body'] {
-              color: #000;
-              width: 100%;
-              height: 15rem;
-              overflow: hidden;
-              margin: 1.6rem 0;
-            }
-            a[class*='icon'] {
-              display: inline-block;
-              background-color: #f6f6fb;
-              width: 4.8rem;
-              height: 4.8rem;
-              line-height: 2.3;
-              border-radius: 50%;
-              margin: 0 0.4rem;
-              color: #6e6e84;
-              font-size: 2.4rem;
-            }
-          }
-          .readMore {
-            color: var(--color-40);
-            margin-top: 1.6rem;
-            font-size: 1.3rem;
-            font-weight: 700;
-          }
+
+      .body {
+        padding: 0 1rem 1rem 1rem;
+      }
+      .text {
+        font-size: 1.4rem;
+        color: #777;
+      }
+      .readMore {
+        svg {
+          display: none;
         }
       }
     }
   }
-  .spotlightstext {
-    width: 100%;
-    margin: 2rem 0;
-    font-size: 1.6rem;
+}
+.spotlightstext {
+  width: 100%;
+  margin: 2rem 0;
+  font-size: 1.6rem;
+}
+
+.testimonials {
+  ul {
+    li {
+      border: 1px solid #858487;
+      border-radius: .8rem;
+      background-color: white;
+
+      .subtitle {
+        width: 50%;
+        margin: 0 auto;
+      }
+
+      .title, .subtitle {
+        font-size: 1.4rem;
+      }
+
+      .label {
+        color: var(--primary-color);
+      }
+    }
   }
-  
+}

package/src/gatsby-core-theme/components/molecules/module/index.js

@@ -50,7 +50,7 @@ const Modules = ({ module, page, pageContext }) => {
       case 'image':
         return loadable(() => import('gatsby-core-theme/src/components/atoms/image'));
       case 'spotlights':
-        return loadable(() => import('../../atoms/spotlights'));
+        return loadable(() => import('gatsby-core-theme/src/components/atoms/spotlights'));
       case 'faq':
         return loadable(() => import('../../../../components/molecules/faq'));
       // Template blocks

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

@@ -1,6 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Helmet } from 'react-helmet';
+import parse from 'html-react-parser';
 import PropTypes from 'prop-types';
 
 import { schemaGenerator } from '~helpers/schema';
@@ -45,6 +46,7 @@ function setName(string) {
 const Head = ({ page = {}, siteInfo }) => {
   const pageImage = getPageImage(page) ? getPageImage(page) : imagePrettyUrl(siteInfo?.site_logo);
   const twitterUsername = getTwitterUsername(page.siteSchema?.twitter);
+  const parsedMetaDescr = page.meta_description ? parse(page.meta_description) : '';
 
   return (
     <>
@@ -52,7 +54,7 @@ const Head = ({ page = {}, siteInfo }) => {
         <meta charSet="utf-8" />
         <title>{page.meta_title}</title>
         <html lang={getLanguage(page.language)} />
-        <meta name="description" content={page.meta_description} />
+        <meta name="description" content={parsedMetaDescr} />
         {page.meta_robots && process.env.GATSBY_ACTIVE_ENV !== 'development' && (
           <meta name="robots" content={page.meta_robots.join()} />
         )}
@@ -68,7 +70,7 @@ const Head = ({ page = {}, siteInfo }) => {
           page.preconnect_links.map((link) => <link key={keygen()} rel="preconnect" href={link} />)}
         <meta name="og:title" content={page.meta_title} />
         <meta name="og:site_name" content={siteInfo?.site_name && setName(siteInfo?.site_name)} />
-        <meta name="og:description" content={page.meta_description} />
+        <meta name="og:description" content={parsedMetaDescr} />
         <meta name="og:type" content={page.path === '/' ? 'website' : 'article'} />
         <meta name="og:image" content={pageImage} />
         <meta name="og:url" content={getUrl(page.path)} />
@@ -88,6 +90,7 @@ const Head = ({ page = {}, siteInfo }) => {
           <meta name="twitter:title" content={page.meta_title} />
           <meta name="twitter:description" content={page.meta_description} />
           <meta name="twitter:site" content={`@${twitterUsername}`} />
+          <meta name="twitter:creator" content={`@${twitterUsername}`} />
           <meta name="twitter:card" content="summary" />
           <meta name="twitter:image" content={pageImage} />
         </Helmet>

package/storybook/public/iframe.html

@@ -135,4 +135,4 @@
             
         
             
-              window['FEATURES'] = {"postcss":true};</script><script src="runtime~main.5a919f90.iframe.bundle.js"></script><script src="vendors~main.7fa2fd4a.iframe.bundle.js"></script><script src="main.f2a52f99.iframe.bundle.js"></script></body></html>
+              window['FEATURES'] = {"postcss":true};</script><script src="runtime~main.5a919f90.iframe.bundle.js"></script><script src="vendors~main.145aeafa.iframe.bundle.js"></script><script src="main.c8da7880.iframe.bundle.js"></script></body></html>