gatsby-matrix-theme 7.1.50 → 7.1.51

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [7.1.51](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.50...v7.1.51) (2022-08-18)
+
+
+### Bug Fixes
+
+* content module fixes ([4b92756](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4b927563e9724bbdd62ba38022b733e1da43f06b))
+* fixed conflict ([fe5ce39](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fe5ce399370578c99cfa77975e49d7faf6c29c1e))
+* updated to gatsby v4.17 ([03bc20f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/03bc20f866ca3b63706e6c674e3375a7d90dba5b))
+
+
+### Code Refactoring
+
+* add newsletter form missing translation ([63a4dcb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/63a4dcb31fcf8856d2c5749788e3bba868f3251a))
+* add newsletter form text translation keys ([2847532](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/28475327fd4592aa5dc0e2cfb3fe2fde1fd96441))
+
+
+### Config
+
+* update core version ([abc8545](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/abc8545a8d0c0305b69af40ec4acbf68470a3555))
+
+
+* Merge branch 'tm-2975-content-module' into 'master' ([83e7003](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/83e7003ddb9ab22efc6b41d89b070122080b04a6))
+* Merge branch 'update-core' into 'master' ([3dc2a8e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3dc2a8ebc14953ae4b819cfc8749a16b75be7fd0))
+* Merge branch 'tm-3006-update-newsletter-form-texts' into 'master' ([d3298c8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d3298c8fb56322bf3f39124dc2be90d491fe71f7))
+
 ## [7.1.50](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.49...v7.1.50) (2022-08-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.1.50",
+  "version": "7.1.51",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "gatsby": "^4.15.0",
-    "gatsby-core-theme": "^10.0.1",
+    "gatsby-core-theme": "^11.0.0",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

package/src/components/atoms/newsletter/form/index.js

