gatsby-matrix-theme 19.0.1 → 19.0.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [19.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.1...v19.0.2) (2023-04-12)
+
+
+### Bug Fixes
+
+* article styling ([6d7e98d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6d7e98da6da7eda8c1039d7cf7ae3a5d9cc03010))
+* conflicts ([60b9650](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/60b9650b58b61b5ab6e57072c6f8a48da75c76cb))
+* faq display front end matrix ([d379930](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d37993016fa3866e9ad955b3c0accc5f9f09967c))
+* tests ([b78f03e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b78f03e921475209f0af76e5a2919c21d5cf1fb5))
+* tests ([7145589](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7145589aad290e31505ab3a8a8eff5a81f51ba3a))
+* updaet core version ([6bf6788](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6bf6788f12ea33fa4248f0f4418fa12d23e74159))
+
+
+* Merge branch 'tm-3311-article-cards' into 'master' ([96cd092](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/96cd092a2d7d0d9ee049465385d5e5c531be1590))
+* Merge branch 'tm-3381-faq-section-matrix' into 'master' ([88a229b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/88a229b815777a3e75d70b27e76755cc03f43aa1))
+
 ## [19.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.0...v19.0.1) (2023-04-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "19.0.1",
+  "version": "19.0.2",
   "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": "20.0.0",
+    "gatsby-core-theme": "20.0.1",
     "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/template-one/article-card.module.scss

@@ -28,99 +28,57 @@
     }
   }
 }
