gatsby-matrix-theme 14.0.0 → 15.0.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [15.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v14.0.0...v15.0.0) (2023-03-10)
+
+
+### Bug Fixes
+
+* fix for NSA newsletter on footer ([fb0c6ef](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fb0c6efddd88d470fdb7843261c4292f910e14d0))
+* slot image alt ([e4bfd06](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e4bfd06ada897e9791ad5f06c077514690c3bf99))
+* slot image alt ([c4f28b7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c4f28b74619b8f86337c6dae223c6868bd6c62aa))
+
+
+### Code Refactoring
+
+* change footer links to three ([4cae384](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4cae384008eef2623c0ee9d383952f48841cc07d))
+* changes to code review ([47a1789](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/47a1789dd1552043f516a3cafe4c2eeec22ee57c))
+
+
+* Merge branch 'tm-3298-footer' into 'master' ([e74374a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e74374a5c04f74b8254e7208f421306f1b19cbc6))
+* Merge branch 'master' into tm-3298-footer ([5455405](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/54554054746a59bcfa1e8ba5a4e570317a411a55))
+* Merge branch 'tm-3298-footer' into 'master' ([ca1f295](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ca1f2951b84db25de3a31f8d442c6ced12dc04cd))
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([4254aa1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4254aa16cc554450c37f27ba1dc2da921a6cb715))
+
+
+### Tests
+
+* fix test scripts ([b99c4c5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b99c4c5d5553ea989be65f919c9806e09863019f))
+
 # [14.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.15...v14.0.0) (2023-03-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "14.0.0",
+  "version": "15.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/atoms/footer/as-seen-on/as-seen-on.module.scss

@@ -27,7 +27,7 @@
   }
 
   > ul {
-    @include flex-align(center, center);
+    @include flex-align(flex-start, flex-start);
     flex-wrap: wrap;
 
     li {
@@ -51,16 +51,26 @@
         }
       }
     }
+
+    @include min(tablet) {
+      @include flex-align(center, center);
+    }
   }
 }
 
 .templateTwo {
   border: none;
-  @include flex-align(flex-start, center);
+  @include flex-align(flex-start, flex-start);
   padding: 0;
 
   > h5,
   > ul {
     margin: 0;
   }
+
+  > ul {
+    @include min(tablet) {
+      @include flex-align(flex-start, flex-start);
+    }
+  }
 }

package/src/components/atoms/footer/hotline/hotline.module.scss

@@ -48,6 +48,12 @@
   @include flex-direction(column);
   padding-bottom: 5rem;
 