@@ -26,7 +26,6 @@ const NewsletterForm = ({
     mainText: 'You get more than 405 free spins',
     subscribeText: 'Subscribe to our newsletter and get more than 405 free spins instantly.',
   },
-  ppcPage = false,
 }) => {
   // eslint-disable-next-line react/destructuring-assignment
 
@@ -36,6 +35,43 @@ const NewsletterForm = ({
   const [loading, setLoading] = useState(false);
   const { translations } = useContext(Context) || {};
 
+  const formTextTranslated = {
+    placeholderName: translate(
+      translations,
+      'newsletter_form_first_name_placeholder',
+      formText.placeholderName
+    ),
+    placeholderEmail: translate(
+      translations,
+      'newsletter_form_email_placeholder',
+      formText.placeholderEmail
+    ),
+    placeholderPhoneNumber: translate(
+      translations,
+      'newsletter_form_phone_placeholder',
+      formText.placeholderPhoneNumber
+    ),
+    buttonText: translate(translations, 'newsletter_form_submit', formText.buttonText),
+    thankYouText: translate(translations, 'newsletter_form_thanks', formText.thankYouText),
+    textAboveEmail: translate(translations, 'newsletter_form_email_text', formText.textAboveEmail),
+    textAboveName: translate(
+      translations,
+      'newsletter_form_first_name_text',
+      formText.textAboveName
+    ),
+    textAbovePhoneNumber: translate(
+      translations,
+      'newsletter_form_phone_text',
+      formText.textAbovePhoneNumber
+    ),
+    mainText: translate(translations, 'newsletter_form_main_text', formText.mainText),
+    subscribeText: translate(
+      translations,
+      'newsletter_form_subscribe_text',
+      formText.subscribeText
+    ),
+  };
+
   const validationForm = (e) => {
     let nameValidate = false;
     let emailValidate = false;
@@ -127,48 +163,48 @@ const NewsletterForm = ({
     <>
       {!error ? (
         <>
-          <p className={styles.maintext}>{formText.mainText}</p>
+          <p className={styles.maintext}>{formTextTranslated.mainText}</p>
           <p
-            dangerouslySetInnerHTML={{ __html: formText.subscribeText }}
+            dangerouslySetInnerHTML={{ __html: formTextTranslated.subscribeText }}
             className={styles.subscribe}
           />
 
           <form ref={form} onSubmit={handelSubmit}>
-            {formText.textAboveName ? (
-              <p className={styles.textAboveInput}>{formText.textAboveName}</p>
+            {formTextTranslated.textAboveName ? (
+              <p className={styles.textAboveInput}>{formTextTranslated.textAboveName}</p>
             ) : null}
 
             <input
               className={styles.input}
-              placeholder={formText.placeholderName}
+              placeholder={formTextTranslated.placeholderName}
               type="text"
               name="name"
             />
-            {formText.textAboveEmail ? (
-              <p className={styles.textAboveInput}>{formText.textAboveEmail}</p>
+            {formTextTranslated.textAboveEmail ? (
+              <p className={styles.textAboveInput}>{formTextTranslated.textAboveEmail}</p>
             ) : null}
 
             <input
               className={styles.input}
-              placeholder={formText.placeholderEmail}
+              placeholder={formTextTranslated.placeholderEmail}
               type="email"
               name="email"
             />
-            {formText.textAbovePhoneNumber ? (
-              <p className={styles.textAboveInput}>{formText.textAbovePhoneNumber}</p>
+            {formTextTranslated.textAbovePhoneNumber ? (
+              <p className={styles.textAboveInput}>{formTextTranslated.textAbovePhoneNumber}</p>
             ) : null}
 
-            {formText.placeholderPhoneNumber && (
+            {formTextTranslated.placeholderPhoneNumber && (
               <input
                 className={styles.input}
-                placeholder={formText.placeholderPhoneNumber}
+                placeholder={formTextTranslated.placeholderPhoneNumber}
                 type="tel"
                 name="phone"
               />
             )}
             <PrivacyandSuccess
               loading={setLogading || loading}
-              btnText={formText.buttonText}
+              btnText={formTextTranslated.buttonText}
               privacyText={privacyText}
             />
           </form>
@@ -202,7 +238,6 @@ NewsletterForm.propTypes = {
   redirectUrl: PropTypes.string,
   privacyText: PropTypes.string,
   setLogading: PropTypes.bool,
-  ppcPage: PropTypes.bool,
 };
 
 export default NewsletterForm;

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

@@ -11,7 +11,7 @@ import Button from '../../atoms/newsletter/toggle-button/index';
 import Form from '../../atoms/newsletter/form/index';
 import styles from './newsletter.module.scss';
 
-const Newsletter = ({ page, openBtnText = 'Unlock Exclusive Bonuses', footer = false }) => {
+const Newsletter = ({ page, openBtnText = 'Unlock Bonuses', footer = false }) => {
   const [toggleNewsetter, setToggleNewsletter] = useState(false);
   const redirectUrl =
     page?.path === '/'

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

@@ -30,6 +30,7 @@ export default function Row({
   activeAuthor = false,
   isPPC = false,
   showLaunchDate = true,
+  showCtaReviewLink = false,
   className,
 }) {
   const result = item.authorName?.split(/\s+/);
@@ -107,7 +108,7 @@ export default function Row({
             {itemName}
           </a>
           <StarRating numOfStars={5} rating={itemRating} showLabel />
-          {!isPPC && (
+          {!isPPC && !showCtaReviewLink && (
             <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={reviewPath}>
               {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
             </Link>
@@ -153,7 +154,7 @@ export default function Row({
       )}
       <span className={styles.ctaAndReview}>
         <OperatorCta operator={item} tracker={tracker} gtmClass="toplist-operator-cta-gtm" />
-        {!isPPC && (
+        {!isPPC && showCtaReviewLink && (
           <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={reviewPath}>
             {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
           </Link>
@@ -172,6 +173,7 @@ Row.propTypes = {
   tracker: PropTypes.string,
   oneliner: PropTypes.string,
   layout: PropTypes.oneOf(['list', 'grid']),
+  showCtaReviewLink: PropTypes.bool,
   item: PropTypes.shape({
     path: PropTypes.string,
     authorName: PropTypes.string,

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

@@ -1,5 +1,18 @@
 .content {
-  width: 100%;
+  width: auto !important;
+  max-width: calc(var(--main-container-max) - 48px) !important;
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+
+  img {
+    height: auto !important;
+  }
+
+  @include min(tablet) {
+    width: 100%;
+    padding: 0 !important;
+  }
+
   div {
     display: flow-root;
   }
@@ -78,137 +91,6 @@
     }
   }
 
-  .firstTable {
-    table {
-      tbody tr td {
-        text-align: center;
-      }
-    }
-  }
-
-  .secondTable {
-    table {
-      thead {
-        tr th {
-          &:last-child {
-            text-align: left;
-          }
-        }
-      }
-
-      tbody tr td {
-        &:first-child {
-          background-color: var(--second-table-background);
-          text-align: center;
-
-          a {
-            font-weight: 700;
-          }
-        }
-
-        &:nth-child(2) {
-          text-align: center;
-        }
-      }
-    }
-  }
-
-  .stackTable {
-    @include max(mobile) {
-      table {
-        border-collapse: inherit;
-        box-shadow: 0 2px 16px #17182f14;
-
-        thead {
-          display: none;
-        }
-
-        tbody {
-          tr {
-            &:first-child {
-              td {
-                color: white !important;
-                background: var(--table-head-background);
-
-                border-radius: 0;
-
-                &:first-child {
-                  border-top-left-radius: var(--table-border-radius);
-                  border-top-right-radius: var(--table-border-radius);
-                }
-
-                a {
-                  color: white !important;
-                  text-decoration: underline;
-                }
-              }
-            }
-
-            td {
-              display: block;
-              text-align: left !important;
-              border-bottom: 1px solid #bfd3e5;
-              width: 100% !important;
-            }
-
-            &:last-child {
-              td {
-                border-radius: 0;
-                &:last-child {
-                  border-bottom-right-radius: var(--table-border-radius);
-                  border-bottom-left-radius: var(--table-border-radius);
-                  border-bottom: none;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .tableResponsive,
-  .tableResponsive > div {
-    box-sizing: content-box;
-    width: 100%;
-    table {
-      display: block;
-      width: 100%;
-      @include overflow(overflow-x, auto, touch);
-    }
-    @include scrollbar(0.8rem, 0.8rem, var(--color-33));
-
-    * {
-      box-sizing: content-box;
-    }
-
-    td,
-    th {
-      @include max(tablet) {
-        min-width: 15rem;
-      }
-      img {
-        max-width: none;
-      }
-    }
-  }
-
-  .contentFrame {
-    background-color: #E0EAEA;
-    padding: 1.6rem 2.4rem 2.4rem;
-    border-radius: .8rem;
-    box-sizing: border-box;
-    img {
-      border-radius: .8rem;
-    }
-    @include max(mobile) {
-      img {
-        margin-left: 0;
-        width: 100%;
-      }
-    }
-  }
-
   ul,
   ol {
     color: var(--color-6);
@@ -274,6 +156,148 @@
   }
 }
 
+.firstTable {
+  table {
+    tbody tr td {
+      text-align: center;
+    }
+  }
+}
+
+.secondTable {
+  table {
+    thead {
+      tr th {
+        &:last-child {
+          text-align: left;
+        }
+      }
+    }
+
+    tbody tr td {
+      &:first-child {
+        background-color: var(--second-table-background);
+        text-align: center;
+
+        a {
+          font-weight: 700;
+        }
+      }
+
+      &:nth-child(2) {
+        text-align: center;
+      }
+    }
+  }
+}
+
+.stackTable {
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+
+  @include max(mobile) {
+    margin: 1rem 1.6rem !important;
+    table {
+      border-collapse: inherit;
+      box-shadow: 0 2px 16px #17182f14;
+
+      thead {
+        display: none;
+      }
+
+      tbody {
+        tr {
+          &:first-child {
+            td {
+              color: white !important;
+              background: var(--table-head-background);
+
+              border-radius: 0;
+
+              &:first-child {
+                border-top-left-radius: var(--table-border-radius);
+                border-top-right-radius: var(--table-border-radius);
+              }
+
+              a {
+                color: white !important;
+                text-decoration: underline;
+              }
+            }
+          }
+
+          td {
+            display: block;
+            text-align: left !important;
+            border-bottom: 1px solid #bfd3e5;
+            width: 100% !important;
+          }
+
+          &:last-child {
+            td {
+              border-radius: 0;
+              &:last-child {
+                border-bottom-right-radius: var(--table-border-radius);
+                border-bottom-left-radius: var(--table-border-radius);
+                border-bottom: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.tableResponsive,
+.tableResponsive > div {
+  box-sizing: content-box;
+  width: 100%;
+  table {
+    display: block;
+    width: 100%;
+    @include overflow(overflow-x, auto, touch);
+  }
+  @include scrollbar(0.8rem, 0.8rem, var(--color-33));
+
+  * {
+    box-sizing: content-box;
+  }
+
+  td,
+  th {
+    @include max(tablet) {
+      min-width: 15rem;
+    }
+    img {
+      max-width: none;
+    }
+  }
+}
+
+.contentFrame {
+  background-color: white;
+  box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.09);
+  padding: 1.6rem 2.4rem 2.4rem !important;
+  border-radius: .8rem;
+  box-sizing: border-box;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+  
+  img {
+    border-radius: .8rem;
+  }
+  @include max(mobile) {
+    margin: 1rem 1.6rem !important;
+    img {
+      margin-left: 0;
+      width: 100%;
+    }
+  }
+}
+
+
+
 .button {
   margin: 3rem 0 0 1.6rem !important;
   border: 2px solid #171f49;

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

@@ -63,7 +63,7 @@ const Content = ({ module }) => {
       case 'table_2':
         return `${styles.tableResponsive} ${styles.secondTable}`;
       case 'stack_table':
-        return styles.stackTable;
+        return `${styles.stackTable}`;
       case 'default_table':
         return `${styles.tableResponsive}`;
       case 'content_frame_style':
@@ -81,13 +81,13 @@ const Content = ({ module }) => {
 
   return (
     <>
-      <div className={`${styles.content} ${showMore && styles.showMore}`}>
-        <div className={`${switchStyle(module.style)}`}>
-          {module.value &&
-            parse(module.value, {
-              replace: replaceMedia,
-            })}
-        </div>
+      <div
+        className={`${styles.content} ${showMore && styles.showMore} ${switchStyle(module.style)}`}
+      >
+        {module.value &&
+          parse(module.value, {
+            replace: replaceMedia,
+          })}
       </div>
       {showMore && (
         <button type="button" className={styles.button} onClick={handleChange}>