gatsby-matrix-theme 20.0.2 → 21.0.0

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+# [21.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v20.0.3...v21.0.0) (2023-05-04)
+
+
+### Bug Fixes
+
+* fix conflicts ([a06c673](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a06c67317f413e0450b92f1eefa630c15ccfd758))
+* fix info grid test ([a942892](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a942892ca4b74087d5ede58502f6270794ed2391))
+* operator card storybook ([98d088e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/98d088e6b792fefbbe0915ff749148d01d77ebeb))
+* remove null and undefined classes ([d4f5c07](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d4f5c0775ff10b1175a99a14fbb7575d6098f0f1))
+* validate classes ([7cf9015](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7cf901558efdf2068989ea011aa92b28326d1e25))
+
+
+### Code Refactoring
+
+* add common props ([e6b8dea](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e6b8dea76b4d2f1ee4166e8f06e92a76fd178483))
+* add test for info grid ([889a369](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/889a369b2ababc11a7da11918d42441975644261))
+* change storybook folder ([c9098a2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c9098a26c5d27cdd9f66dbda9b27af823478af5c))
+* correction to info grdi ([fabc767](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fabc7675e2a18892b755e36962db1d764bf4efed))
+* css variables for sitelevel ([4c02c66](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4c02c66396241b7326a648cf18972448bc40bc55))
+* minor fix when values are empty ([1d4835f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1d4835f07217d9d779745242338f26e7a3a2f6ef))
+* new changes to info grid ([80b3198](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/80b31984205543112d3e5c6f553d2ee610bb970f))
+* new changes to info grid to align with site levels ([aa7ac68](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa7ac68aa3122ddb9aa00e9d00a2fe2e047d1072))
+* new helper functions and constants for info grid ([a6a5447](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a6a544723b6761413a9f7b54a4039b92afc34e07))
+* update hooks tabs title for w3c validator ([5a2e56f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5a2e56f9bc77031b0632dcfae66ae0d38801491c))
+
+
+* Merge branch 'tm-3349-info-grid' into 'master' ([3669bed](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3669bedf64d40b23390082594ced986561509702))
+* Merge branch 'master' into tm-3349-info-grid ([0ae2318](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0ae23188c6cbb08d191d5ae5ca2bfcebf39b9d36))
+* Merge branch 'tm-3399-cleanupClases' into 'master' ([3452cb9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3452cb9a2594d22f3e8d419ebe53920a93ac99fa))
+* Merge branch 'master' into tm-3349-info-grid ([e020e56](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e020e56893bc3d416c8b3399c4d772b4fafe3b23))
+* Merge branch 'tm-3386-w3-validator-fixes' into 'master' ([1e38bd6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1e38bd6d8a43bb269193788a000158b92be2c9c0))
+* Merge branch 'master' into tm-3349-info-grid ([d10b965](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d10b96566f9a4c5fd7da80a11ecfd220ff5bfcc8))
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([806851f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/806851fe5049365d3da2f0e8ba47c17f677499e5))
+* Merge branch 'master' into tm-3349-info-grid ([9946f2c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9946f2c3384e8dbab2993bb648009c0b4a605aed))
+* Merge branch 'master' into tm-3349-info-grid ([dd267f3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dd267f3d4024acf0d422c0d972162ec45fed6979))
+
+## [20.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v20.0.2...v20.0.3) (2023-04-26)
+
+
+### Bug Fixes
+
+* update cards templates and tests in order to include the ribbon ([bd22faf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bd22faf12017789b5596de5c970d34e790635d9e))
+* update styling for ribbon ([644184b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/644184b74c0aa872d8df4293ee4241f12ada228a))
+* update to take only the first ribbon ([132b261](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/132b2611a91c7d1a8ac5e7510861176a4411f774))
+
+
+* Merge branch 'tm-3355-cards-v2-module' into 'master' ([d2ba431](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d2ba4315e9c05fa830cc5a021cec46a36c3d6537))
+
 ## [20.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v20.0.1...v20.0.2) (2023-04-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "20.0.2",
+  "version": "21.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "21.0.4",
+    "gatsby-core-theme": "21.0.6",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

package/src/components/atoms/author/socials/index.js

