gatsby-matrix-theme 42.0.5 → 43.0.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [43.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v42.0.6...v43.0.0) (2024-05-29)
+
+
+### Code Refactoring
+
+* changes to ratings, storybook and testing ([7c19c8c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7c19c8c907bd8132deebaeba52ddf27e0f7cfd73))
+* fix storybook path ([0fed1be](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0fed1bee81f418408f16bb583f665a500baba8ad))
+* make multiple contributors a template block ([d4e04b5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d4e04b5a3d43a4998f8ec8d219d1018f0aeb5bed))
+
+
+### Config
+
+* update theme ([7f19526](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7f195262be5ec3f7e3e9139bf97b24f862fd6d00))
+
+
+* Merge branch 'tm-4382-ratings' into 'master' ([b5670a4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b5670a49abadf4b3ff2892e5c0836afabc9c898c))
+* Merge branch 'tm-4417-multiple-contributors' into 'master' ([49d2141](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/49d2141fd494697f3ab52ee44794ff39a26941dd))
+* Merge branch 'master' into tm-4417-multiple-contributors ([6c2befd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6c2befd07ff8576587c918b3e3d78ffecc00679f))
+* Merge branch 'master' into tm-4382-ratings ([57a2d40](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/57a2d4065295d8e52b7bc0063817c3fda7274abf))
+* Merge branch 'master' into tm-4382-ratings ([d3ecc94](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d3ecc9402d4e4ac11266c2d431ae2a8fa9423a93))
+
+## [42.0.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v42.0.5...v42.0.6) (2024-05-28)
+
+
+### Bug Fixes
+
+* update average rating ([eba80fc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/eba80fc15f1fde0a66891a421dd8548609af4385))
+* update average rating ([f92b846](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f92b846faf9a6a2b923677bd0c7b3b69cc4f1f6e))
+
 ## [42.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v42.0.4...v42.0.5) (2024-05-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "42.0.5",
