gatsby-matrix-theme 10.0.12 → 10.0.13

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [10.0.13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v10.0.12...v10.0.13) (2023-01-17)
+
+
+### Bug Fixes
+
+* remove date and read more button also fixed the image url ([95a6b5d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/95a6b5d8f8d13f194a46157031b986f35537b41c))
+* update theme ([89fc8e3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/89fc8e3e644b61caa29c68beeb380a3111eda0c6))
+
+
+### Code Refactoring
+
+* update ul/ol bullets/numbering for spotlights module ([607f64d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/607f64def26b62969840e2564ae5ba41905aeaa6))
+* update ul/ol bullets/numbering for spotlights module ([75050a4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/75050a4305be245d96e4071cdc309ef0da8305c2))
+* update ul/ol bullets/numbering for spotlights module ([639b96c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/639b96c7bcdc7307ab311d63552d968bf4a96406))
+* update ul/ol bullets/numbering for spotlights module ([8c140b7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8c140b73b5f9806da3f7be66524a118da5652034))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([ce064bf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ce064bfa764c807db087707dd9d9c32da9c4c469))
+* Merge branch 'tm-3247-update-spotlights-bullets' into 'master' ([b7e746b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b7e746b864c57c719478fafec90e58bc65d0ef8b))
+* Merge branch 'tm-3261-remove-date-and-readnore' into 'master' ([52ba61f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/52ba61fb593b508480e5e8602c6dc8bd7518165b))
+* Merge branch 'tm-3247-update-spotlights-bullets' into 'master' ([98fdd7a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/98fdd7ab48a8ee3649af74dc48ba89b59a192605))
+
 ## [10.0.12](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v10.0.11...v10.0.12) (2023-01-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "10.0.12",
+  "version": "10.0.13",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "18.0.1",
+    "gatsby-core-theme": "18.0.2",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

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

@@ -1,24 +1,18 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable camelcase */
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
 import Link from 'gatsby-core-theme/src/hooks/link';