@@ -19,11 +19,11 @@ export default function Socials({ className = '', author }) {
 
   return (
     socialLinks.length > 0 && (
-      <div className={`${className} ${styles.socials}`}>
+      <div className={`${className || ''} ${styles.socials || ''}`}>
         {socialLinks.map((socialLink) => (
           // eslint-disable-next-line jsx-a11y/control-has-associated-label
           <a
-            className={`${styles.social} author-gtm`}
+            className={`${styles.social || ''} author-gtm`}
             href={socialLink.link}
             target="_blank"
             rel="nofollow noreferrer"

package/src/components/atoms/author-card/index.js

@@ -10,8 +10,8 @@ const AuthorCard = ({ author, width = 60, height = 60 }) => {
   const { name, author_title, email_address, image, image_alt, image_object } = author || {};
 
   return (
-    <div className={styles.authorCard}>
-      <div className={styles.img}>
+    <div className={styles.authorCard || ''}>
+      <div className={styles.img || ''}>
         <LazyImage
           src={imagePrettyUrl(image)}
           alt={getAltText(image_object, image_alt || name)}
@@ -19,11 +19,11 @@ const AuthorCard = ({ author, width = 60, height = 60 }) => {
           height={height}
         />
       </div>
-      <div className={styles.txt}>
-        <div className={styles.name}>{name}</div>
-        <div className={styles.position}>{author_title}</div>
+      <div className={styles.txt || ''}>
+        <div className={styles.name || ''}>{name}</div>
+        <div className={styles.position || ''}>{author_title}</div>
         <a
-          className={styles.email}
+          className={styles.email || ''}
           href={`mailto:${email_address}`}
           target="_blank"
           rel="nofollow noreferrer"

package/src/components/atoms/cards/article-card/template-one/index.js

@@ -25,23 +25,29 @@ const ArticleCard = ({
   const formatedDate = date && formatDate(date, 'DD.MM.YYYY', '/', 'en-GB');
 
   return (
-    <div className={styles.article}>
-      <Link to={path} className={`${styles.image} article-card-gtm`} aria-label={`${title} Link`}>
+    <div className={styles.article || ''}>
+      <Link
+        to={path}
+        className={`${styles.image || ''} article-card-gtm`}
+        aria-label={`${title} Link`}
+      >
         {banner ? (
           <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
         ) : (
           <GatsbyImg alt={title} width="100%" height="100%" filename="default-article.jpg" />
         )}
       </Link>
-      <div className={`${styles.cardContent}`}>
+      <div className={`${styles?.cardContent || ''}`}>
         <Link to={path} className="article-card-gtm">
-          <span className={styles.cardTitle}>{title}</span>
+          <span className={styles?.cardTitle || ''}>{title}</span>
         </Link>
 
         {typeof author === 'object' && (
           <div
             className={`${
-              showAuthorOnOneLine ? styles.showAuthorOnOneLine : styles.showAuthorBlock
+              showAuthorOnOneLine
+                ? styles?.showAuthorOnOneLine || ''
+                : styles?.showAuthorBlock || ''
             } `}
           >
             <LazyImage
@@ -63,7 +69,7 @@ const ArticleCard = ({
               ) : (
                 <span>{author?.name}</span>
               )}
-              {showDate && <span className={styles.noLink}>{formatedDate}</span>}
+              {showDate && <span className={styles?.noLink || ''}>{formatedDate}</span>}
             </div>
           </div>
         )}

package/src/components/atoms/cards/author/template-one/index.js

@@ -13,8 +13,8 @@ export default function TemplateOne({ item }) {
   const { translations } = useContext(Context);
 
   return (
-    <div className={styles.container}>
-      <span className={styles.posts}>
+    <div className={styles?.container || ''}>
+      <span className={styles?.posts || ''}>
         {author.pages_count} {translate(translations, 'posts', 'Posts')}
       </span>
       <LazyImage
@@ -23,15 +23,15 @@ export default function TemplateOne({ item }) {
         width={72}
         height={72}
       />
-      <span className={styles.title}>{author.author_title}</span>
-      <span className={styles.name}>{author.name}</span>
-      <Socials className={styles.socials} author={author} />
+      <span className={styles?.title || ''}>{author.author_title}</span>
+      <span className={styles?.name || ''}>{author.name}</span>
+      <Socials className={styles?.socials || ''} author={author} />
       <div
-        className={styles.bio}
+        className={styles?.bio || ''}
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: textWordsLimit(author.biography, 20) }}
       />
-      <Link className={styles.readMore} to={author.profile_page_path}>
+      <Link className={styles?.readMore || ''} to={author.profile_page_path}>
         {translate(translations, 'read_more', 'Read More')} <FaArrowRight size="1.4rem" />
       </Link>
     </div>

package/src/components/atoms/cards/comparison-table/index.js

@@ -10,9 +10,9 @@ export default function ComparisonTable({ module, page }) {
   const ele = useRef('');
 
   return (
-    <div className={styles.comparisonTable}>
+    <div className={styles?.comparisonTable || ''}>
       <ScrollX refTag={ele} scroll>
-        <div ref={ele} className={styles.contentTable}>
+        <div ref={ele} className={styles?.contentTable || ''}>
           <Table type={page?.relation_type} items={module?.items} tempate={page?.template} />
         </div>
       </ScrollX>

package/src/components/atoms/cards/comparison-table/table/index.js

@@ -248,7 +248,7 @@ export default function ComparisonTable({
       });
 
       row.push(
-        <tr key={heading.key} className={`${styles[heading.key]}_tr`}>
+        <tr key={heading.key} className={`${styles[heading.key] || 'row'}_tr`}>
           <th>{translate(translations, heading.key, heading.defaultValue)}</th>
           {cells}
         </tr>

package/src/components/atoms/cards/game-cards/template-five/index.js

@@ -45,8 +45,12 @@ const TemplateFive = ({
     : loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating'));
 
   return (
-    <div className={`${styles.baseCard} ${featured ? styles.featured : ''}`}>
-      <Link to={path} className={`game-card-gtm ${styles.cardBanner}`} aria-label={`${title} Link`}>
+    <div className={`${styles?.baseCard || ''} ${featured ? styles?.featured || '' : ''}`}>
+      <Link
+        to={path}
+        className={`game-card-gtm ${styles?.cardBanner || ''}`}
+        aria-label={`${title} Link`}
+      >
         {storybookImage || gameImage ? (
           <LazyImage
             width={width}
@@ -58,8 +62,8 @@ const TemplateFive = ({
           <GatsbyImg filename="default-slot.jpg" alt={title} />
         )}
       </Link>
-      <div className={`${styles.cardContent} ${featured && styles.featured}`}>
-        <div className={styles.cardRating}>
+      <div className={`${styles?.cardContent || ''} ${featured ? styles.featured || '' : ''}`}>
+        <div className={styles?.cardRating || ''}>
           {relation && (
             <StarRating
               numOfStars={5}
@@ -76,12 +80,12 @@ const TemplateFive = ({
           )}
         </div>
         <Link to={path} className="game-card-gtm">
-          <span className={styles.cardTitle}>{title}</span>
+          <span className={styles?.cardTitle || ''}>{title}</span>
         </Link>
-        <div className={styles.cardInner}>
+        <div className={styles?.cardInner || ''}>
           {(storybookLogo || operatorLogo) && (
             <LazyImage
-              className={styles.cardProviderLogo}
+              className={styles?.cardProviderLogo || ''}
               width={48}
               height={48}
               src={storybookLogo || imagePrettyUrl(operatorLogo.filename, width, height)}
@@ -89,12 +93,12 @@ const TemplateFive = ({
             />
           )}
           {operator && operator.path ? (
-            <Link to={operator.path} className={styles.cardProvider}>
+            <Link to={operator.path} className={styles?.cardProvider || ''}>
               {operatorText}
             </Link>
           ) : (
-            <Link to={provider?.path} className={styles.cardProvider}>
-              <div className={styles.cardProvider}>{provider?.name}</div>
+            <Link to={provider?.path} className={styles?.cardProvider || ''}>
+              <div className={styles?.cardProvider || ''}>{provider?.name}</div>
             </Link>
           )}
           {affilateLink ? (

package/src/components/atoms/cards/game-cards/template-four/index.js

@@ -38,8 +38,12 @@ const TemplateFour = ({
     : loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating'));
 
   return (
-    <div className={`${styles.baseCard} ${featured ? styles.featured : ''}`}>
-      <Link to={path} className={`game-card-gtm ${styles.cardBanner}`} aria-label={`${title} Link`}>
+    <div className={`${styles?.baseCard || ''} ${featured ? styles.featured || '' : ''}`}>
+      <Link
+        to={path}
+        className={`game-card-gtm ${styles?.cardBanner || ''}`}
+        aria-label={`${title} Link`}
+      >
         {storybookImage || gameImage ? (
           <LazyImage
             width={width}
@@ -65,20 +69,20 @@ const TemplateFour = ({
           }
         />
       )}
-      <div className={`${styles.cardContent} ${featured && styles.featured}`}>
+      <div className={`${styles?.cardContent || ''} ${featured ? styles.featured : ''}`}>
         <Link to={path} className="game-card-gtm">
-          <span className={styles.cardTitle}>{title}</span>
+          <span className={styles?.cardTitle || ''}>{title}</span>
         </Link>
-        <div className={styles.cardInner}>
+        <div className={styles?.cardInner || ''}>
           <span>
             Game Powered by:
             {operator && operator.path ? (
-              <Link to={operator.path} className={styles.cardProvider}>
+              <Link to={operator.path} className={styles?.cardProvider || ''}>
                 {operator.name}
               </Link>
             ) : (
-              <Link to={provider?.path} className={styles.cardProvider}>
-                <div className={styles.cardProvider}>{provider?.name}</div>
+              <Link to={provider?.path} className={styles?.cardProvider || ''}>
+                <div className={styles?.cardProvider || ''}>{provider?.name}</div>
               </Link>
             )}
           </span>

package/src/components/atoms/cards/game-cards/template-one/index.js

@@ -39,8 +39,12 @@ const TemplateOne = ({
     : loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating'));
 
   return (
-    <div className={`${styles.baseCard} ${featured ? styles.featured : ''}`}>
-      <Link to={path} className={`game-card-gtm ${styles.cardBanner}`} aria-label={`${title} Link`}>
+    <div className={`${styles?.baseCard || ''} ${featured ? styles.featured || '' : ''}`}>
+      <Link
+        to={path}
+        className={`game-card-gtm ${styles?.cardBanner || ''}`}
+        aria-label={`${title} Link`}
+      >
         {storybookImage || gameImage ? (
           <LazyImage
             width={width}
@@ -52,21 +56,21 @@ const TemplateOne = ({
           <GatsbyImg filename="default-slot.jpg" alt={title} />
         )}
       </Link>
-      <div className={`${styles.cardContent} ${featured && styles.featured}`}>
+      <div className={`${styles?.cardContent || ''} ${featured ? styles?.featured || '' : ''}`}>
         <Link to={path} className="game-card-gtm">
-          <span className={styles.cardTitle}>{title}</span>
+          <span className={styles?.cardTitle || ''}>{title}</span>
         </Link>
-        <div className={styles.cardInner}>
+        <div className={styles?.cardInner || ''}>
           {operator && operator.path ? (
-            <Link to={operator.path} className={styles.cardProvider}>
+            <Link to={operator.path} className={styles?.cardProvider || ''}>
               {operator.name}
             </Link>
           ) : (
-            <Link to={provider?.path} className={styles.cardProvider}>
-              <div className={styles.cardProvider}>{provider?.name}</div>
+            <Link to={provider?.path} className={styles?.cardProvider || ''}>
+              <div className={styles?.cardProvider || ''}>{provider?.name}</div>
             </Link>
           )}
-          <div className={styles.cardRating}>
+          <div className={styles?.cardRating || ''}>
             {relation && (
               <StarRating
                 numOfStars={5}

package/src/components/atoms/cards/game-cards/template-three/index.js

@@ -39,7 +39,11 @@ const TemplateThree = ({
 
   return (
     <div className={`${styles.baseCard} ${featured ? styles.featured : ''}`}>
-      <Link to={path} className={`game-card-gtm ${styles.cardBanner}`} aria-label={`${title} Link`}>
+      <Link
+        to={path}
+        className={`game-card-gtm ${styles?.cardBanner || ''}`}
+        aria-label={`${title} Link`}
+      >
         {storybookImage || gameImage ? (
           <LazyImage
             width={width}
@@ -51,8 +55,8 @@ const TemplateThree = ({
           <GatsbyImg filename="default-slot.jpg" alt={title} />
         )}
       </Link>
-      <div className={`${styles.cardContent} ${featured && styles.featured}`}>
-        <div className={styles.cardRating}>
+      <div className={`${styles?.cardContent || ''} ${featured ? styles.featured || '' : ''}`}>
+        <div className={styles?.cardRating || ''}>
           {relation && (
             <StarRating
               numOfStars={5}
@@ -69,16 +73,16 @@ const TemplateThree = ({
           )}
         </div>
         <Link to={path} className="game-card-gtm">
-          <span className={styles.cardTitle}>{title}</span>
+          <span className={styles?.cardTitle || ''}>{title}</span>
         </Link>
-        <div className={styles.cardInner}>
+        <div className={styles?.cardInner || ''}>
           {operator && operator.path ? (
-            <Link to={operator.path} className={styles.cardProvider}>
+            <Link to={operator.path} className={styles?.cardProvider || ''}>
               {operator.name}
             </Link>
           ) : (
-            <Link to={provider?.path} className={styles.cardProvider}>
-              <div className={styles.cardProvider}>{provider?.name}</div>
+            <Link to={provider?.path} className={styles?.cardProvider || ''}>
+              <div className={styles?.cardProvider || ''}>{provider?.name}</div>
             </Link>
           )}
           {affilateLink ? (

package/src/components/atoms/cards/game-cards/template-two/index.js

@@ -38,8 +38,12 @@ const TemplateTwo = ({
     : loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating'));
 
   return (
-    <div className={`${styles.baseCard} ${featured ? styles.featured : ''}`}>
-      <Link to={path} className={`game-card-gtm ${styles.cardBanner}`} aria-label={`${title} Link`}>
+    <div className={`${styles?.baseCard || ''} ${featured ? styles.featured || '' : ''}`}>
+      <Link
+        to={path}
+        className={`game-card-gtm ${styles?.cardBanner || ''}`}
+        aria-label={`${title} Link`}
+      >
         {storybookImage || gameImage ? (
           <LazyImage
             width={width}
@@ -51,12 +55,12 @@ const TemplateTwo = ({
           <GatsbyImg filename="default-slot.jpg" alt={title} />
         )}
       </Link>
-      <div className={`${styles.cardContent} ${featured && styles.featured}`}>
-        <div className={styles.cardInnerTop}>
+      <div className={`${styles?.cardContent || ''} ${featured ? styles?.featured || '' : ''}`}>
+        <div className={styles?.cardInnerTop || ''}>
           <Link to={path} className="game-card-gtm">
-            <span className={styles.cardTitle}>{title}</span>
+            <span className={styles?.cardTitle || ''}>{title}</span>
           </Link>
-          <div className={styles.cardRating}>
+          <div className={styles?.cardRating || ''}>
             {relation && (
               <StarRating
                 numOfStars={5}
@@ -73,14 +77,14 @@ const TemplateTwo = ({
             )}
           </div>
         </div>
-        <div className={styles.cardInnerBottom}>
+        <div className={styles?.cardInnerBottom || ''}>
           {operator && operator.path ? (
-            <Link to={operator.path} className={styles.cardProvider}>
+            <Link to={operator.path} className={styles?.cardProvider || ''}>
               {operator.name}
             </Link>
           ) : (
-            <Link to={provider?.path} className={styles.cardProvider}>
-              <div className={styles.cardProvider}>{provider?.name}</div>
+            <Link to={provider?.path} className={styles?.cardProvider || ''}>
+              <div className={styles?.cardProvider || ''}>{provider?.name}</div>
             </Link>
           )}
           {affilateLink ? (

package/src/components/atoms/cards/operator-card/template-four/index.js

@@ -25,12 +25,14 @@ const TemplateFour = ({
   useOneStarRating = true,
   page,
   showHalfStars = false,
+  showRibbon = false,
   showBonusAsLink = false,
   showAuthor = true,
   showRatingLabel = false,
   showRatingDecimal = false,
   verifyIcon = '../../../images/verify.svg',
 }) => {
+  const { ribbons } = item?.relation;
   const { relation, path } = item;
   const { name, status } = relation;
   const reviewPath = path || relation.path;
@@ -42,20 +44,29 @@ const TemplateFour = ({
     : loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating'));
 
   return (
-    <div className={styles.operatorCard}>
-      <div className={styles.cardHeader}>
-        <Link to={reviewPath} title={name} className={`${styles.casinoLogo} operator-card-gtm`}>
+    <div className={styles?.operatorCard || ''}>
+      <div className={styles?.cardHeader || ''}>
+        <Link
+          to={reviewPath}
+          title={name}
+          className={`${styles?.casinoLogo || ''} operator-card-gtm`}
+        >
           <LazyImage
             width={88}
             height={88}
             src={imagePrettyUrl(relation?.standardised_logo_url_object?.filename, 88, 88)}
             alt={getAltText(relation?.standardised_logo_url_object, name)}
           />
+          {showRibbon && ribbons.length > 0 && <span className={styles.ribbon}>{ribbons[0]}</span>}
         </Link>
         <Link to={reviewPath} title={name} className="operator-card-gtm">
           {name}
         </Link>
-        <div className={`${styles.headerDetails} ${showRatingLabel ? styles.showRatingLabel : ''}`}>
+        <div
+          className={`${styles?.headerDetails || ''} ${
+            showRatingLabel ? styles?.showRatingLabel || '' : ''
+          }`}
+        >
           <StarRating
             numOfStars={5}
             halfStars={showHalfStars}
@@ -64,7 +75,7 @@ const TemplateFour = ({
             showDecimal={showRatingDecimal}
           />
           {showAuthor && item?.author && (
-            <div className={styles.authorData}>
+            <div className={styles?.authorData || ''}>
               <LazyImage
                 alt={item?.author?.name}
                 loading="eager"
@@ -84,17 +95,17 @@ const TemplateFour = ({
           )}
         </div>
       </div>
-      <div className={styles.cardContent}>
+      <div className={styles?.cardContent || ''}>
         <Rating item={relation} type="operatorCards" />
-        <div className={styles.cardContentContainer}>
+        <div className={styles?.cardContentContainer || ''}>
           {!isInactive && (
-            <div className={styles.casinoText}>
+            <div className={styles?.casinoText || ''}>
               {showBonusAsLink ? (
                 <a
                   href={prettyLink}
                   target="_blank"
                   rel="noreferrer"
-                  className={`${styles.text} toplist-gtm bonus-cta`}
+                  className={`${styles?.text || ''} toplist-gtm bonus-cta`}
                 >
                   <Bonus item={relation} tracker="main" />
                 </a>
@@ -103,7 +114,7 @@ const TemplateFour = ({
               )}
             </div>
           )}
-          <div className={styles.cardFooter}>
+          <div className={styles?.cardFooter || ''}>
             {relation?.status !== 'not_recommended' && (
               <OperatorCta
                 tracker="main"
@@ -129,21 +140,21 @@ const TemplateFour = ({
             )}
           </div>
         </div>
-        <div className={styles.feedback}>
+        <div className={styles?.feedback || ''}>
           {(item?.true_votes !== null || item?.false_votes !== null) && (
-            <div className={styles.feedbackCounter}>
-              <div className={styles.likes}>
+            <div className={styles?.feedbackCounter || ''}>
+              <div className={styles?.likes || ''}>
                 <BiLike color="#3E3C47" />
                 {item?.true_votes}
               </div>
-              <div className={styles.dislikes}>
+              <div className={styles?.dislikes || ''}>
                 <BiDislike color="#3E3C47" />
                 {item?.false_votes}
               </div>
             </div>
           )}
           <ReviewLink
-            className={`${styles.reviewLink} operator-card-gtm`}
+            className={`${styles?.reviewLink || ''} operator-card-gtm`}
             template={page?.template}
             operatorName={name}
             reviewPath={reviewPath}
@@ -184,6 +195,7 @@ TemplateFour.propTypes = {
   showRatingLabel: PropTypes.bool,
   showRatingDecimal: PropTypes.bool,
   verifyIcon: PropTypes.string,
+  showRibbon: PropTypes.bool,
 };
 
 export default TemplateFour;

package/src/components/atoms/cards/operator-card/template-four/template-four.module.scss

@@ -8,6 +8,25 @@
   @include flex-direction(column);
 }
 
+.ribbon {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 2.8rem;
+  text-transform: capitalize;
+  color: #a58a5e;
+  padding: 0;
+  position: absolute;
+  bottom: -10px;
+  white-space: nowrap;
+  width: 100%;
+  @include flex-align(center, center);
+  background-color: #5545a9;
+  color: white;
+  border-radius: 100px;
+  height:18px;
+}
+
 .cardContent {
     @include flex-direction(column);
     @include flex-align(stretch, space-between);
@@ -96,6 +115,7 @@
     grid-column: 1/2;
     border: var(--cards-border);
     border-radius: 16px;
+    position: relative;
 
     img {
       width: 8.8rem;

package/src/components/atoms/cards/operator-card/template-four/template-four.stories.js

@@ -73,6 +73,12 @@ export default {
       description:
         'show decimal point for round numbers in ratings? Will only work if useOneStarRating is set to true',
     },
+    showRibbon: {
+      name: 'showRibbon',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'show ribbon',
+    },
   },
   parameters: {
     docs: {