gatsby-core-theme 29.0.7 → 29.0.9

package/.storybook/preview.js

@@ -19,7 +19,19 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['Theme', ['Layout', 'Modules', 'Atoms', 'Molecules', 'Organisms', 'Pages', 'Hooks']],
+      order: [
+        'Theme',
+        [
+          'Layout',
+          'Modules',
+          'Atoms',
+          'Molecules',
+          ['Bonus box', ['Template One', 'Template Two', 'Template Three', 'Template Four']],
+          'Organisms',
+          'Pages',
+          'Hooks',
+        ],
+      ],
     },
   },
 };

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [29.0.9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v29.0.8...v29.0.9) (2023-09-20)
+
+
+### Bug Fixes
+
+* bonus box changes ([31580aa](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/31580aa09fa42c273cd062b3383fdaedf2263231))
+
+## [29.0.8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v29.0.7...v29.0.8) (2023-09-20)
+
+
+### Bug Fixes
+
+* bonus box changes ([316027c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/316027c3c857094a6b862a280fc2f5c4677d16b2))
+* update styling for mobile table ([bf3a559](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/bf3a559c4199dc23be3b6ded21d8da6e84119102))
+
+
+* Merge branch 'mobile-table' into 'master' ([bf7d73a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/bf7d73af08f7f3f642bebf7d80f635e5da4e8c3d))
+
 ## [29.0.7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v29.0.6...v29.0.7) (2023-09-18)
 
 

package/package.json

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

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

@@ -7,14 +7,13 @@
   padding: 1.6rem;
   gap: 1.6rem;
 
