gatsby-matrix-theme 10.0.14 → 11.0.1

package/CHANGELOG.md

@@ -1,3 +1,84 @@
+## [11.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v11.0.0...v11.0.1) (2023-01-24)
+
+
+### Bug Fixes
+
+* adjusted justify-content ([d21f257](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d21f25791521339e98a2ad5d030d4af88f5725a4))
+* remove margin-bottom ([b5ff383](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b5ff3839686ece26359dfd1a31430ec99bc4330d))
+* small issues based on qa recom ([05838e1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/05838e1d67c07355490fe425c243e5345acdd099))
+* update link on  cards ([aeb91c7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aeb91c727cf031f67f1b86e7844c6378567f38f6))
+* update links on toplist and operator-card ([9c95bba](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9c95bba2b445c0b76cacc483107a86953a2f3594))
+* update test ([1356596](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1356596ca796d4013b424e072145996673726001))
+* update the version of gatsby-core ([b75c4a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b75c4a73ddf4a09af348d7c1820572284a0fbe77))
+
+
+* Merge branch 'tm-3138-changing-text-operator-review' into 'master' ([2753d66](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2753d661da3041706e2220cfb552b98e303122d8))
+* Merge branch 'tm-3254-game-header' into 'master' ([4b0e899](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4b0e899cf43c1244e180fe0c767093fee1157a57))
+* Merge branch 'tm-3254-game-header' into 'master' ([5d35521](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5d35521cc0030d08b0eee4ba9cd6bad68fcd903b))
+* Merge branch 'tm-3254-game-header' into 'master' ([3388067](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3388067b942412684e9fc87ee4bedabbdda85d41))
+
+# [11.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v10.0.14...v11.0.0) (2023-01-20)
+
+
+### Bug Fixes
+
+* add max width for slots ([0d6f830](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0d6f830c3abdabf1e657c3cc491034533390857e))
+* add padding to slotheader ([8b28ce6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8b28ce6e18be246c8db471afe4efb903a12b308a))
+* add template one for slot/gaming ([e849f5e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e849f5ea685aa3d993a082256d6f9fd222d5e69f))
+* added translations ([9f2c5e7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9f2c5e7d020dc54da27122ee9e726f379a6ce305))
+* change svg and its size ([c134993](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c134993a0ebbb3203c87483fcae13023f7c1b85b))
+* clean up header section ([6cce914](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6cce914c78bdeb3a7bbdf30bfdd06a8ac65ca87d))
+* remove typo ([10f94eb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/10f94eb0db5eaab58bffaab6d4a2867f7858b640))
+* show in the toplist just operator that has active status ([4d677bc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4d677bc038cae31279822a6edfdfed309cc99d84))
+* storybook folder structure names ([9a251dd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9a251dd913bf90e4737289fa4e12b6ad0ad61cab))
+* storybook structure and default colour ([96cb803](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/96cb803654daed0e413885e981c2d6e6ff806d0e))
+* test coverage ([9859301](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/98593019552600fc990c645e291f41aa92104800))
+* typo issue on header module ([ebfe10b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ebfe10b24e5db55deaf7da0651214fa3be3f4704))
+* update changes and add story book and tests ([c8e522e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c8e522e559ccabe2af97643da96c53a87a78327a))
+* update header component scss ([095eba0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/095eba06dab2f22b8a1a1902a3e576c89484b466))
+* update name storybook ([5093cd5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5093cd5cd1e4f5b3089146a86a8a9d0d98e8da21))
+* update tests, removed console.logs and updated styling for ratings ([44aaa62](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/44aaa62425542896bc097a58725912c4c85059b1))
+* updated project based on the requirements ([089dbad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/089dbad6f50409d3e67a2dae18f70b8a99332ccf))
+
+
+### Code Refactoring
+
+* add css vars for tem two bg colour ([4053130](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4053130a999d1a5205a81dcc63c9a9e3730a7465))
+* add temp featured image ([7eaa990](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7eaa990e3bbebf6d86fb447242a670e2f645ae6a))
+* add template based classes ([2737131](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/27371317510577af1cb85bcf7cdde79dda3a1c19))
+* add two templates for default headers ([ed070cd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ed070cd367bcf03fb43960addc4cd04becf6daca))
+* change dummy link ([a96fca2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a96fca2578ea4583abbd2ca4ba70e5f16b6a48f0))
+* change of scss ordering ([8794dbf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8794dbf70865170a43f5a3d2138c25f32524571b))
+* changes to field types ([eabc3e8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/eabc3e893cb5fdee4d7987363d9869478753f8ff))
+* correction to page type for default pages ([cd8aa25](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cd8aa25141edfc9200057fa3b3bec9167e12c9b1))
+* corrections to code review and remove images ([e4d3137](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e4d31370853cbdd2cb1bb0dd3977de2bb64ec934))
+* fix for undefined classnames ([60306e9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/60306e9631deceb3f061aafbfef4155e13ba2d98))
+* fix mobile styles ([907f341](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/907f3419a3744a98cbd46c057e93a77699537e30))
+* fix storybook properties and tests ([79f9858](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/79f9858581b60f70e24d72e5b65233f7bf146517))
+* fix template one minor css issues ([5829ca2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5829ca2ab33899f0c4f9c03f7b14dc0ce60f63cb))
+* image dimensions ([f8cc38e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f8cc38e2f64b9fd6169fb04db20a6d637386b038))
+* restructure header component ([7747c9d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7747c9da6e0b4d5f791ef191cb4bdf6785ada743))
+* separate css ([7451e98](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7451e985b926e2c1d1f7a39acead52e7e3eeb019))
+* storybook images ([fff47ea](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fff47ea3a6594143cbed2a6699f93917610285af))
+* storybook layout change ([4add525](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4add525d95ae847dc0c995b0368518702f29e14f))
+
+
+* Merge branch 'tm-3113-toplist' into 'master' ([8238beb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8238beba9fd95d9adbc2d1295d1562573c06f239))
+* Merge branch 'tm-3254-game-header' into 'master' ([b4d0d81](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b4d0d818fd80df7f95b0885917f5b5d9d2afadc4))
+* Merge branch 'master' into 'tm-3254-game-header' ([b2f96c6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b2f96c666e5288f63a7f1c736da379bd123d7a4a))
+* Merge branch 'tm-3252-default-headers' into 'master' ([9c313bd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9c313bd53a7f34173e555712833444d3646ccb4e))
+* Merge branch 'master' into tm-3252-default-headers ([d9ea393](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d9ea393cd598a2fe0a79d29b0b95341e6bc9f828))
+* Merge branch 'master' into tm-3252-default-headers ([2c2960a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2c2960a1f3791b4742b8ac6e71c78ca8d27d60d3))
+* Merge branch 'master' into tm-3252-default-headers ([30bdf57](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/30bdf577ac44e4229561297d54e153832c2ae0f2))
+* Merge branch 'master' into tm-3252-default-headers ([9aebd17](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9aebd1771db338a99675ef3491e1577b145d8896))
+* Merge branch 'master' into tm-3252-default-headers ([21582c7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/21582c7cbcfe08335b1ff45fd55265c1b5585cc5))
+
+
+### Tests
+
+* fix test ([5076a8c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5076a8c42acfd194701d7e176b536f24312b4e1d))
+* fix test scripts ([32ffbee](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/32ffbee13e6e421d9b7a9d8e1465d03a14c0f990))
+
 ## [10.0.14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v10.0.13...v10.0.14) (2023-01-17)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "10.0.14",