+  > div {
+    @include min(laptop) {
+      flex: 0 1 491px;
+    }
+  }
+
   @include min(tablet) {
     .helpText {
       text-align: left;
@@ -56,5 +62,14 @@
 
   @include min(laptop) {
     @include flex-direction(row);
+    justify-content: space-between;
+
+    > div {
+      @include flex-align(flex-start, flex-start);
+    }
+
+    .phoneNum {
+      margin-left: 0;
+    }
   }
 }

package/src/components/atoms/footer/license/index.js

@@ -38,8 +38,8 @@ const FooterLicense = ({
       {socialIcons && (
         <div className={styles.socialIcons}>
           <LinkList
-            width="14"
-            height="14"
+            width="16"
+            height="16"
             singleList
             imageOnly
             lists={socialIcons}

package/src/components/atoms/footer/license/license.module.scss

@@ -58,22 +58,23 @@
 .socialIcons {  
   ul {
     @include flex-align(center, center);
+    flex-wrap: wrap;
 
     @include min(tablet) {
       @include flex-align(center, flex-start);
     }
 
     li {
-      padding: 0.9rem;
+      padding: 1.2rem;
       background-color: var(--footer-socials-background-color, var(--color-49));
       border-radius: 2rem;
-      margin-right: 1rem;
+      margin: 0 0.8rem 0.8rem 0;
 
       a {
         color: var(--footer-text-color, var(--color-4));
         display: flex;
-        width: 14px;
-        height: 14px;
+        width: 16px;
+        height: 16px;
 
         &:hover {
           color: var(--footer-text-color, var(--color-21));
@@ -104,32 +105,42 @@
 
 .templateTwo,
 .templateThree {
+  .gamblingText,
+  .socialIcons {
+    flex-basis: 100%;
+  }
+
+  .socialIcons {
+    order: 3;
+  }
+
+  .security {
+    order: 2;
+  }
+
   @include min(tablet) {
     flex-wrap: wrap;
     @include flex-align(flex-start, space-between);
     flex-direction: row;
     gap: unset;
-    flex: 0 1 480px;
+    flex: 0 1 40%;
 
     .socialIcons {
       padding: 4rem 0;
     }
-  }
 
-  .gamblingText,
-  .socialIcons {
-    flex-basis: 100%;
-  }
-
-  .security {
-    @include min(tablet) {
+    .security {
       margin: 2rem 0;  
       position: absolute;
       top: 3.5rem;
-      left: 50%;
+      left: calc(40% + 1.6rem);
     }
-  
-    @include min(laptop) {
+  }
+
+  @include min(laptop) {
+    flex: 0 1 491px;
+
+    .security {
       position: inherit;
       margin: 0;
       order: unset;

package/src/components/molecules/footer/variants/template-one/index.js

@@ -36,8 +36,6 @@ const TemplateOne = ({
 
   const AsSeenOn = asSeenOn ? loadable(() => import('../../../../atoms/footer/as-seen-on')) : null;
 
-  footerMenu.children.map((each) => each.children.splice(3));
-
   return (
     <footer>
       {AsSeenOn && <AsSeenOn asSeenOn={asSeenOn} template="templateOne" />}

package/src/components/molecules/footer/variants/template-one/template-one.module.scss

@@ -14,7 +14,7 @@
   
     > div {
       margin: 0 auto;
-      max-width: calc(var(--main-container-max) + var(--side-container));
+      max-width: calc(var(--main-container-max) + var(--side-container) - 6rem);
     }
 }
   
@@ -59,12 +59,13 @@
     > ul {
       padding: 0.5rem;
       flex-grow: 1;
+      flex-basis: 0;
+
       li {
         padding-bottom: 2rem;
   
         &:first-child {
           font-weight: 700;
-          text-transform: uppercase;
           color: var(--footer-links-heading-color, var(--color-49));
         }
   
@@ -74,21 +75,25 @@
       }
     }
 }
-  
+
 .copyrightDisclaimer {
-    margin: 3rem 0 2rem 0;
-  
-    @include min(laptop) {
-      margin: 3rem 0 2rem 0;
+  margin: 3rem 0 2rem 0;
+
+  p {
+    text-align: left;
+
+    &:last-child {
+      padding-top: 2rem;
     }
-  
+  }
+
+  @include min(laptop) {
+    margin: 3rem 0 2rem 0;
+
     p {
-      text-align: center;
-  
-      &:last-child {
-        padding-top: 2rem;
-      }
+      text-align: justify;
     }
+  }
 }
   
 .copyrightText {

package/src/components/molecules/footer/variants/template-one/template-one.test.js

@@ -131,8 +131,8 @@ describe('Show template one', () => {
       expect(getByText(footerMenu.children[2].title)).toBeTruthy();
 
       // show correct number of child lists
-      expect(getByText(footerMenu.children[1].title).closest('ul').children).toHaveLength(4);
-      expect(getByText(footerMenu.children[3].title).closest('ul').children).toHaveLength(4);
+      expect(getByText(footerMenu.children[1].title).closest('ul').children).toHaveLength(7);
+      expect(getByText(footerMenu.children[3].title).closest('ul').children).toHaveLength(5);
 
       // show correct url
       expect(

package/src/components/molecules/footer/variants/template-three/index.js

@@ -36,7 +36,7 @@ const TemplateThree = ({
 
   const AsSeenOn = asSeenOn ? loadable(() => import('../../../../atoms/footer/as-seen-on')) : null;
 
-  footerMenu.children.map((each) => each.children.splice(3));
+  footerMenu.children.splice(3);
 
   return (
     <footer>

package/src/components/molecules/footer/variants/template-three/template-three.module.scss

@@ -14,7 +14,7 @@
   
     > div {
       margin: 0 auto;
-      max-width: calc(var(--main-container-max) + var(--side-container));
+      max-width: calc(var(--main-container-max) + var(--side-container) - 6rem);
     }
 }
   
@@ -62,14 +62,18 @@
   }
 
   > ul {
-    padding: 0.5rem;
     flex-grow: 1;
+    flex-basis: 0;
+    
+    @include min(tablet) {
+      padding: 0.5rem;
+    }
+
     li {
       padding-bottom: 2rem;
 
       &:first-child {
         font-weight: 700;
-        text-transform: uppercase;
         color: var(--footer-links-heading-color, var(--color-49));
       }
 
@@ -83,10 +87,6 @@
 .copyrightDisclaimer {
   margin: 3rem 0 2rem 0;
 
-  @include min(laptop) {
-    margin: 3rem 0 2rem 0;
-  }
-
   p {
     text-align: left;
 
@@ -94,6 +94,14 @@
       padding-top: 2rem;
     }
   }
+
+  @include min(laptop) {
+    margin: 3rem 0 2rem 0;
+
+    p {
+      text-align: justify;
+    }
+  }
 }
   
 .copyrightText {

package/src/components/molecules/footer/variants/template-three/template-three.test.js

@@ -131,8 +131,8 @@ describe('Show template one', () => {
       expect(getByText(footerMenu.children[2].title)).toBeTruthy();
 
       // show correct number of child lists
-      expect(getByText(footerMenu.children[1].title).closest('ul').children).toHaveLength(4);
-      expect(getByText(footerMenu.children[3].title).closest('ul').children).toHaveLength(4);
+      expect(getByText(footerMenu.children[1].title).closest('ul').children).toHaveLength(7);
+      expect(getByText(footerMenu.children[2].title).closest('ul').children).toHaveLength(6);
 
       // show correct url
       expect(

package/src/components/molecules/footer/variants/template-two/index.js

@@ -33,7 +33,7 @@ const TemplateTwo = ({
     />
   );
 
-  footerMenu.children.map((each) => each.children.splice(3));
+  footerMenu.children.splice(3);
 
   return (
     <footer>

package/src/components/molecules/footer/variants/template-two/template-two.module.scss

@@ -14,7 +14,7 @@
   
     > div {
       margin: 0 auto;
-      max-width: calc(var(--main-container-max) + var(--side-container));
+      max-width: calc(var(--main-container-max) + var(--side-container) - 6rem);
     }
 }
   
@@ -62,14 +62,18 @@
   }
 
   > ul {
-    padding: 0.5rem;
     flex-grow: 1;
+    flex-basis: 0;
+    
+    @include min(tablet) {
+      padding: 0.5rem;
+    }
+    
     li {
       padding-bottom: 2rem;
 
       &:first-child {
         font-weight: 700;
-        text-transform: uppercase;
         color: var(--footer-links-heading-color, var(--color-49));
       }
 
@@ -83,10 +87,6 @@
 .copyrightDisclaimer {
   margin: 3rem 0 2rem 0;
 
-  @include min(laptop) {
-    margin: 3rem 0 2rem 0;
-  }
-
   p {
     text-align: left;
 
@@ -94,6 +94,14 @@
       padding-top: 2rem;
     }
   }
+
+  @include min(laptop) {
+    margin: 3rem 0 2rem 0;
+
+    p {
+      text-align: justify;
+    }
+  }
 }
   
 .copyrightText {

package/src/components/molecules/footer/variants/template-two/template-two.test.js

@@ -137,8 +137,8 @@ describe('Show template one', () => {
       expect(getByText(footerMenu.children[2].title)).toBeTruthy();
 
       // show correct number of child lists
-      expect(getByText(footerMenu.children[1].title).closest('ul').children).toHaveLength(4);
-      expect(getByText(footerMenu.children[3].title).closest('ul').children).toHaveLength(4);
+      expect(getByText(footerMenu.children[1].title).closest('ul').children).toHaveLength(7);
+      expect(getByText(footerMenu.children[2].title).closest('ul').children).toHaveLength(6);
 
       // show correct url
       expect(

package/src/components/molecules/header/variants/slot/template-one/index.js

@@ -27,7 +27,7 @@ export default function SlotHeader({ page, image }) {
       <div className={styles.slotHeader}>
         <div className={styles.data}>
           <img
-            alt={getAltText(imageObject, page?.relation?.thumbnail_filename_object?.alt)}
+            alt={getAltText(imageObject, page?.relation?.name)}
             src={imagePrettyUrl(imageObject, 170, 170)}
             width={170}
             height={170}

package/src/components/molecules/header/variants/slot/template-one/templateone.test.js

@@ -22,6 +22,7 @@ describe('summary component', () => {
 
   const page = {
     relation: {
+      name: 'Halloween',
       thumbnail_filename_object: {
         filename: 'image.jpg',
         alt: 'Halloween',

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

@@ -22,7 +22,7 @@ const Newsletter = ({ page, openBtnText = 'Unlock Bonuses', footer = false, isSt
       : `${getUrl(page?.path)}/?subscribed=true`;
 
   const newsletterFloatingContainer = useRef(React.createRef());
-  const ppcPage = page.template === 'ppc';
+  const ppcPage = page?.template === 'ppc';
 
   const statesCombined = () => {
     setToggleNewsletter(!toggleNewsetter);

package/src/gatsby-core-theme/components/pages/body/index.js

@@ -156,6 +156,7 @@ function Body({ pageContext, children, excludeTemplateInPopup = [], hideOperator
       <Footer
         section={footer}
         template={template}
+        page={pageContext?.page}
         hasFooterLinks={FooterNavigation !== null}
         footerTemplate="template_one"
       />

package/storybook-images/security.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" xmlns:v="https://vecta.io/nano"><path d="M15.63 1.65a1 1 0 0 0-.84-.2A8 8 0 0 1 8.57.18a1 1 0 0 0-1.14 0 8 8 0 0 1-6.22 1.27 1 1 0 0 0-.84.2 1 1 0 0 0-.274.348A1 1 0 0 0 0 2.43v7.45a9 9 0 0 0 3.77 7.33l3.65 2.6a1 1 0 0 0 1.16 0l3.65-2.6A9 9 0 0 0 16 9.88V2.43a1 1 0 0 0-.37-.78zM14 9.88a7 7 0 0 1-2.93 5.7L8 17.77l-3.07-2.2A7 7 0 0 1 2 9.88v-6.3a10 10 0 0 0 6-1.39 10 10 0 0 0 6 1.39v6.3zM9.54 7.6l-2.7 2.7-.9-.9c-.188-.188-.444-.294-.7-.294s-.522.106-.7.294-.294.444-.294.7.106.522.294.7l1.6 1.6a1 1 0 0 0 .71.296 1 1 0 0 0 .71-.296L11 9c.188-.188.294-.444.294-.7s-.106-.522-.294-.7-.444-.294-.7-.294-.522.106-.7.294l-.04.01z" fill="url(#A)"/><defs><linearGradient id="A" x1="15.945" y1="3.36" x2="2.181" y2="3.36" gradientUnits="userSpaceOnUse"><stop stop-color="#17d6cc"/><stop offset="1" stop-color="#17d68a"/></linearGradient></defs></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" xmlns:v="https://vecta.io/nano"><path d="M15.63 1.65a1 1 0 0 0-.84-.2A8 8 0 0 1 8.57.18a1 1 0 0 0-1.14 0 8 8 0 0 1-6.22 1.27 1 1 0 0 0-.84.2 1 1 0 0 0-.274.348A1 1 0 0 0 0 2.43v7.45a9 9 0 0 0 3.77 7.33l3.65 2.6a1 1 0 0 0 1.16 0l3.65-2.6A9 9 0 0 0 16 9.88V2.43a1 1 0 0 0-.37-.78zM14 9.88a7 7 0 0 1-2.93 5.7L8 17.77l-3.07-2.2A7 7 0 0 1 2 9.88v-6.3a10 10 0 0 0 6-1.39 10 10 0 0 0 6 1.39v6.3zM9.54 7.6l-2.7 2.7-.9-.9c-.188-.188-.444-.294-.7-.294s-.522.106-.7.294-.294.444-.294.7.106.522.294.7l1.6 1.6a1 1 0 0 0 .71.296 1 1 0 0 0 .71-.296L11 9c.188-.188.294-.444.294-.7s-.106-.522-.294-.7-.444-.294-.7-.294-.522.106-.7.294l-.04.01z" fill="#1C1A28"/><defs><linearGradient id="A" x1="15.945" y1="3.36" x2="2.181" y2="3.36" gradientUnits="userSpaceOnUse"><stop stop-color="#17d6cc"/><stop offset="1" stop-color="#17d68a"/></linearGradient></defs></svg>