+  "version": "43.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "31.0.2",
+    "gatsby-core-theme": "32.0.0",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "prop-types": "15.7.2",

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

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
 /* eslint-disable react/forbid-prop-types */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -66,6 +67,7 @@ export default function ComparisonTable({
   ctaKey = 'play_now',
   type,
   tempate,
+  showRoundedRating = false,
 }) {
   const { translations } = useContext(Context) || {};
 
@@ -129,7 +131,11 @@ export default function ComparisonTable({
       case 'rating':
         return (
           <td key={key} className={styles.raiting}>
-            <StarRating numOfStars={5} rating={item?.relation?.rating} />
+            <StarRating
+              numOfStars={5}
+              rating={item?.relation?.rating}
+              showRoundedRating={showRoundedRating}
+            />
 
             {type === 'operator' && index === 0 ? null : (
               <ReviewLink
@@ -268,4 +274,5 @@ export default function ComparisonTable({
 
 ComparisonTable.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object),
+  showRoundedRating: PropTypes.bool,
 };

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

@@ -28,6 +28,7 @@ const TemplateFive = ({
   useThumbnail = true,
   storybookImage,
   storybookLogo,
+  showRoundedRating = false,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -76,6 +77,7 @@ const TemplateFive = ({
                   relation.fourth_rating,
                 ]
               }
+              showRoundedRating={showRoundedRating}
             />
           )}
         </div>
@@ -182,6 +184,7 @@ TemplateFive.propTypes = {
   affilateLink: PropTypes.bool,
   storybookImage: PropTypes.string,
   storybookLogo: PropTypes.string,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateFive;

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

@@ -46,7 +46,6 @@ Default.args = {
     },
     relation: {
       ...card.relation,
-      rating: '4.5',
       game_provider: {
         name: 'Wildz',
         path: 'wildz-casino',

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

@@ -27,6 +27,7 @@ const TemplateFour = ({
   affilateLink = false,
   useThumbnail = true,
   storybookImage,
+  showRoundedRating = false,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -67,6 +68,7 @@ const TemplateFour = ({
               relation.fourth_rating,
             ]
           }
+          showRoundedRating={showRoundedRating}
         />
       )}
       <div className={`${styles?.cardContent || ''} ${featured ? styles.featured : ''}`}>
@@ -161,6 +163,7 @@ TemplateFour.propTypes = {
   useThumbnail: PropTypes.bool,
   affilateLink: PropTypes.bool,
   storybookImage: PropTypes.string,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateFour;

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

@@ -34,7 +34,6 @@ Default.args = {
     title: 'Wolf Gold',
     relation: {
       ...card.relation,
-      rating: '4.5',
       game_provider: {
         name: 'NetEnt',
         path: 'netent-casinos',

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

@@ -25,6 +25,7 @@ const TemplateOne = ({
   affilateLink = false,
   useThumbnail = true,
   storybookImage,
+  showRoundedRating = false,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -82,6 +83,7 @@ const TemplateOne = ({
                     relation.fourth_rating,
                   ]
                 }
+                showRoundedRating={showRoundedRating}
               />
             )}
           </div>
@@ -163,6 +165,7 @@ TemplateOne.propTypes = {
   useThumbnail: PropTypes.bool,
   affilateLink: PropTypes.bool,
   storybookImage: PropTypes.string,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateOne;

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

@@ -34,7 +34,6 @@ Default.args = {
     title: 'Rick Wilde and the Book of dead',
     relation: {
       ...card.relation,
-      rating: '4.5',
       game_provider: {
         name: 'NetEnt',
         path: 'netent-casinos',

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

@@ -27,6 +27,7 @@ const TemplateThree = ({
   affilateLink = false,
   useThumbnail = true,
   storybookImage,
+  showRoundedRating = false,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -72,6 +73,7 @@ const TemplateThree = ({
                   relation.fourth_rating,
                 ]
               }
+              showRoundedRating={showRoundedRating}
             />
           )}
         </div>
@@ -167,6 +169,7 @@ TemplateThree.propTypes = {
   useThumbnail: PropTypes.bool,
   affilateLink: PropTypes.bool,
   storybookImage: PropTypes.string,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateThree;

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

@@ -34,7 +34,6 @@ Default.args = {
     title: 'Rick Wilde and the Book of dead',
     relation: {
       ...card.relation,
-      rating: '4.5',
       game_provider: {
         name: 'NetEnt',
         path: 'netent-casinos',

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

@@ -27,6 +27,7 @@ const TemplateTwo = ({
   affilateLink = false,
   useThumbnail = true,
   storybookImage,
+  showRoundedRating = false,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -76,6 +77,7 @@ const TemplateTwo = ({
                     relation.fourth_rating,
                   ]
                 }
+                showRoundedRating={showRoundedRating}
               />
             )}
           </div>
@@ -169,6 +171,7 @@ TemplateTwo.propTypes = {
   useThumbnail: PropTypes.bool,
   affilateLink: PropTypes.bool,
   storybookImage: PropTypes.string,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateTwo;

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

@@ -34,7 +34,6 @@ Default.args = {
     title: 'Rick Wilde and the Book of dead',
     relation: {
       ...card.relation,
-      rating: '4.5',
       game_provider: {
         name: 'NetEnt',
         path: 'netent-casinos',

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

@@ -23,6 +23,7 @@ const TemplateOneTwo = ({
   width = 150,
   height = 150,
   wordLimit = 50,
+  showRoundedRating = false,
 }) => {
   const { translations } = useContext(Context);
   const { title, path, relation, sections, description } = item || {};
@@ -55,6 +56,7 @@ const TemplateOneTwo = ({
               halfStars={false}
               rating={relation?.rating}
               showDot={false}
+              showRoundedRating={showRoundedRating}
             />
           </div>
         </div>
@@ -117,6 +119,7 @@ TemplateOneTwo.propTypes = {
   width: PropTypes.number,
   height: PropTypes.number,
   wordLimit: PropTypes.number,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateOneTwo;

package/src/components/atoms/cards/payment-method/template-one/template-one.test.js

@@ -18,7 +18,7 @@ describe('TemplateOneTwo component', () => {
     expect(paymentData.relation.games_count).toBe(10);
     expect(paymentData.relation.logo_filename_object.alt).toBe('Payment Method Item Logo');
     expect(paymentData.relation.logo_filename_object.filename).toBe('1652872814/revolut.svg');
-    expect(paymentData.relation.rating).toBe('4.5');
+    expect(paymentData.relation.rating).toBe('4.75');
   });
   it('renders the payment method name', () => {
     const paymentData = getPaymentData();

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

@@ -12,7 +12,13 @@ import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import SellingPoints from '../sellingPoints';
 import styles from './template-three.module.scss';
 
-const TemplateThree = ({ item, width = 150, height = 150, useOneStarRating = false }) => {
+const TemplateThree = ({
+  item,
+  width = 150,
+  height = 150,
+  useOneStarRating = false,
+  showRoundedRating = false,
+}) => {
   const { title, path, relation } = item || {};
   const { name, selling_points } = item?.relation || {};
 
@@ -44,6 +50,7 @@ const TemplateThree = ({ item, width = 150, height = 150, useOneStarRating = fal
               halfStars={false}
               rating={relation?.rating}
               showDot={false}
+              showRoundedRating={showRoundedRating}
             />
           </div>
         </div>
@@ -94,6 +101,7 @@ TemplateThree.propTypes = {
   }).isRequired,
   width: PropTypes.number,
   height: PropTypes.number,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateThree;

package/src/components/atoms/cards/payment-method/template-three/template-three.test.js

@@ -16,7 +16,7 @@ describe('TemplateThree', () => {
     expect(paymentData.relation.games_count).toBe(10);
     expect(paymentData.relation.logo_filename_object.alt).toBe('Payment Method Item Logo');
     expect(paymentData.relation.logo_filename_object.filename).toBe('1652872814/revolut.svg');
-    expect(paymentData.relation.rating).toBe('4.5');
+    expect(paymentData.relation.rating).toBe('4.75');
   });
   it('renders payment method name', () => {
     const paymentData = getPaymentData();

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

@@ -21,6 +21,7 @@ const PopupCard = ({
   buttonSize = '',
   buttonType = 'primary',
   template,
+  showRoundedRating = false,
 }) => {
   const operatorName = item.name;
   const oneLiner = item?.one_liners?.main?.one_liner;
@@ -36,7 +37,9 @@ const PopupCard = ({
           width={98}
           height={98}
         />
-        {showRating && <StarRating numOfStars={5} rating={item?.rating} />}
+        {showRating && (
+          <StarRating numOfStars={5} rating={item?.rating} showRoundedRating={showRoundedRating} />
+        )}
         {showName && <p className={styles?.name || ''}>{operatorName}</p>}
       </div>
       <Bonus module="popup" item={item} tracker={tracker} />
@@ -114,6 +117,7 @@ PopupCard.propTypes = {
   hasCollapse: PropTypes.bool,
   buttonSize: PropTypes.string,
   buttonType: PropTypes.string,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default PopupCard;

package/src/components/atoms/table/column/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
 /* eslint-disable react/forbid-prop-types */
 /* eslint-disable camelcase */
 import React from 'react';
@@ -28,6 +29,7 @@ const Index = ({
   chnageHeights,
   licensesMore,
   layout = 'list',
+  showRoundedRating = false,
 }) => {
   const { min_deposit } = item.bonus;
   const { max_withdrawal } = item.bonus;
@@ -75,7 +77,11 @@ const Index = ({
         <tr style={{ height: rating }} id="rating">
           <td>
             <div className={styles?.rating || ''}>
-              <StarRating numOfStars={5} rating={item.rating} />
+              <StarRating
+                numOfStars={5}
+                rating={item.rating}
+                showRoundedRating={showRoundedRating}
+              />
             </div>
           </td>
         </tr>
@@ -162,5 +168,6 @@ Index.propTypes = {
   chnageHeights: PropTypes.func,
   licensesMore: PropTypes.bool,
   layout: PropTypes.string,
+  showRoundedRating: PropTypes.bool,
 };
 export default Index;

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

@@ -27,6 +27,7 @@ const TemplateFive = ({
   type,
   numOfStars = 5,
   icon,
+  showRoundedRating = false,
 }) => {
   const { translations } = useContext(Context) || {};
 
@@ -86,6 +87,7 @@ const TemplateFive = ({
           {extraFields?.summary && (
             <div
               className={styles.decs}
+              // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: extraFields?.summary }}
             />
           )}
@@ -107,7 +109,7 @@ const TemplateFive = ({
                       '-'
                     )}
                   </span>
-                  <StarRating numOfStars={5} rating={value} />
+                  <StarRating numOfStars={5} rating={value} showRoundedRating={showRoundedRating} />
                 </div>
               );
             })}
@@ -159,6 +161,7 @@ TemplateFive.propTypes = {
     summary: PropTypes.node,
   }),
   icon: PropTypes.node,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateFive;

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

@@ -22,6 +22,7 @@ const TemplateFour = ({
   icon,
   numOfStars = 5,
   hasVariableComponent = false,
+  showRoundedRating = false,
 }) => {
   const { translations } = useContext(Context) || {};
   const ribbon = ribbons?.length > 0 ? ribbons[0] : null;
@@ -58,6 +59,7 @@ const TemplateFour = ({
             rating={numOfStars < 6 ? relation?.rating : Math.round(relation?.rating * 2)}
             icon={<FaStar title="Star Icon" />}
             showDot={false}
+            showRoundedRating={showRoundedRating}
           />
         ) : (
           <div className={styles.ratingInactive}>
@@ -113,6 +115,7 @@ TemplateFour.propTypes = {
   hasVariableComponent: PropTypes.bool,
   numOfStars: PropTypes.number,
   icon: PropTypes.node,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateFour;

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

@@ -23,6 +23,7 @@ const TemplateOneTwo = ({
   icon,
   hasVariableComponent = false,
   template = 'template_one',
+  showRoundedRating = false,
 }) => {
   const { translations } = useContext(Context) || {};
 
@@ -89,6 +90,7 @@ const TemplateOneTwo = ({
               rating={numOfStars < 6 ? relation?.rating : Math.round(relation?.rating * 2)}
               icon={<FaStar title="Star Icon" />}
               showDot={false}
+              showRoundedRating={showRoundedRating}
             />
           ) : (
             <div className={styles.ratingInactive}>
@@ -132,6 +134,7 @@ TemplateOneTwo.propTypes = {
   numOfStars: PropTypes.number,
   template: PropTypes.string,
   icon: PropTypes.node,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateOneTwo;

package/src/components/molecules/header/variants/payment/template-five/index.js

@@ -26,6 +26,7 @@ const TemplateOneThree = ({
   description,
   numOfStars,
   CostumeComponent = null,
+  showRoundedRating = false,
 }) => {
   const [isReadMore, setIsReadMore] = useState(true);
   const { translations } = useContext(Context) || {};
@@ -61,7 +62,12 @@ const TemplateOneThree = ({
 
           {CostumeComponent && <div className={styles.costumeComponent}>{CostumeComponent}</div>}
 
-          <Rating item={relation} type={type} numOfStars={numOfStars} />
+          <Rating
+            item={relation}
+            type={type}
+            numOfStars={numOfStars}
+            showRoundedRating={showRoundedRating}
+          />
         </div>
       </div>
       {description && (
@@ -119,6 +125,7 @@ TemplateOneThree.propTypes = {
   description: PropTypes.string,
   icon: PropTypes.node,
   CostumeComponent: PropTypes.node,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateOneThree;

package/src/components/molecules/header/variants/payment/template-four/index.js

@@ -15,6 +15,7 @@ const TemplateFour = ({
   pageTemplate,
   icon,
   numOfStars = 5,
+  showRoundedRating = false,
 }) => {
   const headerBonus = sections?.header?.modules?.find((bonus) => bonus?.name === 'bonus');
 
@@ -41,7 +42,12 @@ const TemplateFour = ({
           />
         </div>
         <div className={styles.ratings}>
-          <Rating item={relation} type={type} numOfStars={numOfStars} />
+          <Rating
+            item={relation}
+            type={type}
+            numOfStars={numOfStars}
+            showRoundedRating={showRoundedRating}
+          />
         </div>
         {headerBonus && (
           <OperatorBanner
@@ -75,6 +81,7 @@ TemplateFour.propTypes = {
   pageTemplate: PropTypes.string,
   numOfStars: PropTypes.number,
   icon: PropTypes.node,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateFour;

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

@@ -28,6 +28,7 @@ const TemplateOneThree = ({
   numOfStars,
   template = 'template_one',
   CostumeComponent = null,
+  showRoundedRating = false,
 }) => {
   const [isReadMore, setIsReadMore] = useState(true);
   const { translations } = useContext(Context) || {};
@@ -82,6 +83,7 @@ const TemplateOneThree = ({
                 numOfStars={numOfStars}
                 rating={relation?.rating}
                 icon={<FaStar title="Star Icon" />}
+                showRoundedRating={showRoundedRating}
               />
             ) : (
               <div className={styles.ratingInactive}>
@@ -154,6 +156,7 @@ TemplateOneThree.propTypes = {
   description: PropTypes.string,
   icon: PropTypes.node,
   CostumeComponent: PropTypes.node,
+  showRoundedRating: PropTypes.bool,
 };
 
 export default TemplateOneThree;

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

@@ -24,6 +24,7 @@ const TemplateTwo = ({
   icon,
   description,
   numOfStars,
+  showRoundedRating = false,
 }) => {
   const [isReadMore, setIsReadMore] = useState(true);
   const descriptionRef = useRef(null);
@@ -62,6 +63,7 @@ const TemplateTwo = ({
                 numOfStars={numOfStars}
                 rating={relation?.rating}
                 icon={<FaStar title="Star Icon" />}
+                showRoundedRating={showRoundedRating}
               />
             ) : (
               <div className={styles.ratingInactive}>
@@ -124,5 +126,6 @@ TemplateTwo.propTypes = {
   numOfStars: PropTypes.number,
   description: PropTypes.string,
   icon: PropTypes.node,
+  showRoundedRating: PropTypes.bool,
 };
 export default TemplateTwo;

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

@@ -40,7 +40,8 @@ export default function SlotHeader({ page, image, showExtraRatings = false }) {
             </div>
             <div className={styles.averageRating}>
               <FaStar title="Star Icon" s />
-              <p>{averageRating}/5</p>
+              <p>{averageRating}/</p>
+              <p>5</p>
             </div>
           </div>
         </div>

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

@@ -37,10 +37,10 @@ Default.args = {
   page: {
     title: 'Game slot',
     relation: {
-      third_rating: 3,
-      first_rating: 4,
+      third_rating: 3.6,
+      first_rating: 4.2,
       rtp: 30,
-      average_rating: 4.5,
+      average_rating: 4.4,
       thumbnail_filename_object: {
         filename: 'holiday-season-game-thumbnail.jpeg',
       },

package/src/components/molecules/header/variants/slot/template-two/template-two.stories.js

@@ -37,10 +37,10 @@ Default.args = {
   page: {
     title: 'Game slot',
     relation: {
-      third_rating: 3,
-      first_rating: 4,
+      third_rating: 3.7,
+      first_rating: 4.3,
       rtp: 30,
-      average_rating: 4.5,
+      average_rating: 4.9,
       thumbnail_filename_object: {
         filename: 'holiday-season-game-thumbnail.jpeg',
       },

package/src/components/molecules/multiple-contributors/contributor/contributor.stories.js

@@ -15,7 +15,7 @@ import Contributor from '.';
 const authorData = getAuthorList({})[1];
 
 export default {
-  title: 'Theme/Layout/Author/Multiple Contributors/Single Contributor',
+  title: 'Theme/Modules/Template Blocks/Multiple Contributors/Single Contributor',
   component: Contributor,
   argTypes: {
     contributor: {

package/src/components/molecules/multiple-contributors/multiple-contributors.module.scss

@@ -8,15 +8,10 @@
 .container {
   max-width: var(--main-container-max);
   margin: 0 auto;
-  padding: 1.6rem 0;
-  width: calc(100% - 3.2rem);
+  padding: var(--multiple-contributors-container-padding, 1.6rem 0);
   @include flex-direction(column);
   gap: 2.4rem;
-
-  @include min(tablet) {
-    padding: 1.6rem 2.4rem;
-    width: 100%;
-  }
+  width: 100%;
 }
 
 .heading {

package/src/components/molecules/multiple-contributors/multiple-contributors.stories.js

@@ -15,7 +15,7 @@ const authorData = getAuthorList({})[1];
 const reviewerData = getAuthorList({})[1];
 
 export default {
-  title: 'Theme/Layout/Author/Multiple Contributors',
+  title: 'Theme/Modules/Template Blocks/Multiple Contributors',
   component: Author,
   argTypes: {
     authors: {