gatsby-core-theme 44.0.9 → 44.0.11

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [44.0.11](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.10...v44.0.11) (2025-04-03)
+
+
+### Bug Fixes
+
+* create a ribbon component ([7d53c66](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/7d53c66d5a2b69fcba6fc55bbc1a79bbc2810fe6))
+* [secure] by default ([515ec1b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/515ec1b6b406ea1fac161e9dbef890bf24ffd33b))
+* fix tests ([06e561d](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/06e561d77f5e364feafd99dd07e1de08864419f7))
+* replace ribbons ([1288549](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/12885491aff16481c85c1daeb20d78527e685fde))
+
+
+* Merge branch 'ribbons' into 'master' ([d581d6a](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/d581d6a628916f7ca0200e84c1e083e1955b43bf))
+
+## [44.0.10](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.9...v44.0.10) (2025-04-03)
+
+
+### Bug Fixes
+
+* added new key in card items ([62acaee](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/62acaee9660d24f9a868dceda0a27d6b6ccad271))
+
 ## [44.0.9](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.8...v44.0.9) (2025-04-01)
 
 

package/package.json

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

package/src/components/atoms/ribbons/index.js

@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import keygen from "~helpers/keygen";
+import styles from "./ribbon.module.scss";
+
+export default function Ribbons({ item, customStyle="" }) {
+  if (!item) {
+    return null;
+  }
+  return (
+    <div className={`${styles.ribbons || ""} ${customStyle}`}>
+      {item &&
+        item.map((ribbon) => <span key={keygen}>{ribbon}</span>)}
+    </div>
+  );
+}
+
+Ribbons.propTypes = {
+  item: PropTypes.arrayOf(PropTypes.string).isRequired,
+  customStyle: PropTypes.string,
+};

package/src/components/atoms/ribbons/ribbon.module.scss