-.cardMeta {
-  @include flex-direction(row);
+
+.image {
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 1.2rem;
+  }
+}
+
+.showAuthorOnOneLine {
   @include flex-align(center, space-between);
+  font-size: 14px;
+  line-height: 22px;
   width: 100%;
+  gap: .2rem;
 
-  > div {
-    display: grid;
-    grid-template-columns: auto 1fr;
+  img {
+    border-radius: 10rem;
   }
 
-  > div > div {
-    white-space: normal !important;
-    > a {
-      display: block !important;
-      color: #165af8 !important;
-      font-size: 1.4rem;
-      line-height: 21px;
-      font-weight: 700 !important;
-    }
-    > img {
-      position: absolute;
-      left: -0.6rem;
-      max-width: 2.4rem;
-      max-height: 2.4rem;
-    }
-    > span {
-      font-size: 1.4rem;
-      line-height: 2.2rem;
-      color: #3e3c47 !important;
-      font-weight: 500;
-    }
-    > p {
-      padding-left: 2.8rem;
-      span {
-        font-size: 1.4rem;
-        color: #3e3c47;
-        font-weight: 400;
-        line-height: 22px;
-        text-transform: capitalize;
-        white-space: nowrap;
-      }
+  > div {
+    @include flex-align(flex-start, flex-start);
+    gap: .2rem;
+    flex-grow: 1;
+    >span {
+      flex-grow: 1;
+      @include flex-align(flex-end, flex-end);
     }
   }
 }
-.cardBanner {
-  a {
-    width: 100%;
-    img {
-      height: 24rem;
-      object-fit: cover;
-      width: 100%;
-      border: var(--cards-border);
-      border-radius: 1.2rem;
-      box-sizing: content-box;
-    }
+
+.showAuthorBlock {
+  @include flex-align(center, flex-start);
+  font-size: 14px;
+  line-height: 22px;
+  width: 100%;
+  gap: .5rem;
+
+  img {
+    border-radius: 10rem;
   }
-}
 
-.showAuthorOnOneLine {
-  position: relative;
   > div {
-    @include flex-direction(column);
-    @include flex-align(flex-start, center);
-    > div {
-      padding-left: 5.6rem;
-      a {
-        &::before {
-          padding: 0 !important;
-        }
-      }
-      > span {
-        color: #6b6a72 !important;
-      }
-      img {
-        min-width: 4.8rem;
-        min-height: 4.8rem;
-        bottom: 0;
-        margin: 0 auto;
-        object-fit: cover;
-        top: -0.25rem;
-      }
-      p {
-        padding-left: 0;
-        span {
-          display: none;
-        }
-      }
-    }
-  } 
+    @include flex-align(flex-start, flex-start);
+    gap: .2rem;
+    flex-direction: column;
 
-  &.hideDate {
-    a {
-      margin: 1.3rem 0;
+    >span {
+      flex-grow: 1;
+      @include flex-align(flex-end, flex-end);
     }
   }
 }

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

@@ -1,62 +1,67 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable camelcase */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Link from 'gatsby-core-theme/src/hooks/link';
-import { imagePrettyUrl, getSectionExtraField } from 'gatsby-core-theme/src/helpers/getters';
+import { imagePrettyUrl, translate } 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 Author from 'gatsby-core-theme/src/components/atoms/author';
-
+import { formatDate } from '~helpers/date-time';
+import { Context } from '~context/MainProvider';
 import styles from './article-card.module.scss';
 
-const ArticleCard = ({ showAuthorOnOneLine = false, item, width, height, showDate = true }) => {
+const ArticleCard = ({
+  showAuthorOnOneLine = false,
+  item,
+  width = 360,
+  height = 240,
+  showDate = true,
+}) => {
   const { author, title, path, banner } = item;
-  const pictureSource = {
-    webp: '../../../../../../../images/default-article.webp',
-    fallback: '../../../../../../../images/default-article.jpg',
-  };
-  const cardBackgroundImage = getSectionExtraField(null, item, 'card_background_image');
-  const featured = !!cardBackgroundImage;
+  const { translations } = useContext(Context) || {};
+  const imgSize = showAuthorOnOneLine ? 30 : 48;
+  const date = item?.updated_at || item?.created_at;
+  const formatedDate = date && formatDate(date, 'DD.MM.YYYY', '/', 'en-GB');
 
   return (
     <div className={styles.article}>
-      {!featured && (
-        <div className={styles.cardBanner}>
-          <Link to={path} className="article-card-gtm" aria-label={`${title} Link`}>
-            {banner ? (
-              <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
-            ) : (
-              <LazyPicture
-                webp={pictureSource.webp}
-                fallback={pictureSource.fallback}
-                alt={title}
-              />
-            )}
-          </Link>
-        </div>
+      {banner && (
+        <Link to={path} className={`${styles.image} article-card-gtm`} aria-label={`${title} Link`}>
+          <LazyImage
+            width={width}
+            height={height}
+            src={imagePrettyUrl(banner, width, height)}
+            alt={title}
+          />
+        </Link>
       )}
-      <div className={`${styles.cardContent} ${featured && styles.featured}`}>
+      <div className={`${styles.cardContent}`}>
         <Link to={path} className="article-card-gtm">
           <span className={styles.cardTitle}>{title}</span>
         </Link>
+
         {typeof author === 'object' && (
           <div
-            className={`${styles.cardMeta} ${showAuthorOnOneLine && styles.showAuthorOnOneLine} ${
-              !showDate ? styles.hideDate : ''
-            }`}
+            className={`${
+              showAuthorOnOneLine ? styles.showAuthorOnOneLine : styles.showAuthorBlock
+            } `}
           >
-            <Author
-              prefix="by"
-              name={author?.name}
-              splitDateFormat="/"
-              isCardsAuthor
-              authorImg={author?.image}
-              date={showDate ? item?.updated_at || item?.created_at : null}
-              link={author?.profile_page_path}
-              authorImageHeight={showAuthorOnOneLine ? 48 : 30}
-              authorImageWidth={showAuthorOnOneLine ? 48 : 30}
+            <LazyImage
+              alt={author?.name}
+              width={imgSize}
+              height={imgSize}
+              src={imagePrettyUrl(author?.image, imgSize, imgSize)}
             />
+            <div>
+              {showAuthorOnOneLine && (
+                <p>
+                  <span>{translate(translations, 'by', 'By')}</span>
+                </p>
+              )}
+              <Link to={author?.profile_page_path} title={author?.name}>
+                {author?.name}
+              </Link>
+              {showDate && <span className={styles.noLink}>{formatedDate}</span>}
+            </div>
           </div>
         )}
       </div>

package/src/components/atoms/cards/article-card/template-one/template-one.test.js

@@ -18,28 +18,33 @@ const item = {
 
 describe('ArticleCard', () => {
   it('render Article Card', () => {
-    const { getByLabelText, getByText } = render(
+    const { getByText } = render(
       <ArticleCard item={item} width={200} height={200} showAuthorOnOneLine={false} />
     );
-    expect(getByLabelText('Sample Article Link')).toBeInTheDocument();
+
     expect(getByText('Sample Article')).toBeInTheDocument();
     expect(getByText('John Doe')).toBeInTheDocument();
+    expect(getByText('01/02/2022')).toBeInTheDocument();
   });
 
   it('should render the article card with author on one line', () => {
-    const { getByLabelText, getByText } = render(
+    const { getByText } = render(
       <ArticleCard item={item} width={200} height={200} showAuthorOnOneLine />
     );
-    expect(getByLabelText('Sample Article Link')).toBeInTheDocument();
+    expect(getByText('By')).toBeInTheDocument();
+    expect(getByText('John Doe')).toBeInTheDocument();
+    expect(getByText('01/02/2022')).toBeInTheDocument();
     expect(getByText('Sample Article')).toBeInTheDocument();
   });
 
   it('without a banner image', () => {
     const itemWithoutBanner = { ...item, banner: null };
-    const { getByLabelText, getByText } = render(
+    const { getByText } = render(
       <ArticleCard item={itemWithoutBanner} width={200} height={200} showAuthorOnOneLine={false} />
     );
-    expect(getByLabelText('Sample Article Link')).toBeInTheDocument();
+
+    expect(getByText('John Doe')).toBeInTheDocument();
+    expect(getByText('01/02/2022')).toBeInTheDocument();
     expect(getByText('Sample Article')).toBeInTheDocument();
   });
 

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

@@ -59,7 +59,11 @@ const Modules = ({ module, page, pageContext, index, exclOperator }) => {
       case 'spotlights':
         return loadable(() => import('gatsby-core-theme/src/components/atoms/spotlights'));
       case 'faq':
-        return loadable(() => import('../../../../components/molecules/faq'));
+        // eslint-disable-next-line react/destructuring-assignment
+        if (moduleItem?.display_front_end === '1') {
+          return loadable(() => import('../../../../components/molecules/faq'));
+        }
+        return null;
       // Template blocks
       case 'horse_racing_calculator':
         return loadable(() => import('../../../../components/molecules/horse-calculator'));