gatsby-core-theme 31.0.2 → 32.0.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [32.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v31.0.2...v32.0.0) (2024-05-28)
+
+
+### Bug Fixes
+
+* footer as seen logo ([3ae88b2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3ae88b28abf3e256afb63f628183732c2c1ed18c))
+
+
+### Code Refactoring
+
+* add storybook and changes to test scripts ([3a135d6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3a135d65bf8fcecf3befe3db2d4c3b16f6a4edff))
+* changes to bonus storybook ([9e2bb5a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9e2bb5a8fce4dcefcd57fb4f1917de637273722e))
+* changes to ratings ([b11c595](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b11c5957e2ee520d6b0d4a5a775c084bdee35e59))
+* correct to bonus box ratings ([0a2aa6a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0a2aa6af2bea338c4add3c8ea374228d35f2f38a))
+* revert rating changes ([6c7a422](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6c7a4222dce826d0e06d45544aa5b48fd7f1387c))
+* temp ([49efcf9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/49efcf9e37363ef0a30d25e70fb61dd52b199617))
+
+
+* Merge branch 'tm-4382-ratings' into 'master' ([0cd66dd](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0cd66dda52540d1f272a1ffdfa79cac543af5b2b))
+* Merge branch 'master' into tm-4382-ratings ([e359fe3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e359fe38fe209bc63aa3b5b000760fd429086f6e))
+* Merge branch 'tm-4379-footer-as-seen-logo' into 'master' ([8a8e50c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8a8e50cd86ed2a205128b99f8a0df4380b3a2b1c))
+
 ## [31.0.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v31.0.1...v31.0.2) (2024-05-22)
 
 

package/package.json

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

package/src/components/atoms/footer/as-seen-on/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import LinkList from '../../../molecules/link-list';
 import styles from './as-seen-on.module.scss';
 