+  "version": "11.0.1",
   "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": "18.0.2",
+    "gatsby-core-theme": "18.0.3",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

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

@@ -10,6 +10,7 @@ import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters
 import LazyImg from 'gatsby-core-theme/src/hooks/lazy-image';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
+import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
@@ -116,11 +117,7 @@ export default function ComparisonTable({
             <StarRating numOfStars={5} rating={item?.relation?.rating} />
 
             {type === 'operator' && index === 0 ? null : (
-              <Link to={item.path}>{`${itemName} ${translate(
-                translations,
-                'review',
-                'Review'
-              )}`}</Link>
+              <ReviewLink template={tempate} itemName={item.title} reviewPath={item.path} />
             )}
           </td>
         );

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

@@ -7,6 +7,7 @@ import { getAltText, imagePrettyUrl, translate } from 'gatsby-core-theme/src/hel
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
+import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
@@ -70,13 +71,7 @@ const OperatorCard = ({
             backgroundImage && styles.hasBackground
           }`}
         >
-          <Link
-            to={reviewPath}
-            title={itemName}
-            className={`${styles.reviewLink} operator-card-gtm`}
-          >
-            {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
-          </Link>
+          <ReviewLink template={page.template} itemName={itemName} reviewPath={reviewPath} />
           <OperatorCta
             tracker="main"
             operator={relation}

package/src/components/atoms/cards/popup-card/index.js

@@ -1,14 +1,13 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
-import { getAltText, imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
+import { getAltText, imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
+import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
 import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
 import LazyImage from '~hooks/lazy-image';
-import Link from '~hooks/link';
 import styles from './popup-card.module.scss';
 
 const PopupCard = ({
@@ -20,8 +19,6 @@ const PopupCard = ({
   showReviewLink = false,
   template,
 }) => {
-  const { translations } = useContext(Context) || {};
-
   const operatorName = item.name;
   const oneLiner = item?.one_liners?.main?.one_liner;
   const tnc = item?.extra_fields?.terms_and_conditions_text_enabled;
@@ -52,9 +49,7 @@ const PopupCard = ({
           pageTemplate={template}
         />
         {showReviewLink && (
-          <Link className={`${styles.reviewLink} popup-review-gtm`} to={item.review_link}>
-            {`${translate(translations, 'read_review', 'Read Review')}`}
-          </Link>
+          <ReviewLink template={template} itemName={item.name} reviewPath={item.review_link} />
         )}
       </div>
       {showTnc && tnc === '1' && (

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

@@ -0,0 +1,54 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import { FaStar } from '@react-icons/all-files/fa/FaStar';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import styles from './ratings.module.scss';
+
+const Ratings = ({ averageRating, ratings, relation }) => {
+  const { translations } = useContext(Context) || {};
+  const votalityValue = relation?.volatility ? relation?.volatility : 0;
+  const rangeText = { 0: 'Low', 1: 'Medium', 2: 'High' }[votalityValue] || '0%';
+
+  return (
+    <ul className={styles.ratings}>
+      <li key="Overall">
+        <p>{translate(translations, 'overall', 'Overall')}</p>
+        <div>
+          <FaStar />
+          <p data-testid="overall-rating">{averageRating}/</p>
+          <p>5</p>
+        </div>
+      </li>
+      {ratings?.map((rating) => (
+        <li key={rating[rating?.field_name]}>
+          <p>{rating?.field_label}</p>
+          {rating?.field_name === 'rtp' ? (
+            <p>{relation[rating?.field_name]}%</p>
+          ) : (
+            <div>
+              <FaStar />
+              <p>{relation[rating?.field_name]}/</p>
+              <p>5</p>
+            </div>
+          )}
+        </li>
+      ))}
+      <li>
+        <p>{translate(translations, 'volatility', 'Volatility')}</p>
+        <div className={styles.bar}>{rangeText}</div>
+      </li>
+    </ul>
+  );
+};
+
+Ratings.propTypes = {
+  averageRating: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  ratings: PropTypes.array,
+  relation: PropTypes.shape({
+    volatility: PropTypes.string,
+  }),
+};
+export default Ratings;

package/src/components/atoms/ratings/ratings.module.scss

@@ -0,0 +1,67 @@
+.ratings {
+  display: flex;
+  margin: 0rem;
+  height: 100%;
+  gap: 0.8rem;
+  overflow-x: scroll;
+  @include min(tablet) {
+    overflow: hidden;
+    gap: 1.6rem;
+    > :first-child {
+      display: none;
+    }
+  }
+  > li,
+  > div {
+    margin-bottom: inherit;
+    width: 100%;
+    background: #fbfbfb;
+    padding: 16px 8px;
+    min-width: 10.4rem;
+    height: 9.6rem;
+    box-shadow: 4px 4px 30px rgb(0 0 0 / 3%);
+    font-weight: bold;
+    font-size: 1.4rem;
+    border-radius: 8px;
+    border: 1px solid #e9e9e9;
+    @include flex-direction(column);
+    @include flex-align(center, space-evenly);
+    color: #1c1a28;
+    > p {
+      font-weight: 700;
+      font-size: 1.2rem;
+      line-height: 2rem;
+      color: #1c1a28;
+      @include min(tablet) {
+        font-size: 14px;
+        line-height: 22px;
+      }
+    }
+    > div {
+      display: flex;
+      align-items: center;
+      > svg {
+        color: #ffdb20;
+        height: 1.8rem;
+        width: 1.8rem;
+        margin-right: 6px;
+      }
+      > p {
+        color: #1c1a28;
+        font-weight: 800;
+        font-size: 18px;
+        line-height: 28px;
+      }
+      @include max(mobile) {
+        > :last-child {
+          font-size: 1.6rem;
+          line-height: 2.7rem;
+          margin-top: 1px;
+        }
+      }
+    }
+    @include min(tablet) {
+      height: 11.2rem;
+    }
+  }
+}

package/src/components/atoms/ratings/ratings.stories.js

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import Ratings from '.';
+
+export default {
+  title: 'Matrix-Theme/Atoms/Ratings',
+  component: Ratings,
+};
+
+const Template = (args) => <Ratings {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  averageRating: 3,
+  ratings: [
+    { field_name: 'first_rating', field_label: 'Graphics' },
+    { field_name: 'third_rating', field_label: 'Bonuses' },
+    { field_name: 'rtp', field_label: 'RTP' },
+  ],
+  relation: {
+    first_rating: 2,
+    third_rating: 3,
+    rtp: 50,
+  },
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import getPageData from '../../../../test/factories/pages/slot';
+import Ratings from '.';
+
+describe('summary component', () => {
+  test('render', () => {
+    const { container } = render(<Ratings page={getPageData()} />);
+    expect(container).toBeTruthy();
+
+    // Description
+    expect(container.querySelectorAll('ul.ratings')).toHaveLength(1);
+  });
+
+  test('renders the correct ratings', () => {
+    const averageRating = 4.5;
+    const ratings = [
+      { field_label: 'Graphics', field_name: 'graphics', value: 4.2 },
+      { field_label: 'Sound', field_name: 'sound', value: 5 },
+    ];
+    const relation = { graphics: 4.2, sound: 5 };
+    const { getByText, getByTestId } = render(
+      <Ratings averageRating={averageRating} ratings={ratings} relation={relation} />
+    );
+    const overallRating = getByTestId('overall-rating');
+    const graphicsRating = getByText(`${relation.graphics}/`);
+    const soundRating = getByText(`${relation.sound}/`);
+    expect(overallRating).toBeInTheDocument();
+    expect(graphicsRating).toBeInTheDocument();
+    expect(soundRating).toBeInTheDocument();
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

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

@@ -16,5 +16,9 @@ describe('Tooltip Component', () => {
 
     fireEvent.mouseEnter(screen.getByText('Test Children'));
     await waitFor(() => screen.getByText('test content'));
+
+    fireEvent.mouseLeave(screen.getByText('Test Children'));
+    const isVisible = container.querySelector('.tooltip');
+    expect(isVisible).toBeFalsy();
   });
 });

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import Button from 'gatsby-core-theme/src/components/atoms/button';
+import { imagePrettyUrl, getAltText, getExtraField } from 'gatsby-core-theme/src/helpers/getters';
+import styles from './template-one.module.scss';
+
+export default function TemplateOne({ title, description, extraFields, imageObj }) {
+  const link = getExtraField(extraFields, 'link');
+
+  return (
+    <div className={styles.templateOne}>
+      <div className={styles.headerContainer}>
+        <h1>{title}</h1>
+        <div
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: description }}
+          className={styles.description}
+        />
+        {link && (
+          <Button
+            to={link}
+            primaryColor={false}
+            btnText={link}
+            invertColors
+            gtmClass="default-header-template-one-gtm btn-cta"
+            icon={<FaArrowRight />}
+          />
+        )}
+      </div>
+      {imageObj && (
+        <LazyImage
+          src={imagePrettyUrl(imageObj.filename, imageObj.width, imageObj.height)}
+          alt={getAltText(imageObj, imageObj.title)}
+          width={imageObj.width}
+          height={imageObj.height}
+          loading="eager"
+          className={styles.image}
+        />
+      )}
+    </div>
+  );
+}
+
+TemplateOne.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  imageObj: PropTypes.shape({
+    alt: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    filename: PropTypes.string,
+    title: PropTypes.string,
+  }),
+  extraFields: PropTypes.shape({
+    link: PropTypes.string,
+  }),
+};

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

@@ -0,0 +1,67 @@
+.templateOne {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column-reverse;
+    gap: 2.4rem;
+    padding: 0 1.6rem;
+    max-width: var(--main-container-max);
+    margin: 0 auto;
+
+    @include min(tablet) {
+        flex-direction: row;
+        gap: 5rem;
+    }
+
+    @include min(desktop) {
+        gap: 15.2rem;
+    }
+}
+
+.image {
+    border-radius: 1.6rem;
+
+    @include min(tablet) {
+        max-width: 50%;
+    }
+
+    @include min(laptop) {
+        min-width: 35.6rem;
+        max-width: 35.6rem;
+    }
+}
+
+.headerContainer {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-direction: column;
+
+    h1 {
+        font-weight: 700;
+        font-size: 2.8rem;
+        line-height: 3.8rem;
+        text-transform: capitalize;
+        color: #1c1a28;
+        margin: 0 0 2.4rem;
+
+        @include min(tablet) {
+            font-size: 3.2rem;
+            line-height: 4.2rem;
+        }
+    }
+
+    a {
+        display: flex !important;
+        gap: 1.1rem;
+    }
+}
+
+.description {
+    font-weight: 500;
+    font-size: 1.6rem;
+    line-height: 2.7rem;
+    text-align: justify;
+    color: #3e3c47;
+    padding-bottom: 2.4rem;
+}

package/src/components/molecules/header/variants/default/template-one/template-one.stories.js

@@ -0,0 +1,86 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import MainProvider from '~context/MainProvider';
+import getPageData from '../../../../../../../tests/factories/pages/default.factory';
+import TemplateOne from '.';
+
+const pageData = getPageData();
+pageData.featured_image_object = {
+  alt: null,
+  filename: '1673344017/456x343px.png',
+  height: '343',
+  title: '456x343px',
+  url: 'https://assets-srv.s3.eu-west-1.amazonaws.com/1673344017/456x343px.png',
+  width: '456',
+};
+
+export default {
+  title: 'Matrix-Theme/Layout/Header/Default/Template One',
+  component: TemplateOne,
+  argTypes: {
+    title: {
+      title: 'Title',
+      type: { name: 'string', required: true },
+      defaultValue: pageData.title,
+      description: 'page title',
+    },
+    description: {
+      name: 'Description',
+      type: { name: 'string', required: true },
+      defaultValue: pageData.description,
+      description: 'page description',
+    },
+    extraFields: {
+      name: 'Extra Fields',
+      type: { name: 'object', required: true },
+      defaultValue: pageData?.extra_fields,
+      description: 'page link/CTA',
+    },
+    imageObj: {
+      name: 'Featured image',
+      type: { name: 'object', required: true },
+      defaultValue: pageData?.featured_image_object,
+      description: 'page featured image',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A Default Header Component - Template two',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => (
+  <MainProvider
+    value={{
+      bannerIsActive: false,
+      cookieAccepted: true,
+      translations: {
+        online_casino: 'Online Casino',
+      },
+    }}
+  >
+    <div>
+      <TemplateOne {...args} />
+    </div>
+  </MainProvider>
+);
+export const Default = Template.bind({});
+Default.args = {};