gatsby-matrix-theme 5.0.5 → 5.0.8

package/.ci.yml

@@ -16,9 +16,14 @@ Matrix Theme Test:
     - yarn config set cache-folder .yarn
     - yarn
     - yarn workspace gatsby-matrix-theme test
+  artifacts:
+    paths:
+      - coverage/
   coverage: /All files\s*\|\s*([\d\.]+)/
   rules:
     - if: '$CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "master"'
+    - if: '$CI_COMMIT_BRANCH == "master" && $PIPELINE == "automated"'
+    - if: '$CI_PIPELINE_SOURCE == "push" && $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "master" && $PIPELINE == "automated"'
 
 Theme Publish:
   image: git.ilcd.rocks:4567/team-floyd/themes/gatsby-themes:node14
@@ -36,8 +41,7 @@ Theme Publish:
     - cd matrix-theme/
     - yarn
     - npx semantic-release -b $CI_COMMIT_REF_NAME
-  when:
-    manual
+  when: manual
   only:
     refs:
       - master
@@ -45,4 +49,4 @@ Theme Publish:
       - $PIPELINE != "content-trigger"
 
 variables:
-  PIPELINE: automated
+  PIPELINE: automated

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+## [5.0.8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.7...v5.0.8) (2022-03-14)
+
+
+### Bug Fixes
+
+* add variable in env file for expire time to popup ([603fa13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/603fa13e7a56ef2a2213bcd453ab70bedb17ce27))
+* lighthouse order ([38196ff](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/38196ff593eea4877ff71613d641858ea646ba84))
+* popup idle time load ([0affc3e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0affc3ea6172f7191754116da7663edfa0604ce5))
+* popup idle time load ([fea3d62](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fea3d62224a63a7d0ce2c5b2c88054b798283b96))
+* popup idle time load ([9fc819c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9fc819c2d4ac1121afa1918e625c31a9840c52c6))
+* spotlight module styling ([a957a73](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a957a739f7f8c218d26aed8cff4b97272159b8f3))
+* spotlight module styling ([0440670](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/044067018d9f5c6bf1af35115ffe5ecd8b761e99))
+
+
+* Merge branch 'tm-2692-popup-fix' into 'master' ([d7931e5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d7931e5e8bebc214ce19c6ebf4c3a118f52c733f))
+* Merge branch 'master' into 'tm-2692-popup-fix' ([cb3e51d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cb3e51d851e775524c0beb2ba8a193681d1c6c56))
+* Merge branch 'tm-2777-fix-expire-time-popup' into 'master' ([2c5851d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2c5851db7350a4dad72f5969e07d1d6302bd33d0))
+* Merge branch 'fix-ligthouse-order' into 'master' ([4a1a1e1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4a1a1e148bfab3681cabc435aa454f21c9cb19ae))
+
+## [5.0.7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.6...v5.0.7) (2022-03-10)
+
+
+### Bug Fixes
+
+* update theme version ([93021b7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/93021b744577e5b0bb0980368219539b2f82fbf5))
+
+## [5.0.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.5...v5.0.6) (2022-03-10)
+
+
+### Bug Fixes
+
+* lighthouse pipeline ([e4086ba](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e4086ba67d73a1bab6c0c32eaadfceecd438a8f5))
+* popup styling ([d8533b2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d8533b2661f71abe80177b0d7357f585213106a0))
+* spotlight boxes with icons = style ([ba7914a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ba7914a4558401350ebe0934d87acc70ad017d7d))
+* spotlight styling ([c852440](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c852440d4b902ff2a08ce8b7941737a7f7085e68))
+
+
+* Merge branch 'tm-2758-lighthouse' into 'master' ([8d1cc38](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8d1cc3824e067a3c55b8f9c8dcc85c5eee381350))
+* Merge branch 'master' of https://git.ilcd.rocks/team-floyd/themes/matrix-theme ([1fea267](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1fea267f3b6a02b5d78a7d1cea1af91cee4866b9))
+* Merge branch 'tm-2767-fix-boxes-icons' into 'master' ([e7a573e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e7a573edbabbe9047699782c58789f2b340413f1))
+
 ## [5.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.4...v5.0.5) (2022-03-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "5.0.5",
+  "version": "5.0.8",
   "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": "^5.1.1",
+    "gatsby-core-theme": "^5.1.2",
     "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

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
+import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
 import LazyImage from '~hooks/lazy-image';
 
 import styles from './popup-card.module.scss';
 
