gatsby-core-theme 30.0.52 → 30.0.54

package/.ci.yml

@@ -32,7 +32,7 @@ Theme Publish:
     - yarn config set cache-folder .yarn
     - yarn
     - cd gatsby-theme/
-    - npx semantic-release -b $CI_COMMIT_REF_NAME
+    - npx semantic-release@22.0.0 -b $CI_COMMIT_REF_NAME
   when: manual
   only:
     refs:

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [30.0.54](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.53...v30.0.54) (2024-01-16)
+
+
+### Bug Fixes
+
+* add placeholder props ([b08c89d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b08c89d6e20cacdf525b6ef27c9a9548318afdf6))
+* add specific sematic-release ([1b948a5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1b948a569794f3b61f4283cf32f2aef41946c0fc))
+* semantic-release fix ([3a2b0e9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3a2b0e9eb93d73a8c536806b74f4e6d9a285c39a))
+
+
+### Code Refactoring
+
+* add read more text ([2e2f45b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2e2f45be5210e56eb1f258ad8753a9e02dc1889c))
+* add translations and context ([5d8d926](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5d8d926c7a2200bd090bd9f154659c2536610731))
+* fix no link issue for spotlights and add variations for button types ([590fe20](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/590fe2010f02ca2009f4fc7d2a30d878269f5a82))
+* update link text and backup text ([cabb1a0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cabb1a073e3578e6f826cf192508e297dd9ce2c1))
+
+
+* Merge branch 'tm-3334-spotlights' into 'master' ([6d66760](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6d667604596dee02c73754598318bc72d31d0583))
+
+## [30.0.53](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.52...v30.0.53) (2024-01-12)
+
+
+### Bug Fixes
+
+* added page path to toplist row ([753bc26](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/753bc26caeb1f135d96374d6a6716585cd8efcbc))
+
 ## [30.0.52](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.51...v30.0.52) (2024-01-12)
 
 

package/package.json

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

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