-import {
-  imagePrettyUrl,
-  getSectionExtraField,
-  translate,
-} from 'gatsby-core-theme/src/helpers/getters';
+import { imagePrettyUrl, getSectionExtraField } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import LazyPicture from 'gatsby-core-theme/src/hooks/lazy-picture';
-import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import Author from 'gatsby-core-theme/src/components/atoms/author';
 
 import BaseCard from '../base-card';
 import styles from './article-card.module.scss';
 
 const ArticleCard = ({ item, width, height, authorImage = false }) => {
-  const { author, updated_at, created_at, title, path, banner } = item;
+  const { author, title, path, banner } = item;
   const pictureSource = {
     webp: '../../../../../../../images/default-article.webp',
     fallback: '../../../../../../../images/default-article.jpg',
@@ -26,7 +20,6 @@ const ArticleCard = ({ item, width, height, authorImage = false }) => {
   const cardBackgroundImage = getSectionExtraField(null, item, 'card_background_image');
   const featured = !!cardBackgroundImage;
   const AuthorName = author && author.name;
-  const { translations } = useContext(Context) || {};
 
   return (
     <BaseCard item={item} cardType="article">
@@ -49,21 +42,13 @@ const ArticleCard = ({ item, width, height, authorImage = false }) => {
         <Link to={path} className="article-card-gtm">
           <span className={styles.cardTitle}>{title}</span>
         </Link>
-        <Button
-          to={path}
-          primaryColor={false}
-          btnText={translate(translations, 'read_more', 'Read More')}
-          invertColors={!featured}
-          className={styles.readMore}
-          gtmClass="article-card-gtm btn-cta"
-        />
         <div className={styles.cardMeta}>
           <Author
             prefix="by"
             name={AuthorName}
-            date={updated_at || created_at}
             isCardsAuthor
             authorImg={authorImage ? item?.author?.image : false}
+            date={false}
           />
         </div>
       </div>

package/src/components/atoms/cards/payment-method-card/index.js

@@ -1,18 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import {
-  getAltText,
-  imagePrettyUrl,
-  textWordsLimit,
-  translate,
-} from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
-import { Context } from 'gatsby-core-theme/src/context/MainProvider';
-
+import { getAltText, imagePrettyUrl, textWordsLimit } from 'gatsby-core-theme/src/helpers/getters';
 import BaseCard from '../base-card/index';
 import styles from './payment-method-card.module.scss';
 
@@ -27,7 +19,6 @@ const PaymentMethodCard = ({
   const { title, path, relation, sections } = item;
 
   const imageObject = relation?.standardised_logo_filename_object || relation?.logo_filename_object;
-  const { translations } = useContext(Context) || {};
   const StarRating =
     showRating &&
     loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'));
@@ -65,13 +56,6 @@ const PaymentMethodCard = ({
             )}
           </div>
         )}
-        <div className={styles.bottom}>
-          <Button
-            to={path}
-            btnText={translate(translations, 'read_more', 'Read More')}
-            gtmClass="payment-method-card-gtm btn-cta"
-          />
-        </div>
       </div>
     </BaseCard>
   );

package/src/components/atoms/cards/payment-method-card/payment-method-card.module.scss

@@ -1,67 +1,41 @@
-.content{
-    width: 100%;
-    background-color: #fff;
-    padding: 1.6rem 1.8rem 2.3rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    border-radius: .6rem;
-    height: 100%;
-    .header{
-        @include flex-direction(column);
+.content {
+  width: 100%;
+  background-color: #fff;
+  padding: 1.6rem 1.8rem 2.3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 0.6rem;
+  height: 100%;
+  .header {
+    @include flex-direction(column);
 
-        a:first-child {
-            height: 6rem;
-        }
-
-        .links{
-                @include flex-align(center, center);
-                
-            .logo{
-                max-height: 5rem;
-                width: auto;
-                margin-bottom: 1rem;
-            }
-            .title{
-                color: #08202e;
-                font-weight: 400;
-                padding-top: .8rem;
-                font-size: 1.6rem;
-            }
-        }
-        
-    }
-    .excerpt {
-        color: #6b7982;
-        font-size: 1.4rem;
-        padding-bottom: 1.6rem;
+    a:first-child {
+      height: 6rem;
     }
-    .bottom{
-        @include flex-direction(column);
-        .links{
-            @include flex-align(center, center);
-            &.button{
-                color: #fff;
-                background-color: var(--color-16);
-                width: 100%;
-                height: 4.4rem;
-                text-decoration: none;
-            }
-        }
-        .links:hover{
-            box-shadow: 0 0.4rem 1.6rem 0 rgba(255, 0, 54, 0.3);
-        }
-        p{
-            color: #00889e;
-            font-size: 1.4rem;
-            text-align: center;
-            padding: 0 3rem 1.6rem;
-            font-weight: 400;
-            span{
-                font-weight: 500;
-            }
-        }
-    }
-   
 
-}
+    .links {
+      @include flex-align(center, center);
+      &:hover {
+        text-decoration: underline;
+        color: #08202e;
+      }
+      .logo {
+        max-height: 5rem;
+        width: auto;
+        margin-bottom: 1rem;
+      }
+      .title {
+        color: #08202e;
+        font-weight: 400;
+        padding-top: 0.8rem;
+        font-size: 1.6rem;
+      }
+    }
+  }
+  .excerpt {
+    color: #6b7982;
+    font-size: 1.4rem;
+    padding-bottom: 1.6rem;
+  }
+}

package/src/components/atoms/cards/software-provider-card/index.js

@@ -1,16 +1,9 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import {
-  getAltText,
-  imagePrettyUrl,
-  textWordsLimit,
-  translate,
-} from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
-import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { getAltText, imagePrettyUrl, textWordsLimit } from 'gatsby-core-theme/src/helpers/getters';
 
 import BaseCard from '../base-card/index';
 import styles from './software-provider-card.module.scss';
@@ -28,9 +21,8 @@ const SoftwareProviderCard = ({
   height,
 }) => {
   const { title, path, relation, sections } = item;
-  const { translations } = useContext(Context) || {};
-  const logUrlObject = relation?.logo_object;
-
+  const logUrlObject =
+    relation?.standardised_logo_filename_object || relation?.logo_filename_object;
   return (
     <BaseCard item={item} cardType="software_provider">
       <div className={styles.content}>
@@ -44,7 +36,7 @@ const SoftwareProviderCard = ({
               width={width}
               height={height}
               className={styles.logo}
-              src={imagePrettyUrl(relation?.logo)}
+              src={imagePrettyUrl(logUrlObject?.filename, width, height)}
               alt={getAltText(logUrlObject, title)}
             />
           </Link>
@@ -70,11 +62,6 @@ const SoftwareProviderCard = ({
               {gameProvider.textTwo}
             </p>
           )}
-          <Button
-            to={path}
-            btnText={translate(translations, 'read_more', 'Read More')}
-            gtmClass="software-provider-card-gtm btn-cta"
-          />
         </div>
       </div>
     </BaseCard>
@@ -94,7 +81,12 @@ SoftwareProviderCard.propTypes = {
     relation: PropTypes.shape({
       games_count: PropTypes.number,
       logo: PropTypes.string,
-      logo_object: PropTypes.shape({}),
+      logo_filename_object: PropTypes.shape({
+        alt: PropTypes.string,
+      }),
+      standardised_logo_filename_object: PropTypes.shape({
+        alt: PropTypes.string,
+      }),
     }),
     sections: PropTypes.shape({
       header: PropTypes.shape({

package/src/components/atoms/cards/software-provider-card/software-provider-card.module.scss

@@ -1,61 +1,49 @@
-.content{
-    width: 100%;
-    background-color: #fff;
-    padding: 1.6rem 1.8rem 2.3rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    border-radius: .6rem;
-    height: 100%;
-    .header{
-        @include flex-direction(column);
-        .links{
-                @include flex-align(center, center);
-            .logo{
-                max-width: 17.9rem;
-                max-height: 4rem;
-                margin-bottom: 1rem;
-            }
-            .title{
-                color: #08202e;
-                font-weight: 400;
-                padding-top: .8rem;
-                font-size: 1.6rem;
-            }
-        }
-        
+.content {
+  width: 100%;
+  background-color: #fff;
+  padding: 1.6rem 1.8rem 2.3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 0.6rem;
+  height: 100%;
+  .header {
+    @include flex-direction(column);
+    .links {
+      @include flex-align(center, center);
+      &:hover {
+        text-decoration: underline;
+        color: #08202e;
+      }
+      .logo {
+        max-width: 17.9rem;
+        max-height: 4rem;
+        margin-bottom: 1rem;
+      }
+      .title {
+        color: #08202e;
+        font-weight: 400;
+        padding-top: 0.8rem;
+        font-size: 1.6rem;
+      }
     }
-    .excerpt {
-        color: #6b7982;
-        font-size: 1.4rem;
-        padding-bottom: 1.6rem;
+  }
+  .excerpt {
+    color: #6b7982;
+    font-size: 1.4rem;
+    padding-bottom: 1.6rem;
+  }
+  .bottom {
+    @include flex-direction(column);
+    p {
+      color: #00889e;
+      font-size: 1.4rem;
+      text-align: center;
+      padding: 0 3rem 1.6rem;
+      font-weight: 400;
+      span {
+        font-weight: 500;
+      }
     }
-    .bottom{
-        @include flex-direction(column);
-        .links{
-            @include flex-align(center, center);
-            &.button{
-                color: #fff;
-                background-color: var(--color-16);
-                width: 100%;
-                height: 4.4rem;
-                text-decoration: none;
-            }
-        }
-        .links:hover{
-            box-shadow: 0 0.4rem 1.6rem 0 rgba(255, 0, 54, 0.3);
-        }
-        p{
-            color: #00889e;
-            font-size: 1.4rem;
-            text-align: center;
-            padding: 0 3rem 1.6rem;
-            font-weight: 400;
-            span{
-                font-weight: 500;
-            }
-        }
-    }
-   
-
-}
+  }
+}

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

@@ -1,21 +1,27 @@
 .testimonials {
-  li {
+  > li {
     border: var(--spotlight-testimonials-border);
     border-radius: var(--spotlight-testimonials-border-radius);
     background-color: var(--spotlight-testimonials-background-color);
 
+    ul,
     ol {
-      counter-reset: LI_ITEM;
+      padding: 0 1.6rem 1.6rem;
+      list-style-position: inside;
 
       li {
+        display: list-item;
         flex-direction: row;
+        text-align: left;
       }
+    }
 
-      li::before {
-        margin-right: 0.4rem;
-        content: counter(LI_ITEM) '.';
-        counter-increment: LI_ITEM;
-      }
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
     }
 
     img {
@@ -63,7 +69,7 @@
   flex-direction: column;
   align-items: flex-end;
 
-  li {
+  > li {
     border: var(--spotlight-boxes-border);
     background-color: var(--spotlight-boxes-background-color);
     box-sizing: border-box;
@@ -76,18 +82,24 @@
     justify-content: center;
     width: calc(100% - 4.5rem);
 
+    ul,
     ol {
-      counter-reset: LI_ITEM;
+      padding: 0 1.6rem 1.6rem;
+      list-style-position: inside;
 
       li {
+        display: list-item;
         flex-direction: row;
+        text-align: left;
       }
+    }
 
-      li::before {
-        margin-right: 0.4rem;
-        content: counter(LI_ITEM) '.';
-        counter-increment: LI_ITEM;
-      }
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
     }
 
     > a > img,

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

@@ -14,7 +14,7 @@
     grid-template-columns: repeat(3, 1fr);
     column-gap: 1.6rem;
   }
-  li {
+  > li {
     text-align: center;
     background-color: var(--color-9);
     border: none;
@@ -27,18 +27,24 @@
 
     @include flex-direction(column);
 
+    ul,
     ol {
-      counter-reset: LI_ITEM;
+      padding: 0 1.6rem 1.6rem;
+      list-style-position: inside;
 
       li {
+        display: list-item;
         flex-direction: row;
+        text-align: left;
       }
+    }
 
-      li::before {
-        margin-right: 0.4rem;
-        content: counter(LI_ITEM) '.';
-        counter-increment: LI_ITEM;
-      }
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
     }
 
     img {

package/storybook/public/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.66d840c7.iframe.bundle.js"></script><script src="455.4a66b118.iframe.bundle.js"></script><script src="main.19dfecb4.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.66d840c7.iframe.bundle.js"></script><script src="455.4a66b118.iframe.bundle.js"></script><script src="main.eadbf337.iframe.bundle.js"></script></body></html>