gatsby-core-theme 30.0.34 → 30.0.36

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [30.0.36](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.35...v30.0.36) (2023-12-18)
+
+
+### Bug Fixes
+
+* anchor storybook ([dfa8123](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/dfa8123822358d409b3b1c007cc316880a751a84))
+
+
+### Code Refactoring
+
+* changes to settings ([3120777](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3120777b9c82077766e2b6cb49cf5810f1c43917))
+
+## [30.0.35](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.34...v30.0.35) (2023-12-18)
+
+
+### Bug Fixes
+
+* add dev data for core theme ([924b94e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/924b94e87352be7417cbb5d6b0285e0a388d7ab1))
+* anchor link ([55a7e76](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/55a7e76c868a9933697436ecbf43355a3718fddb))
+* anchor links ([999185e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/999185eee11ddfc86ee25bdfcf17038613988563))
+* make style ([cbd7c17](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cbd7c1717419cae1d58f36fe562d41483432a21a))
+* make style ([48ecae0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/48ecae03f8ba0aa3487bd2908e816a1a68251f16))
+* make style and delete unused css ([f5077d5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f5077d5b51f7188b8e6b6235a3898e8e4614d856))
+* small scss change ([5ff3c80](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5ff3c803e86858a3d65aa1eba38cad70584ac19d))
+
+
+* Merge branch 'tm-3800-anchor-link' into 'master' ([fc1e436](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fc1e4368d16e9f35f59dc53d892b7bbe48538ca2))
+
 ## [30.0.34](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.33...v30.0.34) (2023-12-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "30.0.34",
+  "version": "30.0.36",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/molecules/module/module.module.scss

@@ -2,3 +2,9 @@
   background-color: var(--module-background-color);
   padding: 4.8rem 0;
 }
+
+.anchor-module {
+  max-width: unset;
+  padding: 0;
+  margin: 0;
+}

package/src/components/molecules/spotlights_v2/icon/template-one/template-one.module.scss

@@ -17,6 +17,9 @@
     box-shadow: 0px 4px 4px -2px rgba(27, 27, 28, 0.04), 0px 6px 8px -2px rgba(27, 27, 28, 0.06);
     padding: 1.6rem 0.8rem;
     text-decoration: none;