@@ -0,0 +1,28 @@
+.ribbons {
+  position: absolute;
+  top: -1rem;
+
+  @include flex-direction(row);
+
+  gap: 1rem;
+
+  > span {
+    color: var(--robbons-text, #fff);
+    padding: 0.2rem 1rem;
+    background-color: var(--background-color, #000);
+    border-radius: 1rem;
+  }
+}
+
+.templateTwoRibbon {
+  position: static;
+  width: fit-content;
+  margin-top: 1.2rem;
+
+  @include min(tablet) {
+    position: absolute;
+    top: 2.4rem;
+    right: 2.4rem;
+    margin-top: 0;
+  }
+}

package/src/components/atoms/ribbons/ribbons.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Ribbon from './index';
+
+describe('Ribbon component', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Ribbon item={['Test Ribbon']} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders ribbons correctly', () => {
+    const ribbons = ['Ribbon 1', 'Ribbon 2'];
+    const { getByText } = render(<Ribbon item={ribbons} />);
+    ribbons.forEach(ribbon => {
+      expect(getByText(ribbon)).toBeInTheDocument();
+    });
+  });
+
+  it('returns null if item is not provided', () => {
+    const { container } = render(<Ribbon item={null} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

package/src/components/molecules/bonus/template-one/bonus.module.scss

@@ -2,6 +2,7 @@
   @include flex-direction(column);
   @include flex-align(center, center);
 
+  position: relative;
   flex-flow: wrap;
   border-radius: 1.6rem;
   background: var(--operator-banner-backgorund, #f4f4f4);

package/src/components/molecules/bonus/template-one/index.js

@@ -10,6 +10,7 @@ import Tnc from "~molecules/tnc";
 import PrettyLink from "~atoms/pretty-link";
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from "./bonus.module.scss";
+import Ribbons from "../../../atoms/ribbons";
 
 export default function Bonus({
   operator,
@@ -23,12 +24,15 @@ export default function Bonus({
   showRatingLabel = false,
   showLabelMiddle = false,
   ctaIcon = <FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />,
-  modulePosition
+  modulePosition,
+  showRibbon = false,
 }) {
+  
   const { logo, bonus, name } = operator || {};
   return (
     <div className={`${styles.operatorBanner || ""}`}>
       <div className={styles.container}>
+        {showRibbon && <Ribbons item={operator.ribbons} />}
         <div>
           <PrettyLink
             operator={operator}
@@ -98,6 +102,7 @@ Bonus.propTypes = {
       terms_and_conditions_text_enabled: PropTypes.string,
     }),
     status: PropTypes.string,
+    ribbons: PropTypes.arrayOf(PropTypes.string),
   }),
   tncFixed: PropTypes.bool,
   pageTemplate: PropTypes.string,
@@ -114,4 +119,5 @@ Bonus.propTypes = {
   showLabelMiddle: PropTypes.bool,
   ctaIcon: PropTypes.elementType,
   modulePosition: PropTypes.number,
+  showRibbon: PropTypes.bool,
 };

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

@@ -13,6 +13,7 @@ import VariableComponent from '../variables';
 import styles from './template-one-two.module.scss';
 import { TrackingKeys } from '~constants/tracking-api'
 import PrettyLink from '~atoms/pretty-link';
+import Ribbons from '../../../../../atoms/ribbons';
 
 const TemplateOneTwo = ({
   relation,
@@ -70,14 +71,7 @@ const TemplateOneTwo = ({
             <h1>{name}</h1>
             {icon || <Verify />}
           </div>
-          {ribbon && (
-            <p
-              className={`${styles.ribbon} ${template === 'template_two' && styles.templateTwoRibbon
-                }`}
-            >
-              {ribbon}
-            </p>
-          )}
+          {ribbon && <Ribbons customStyle={template === 'template_two' ? styles.templateTwoRibbon : ''} item={[relation.ribbons[0]]} /> }
           {!['coming_soon', 'inactive'].includes(relation?.status) ? (
             <StarRating
               numOfStars={numOfStars}

package/src/components/molecules/header/variants/operator/template-one-two/template-one-two.module.scss

@@ -1,5 +1,5 @@
 .container {
-    background: #FFFFFF;
+    background: #FFF;
     border: 1.5px solid #E9E9E9;
     border-radius: 16px;
     position: relative;
@@ -13,7 +13,7 @@
     }
 
     >ul {
-        margin: 0rem 1.6rem 1.6rem 1.6rem;
+        margin: 0 1.6rem 1.6rem;
 
         >li {
             margin: 0;
@@ -25,24 +25,17 @@
         }
 
         @include min(tablet) {
-            margin: 0rem 2.4rem 2.4rem 2.4rem;
+            margin: 0 2.4rem 2.4rem;
         }
     }
 
     >div:last-child {
-        margin: 0rem 1.6rem 1.6rem 1.6rem;
+        margin: 0 1.6rem 1.6rem;
         margin-bottom: 2.4rem;
 
-        >a>svg {
-            display: none;
-        }
-
         @include min(tablet) {
-            margin: 0 2.4rem 2.4rem 2.4rem;
+            margin: 0 2.4rem 2.4rem;
 
-            >a>svg {
-                display: inline;
-            }
         }
     }
 
@@ -61,7 +54,7 @@
             width: 88px;
             min-width: 88px;
             height: 88px;
-            background-color: white;
+            background-color: #fff;
             border: 1.5px solid #E9E9E9;
             border-radius: 16px;
 
@@ -124,7 +117,7 @@
     @include min(tablet) {
         justify-content: center;
         margin-left: 22.5rem;
-        margin-top: 0rem;
+        margin-top: 0;
         min-height: 15.8rem;
     }
 }
@@ -153,30 +146,6 @@
     }
 }
 
-.ribbon {
-    position: absolute;
-    top: 1.6rem;
-    right: 1.6rem;
-    background-color: #FF8F2F;
-    padding: 6px 12px;
-    border-radius: 100px;
-    font-weight: 700;
-    font-size: 10px;
-    line-height: 13px;
-    color: #1C1A28;
-    text-align: center;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-
-    @include min(tablet) {
-        top: 2.4rem;
-        right: 2.4rem;
-        padding: 7px 16px;
-        font-size: 12px;
-        line-height: 15px;
-    }
-}
-
 .templateTwoContainer {
     margin: var(--operator-template-two-margin-mobile, 1.6rem);
     display: flex;
@@ -202,14 +171,14 @@
     }
 
     >div:last-child {
-        margin: 0 1.6rem 1.6rem 1.6rem;
+        margin: 0 1.6rem 1.6rem;
         order: 2;
 
         @include min(tablet) {
             order: 3;
-            margin: 0rem;
-            border-top-left-radius: 0px;
-            border-top-right-radius: 0px;
+            margin: 0;
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
         }
     }
 }
@@ -252,21 +221,7 @@
     }
 }
 
-.templateTwoRibbon {
-    position: static;
-    width: fit-content;
-    margin-top: 1.2rem;
-
-    @include min(tablet) {
-        position: absolute;
-        top: 2.4rem;
-        right: 2.4rem;
-        margin-top: 0rem;
-    }
-}
-
 .ratingInactive {
-
     background-color: #FBFBFB !important;
     color: #6B6A72 !important;
     font-weight: 700;

package/src/components/molecules/toplist/default-row/default-row.module.scss

@@ -46,20 +46,6 @@
   }
 }
 
-.ribbons {
-  position: absolute;
-  top: -1rem;
-  @include flex-direction(row);
-  gap: 1rem;
-
-  > span {
-    color: white;
-    padding: .2rem 1rem;
-    background-color: red;
-    border-radius: 1rem;
-  }
-}
-
 .logo {
   @include flex-direction(column);
 }

package/src/components/molecules/toplist/default-row/index.js

@@ -12,6 +12,7 @@ import LazyImage from '~hooks/lazy-image'
 import { TrackingKeys } from '~constants/tracking-api'
 
 import styles from './default-row.module.scss'
+import Ribbons from '../../../atoms/ribbons'
 
 const Row = ({
   item,
@@ -45,9 +46,7 @@ const Row = ({
       }`}
       ref={(el) => addToRefs(el, index)}
     >
-      <div className={styles.ribbons || ''}>
-        {item.ribbons && item.ribbons.map((ribbon) => <span>{ribbon}</span>)}
-      </div>
+       {item?.ribbons && <Ribbons item={item?.ribbons} />}
       <PrettyLink
         operator={item}
         pageTemplate={pageTemplate}

package/src/constants/pick-keys.mjs

@@ -13,6 +13,7 @@ export const pickPageKeys = [
   "market",
   "sections",
   "description",
+  "template",
   "true_votes",
   "false_votes",
   "reading_time",