-const PopupCard = ({ item, tracker, showName = false, showTnc = false }) => {
+const PopupCard = ({ item, tracker, showName = false, showTnc = false, showRating = false }) => {
   const { logo_url: logoUrl, name } = item;
   const oneLiner = item?.one_liners?.main?.one_liner;
   const secondLiner = item?.one_liners?.secondary?.one_liner;
@@ -21,6 +22,7 @@ const PopupCard = ({ item, tracker, showName = false, showTnc = false }) => {
     <div className={styles.popupCard}>
       <div className={styles.imgContainer}>
         <LazyImage src={imagePrettyUrl(logoUrl)} alt={oneLiner} width={98} height={98} />
+        {showRating && <StarRating numOfStars={5} rating={item?.rating} />}
         {showName && <p className={styles.name}>{name}</p>}
       </div>
       <div className={styles.textContainer}>
@@ -35,9 +37,11 @@ const PopupCard = ({ item, tracker, showName = false, showTnc = false }) => {
           gtmClass="popup-operator-cta-gtm"
         />
       </div>
-      <div className={styles.tandc}>
-        {showTnc && tnc === '1' && <Tnc onlyMobile operator={item} />}
-      </div>
+      {showTnc && tnc === '1' && (
+        <div className={styles.tandc}>
+          <Tnc onlyMobile operator={item} />
+        </div>
+      )}
     </div>
   );
 };
@@ -48,6 +52,7 @@ PopupCard.propTypes = {
     links: PropTypes.shape({
       main: PropTypes.string,
     }),
+    rating: PropTypes.string,
     extra_fields: PropTypes.shape({
       terms_and_conditions_text_enabled: PropTypes.string,
     }),
@@ -64,6 +69,7 @@ PopupCard.propTypes = {
   tracker: PropTypes.string,
   showName: PropTypes.bool,
   showTnc: PropTypes.bool,
+  showRating: PropTypes.bool,
 };
 
 export default PopupCard;

package/src/components/atoms/cards/popup-card/popup-card.module.scss

@@ -15,10 +15,11 @@
 
   .imgContainer {
     width: 8rem;
-    height: 8rem;
     min-width: 8rem;
     grid-column: 1/2;
     grid-row: 1/2;
+    @include flex-direction(column);
+    @include flex-align(center, center);
 
     @include min(tablet) {
       min-width: 9.8rem;
@@ -33,6 +34,11 @@
       object-fit: contain;
     }
   }
+  .tandc{
+    grid-row: 3/4;
+    grid-column: 1/3;
+    margin-bottom: 2rem;
+  }
   .textContainer {
     display: flex;
     flex-direction: column;
@@ -64,6 +70,7 @@
         font-size: 1.8rem;
       }
     }
+   
   }
   .buttonContainer {
     margin-left: 3rem;

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

@@ -19,6 +19,7 @@ import styles from './popup.module.scss';
 const Popup = ({ module, isStorybook = false, toggle = false, icon = null }) => {
   const modal = useRef(null);
   const [showModal, setShowModal] = useState(false);
+  const [isIdle, setIsIdle] = useState(false);
   const { items } = module.items[0];
   const shownItems = items?.slice(0, 4) || [];
   const { style } = module;
@@ -36,14 +37,10 @@ const Popup = ({ module, isStorybook = false, toggle = false, icon = null }) =>
   };
 
   const idleTimeout = () => {
-    const popupExists = sessionStorage.getItem('popstate');
-    if (!popupExists) {
-      setShowModal(true);
-      sessionStorage.setItem('popstate', true);
-    }
+    setIsIdle(true);
   };
 
-  const onMouseLeave = () => {
+  const displayModal = () => {
     const popupExists = sessionStorage.getItem('popstate');
     if (!popupExists) {
       setShowModal(true);
@@ -63,6 +60,12 @@ const Popup = ({ module, isStorybook = false, toggle = false, icon = null }) =>
     }
   };
 
+  useEffect(() => {
+    if (isIdle) {
+      window.addEventListener('scroll', displayModal);
+    }
+  }, [isIdle]);
+
   useEffect(() => {
     if (showModal) {
       modal.current.classList.toggle(styles.activeModal);
@@ -75,18 +78,21 @@ const Popup = ({ module, isStorybook = false, toggle = false, icon = null }) =>
   // Close on outside click
   // Show Popup on Idle and on window leave
   useEffect(() => {
-    const expireSeconds = 20;
-    setIdleTimeout(expireSeconds, idleTimeout);
+    const time = process.env.EXPIRE_SECONDS_POPUP;
+    const expireSeconds = typeof time !== 'undefined' ? time : 20;
+
     isStorybook && setShowModal(true);
     window.addEventListener('keydown', handleEsc);
     window.addEventListener('mousedown', handleOutsideClick);
-    document.addEventListener('mouseleave', onMouseLeave);
+    window.addEventListener('load', setIdleTimeout(expireSeconds, idleTimeout));
+    document.addEventListener('mouseleave', displayModal);
 
     // Clean up event listeners after popup is closed
     return () => {
       window.removeEventListener('keydown', handleEsc);
       window.removeEventListener('mousedown', handleOutsideClick);
-      document.removeEventListener('mouseleave', onMouseLeave);
+      window.removeEventListener('load', setIdleTimeout);
+      document.removeEventListener('mouseleave', displayModal);
     };
   }, []);
 

package/src/components/organisms/popup/popup.module.scss

@@ -88,7 +88,7 @@
             right: 1.5rem;
             width: 32px;
             height: 32px;
-            background: #ffffff;
+            background: transparent;
             border-radius: 40px;
             @include flex-direction(column);
             @include flex-align(center, center);

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

@@ -45,6 +45,7 @@
   ul {
     display: flex;
     flex-direction: column;
+    align-items: flex-end;
 
     li {
       border: 1px solid var(--spotlight-boxes-border-color);
@@ -52,13 +53,12 @@
       box-sizing: border-box;
       border-radius: var(--spotlight-boxes-border-radius);
       position: relative;
-      max-width: 568px;
-      margin-left: 4.5rem;
       margin-bottom: 3rem;
       padding: 2.4rem 2.4rem 2.8rem 7.2rem;
       min-height: 15rem;
       text-align: left;
       justify-content: center;
+      width: calc(100% - 4.5rem);
 
       > a > img, > img {
         position: absolute;
@@ -77,10 +77,6 @@
         margin-top: 3rem;
       }
 
-      @include max(mobile) {
-        width: auto;
-      }
-
       > label {
         font-size: var(--spotlight-boxes-label-size);
         color: var(--spotlight-boxes-label-color);
@@ -93,12 +89,5 @@
         color: var(--spotlight-boxes-text-color);
       }
     }
-
-    li:nth-child(2n) {
-      margin-left: auto;
-      @include max(mobile) {
-        margin-left: 4.5rem;
-      }
-    }
   }
 }