+    @include min(laptop){
+      min-height: 29.4rem;
+    }
   }
   img {
     width: 6.4rem;
@@ -25,6 +28,8 @@
     @include min(tablet){
         width: 10.4rem;
         height: 10.4rem;
+        margin-top: 4rem;
+        margin-bottom: 1.2rem;
     }
   }
   p {
@@ -38,6 +43,7 @@
     @include min(tablet){
         font-size: 2.4rem;
         line-height: 3.2rem;
+        padding: 0 2rem;
     }
   }
   span{

package/src/components/molecules/spotlights_v2/image/template-one/template-one.module.scss

@@ -5,8 +5,17 @@
   @include flex-align(center, center);
   gap: 1.6rem;
   @include min(tablet) {
+    @include flex-direction(row);
+    @include flex-align(start, start);
+    overflow-x: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  @include min(laptop) {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
+    overflow-x: hidden;
   }
   > * {
     border-radius: 1.6rem;
@@ -15,7 +24,11 @@
     width: 100%;
     padding: 2.4rem;
     gap: 1.6rem;
+    height: 100%;
     @include flex-direction(column);
+    @include min-max(tablet, tablet) {
+      min-width: 28.8rem;
+    }
     > img {
       width: 100%;
       height: 26rem;

package/src/components/molecules/spotlights_v2/image/template-two/template-two.module.scss

@@ -5,6 +5,14 @@
   @include flex-align(center, center);
   gap: 1.6rem;
   @include min(tablet) {
+    @include flex-direction(row);
+    @include flex-align(stretch, start);
+    overflow-x: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  @include min(laptop) {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
@@ -13,7 +21,11 @@
     background: var(--spotlight-template-two-backgorund-image-mode, #fff);
     box-shadow: 0px 4px 6px -2px rgba(27, 27, 28, 0.02), 0px 12px 16px -4px rgba(27, 27, 28, 0.05);
     width: 100%;
+    height: 100%;
     @include flex-direction(column);
+    @include min-max(tablet, tablet) {
+      min-width: 28rem;
+    }
     > img {
       width: 100%;
       height: 26.8rem;
@@ -31,11 +43,11 @@
       @include flex-direction(row);
       @include flex-align(center, space-between);
       >svg{
-        width: 5.6rem;
+        min-width: 5.6rem;
         height: 5.6rem;
         background-color: var(--spotlight-template-two-button-color-image-mode, #6E33E5);
         border-radius: 100%;
-        padding:2rem
+        padding:2rem;
       }
     }
   }

package/src/components/molecules/spotlights_v2/image-text/template-one/index.js

@@ -18,7 +18,7 @@ export default function TemplateOne({ module, scrollableContent = false }) {
         items?.map((res) => {
           const TitleTag = res?.title_tag || 'label';
           return (
-            <div className={styles.item}>
+            <div className={`${styles.item} ${scrollableContent && styles.scrollContent}`}>
               <div className={styles.topSection}>
                 {res?.image && (
                   <LazyImage width={300} height={176} src={imagePrettyUrl(res?.image)} />

package/src/components/molecules/spotlights_v2/image-text/template-one/template-one.module.scss

@@ -15,7 +15,7 @@
   box-shadow: 0px 4px 6px -2px rgba(27, 27, 28, 0.02), 0px 12px 16px -4px rgba(27, 27, 28, 0.05);
   width: 100%;
   height: 100%;
-  padding: 2.4rem;
+  padding: 1.6rem;
   gap: 1.6rem;
   @include flex-direction(column);
   @include flex-align(start, space-between);
@@ -76,3 +76,6 @@
     background: #555;
   }
 }
+.scrollContent{
+  padding: 2.4rem;
+}

package/src/components/molecules/spotlights_v2/image-text/template-three/item/style.module.scss

@@ -8,23 +8,27 @@
     align-items: flex-start;
   }
   > img {
-    width: 10.4rem;
-    height: 10.4rem;
+    width: 8rem;
+    height: 8rem;
     object-fit: cover;
     border-radius: 100%;
     margin-bottom: 1.6rem;
     @include min(tablet) {
       grid-column: 1/2;
       grid-row: 1/5;
-      width: 12.6rem;
-      height: 12.6rem;
+      width: 12rem;
+      height: 12rem;
       margin-top: 4rem;
       margin-right: 2.4rem;
     }
+    @include min(laptop){
+      width: 12.6rem;
+      height: 12.6rem;
+    }
   }
   > label {
     color: var(--spotlight-template-two-label-image-text-mode, #1b1b1c);
-    font-size: 2rem;
+    font-size: 1.8rem;
     font-style: normal;
     font-weight: 700;
     line-height: 2.8rem;

package/src/components/molecules/spotlights_v2/image-text/template-three/template-three.module.scss

@@ -5,80 +5,4 @@
   @include flex-align(center, center);
   gap: 1.6rem;
 }
-.item {
-  border-radius: 1.6rem;
-  background: var(--spotlight-template-two-backgorund-image-text-mode, #fff);
-  box-shadow: 0px 4px 6px -2px rgba(27, 27, 28, 0.02), 0px 12px 16px -4px rgba(27, 27, 28, 0.05);
-  width: 100%;
-  height: 100%;
-  padding: 2.4rem;
-  gap: 1.6rem;
-  @include flex-direction(column);
-  @include flex-align(start, space-between);
-  > a {
-    height: 5.6rem;
-    width: 100%;
-  }
-}
-.topSection {
-  @include flex-direction(column);
-  @include flex-align(center, center);
-  gap: .8rem;
-  > img {
-    width: 10.4rem;
-    height: 10.4rem;
-    object-fit: cover;
-    border-radius: 100%;
-    margin-bottom: 1.6rem;
-  }
-  > label {
-    color: var(--spotlight-template-two-label-image-text-mode, #1b1b1c);
-    font-size: 2rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 2.8rem;
-    text-transform: capitalize;
-  }
-  > span {
-    color: #64646d;
-    text-align: center;
-    font-size: 1.4rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 2.2rem;
-    margin-bottom: 1.6rem;
-  }
-}
 
-.desc {
-  color: var(--uspotlight-template-one-desc-image-text-mode, #515156);
-  text-align: justify;
-  font-size: 1.6rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 2.7rem;
-  margin-bottom: 0.8rem;
-}
-
-.scroll {
-  height: 16.2rem;
-  overflow-y: scroll;
-  padding-right: 1.6rem;
-  &::-webkit-scrollbar {
-    width: 0.6rem;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #c4c4c4;
-    border-radius: 0.5rem;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #515156;
-    border-radius: 0.5rem;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
-}

package/src/components/molecules/spotlights_v2/image-text/template-two/template-two.module.scss

@@ -42,6 +42,7 @@
     font-weight: 700;
     line-height: 2.8rem;
     text-transform: capitalize;
+    text-align: center;
   }
   > span {
     color: #64646d;

package/src/components/organisms/anchor/template-one/anchor.module.scss

@@ -1,3 +1,12 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .containerAnchor {
   min-height: 8.4rem;
 }
@@ -12,10 +21,10 @@
   left: 0;
   right: 0;
   top: var(--nav-height);
-}
 
-.usingExclOperator {
-  top: calc(var(--nav-height) + var(--exc-operator-height));
+  &.usingExclOperator {
+    top: calc(var(--nav-height) + var(--exc-operator-height));
+  }
 }
 
 .progressBar {
@@ -29,18 +38,8 @@
   position: relative;
 }
 
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 .anchor {
-  position: relative;
-  max-width: var(--anchor-max-width, --main-container-max);
+  max-width: var(--main-container-max);
   margin: 0 auto;
   @include flex-direction(row);
   &::-webkit-scrollbar {
@@ -55,6 +54,7 @@
   }
   overflow-x: scroll;
 }
+
 .link {
   word-break: inherit;
   white-space: nowrap;
@@ -110,65 +110,154 @@
 .buttLeft,
 .buttRight {
   @include flex-align(center, center);
-  width: 3.2rem;
-  height: 3.2rem;
-  color: white;
-  flex: none;
-  place-self: center;
-  background-color: #262629;
-  border-radius: 10rem;
+  background-color: var(--body-background-color, white);
+  @include flex-align(center, center);
+  display: none;
+  z-index: 1;
+
+  @include custom-min(960) {
+    display: flex;
+  }
+
+  > svg {
+    width: 3.2rem;
+    height: 3.2rem;
+    padding: 0.8rem;
+    color: #ffffff;
+    background-color: #262629;
+    border-radius: 10rem;
+  }
 }
 
 .disabled {
-  color: #515156;
-  background-color: #f4f4f4;
+  > svg {
+    color: #515156;
+    background-color: #f4f4f4;
+  }
 }
 
 .staticShowButtons {
   display: flex;
-  gap: 1.6rem;
 
-  > ul.anchor {
-    margin: 0;
+  > button:first-child {
+    padding-right: 1.6rem;
   }
 
-  > button {
-    position: static;
+  > button:last-of-type {
+    padding-left: 1.6rem;
   }
 }
 
 .stickyShowButtons {
   > button:first-child {
     position: absolute;
-    top: 0.8rem;
-    left: 0;
-    margin-left: 0.8rem;
-    transform: none;
+    top: 0.6rem;
+    padding-right: 1.6rem;
+    height: 4rem;
+    @include custom-min(960) {
+      left: calc(50% - (var(--anchor-max-width, --main-container-max) / 2) - 2.6rem);
+      transform: translateX(50%);
+    }
+  }
 
-    @include custom-min(1080) {
-      left: calc(50% - (var(--anchor-max-width, var(--main-anchor-max-width, 96rem)) / 2) - 4rem);
+  > button:last-of-type {
+    position: absolute;
+    top: 0.6rem;
+    height: 4rem;
+    padding-left: 1.6rem;
+    @include custom-min(960) {
+      right: calc(50% - (var(--anchor-max-width, --main-container-max) / 2) - 2.6rem);
       transform: translateX(-50%);
     }
   }
 
-  > button:last-of-type {
+  > ul {
+    > li:first-child {
+      margin-left: 4.8rem;
+    }
+
+    > li:last-child {
+      margin-right: 4.8rem;
+    }
+  }
+}
+
+.containerAnchorFullWidth {
+  max-width: 100% !important;
+  padding: 0 !important;
+}
+
+.titleFullWidth {
+  padding: 0 1.6rem;
+  max-width: var(--anchor-max-width, --main-container-max);
+  margin: 0 auto;
+
+  @include min(tablet) {
+    padding: 0 2.4rem;
+  }
+}
+
+.staticFullScrollWidth {
+  max-width: unset;
+
+  &::before {
+    content: '';
     position: absolute;
-    top: 0.8rem;
+    top: 0;
+    left: 0;
+    display: block;
+    background-color: var(--body-background-color, white);
+    width: calc((100% - var(--anchor-max-width, --main-container-max)) / 2 + 1.6rem);
+    height: 4.5rem;
+    z-index: 1;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
     right: 0;
-    margin-right: 0.8rem;
-    transform: none;
+    display: block;
+    background-color: var(--body-background-color, white);
+    width: calc((100% - var(--anchor-max-width, --main-container-max)) / 2 + 1.6rem);
+    height: 4.5rem;
+    z-index: 1;
+  }
 
-    @include custom-min(1080) {
-      right: calc(50% - (var(--anchor-max-width, var(--main-anchor-max-width, 96rem)) / 2) - 4rem);
-      transform: translateX(50%);
-    }
+  > button:first-child {
+    position: absolute;
+    z-index: 2;
+    left: calc((100% - var(--anchor-max-width, --main-container-max)) / 2 + 1.6rem);
+    height: 4.5rem;
+    padding-right: 1.6rem;
   }
 
-  > ul.anchor {
-    margin: 0 5.5rem;
+  > button:last-of-type {
+    position: absolute;
+    z-index: 2;
+    right: calc((100% - var(--anchor-max-width, --main-container-max)) / 2 + 1.6rem);
+    height: 4.5rem;
+    padding-left: 1.6rem;
+  }
+
+  > ul {
+    max-width: unset !important;
+    margin: 0 !important;
+
+    &::-webkit-scrollbar {
+      display: block !important;
+    }
+
+    > li:first-child {
+      padding-left: calc(
+        (100% - var(--anchor-max-width, --main-container-max)) / 2 + 6.8rem
+      ) !important;
+    }
 
-    @include custom-min(1080) {
-      margin: 0 auto;
+    > li:last-child {
+      padding-right: calc(
+        (100% - var(--anchor-max-width, --main-container-max)) / 2 + 6.8rem
+      ) !important;
     }
   }
 }

package/src/components/organisms/anchor/template-one/anchor.stories.js

@@ -136,8 +136,33 @@ Default.args = {
   headerOffset: 20,
 };
 
-export const AnchorButtons = Template.bind({});
-AnchorButtons.args = {
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+  width: '90%',
+  module: {
+    items: [
+      { label: 'section-one' },
+      { label: 'section-two' },
+      { label: 'section-three' },
+      { label: 'section-four' },
+      { label: 'section-five' },
+      { label: 'section-six' },
+      { label: 'section-seven' },
+      { label: 'section-eight' },
+      { label: 'section-nine' },
+      { label: 'section-ten' },
+      { label: 'section-eleven' },
+      { label: 'section-twelf' },
+    ],
+  },
+  fullScrollWidth: true,
+  isShowButtons: true,
+  sliderGap: 10,
+  headerOffset: 80,
+};
+
+export const Buttons = Template.bind({});
+Buttons.args = {
   width: '90%',
   module: {
     items: [

package/src/components/organisms/anchor/template-one/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-unused-expressions */
 /* eslint-disable prefer-destructuring */
@@ -29,10 +30,11 @@ function Anchor({
   buttonScroll = 200,
   leftButtonIcon = <IoIosArrowBack />,
   rightButtonIcon = <IoIosArrowForward />,
+  fullScrollWidth = false,
 }) {
   const [scrollX, setScrollX] = useState(0);
   const [scrollEnd, setScrollEnd] = useState(false);
-  const [showButtons, setShowButtons] = useState(false);
+  const [showButtons, setShowButtons] = useState(isShowButtons);
 
   const itemsRef = useRef([]);
   const anchorContainerRef = useRef(null);
@@ -51,6 +53,7 @@ function Anchor({
         anchorListRef.current.offsetWidth
     );
   };
+
   const scroll = (shift) => {
     anchorListRef.current.scrollTo({
       left: anchorListRef.current.scrollLeft + shift,
@@ -149,24 +152,53 @@ function Anchor({
         anchorListRef.current.scrollLeft = 0;
       }
     } else if (anchorListRef.current) {
-      anchorListRef.current.scrollLeft = 0;
+      // anchorListRef.current.scrollLeft = 0;
     }
   };
 
   const sticky = isFixed && isSticky(stickyOffset, setActiveAnchor, anchorContainerRef);
 
+  const anchorItems = anchorList?.map((item, index) => (
+    <li className={styles.anchorItem || ''}>
+      <a
+        className={`${styles.link || ''} anchor-carousel-gtm anchor-menu-gtm`}
+        key={keygen()}
+        draggable="false"
+        // eslint-disable-next-line no-return-assign
+        ref={(el) => (itemsRef.current[index] = el)}
+        onClick={handleClick}
+        href={`#${item?.id && item.id}`}
+      >
+        {translate(translations, item.slug, item.label)}
+        {icon}
+      </a>
+    </li>
+  ));
+
   return (
-    <div className={styles.containerAnchor || ''} ref={anchorContainerRef}>
+    <div
+      className={`${styles.containerAnchor || ''} ${
+        (fullScrollWidth && !sticky && styles.containerAnchorFullWidth) || ''
+      }`}
+      ref={anchorContainerRef}
+    >
       {showTitle ? (
-        <div className={styles.anchorTitle || ''}>
+        <div className={`${styles.anchorTitle || ''} ${fullScrollWidth && styles.titleFullWidth}`}>
           <span>{translate(translations, 'anchor_title', 'Table of Contents')}</span>
         </div>
       ) : null}
       <div
         className={`${sticky ? styles.stickyContainer || '' : styles.defaultConatiner || ''} ${
-          // eslint-disable-next-line no-nested-ternary, no-undef
           showButtons ? (sticky ? styles.stickyShowButtons : styles.staticShowButtons) : ''
-        } ${exclOperator ? styles.usingExclOperator || '' : ''}`}
+        } 
+        ${
+          fullScrollWidth
+            ? sticky
+              ? styles.stickyFullScrollWidth
+              : styles.staticFullScrollWidth
+            : ''
+        }
+        ${exclOperator ? styles.usingExclOperator || '' : ''}`}
       >
         {showButtons && (
           <button
@@ -182,24 +214,10 @@ function Anchor({
           scroll={isScrollable}
           stopScrolling={() => onStopScrolling()}
           onScroll={onScroll}
+          leftPosition={scrollX}
         >
           <ul ref={anchorListRef} className={`${styles.anchor || ''}`}>
-            {anchorList?.map((item, index) => (
-              <li className={styles.anchorItem || ''}>
-                <a
-                  className={`${styles.link || ''} anchor-carousel-gtm anchor-menu-gtm`}
-                  key={keygen()}
-                  draggable="false"
-                  // eslint-disable-next-line no-return-assign
-                  ref={(el) => (itemsRef.current[index] = el)}
-                  onClick={handleClick}
-                  href={`#${item?.id && item.id}`}
-                >
-                  {translate(translations, item.slug, item.label)}
-                  {icon}
-                </a>
-              </li>
-            ))}
+            {anchorItems}
           </ul>
         </ScollX>
         {showButtons && (
@@ -240,6 +258,7 @@ Anchor.propTypes = {
   buttonScroll: PropTypes.number,
   leftButtonIcon: PropTypes.shape({}),
   rightButtonIcon: PropTypes.shape({}),
+  fullScrollWidth: PropTypes.bool,
 };
 
 export default Anchor;

package/src/constants/pick-keys.mjs

@@ -56,6 +56,7 @@ export const pickRelationKeys = {
     'one_liners',
     'bonus',
     'selling_points',
+    'founded',
     'name',
     'rating',
     'rating_casino',

package/src/constants/settings.mjs

@@ -22,6 +22,8 @@ export default {
     'partnerships.gigmedia.com': ['inactive', 'blacklisted'],
     'habibibet.org': ['inactive', 'blacklisted'],
     'xn--nt-casino-v2a.se': ['inactive', 'blacklisted'],
+    'casinomobile.co.za': [],
+    'betamericalatina.com': ['inactive', 'blacklisted'],
   },
   keep_page_extra_fields: {
     operator: {

package/src/hooks/scroll-x/index.js

@@ -37,6 +37,7 @@ const ScrollX = ({
     refTag.current.removeEventListener('mousemove', mouseMoveHandler);
     refTag.current.removeEventListener('mouseup', mouseUp);
     refTag.current.removeEventListener('mouseleave', mouseUp);
+
     stopScrolling();
   };