-const AsSeenOn = ({ asSeenOn, template }) => (
+const AsSeenOn = ({ asSeenOn, template, width = '130', height = '36' }) => (
   <div
     className={`${styles?.asSeenOn || ''} ${
       template && styles[template] ? styles[template] || '' : ''
@@ -15,8 +15,8 @@ const AsSeenOn = ({ asSeenOn, template }) => (
       imageOnly
       singleList
       lists={asSeenOn}
-      width={130}
-      height={36}
+      width={width}
+      height={height}
       gtmClass="mobile-menu-gtm logo-cta"
     />
   </div>
@@ -27,4 +27,6 @@ export default AsSeenOn;
 AsSeenOn.propTypes = {
   asSeenOn: PropTypes.shape({}),
   template: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };

package/src/components/atoms/number-rating/index.js

@@ -4,14 +4,15 @@ import PropTypes from 'prop-types';
 import styles from './number-rating.module.scss';
 import { getRating } from '~helpers/rating';
 
-const NumberRating = ({ total, rating }) => {
-  const rate = getRating(rating);
+const NumberRating = ({ total, rating, showRoundedRating = true }) => {
+  const rate = getRating(rating, showRoundedRating);
   return <div className={styles.numberRatingContainer || ''}>{`${rate}/${total}`}</div>;
 };
 
 NumberRating.propTypes = {
   total: PropTypes.oneOfType([PropTypes.oneOf([5, 10]), PropTypes.oneOf(['5', '10'])]).isRequired,
   rating: PropTypes.oneOfType([PropTypes.array, PropTypes.number]).isRequired,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default NumberRating;

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

@@ -45,6 +45,16 @@ export default {
         defaultValue: { summary: false },
       },
     },
+    showRoundedRating: {
+      name: 'showRoundedRating',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show rating as a rounded number or exact number',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
   },
   parameters: {
     docs: {

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

@@ -19,6 +19,7 @@ export default function Bonus({
   },
   tncEnable = true,
   tncFixed = false,
+  showRoundedRating = false,
 }) {
   const { standardised_logo_url, logo_url, bonus, name } = operator || {};
   const logo = standardised_logo_url || logo_url;
@@ -45,7 +46,11 @@ export default function Bonus({
             <div className={styles.details}>
               {name && <span>{name}</span>}
               {(operator?.rating || bonus?.rating) && (
-                <Rating rating={operator.rating || bonus?.rating} showDecimal />
+                <Rating
+                  rating={operator.rating || bonus?.rating}
+                  showDecimal
+                  showRoundedRating={showRoundedRating}
+                />
               )}
             </div>
           </PrettyLink>
@@ -92,4 +97,5 @@ Bonus.propTypes = {
     type: PropTypes.string,
     name: PropTypes.string,
   }),
+  showRoundedRating: PropTypes.bool,
 };

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

@@ -47,6 +47,16 @@ export default {
         defaultValue: { summary: false },
       },
     },
+    showRoundedRating: {
+      name: 'showRoundedRating',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show rating as a rounded number or exact number',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
   },
   parameters: {
     docs: {

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

@@ -26,6 +26,7 @@ export default function TemplateOne({
   floating = false,
   closedBanner,
   setClosedBanner,
+  showRoundedRating = false,
 }) {
   const { translations } = useContext(Context) || {};
   const { standardised_logo_url, logo_url, bonus, name } = operator || {};
@@ -71,7 +72,11 @@ export default function TemplateOne({
             <div className={styles.details}>
               {name && <span>{name}</span>}
               {(operator?.rating || bonus?.rating) && (
-                <Rating rating={operator?.rating || bonus?.rating} showDecimal />
+                <Rating
+                  rating={operator?.rating || bonus?.rating}
+                  showDecimal
+                  showRoundedRating={showRoundedRating}
+                />
               )}
             </div>
           </PrettyLink>
@@ -137,4 +142,5 @@ TemplateOne.propTypes = {
     type: PropTypes.string,
     name: PropTypes.string,
   }),
+  showRoundedRating: PropTypes.bool,
 };

package/src/components/molecules/star-rating/one-star.js

@@ -11,8 +11,9 @@ const OneStar = ({
   numOfStars = 5,
   active = true,
   showLabel = false,
-  icon = false,
+  icon = null,
   showDecimal = false,
+  showRoundedRating = false,
 }) => {
   const { translations } = useContext(Context) || {};
 
@@ -20,7 +21,9 @@ const OneStar = ({
     <div className={`${styles.starRatingContainer || ''} ${!active && (styles.inactive || '')}`}>
       {showLabel && <span>{translate(translations, 'rating', 'Rating:')}</span>}
       {!icon ? <span className={styles.fullStar || ''} /> : icon}
-      {showDecimal ? getRating(rating).toFixed(1) : getRating(rating)}
+      {showDecimal
+        ? getRating(rating, showRoundedRating).toFixed(1)
+        : getRating(rating, showRoundedRating)}
       <span>/</span>
       <span>{numOfStars}</span>
     </div>
@@ -32,8 +35,9 @@ OneStar.propTypes = {
   rating: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]).isRequired,
   active: PropTypes.bool,
   showLabel: PropTypes.bool,
-  icon: PropTypes.bool,
+  icon: PropTypes.element,
   showDecimal: PropTypes.bool,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default OneStar;

package/src/components/molecules/star-rating/one-star.stories.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+
+import OneStar from './one-star';
+
+export default {
+  title: 'Theme/Molecules/Star Rating/One Star',
+  component: OneStar,
+  argTypes: {
+    numOfStars: {
+      name: 'numOfStars',
+      type: { name: 'number', required: true },
+      defaultValue: '',
+      description: 'Total number.',
+      table: {
+        type: { summary: 'one of 5 and 10' },
+        defaultValue: { summary: '' },
+      },
+      control: {
+        type: 'inline-radio',
+        options: [5, 10],
+      },
+    },
+    rating: {
+      name: 'rating',
+      type: { name: 'number', required: true },
+      defaultValue: '',
+      description: 'Rate number/s.',
+      table: {
+        type: { summary: 'number | array of numbers' },
+        defaultValue: { summary: '' },
+      },
+      control: { type: 'range', min: 0, max: 10, step: 0.2 },
+    },
+    active: {
+      name: 'active',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show as active star or not',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    showLabel: {
+      name: 'showLabel',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: "Show a translatable lable 'Rating'",
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    showDecimal: {
+      name: 'showDecimal',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show decimal if a whole number',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    showRoundedRating: {
+      name: 'showRoundedRating',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show rating as a rounded number or exact number',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A component that accepts the rate numbers and the total number and generates a rating div.',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <OneStar {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  numOfStars: 10,
+  rating: 6.2,
+};

package/src/helpers/rating.js

@@ -4,15 +4,15 @@ export const roundHalf = (num) => {
   return Math.round(num * 2) / 2;
 };
 
-export const getRating = (rating) => {
+export const getRating = (rating, showRoundedRating = false) => {
   // check if rating is an array or a number
   let rate = 0;
   if (Array.isArray(rating)) {
     const sum = rating.reduce((a, b) => parseInt(a) + parseInt(b));
     const avg = sum / rating.length;
-    rate = roundHalf(avg);
+    rate = showRoundedRating ? roundHalf(avg) : +avg;
   } else {
-    rate = roundHalf(rating);
+    rate = showRoundedRating ? roundHalf(rating) : +rating;
   }
   return rate;
 };

package/src/helpers/rating.test.js

@@ -8,8 +8,13 @@ describe('Rating Helper', () => {
     expect(roundHalf(3.75)).toEqual(4);
   });
 
-  test('getRating()', () => {
+  test('getRating() with rounded', () => {
     expect(getRating([5, 6, 7, 6.3])).toEqual(6);
-    expect(getRating(3.75)).toEqual(4);
+    expect(getRating(3.75, true)).toEqual(4);
+  });
+
+  test('getRating() without rounded', () => {
+    expect(getRating([5, 6, 7, 6.3])).toEqual(6);
+    expect(getRating(3.75, false)).toEqual(3.75);
   });
 });