gatsby-matrix-theme 51.0.2 → 51.0.4

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [51.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v51.0.3...v51.0.4) (2024-09-06)
+
+
+### Bug Fixes
+
+* added admin feature ([7b043df](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7b043df83831e60610825392e8cd976aea5d9bd3))
+* added admin feature ([e164e01](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e164e015674befd4ba0a9a0d6d6b921a5ad4d407))
+
+
+* Merge branch 'tm-4748-admin-bar' into 'master' ([98ef4c9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/98ef4c90fde0d0a7eb1926bca75d79a9ef7fc8ca))
+
+## [51.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v51.0.2...v51.0.3) (2024-09-05)
+
+
+### Bug Fixes
+
+* updated theme ([4ef3796](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4ef379613041942d60331ff3bbcd695463e9014b))
+
 ## [51.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v51.0.1...v51.0.2) (2024-09-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "51.0.2",
+  "version": "51.0.4",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "39.0.3",
+    "gatsby-core-theme": "39.0.5",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "prop-types": "15.7.2",

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

@@ -16,7 +16,6 @@ function renderComponent(pageData) {
   return render(
     <MainProvider
       value={{
-        bannerIsActive: false,
         cookieAccepted: true,
         translations,
       }}
@@ -32,10 +31,6 @@ beforeEach(() => {
   data = getPageData();
 });
 describe('Show template two', () => {
-  test('render with props', () => {
-    const { container } = renderComponent(data);
-    expect(container.querySelector('.templateTwo')).toBeTruthy();
-  });
   test('render without featured image', () => {
     data.featured_image_object = null;
 
@@ -45,11 +40,11 @@ describe('Show template two', () => {
 
     const { container } = renderComponent(data);
     expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelector('.blendColors')).toBeTruthy();
+    expect(container.querySelector('.blendColors')).toBeInTheDocument();
   });
   test('show correct oneLiner', () => {
     const { container } = renderComponent(data);
-    expect(container.querySelector('.headerContainer').querySelector('h1')).toBeTruthy();
+    expect(container.querySelector('.headerContainer').querySelector('h1')).toBeInTheDocument();
     expect(container.querySelector('.headerContainer').querySelector('h1').innerHTML).toBe(
       getBonus('main', getExtraField(data?.extra_fields, 'operator'))
         .one_liner.replace('+', '&')
@@ -70,7 +65,6 @@ describe('Show template two', () => {
     func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
     const { container } = renderComponent(data);
 
-    expect(container.querySelector('img')).toBeTruthy();
     expect(container.querySelector('img')).toHaveAttribute(
       'src',
       imagePrettyUrl(imgObj.filename, imgObj.width, imgObj.height)

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

@@ -21,6 +21,10 @@
   }
 }
 
+.adminBar {
+  margin-top: calc(var(--nav-height) + 4.7rem);
+}
+
 .skeletonoperator {
   min-height: 37.5rem;
 

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

@@ -13,7 +13,7 @@ import Verify from '~images/icons/verify';
 import styles from './header.module.scss';
 
 export default function Header({ section, numOfStarsRating = 5, showAuthor }) {
-  const { bannerIsActive } = useContext(Context) || {};
+  const { admin } = useContext(Context) || {};
   const customStyles = section.page.path === '/' ? 'homepage' : section.page.path.replace('/', '-');
   const getDefaultHeader = () => {
     let props = {
@@ -286,7 +286,7 @@ export default function Header({ section, numOfStarsRating = 5, showAuthor }) {
             ? styles[section?.page?.page_styles?.short_name] || ''
             : ''
         } 
-        ${bannerIsActive && styles.bannerIsActive ? styles.bannerIsActive : ''}
+        ${admin ? styles.adminBar : ""}
         ${styles[customStyles] ? styles[customStyles] || '' : ''}
         `}
     >

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

@@ -1,18 +1,20 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/prop-types */
 /* eslint-disable no-else-return */
-import React, { lazy, Suspense } from 'react';
+import React, { lazy, Suspense, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { anchorLink } from 'gatsby-core-theme/src/helpers/strings';
 import { prettyTracker, getSectionExtraField } from 'gatsby-core-theme/src/helpers/getters';
 import Content from 'gatsby-core-theme/src/components/molecules/content';
 import Toplist from 'gatsby-core-theme/src/components/organisms/toplist';
 import Anchor from 'gatsby-core-theme/src/components/organisms/anchor/template-one';
+import { Context } from '~context/MainProvider.js';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import Cards from '../../../../components/organisms/cards';
 import ModuleTitle from '../../atoms/module-title';
 import InfoGrid from '../../../../components/atoms/info-grid/template-one';
 import CountrySelector from '../../../../components/atoms/country-selector';
+import AdminButton from '~atoms/admin/button';
 import { getApiQueryParams } from '../../../helpers/sportstake';
 import { removeSymbols } from '../../../../helpers/strings';
 import { generateCustomHeadings } from '../../../helpers/lotto';
@@ -22,7 +24,7 @@ import styles from './module.module.scss';
 const Modules = ({ module, pageContext, index, exclOperator, serverData }) => {
   const { page } = pageContext;
   const { siteSchema } = page || {};
-
+  const { admin } = useContext(Context) || {};
   const socialIcons =
     siteSchema &&
     (({ instagram, facebook, twitter, linkedin, youtube }) => ({
@@ -343,7 +345,9 @@ const Modules = ({ module, pageContext, index, exclOperator, serverData }) => {
         style={module.background_color && moduleBackgroundColor}
         className={`${styles[moduleClassName] !== undefined ? styles[moduleClassName] || '' : ''} ${
           module?.name || ''
-        } ${showModuleIntro ? '' : styles.noModuleIntro} ${styles?.module || ''} ${
+        } ${showModuleIntro ? '' : styles.noModuleIntro}
+        ${!showModuleIntro && module.name !== 'cards_v2' ? styles.noModuleIntroCards : ''} 
+        ${styles?.module || ''} ${
           module?.style ? styles[module.style] || '' : ''
         } module ${homepageFirstModule ? styles?.isHomepageFirstModule || '' : ''}`}
       >
@@ -396,6 +400,7 @@ const Modules = ({ module, pageContext, index, exclOperator, serverData }) => {
             />
           </Suspense>
         )}
+         {admin && <AdminButton page={page} module={module} /> }
       </div>
     )
   );

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

@@ -2,9 +2,12 @@
   background-color: var(--module-background-color, #fff);
   padding-bottom: var(--module-bottom-spacing);
   scroll-margin-top: calc(var(--nav-height-mobile, 6rem) + var(--nav-anchor-height, 4rem));
+
   @include min(laptop){
     scroll-margin-top: calc(var(--nav-height-desktop, 8rem) + var(--nav-anchor-height, 4rem));
   }
+
+  position: relative;
 }
 
 .widgetModule {
@@ -16,6 +19,7 @@
   display: flex;
   flex-direction: column;
   margin: 0 auto;
+
   > h2 {
     width: 100%;
   }
@@ -24,6 +28,7 @@
 .module_introduction {
   font-weight: 400;
 }
+
 .cards_v2Module.template_two,
 .cardsModule.template_two {
   gap: 8rem;
@@ -31,7 +36,6 @@
   padding: 0;
 
   @include min(tablet) {
-    padding: 4rem 0 4rem 4rem;
     display: grid;
     grid-template-columns: 1fr 2fr;
     justify-content: center;
@@ -53,23 +57,21 @@
     }
 
     > div {
+      margin: 0 !important;
+      padding: 0 !important;
+
       @include min(desktop) {
         max-width: 130rem !important;
       }
     }
   }
 
-  > div:first-child {
-    > div {
-      margin: 0 !important;
-      padding: 0 !important;
-    }
-  }
-
   > div:last-of-type {
     max-width: 100%;
     flex-basis: 60%;
+
     @include flex-direction(row);
+
     overflow-x: auto;
 
     &::-webkit-scrollbar {
@@ -77,6 +79,7 @@
       width: 0.6rem;
       display: none;
     }
+
     &::-webkit-scrollbar-track {
       background: #bdc33f;
 
@@ -84,6 +87,7 @@
         border-radius: 10rem;
       }
     }
+
     &::-webkit-scrollbar-thumb {
       background-color: #515156;
 
@@ -91,27 +95,26 @@
         border-radius: 10rem;
       }
     }
+
     @include min(tablet) {
-      padding: 2rem 0 2rem 0;
+      padding: 2rem 0;
     }
 
     > div {
       min-width: 29.6rem;
+      margin-right: 0.8rem;
 
       @include min(tablet) {
         min-width: 34.3rem;
       }
     }
-
-    > div {
-      margin-right: 0.8rem;
-    }
   }
 
   &.noModuleIntro {
     @include flex-direction(column);
+
     gap: 1.6rem;
-    padding: 4rem 0 4rem 0;
+    padding: 4rem 0;
 
     > div {
       max-width: 130rem;
@@ -127,6 +130,7 @@
 
     > div:last-of-type {
       padding: 0 0 8rem 1.6rem;
+
       &::-webkit-scrollbar {
         display: none;
       }
@@ -142,9 +146,12 @@
   font-weight: 700;
   line-height: 2.7rem; 
   text-transform: capitalize;
+
   @include flex-align(center, flex-start);
+
   color: #165AF8;
   gap: .4rem;
+
   svg{
     margin-top: .2rem;
   }