-  >div {
+  > div {
     width: 100%;
     @include flex-direction(column);
     gap: 1.6rem;
   }
 
-
-  >a {
+  > a {
     width: 100%;
     border-radius: 10rem;
     font-size: 1.4rem;
@@ -22,7 +21,7 @@
     font-weight: 700;
     line-height: 2.2rem;
 
-    >svg {
+    > svg {
       width: 1.4rem;
     }
   }
@@ -34,7 +33,7 @@
   @include flex-direction(row);
   gap: 16px;
 
-  >img {
+  > img {
     min-width: 7.2rem;
     width: 7.2rem;
     height: 7.2rem;
@@ -46,7 +45,7 @@
   @include flex-direction(column);
   @include flex-align(flex-start, center);
 
-  >span:first-of-type {
+  > span:first-of-type {
     color: #1b1b1c;
     font-size: 1.6rem;
     font-style: normal;
@@ -55,7 +54,7 @@
     margin-bottom: 0.8rem;
   }
 
-  >div {
+  > div {
     border-radius: 100px;
     background: #fff;
     border: 0px;
@@ -65,11 +64,11 @@
     @include flex-direction(row);
     @include flex-align(center, center);
 
-    >span:first-of-type {
+    > span:first-of-type {
       margin-right: 0.4rem;
     }
 
-    >span:last-of-type {
+    > span:last-of-type {
       font-size: 11px;
       margin-top: 0.2rem;
     }
@@ -86,7 +85,7 @@
   @include flex-align(center, center);
   border: 1px solid #fff;
 
-  >div {
+  > div {
     background-color: #f4f4f4;
     width: 100%;
     box-sizing: border-box;
@@ -102,33 +101,26 @@
     padding: 0.8rem 2rem;
   }
 
-  >a {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    border-radius: 0;
-
-    span:first-of-type {
-      color: var(--operator-banner-first-bonus, #1b1b1c);
-      text-align: center;
-      font-size: 1.6rem;
-      font-style: normal;
-      font-weight: 700;
-      line-height: 2.7rem;
-      padding-right: 0;
-      margin: 0.8rem 0.8rem 0 0.8rem;
-    }
+  span:first-of-type {
+    color: var(--operator-banner-first-bonus, #1b1b1c);
+    text-align: center;
+    font-size: 1.6rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.7rem;
+    padding-right: 0;
+    margin: 0.8rem 0.8rem 0 0.8rem;
+  }
 
-    span:last-of-type {
-      color: var(--operator-banner-second-bonus, #515156);
-      text-align: center;
-      font-size: 1.4rem;
-      font-style: normal;
-      font-weight: 700;
-      line-height: 2.2rem;
-      padding: 0;
-      margin: 0 0.8rem 0.8rem 0.8rem;
-    }
+  span:last-of-type {
+    color: var(--operator-banner-second-bonus, #515156);
+    text-align: center;
+    font-size: 1.4rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.2rem;
+    padding: 0;
+    margin: 0 0.8rem 0.8rem 0.8rem;
   }
 }
 
@@ -138,7 +130,7 @@
     @include flex-direction(row);
     @include flex-align(center, center);
 
-    >a {
+    > a {
       min-height: 5.6rem;
       max-width: 19.7rem;
       font-size: 1.8rem;
@@ -146,17 +138,17 @@
       line-height: 2.6rem;
     }
 
-    >div {
+    > div {
       @include flex-direction(row);
       @include flex-align(center, flex-start);
     }
   }
 
   .tncEnable {
-    >div {
+    > div {
       gap: 2.4rem;
 
-      >div {
+      > div {
         gap: 2.4rem;
       }
     }
@@ -168,7 +160,7 @@
     gap: 1.6rem;
     height: auto;
 
-    >img {
+    > img {
       min-width: 6.4rem;
       width: 6.4rem;
       height: 6.4rem;
@@ -176,7 +168,7 @@
   }
 
   .tncEnable .logo {
-    >img {
+    > img {
       min-width: 9.6rem;
       width: 9.6rem;
       height: 9.6rem;
@@ -187,7 +179,7 @@
     display: flex;
     flex-direction: column;
 
-    >span:first-of-type {
+    > span:first-of-type {
       color: var(--operator-banner-name-color, #1b1b1c);
       font-size: 1.4rem;
       font-style: normal;
@@ -200,8 +192,8 @@
 }
 
 .showTncFixed {
-  >div {
-    >div:last-child {
+  > div {
+    > div:last-child {
       height: 42px;
       overflow-y: scroll;
       color: #515156;
@@ -229,26 +221,26 @@
   }
 
   @include min(tablet) {
-    >div {
+    > div {
       display: grid;
       grid-template-columns: 1fr 20rem;
       grid-template-rows: auto auto;
 
-      >div:last-of-type {
+      > div:last-of-type {
         grid-column: 1/3;
         grid-row: 2/3;
         display: block;
       }
 
-      >a {
+      > a {
         grid-row: 1/2;
         grid-column: 2/3;
       }
 
-      >div:first-of-type {
+      > div:first-of-type {
         grid-row: 1/2;
         grid-column: 1/2;
       }
     }
   }
-}
+}

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import { prettyTracker, imagePrettyUrl } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
-import BonusBox from '~molecules/bonus-box/template-one';
+import BonusBox from '~molecules/bonus-box/template-four';
 import OperatorCta from '~atoms/operator-cta-button';
 import Rating from '~molecules/star-rating/one-star';
 import Tnc from '~molecules/tnc';

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

@@ -57,26 +57,22 @@
 }
 .bonus {
   line-height: 2px;
-  >a{
-    box-shadow: none;
+
+  p {
+    color: #3c3c40;
+  }
+
+  span {
+    color: #1b1b1c;
+    font-size: 2rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.8rem;
+    text-transform: capitalize;
+  }
+
+  > span:last-child {
     padding: 0;
-    width: auto;
-    background: none;
-    border: none;
-    text-align: right;
-    width: auto;
-    display: contents;
-    span {
-      font-size: 1.2rem;
-      font-style: normal;
-      font-weight: 700;
-      line-height: 1.8rem;
-      color: #fff;
-      text-align: left;
-    }
-    > span:last-child {
-      padding: 0;
-    }
   }
 }
 
@@ -112,7 +108,7 @@
   padding-right: 1rem;
 }
 .tncEnable .bonus {
-  >a{
+  > a {
     > span {
       color: #1b1b1c;
     }
@@ -130,7 +126,7 @@
   color: rgb(100, 100, 109) !important;
 }
 .showTncFixed {
-  border-top: 1.5px solid var(--ui-kit-colours-white-900, #DEDEDE);
+  border-top: 1.5px solid var(--ui-kit-colours-white-900, #dedede);
   > div {
     display: grid;
     grid-template-columns: 1fr 8rem;
@@ -165,7 +161,6 @@
       grid-row: 1/2;
     }
   }
-
 }
 @include min(tablet) {
   .operatorBanner {
@@ -182,7 +177,7 @@
       font-weight: 700;
       line-height: 2.6rem;
       text-transform: capitalize;
-      @include min(laptop){
+      @include min(laptop) {
         min-width: 19.7rem;
       }
       > svg {
@@ -242,7 +237,7 @@
   .bonus {
     text-align: center;
     width: 100%;
-    >a{
+    > a {
       > span {
         font-size: 2rem;
         font-style: normal;
@@ -261,9 +256,9 @@
     > span:first-child {
       color: #1b1b1c;
     }
-    >div{
+    > div {
       background-color: white;
-      color: #1B1B1C;
+      color: #1b1b1c;
     }
   }
   .tncEnable .welcomeBonus {

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

@@ -6,7 +6,7 @@ import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
 import { prettyTracker, imagePrettyUrl, translate } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 import isSticky from '~hooks/stickyOnScroll';
-import BonusBox from '~molecules/bonus-box/template-one';
+import BonusBox from '~molecules/bonus-box/template-four';
 import OperatorCta from '~atoms/operator-cta-button';
 import Rating from '~molecules/star-rating/one-star';
 import Tnc from '~molecules/tnc';

package/src/components/molecules/bonus-box/template-four/bonus-box.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { getToplistItem } from '~tests/factories/modules/toplist.factory';
+import Bonus from '.';
+
+describe('Bonus Component', () => {
+  test('render with props', () => {
+    const item = getToplistItem();
+    const { getByText } = render(<Bonus item={item} tracker="main" />);
+    expect(getByText('€100 welcome bonus')).toBeTruthy();
+  });
+  test('render with main onliner', () => {
+    const { getByText } = render(
+      <Bonus
+        item={{
+          one_liners: {
+            one_liner: 'welcome bonus',
+          },
+          bonus: {
+            one_liners: {
+              main: {
+                one_liner: 'welcome bonus',
+              },
+              secondary: {
+                one_liner: 'Welcome Bonus up to £1000',
+              },
+            },
+          },
+        }}
+        tracker="main"
+      />
+    );
+    expect(getByText('welcome bonus')).toBeTruthy();
+  });
+  test('without oneLiner', () => {
+    const { queryByText } = render(
+      <Bonus
+        item={{
+          one_liners: {},
+          bonus: {},
+        }}
+        tracker="main"
+      />
+    );
+    expect(queryByText('welcome bonus')).toBeNull();
+  });
+});
+afterEach(() => {
+  cleanup();
+});

package/src/components/molecules/bonus-box/template-four/bonus.stories.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+
+import BonusBox from '.';
+import getPageData from '~tests/factories/pages/default.factory';
+
+export default {
+  title: 'Theme/Molecules/Bonus box/Template Four',
+  component: BonusBox,
+  args: {
+    item: {
+      name: 'operator',
+      type: { name: 'object', required: false },
+      description: 'The Operator data object.',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Generates a banner including the operator data.',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <BonusBox {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  item: getPageData().relation,
+};

package/src/components/molecules/bonus-box/template-four/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getBonusData } from '~helpers/getters.mjs';
+import styles from './bonus-box.module.scss';
+
+export default function BonusBox({ item, tracker, splitBy = '+', feSeparator = '+' }) {
+  const data = getBonusData(item, tracker, splitBy);
+
+  return (
+    <>
+      {data?.mainLine && <span className={styles.firstPart}>{data.mainLine}</span>}
+      {data?.secondLine && (
+        <span className={styles.secondPart}>{`${feSeparator}${data.secondLine}`}</span>
+      )}
+    </>
+  );
+}
+
+BonusBox.propTypes = {
+  item: PropTypes.shape({}),
+  tracker: PropTypes.string,
+  pageTemplate: PropTypes.string,
+  splitBy: PropTypes.string,
+  feSeparator: PropTypes.string,
+};

package/src/components/molecules/bonus-box/template-one/bonus.stories.js

@@ -12,7 +12,7 @@ import BonusBox from '.';
 import getPageData from '~tests/factories/pages/default.factory';
 
 export default {
-  title: 'Theme/Molecules/Bonus-box/Template-one',
+  title: 'Theme/Molecules/Bonus box/Template One',
   component: BonusBox,
   args: {
     item: {

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

@@ -12,6 +12,7 @@ export default function BonusBox({
 }) {
   const prettyLink = prettyTracker(item, tracker, false, pageTemplate);
   const data = getBonusData(item, tracker, splitBy);
+
   return (
     <a
       href={prettyLink || '#'}

package/src/components/molecules/bonus-box/template-three/bonus-box.module.scss

@@ -1,5 +1,4 @@
 .bonusBox {
-  @include flex-direction(column);
   @include flex-align(center, center);
   border-radius: 16px;
   background: var(--bonus-box-backgorund, #e9faf1);
@@ -8,8 +7,11 @@
   padding: 16px;
   width: 100%;
   max-width: 50.5rem;
+}
 
-  >div {
+.includeVariableComponent {
+  @include flex-direction(column);
+  > div {
     @include flex-direction(column);
     @include flex-align(center, center);
 
@@ -25,7 +27,7 @@
   @include flex-direction(column);
   @include flex-align(center, center);
   width: 100%;
-  >p {
+  > p {
     color: var(--bonus-box-welcome-bonus-color, #1b1b1c);
     text-align: center;
     font-size: 1.4rem;
@@ -34,7 +36,7 @@
     line-height: 2.2rem;
   }
 
-  >span {
+  > span {
     color: var(--bonus-box-main-text-color, #1b1b1c);
     text-align: center;
     font-size: 1.7rem;
@@ -45,4 +47,3 @@
     width: 24rem;
   }
 }
-

package/src/components/molecules/bonus-box/template-three/bonus.stories.js

@@ -12,7 +12,7 @@ import BonusBox from '.';
 import getPageData from '~tests/factories/pages/default.factory';
 
 export default {
-  title: 'Theme/Molecules/Bonus-box/Template-three',
+  title: 'Theme/Molecules/Bonus box/Template Three',
   component: BonusBox,
   args: {
     translations: {

package/src/components/molecules/bonus-box/template-three/index.js

@@ -22,24 +22,39 @@ export default function BonusBox({
   const prettyLink = prettyTracker(item, tracker, false, pageTemplate);
   const data = getBonusData(item, tracker, splitBy);
 
+  const content = () => (
+    <a
+      href={prettyLink || '#'}
+      target="_blank"
+      rel="nofollow noreferrer"
+      className={`${styles.detailsBox} ${'bonus-box-gtm'}`}
+    >
+      {welcomeBonus && <p>{welcomeBonusTranslation}</p>}
+      {data?.mainLine && <span className={styles.firstPart}>{data.mainLine}</span>}
+      {data?.secondLine && (
+        <span className={styles.secondPart}>{`${feSeparator}${data.secondLine}`}</span>
+      )}
+    </a>
+  );
+
   return (
-    <div className={styles.bonusBox}>
-      <div>
-        <a
-          href={prettyLink || '#'}
-          target="_blank"
-          rel="nofollow noreferrer"
-          className={`${styles.detailsBox} ${'bonus-box-gtm'}`}
-        >
-          {welcomeBonus && <p>{welcomeBonusTranslation}</p>}
-          {data?.mainLine && <span className={styles.firstPart}>{data.mainLine}</span>}
-          {data?.secondLine && (
-            <span className={styles.secondPart}>{`${feSeparator}${data.secondLine}`}</span>
-          )}
-        </a>
+    <div
+      className={`${styles.bonusBox} ${
+        showVariablesComponent ? styles.includeVariableComponent : ''
+      }`}
+    >
+      {!showVariablesComponent ? (
+        <>
+          {content()}
+          {ctaBtn && <CtaButton operator={item} icon={<FaArrowRight />} />}
+        </>
+      ) : (
+        <div>
+          {content()}
+          {ctaBtn && <CtaButton operator={item} icon={<FaArrowRight />} />}
+        </div>
+      )}
 
-        {ctaBtn && <CtaButton operator={item} icon={<FaArrowRight />} />}
-      </div>
       {showVariablesComponent && <VariableComponent item={item} />}
     </div>
   );

package/src/components/molecules/bonus-box/template-two/bonus.stories.js

@@ -11,7 +11,7 @@ import BonusBox from '.';
 import getPageData from '~tests/factories/pages/default.factory';
 
 export default {
-  title: 'Theme/Molecules/Bonus-box/Template-two',
+  title: 'Theme/Molecules/Bonus box/Template Two',
   component: BonusBox,
   args: {
     translations: {

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

@@ -47,7 +47,7 @@
     tbody {
       display: table;
       width: 100%;
-      table-layout: fixed;
+      table-layout: auto;
       box-sizing: border-box;
     }