@@ -41,27 +41,49 @@
 
   a,
   span {
-    color: var(--pagination-active-color, #2e3337);
     @extend .padd;
+    color: var(--pagination-active-color, #2e3337);
+  }
+
+  a {
+    &:hover,
+    &:focus {
+      background-color: var(--pagination-hover-background-color, var(--pagination-background-color, #eeebe5));
+      color: var(--pagination-active-hover-color, var(--pagination-active-color, #2e3337));
+    }
   }
 
   .button {
+    @extend .padd;
     cursor: not-allowed;
     color: var(--pagination-inactive-color, #ffffff);
     fill: var(--pagination-inactive-color, #ffffff);
     background-color: var(--pagination-inactive-background-color, var(--pagination-background-color, #eeebe5));
-    @extend .padd;
+    width: calc(var(--pagination-button-width, var(--pagination-width, 4rem)) - 1rem);
+    height: calc(var(--pagination-button-height, var(--pagination-height, 4rem)) - 1rem);
+    
+    @include min(mobile) {
+      width: var(--pagination-button-width, var(--pagination-width, 4rem));
+      height: var(--pagination-button-height, var(--pagination-height, 4rem));
+    }
 
     > svg {
       opacity: var(--pagination-inactive-opacity, 1);
     }
 
     &.isActive {
-      color: var(--pagination-active-color, #2e3337);
-      fill: var(--pagination-active-color, #2e3337);
-      background-color: var(--pagination-background-color, #eeebe5);
+      color: var(--pagination-active-button-color, var(--pagination-active-color, #2e3337));
+      fill: var(--pagination-active-button-color, var(--pagination-active-color, #2e3337));
+      background-color: var(--pagination-active-background-color, var(--pagination-background-color, #eeebe5));
       cursor: pointer;
 
+      &:hover,
+      &:focus {
+        color: var(--pagination-active-button-hover-color, var(--pagination-active-button-color, #2e3337));
+        fill: var(--pagination-active-button-hover-color, var(--pagination-active-button-color, #2e3337));
+        background-color: var(--pagination-active-hover-background-color, var(--pagination-active-background-color, #eeebe5));
+      }
+
       > svg {
         opacity: 1;
       }
@@ -74,6 +96,13 @@
   background-color: var(--pagination-current-page-background-color, #2e3337);
   border: var(--pagination-current-page-border, var(--pagination-border, none));
   font-weight: var(--pagination-active-font-weight, 700);
+
+  &:hover,
+  &:focus {
+    color: var(--pagination-current-page-hover-color, var(--pagination-current-page-color, #ffffff));
+    background-color: var(--pagination-current-page-hover-background-color, var(--pagination-current-page-background-color, #2e3337));
+    border: var(--pagination-current-page-hover-border, var(--pagination-current-page-border, var(--pagination-border, none)));
+  }
 }
 
 .showOfCurrent {

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

@@ -1,19 +1,21 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import LazyImage from '../../../../../hooks/lazy-image';
+import { Context } from '../../../../../context/MainProvider';
 import Link from '../../../../../hooks/link';
-import { imagePrettyUrl } from '../../../../../helpers/getters.mjs';
+import { imagePrettyUrl, translate } from '../../../../../helpers/getters.mjs';
 import styles from './template-one.module.scss';
 
 export default function TemplateOne({ module }) {
   const { items } = module;
+  const { translations } = useContext(Context) || {};
 
   const content = (res) => (
     <>
       {res?.icon && (
         <LazyImage height={106} width={106} src={imagePrettyUrl(res?.icon)} alt={res?.link_text} />
       )}
-      {res?.link_text && <p>{res?.link_text}</p>}
+      <p>{res?.link_text || translate(translations, 'read_more', 'Read more')}</p>
       {res.subtitle && <span>{res.subtitle}</span>}
     </>
   );

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

@@ -9,29 +9,32 @@ import styles from './template-one.module.scss';
 export default function TemplateOne({ module }) {
   const { items } = module;
   const { translations } = useContext(Context) || {};
+
+  const content = (res) => (
+    <>
+      {res?.image && (
+        <LazyImage width={295} height={260} src={imagePrettyUrl(res?.image)} alt={res?.link_text} />
+      )}
+      {/* Need to talk to add this field on hercules */}
+      <p>
+        {res?.link_text || translate(translations, 'link_text_spotlights', 'Top Online Casinos')}
+      </p>
+      {res.subtitle && <span>{res.subtitle}</span>}
+    </>
+  );
+
   return (
     <div className={styles?.spotlightsImage || ''}>
-      {
-        // eslint-disable-next-line react/prop-types
-        items?.map((res) => (
-          <Link to={res?.link?.value} external={res?.link?.type === 'external'}>
-            {res?.image && (
-              <LazyImage
-                width={295}
-                height={260}
-                src={imagePrettyUrl(res?.image)}
-                alt={res?.link_text}
-              />
-            )}
-            {/* Need to talk to add this field on hercules */}
-            <p>
-              {res?.link_text}{' '}
-              {translate(translations, 'link_text_spotlights', 'Top Online Casinos')}
-            </p>
-            {res.subtitle && <span>{res.subtitle}</span>}
-          </Link>
-        ))
-      }
+      {items?.map((res) => {
+        if (res.link?.value) {
+          return (
+            <Link to={res?.link?.value} external={res?.link?.type === 'external'}>
+              {content(res)}
+            </Link>
+          );
+        }
+        return <div>{content(res)}</div>;
+      })}
     </div>
   );
 }

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

@@ -10,21 +10,31 @@ import styles from './template-two.module.scss';
 export default function TemplateOne({ module }) {
   const { items } = module;
   const { translations } = useContext(Context) || {};
+
+  const content = (res) => (
+    <>
+      {res?.image && <LazyImage src={imagePrettyUrl(res?.image)} />}
+      <p>
+        {res?.link_text || translate(translations, 'link_text_spotlights', 'Top Online Casinos')}{' '}
+        <FaArrowRight size={20} color="#fff" />
+      </p>
+      {res.subtitle && <span>{res.subtitle}</span>}
+    </>
+  );
   return (
     <div className={styles?.spotlightsImage || ''}>
       {
         // eslint-disable-next-line react/prop-types
-        items?.map((res) => (
-          <Link to={res?.link?.value} external={res?.link?.type === 'external'}>
-            {res?.image && <LazyImage src={imagePrettyUrl(res?.image)} />}
-            <p>
-              {res?.link_text}{' '}
-              {translate(translations, 'link_text_spotlights', 'Top Online Casinos')}{' '}
-              <FaArrowRight size={20} color="#fff" />
-            </p>
-            {res.subtitle && <span>{res.subtitle}</span>}
-          </Link>
-        ))
+        items?.map((res) => {
+          if (res.link?.value) {
+            return (
+              <Link to={res?.link?.value} external={res?.link?.type === 'external'}>
+                {content(res)}
+              </Link>
+            );
+          }
+          return <div>{content(res)}</div>;
+        })
       }
     </div>
   );

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

@@ -7,7 +7,12 @@ import { imagePrettyUrl, translate } from '../../../../../helpers/getters.mjs';
 import { Context } from '../../../../../context/MainProvider';
 import styles from './template-one.module.scss';
 
-export default function TemplateOne({ module, scrollableContent = false }) {
+export default function TemplateOne({
+  module,
+  scrollableContent = false,
+  buttonType = 'secondary',
+  buttonSize = 'm',
+}) {
   const { items } = module;
   const { translations } = useContext(Context) || {};
 
@@ -34,8 +39,8 @@ export default function TemplateOne({ module, scrollableContent = false }) {
               {res?.link?.value && (
                 <Button
                   icon={<FaArrowRight />}
-                  buttonType="secondary"
-                  buttonSize="m"
+                  buttonType={buttonType}
+                  buttonSize={buttonSize}
                   isInternalLink={res?.link?.type !== 'external'}
                   targetBlank={res?.link?.type !== 'page'}
                   to={res?.link?.value}
@@ -58,4 +63,6 @@ TemplateOne.propTypes = {
     items: PropTypes.shape({}),
   }).isRequired,
   scrollableContent: PropTypes.bool,
+  buttonType: PropTypes.string,
+  buttonSize: PropTypes.string,
 };

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

@@ -12,7 +12,20 @@ import TemplateOne from '.';
 export default {
   title: 'Theme/Modules/Spotlight/Image Text/Template One',
   component: TemplateOne,
-  argTypes: {},
+  argTypes: {
+    buttonType: {
+      name: 'buttonType',
+      defaultValue: 'secondary',
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'radio' },
+    },
+    buttonSize: {
+      name: 'buttonType',
+      defaultValue: 'm',
+      options: ['xs', 's', 'm', 'l', 'xl', 'noSize'],
+      control: { type: 'radio' },
+    },
+  },
   parameters: {
     docs: {
       description: {

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

@@ -8,6 +8,8 @@ export default function TemplateOne({
   readMore = true,
   scrollableContent = false,
   characterMaxReadMore = 600,
+  buttonType = 'secondary',
+  buttonSize = 'm',
 }) {
   const { items } = module;
   return (
@@ -22,6 +24,8 @@ export default function TemplateOne({
               item={res}
               readMore={readMoreCheck ? readMore : false}
               scrollableContent={scrollableContent}
+              buttonType={buttonType}
+              buttonSize={buttonSize}
             />
           );
         })
@@ -37,4 +41,6 @@ TemplateOne.propTypes = {
   readMore: PropTypes.bool,
   scrollableContent: PropTypes.bool,
   characterMaxReadMore: PropTypes.number,
+  buttonType: PropTypes.string,
+  buttonSize: PropTypes.string,
 };

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

@@ -11,7 +11,13 @@ import { imagePrettyUrl, translate } from '../../../../../../helpers/getters.mjs
 import { Context } from '../../../../../../context/MainProvider';
 import styles from './style.module.scss';
 
-export default function TemplateOne({ item, readMore = false, scrollableContent = false }) {
+export default function TemplateOne({
+  item,
+  readMore = false,
+  scrollableContent = false,
+  buttonType = 'secondary',
+  buttonSize = 'm',
+}) {
   const { translations } = useContext(Context) || {};
   const [showMore, setShowMore] = useState(false);
   const TitleTag = item?.title_tag || 'label';
@@ -47,8 +53,8 @@ export default function TemplateOne({ item, readMore = false, scrollableContent
       {item?.link?.value && (
         <Button
           icon={<FaArrowRight />}
-          buttonType="secondary"
-          buttonSize="m"
+          buttonType={buttonType}
+          buttonSize={buttonSize}
           isInternalLink={item?.link?.type !== 'external'}
           targetBlank={item?.link?.type !== 'page'}
           to={item?.link?.value}
@@ -75,4 +81,6 @@ TemplateOne.propTypes = {
   }).isRequired,
   readMore: PropTypes.bool,
   scrollableContent: PropTypes.bool,
+  buttonType: PropTypes.string,
+  buttonSize: PropTypes.string,
 };

package/src/components/molecules/spotlights_v2/image-text/template-three/template-three.stories.js

@@ -12,7 +12,20 @@ import TemplateOne from '.';
 export default {
   title: 'Theme/Modules/Spotlight/Image Text/Template Three',
   component: TemplateOne,
-  argTypes: {},
+  argTypes: {
+    buttonType: {
+      name: 'buttonType',
+      defaultValue: 'secondary',
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'radio' },
+    },
+    buttonSize: {
+      name: 'buttonType',
+      defaultValue: 'm',
+      options: ['xs', 's', 'm', 'l', 'xl', 'noSize'],
+      control: { type: 'radio' },
+    },
+  },
   parameters: {
     docs: {
       description: {

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

@@ -7,7 +7,12 @@ import { imagePrettyUrl, translate } from '../../../../../helpers/getters.mjs';
 import { Context } from '../../../../../context/MainProvider';
 import styles from './template-two.module.scss';
 
-export default function TemplateOne({ module, scrollableContent = false }) {
+export default function TemplateOne({
+  module,
+  scrollableContent = false,
+  buttonType = 'secondary',
+  buttonSize = 'm',
+}) {
   const { items } = module;
   const { translations } = useContext(Context) || {};
 
@@ -33,8 +38,8 @@ export default function TemplateOne({ module, scrollableContent = false }) {
               {res?.link?.value && (
                 <Button
                   icon={<FaArrowRight />}
-                  buttonType="secondary"
-                  buttonSize="m"
+                  buttonType={buttonType}
+                  buttonSize={buttonSize}
                   isInternalLink={res?.link?.type !== 'external'}
                   targetBlank={res?.link?.type !== 'page'}
                   to={res?.link?.value}
@@ -57,4 +62,6 @@ TemplateOne.propTypes = {
     items: PropTypes.shape({}),
   }).isRequired,
   scrollableContent: PropTypes.bool,
+  buttonType: PropTypes.string,
+  buttonSize: PropTypes.string,
 };

package/src/components/molecules/spotlights_v2/image-text/template-two/template-two.stories.js

@@ -12,7 +12,20 @@ import TemplateOne from '.';
 export default {
   title: 'Theme/Modules/Spotlight/Image Text/Template Two',
   component: TemplateOne,
-  argTypes: {},
+  argTypes: {
+    buttonType: {
+      name: 'buttonType',
+      defaultValue: 'secondary',
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'radio' },
+    },
+    buttonSize: {
+      name: 'buttonType',
+      defaultValue: 'm',
+      options: ['xs', 's', 'm', 'l', 'xl', 'noSize'],
+      control: { type: 'radio' },
+    },
+  },
   parameters: {
     docs: {
       description: {

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

@@ -10,7 +10,13 @@ import { NavigationContext } from '../navigation/navigationContext';
 
 import styles from './search.module.scss';
 
-const SearchForm = ({ className, searchIcon, iconWidth = 24, iconHeight = 24 }) => {
+const SearchForm = ({
+  className,
+  searchIcon,
+  iconWidth = 24,
+  iconHeight = 24,
+  placeholder = null,
+}) => {
   const { showSearch, setShowSearch, setShowMenu, showMenu } = useContext(NavigationContext);
   const [searchBoxQuery, setSearchBoxQuery] = useState();
   const searchInputRef = useRef();
@@ -76,8 +82,8 @@ const SearchForm = ({ className, searchIcon, iconWidth = 24, iconHeight = 24 })
           <form onSubmit={formSubmitBoxHandler} className={styles.form || ''}>
             <input
               type="text"
-              aria-label="Søk spill eller casino her"
-              placeholder="Søk spill eller casino her"
+              aria-label={placeholder || 'Search...'}
+              placeholder={placeholder || 'Search...'}
               className={styles.formInput || ''}
               maxLength="60"
               ref={searchInputRef}
@@ -101,6 +107,7 @@ SearchForm.propTypes = {
   iconWidth: PropTypes.number,
   iconHeight: PropTypes.number,
   pageContext: PropTypes.shape({}),
+  placeholder: PropTypes.string,
 };
 
 export default SearchForm;

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

@@ -15,6 +15,7 @@ const TopList = ({ module, toplistHeading, page }) => {
     >
       {toplistHeading}
       <List
+        pagePath={page?.path}
         toplist={toplist}
         hasLoadMoreButton={toplist.show_load_more}
         initItemsCount={toplist.num_items_initial_load}
@@ -38,7 +39,7 @@ TopList.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   module: PropTypes.shape({ name: PropTypes.string, items: PropTypes.arrayOf(PropTypes.object) }),
   toplistHeading: PropTypes.element,
-  page: PropTypes.shape({ template: PropTypes.string }),
+  page: PropTypes.shape({ template: PropTypes.string, path: PropTypes.string }),
 };
 
 export default TopList;

package/src/components/organisms/toplist/list/index.js

@@ -13,6 +13,7 @@ export default function List({
   loadItemsCount,
   pageTemplate,
   module,
+  pagePath,
 }) {
   const initLoadItems = Number(initItemsCount) !== 0 ? Number(initItemsCount) : 10000;
   const loadingItems = Number(loadItemsCount) !== 0 ? Number(loadItemsCount) : 10000;
@@ -40,6 +41,7 @@ export default function List({
       <ul className={styles.list || ''} key={keygen()}>
         {toplist.items.map((item, index) => (
           <Row
+            pagePath={pagePath}
             item={item}
             tracker={toplist.tracker}
             pageTemplate={pageTemplate}
@@ -81,4 +83,5 @@ List.propTypes = {
   loadItemsCount: PropTypes.string,
   pageTemplate: PropTypes.string,
   module: PropTypes.string,
+  pagePath: PropTypes.string,
 };