gatsby-matrix-theme 43.0.4 → 44.0.1

package/CHANGELOG.md

@@ -1,3 +1,49 @@
+## [44.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v44.0.0...v44.0.1) (2024-06-17)
+
+
+### Code Refactoring
+
+* typo fix ([7effc18](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7effc18a01a6333313c8f125996c8654dc127a3c))
+
+# [44.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v43.0.4...v44.0.0) (2024-06-13)
+
+
+### Bug Fixes
+
+* conflicts ([552a685](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/552a6856f3fd0074d2eba75d5f1a4e560a439e7b))
+* conflicts ([5a39f70](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5a39f70836411a75f0ae6457d7627525f2c69844))
+* images ([c7428a4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c7428a4ce0fbccb882bea07669b45a0278d77e68))
+* images ([7dec223](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7dec2236e5060f38bda603d6dc8f792b301dc6fe))
+* update theme ([92fb848](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/92fb848bae99dc13cc855f7bc9b6fff4ebecbf8e))
+
+
+### Code Refactoring
+
+* add border ([2779d6a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2779d6a3da67925396ca5973c6b6bc268618235c))
+* add css vars ([a98cc2a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a98cc2a714fc0df9f91c3fa0e7092d765a133644))
+* add gap ([b6cd5b6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b6cd5b6d7fca18c692c3e5ae7d811b47f1d09fe6))
+* change component to accommodate demosite data ([b2d706f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b2d706f8ac6165673f000b6d0feaab3055d36190))
+* changes to aria labels ([f3c42b5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f3c42b56db4c251e4f2d98168e16711aba47d4e2))
+* changes to statistics component ([9e22b07](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9e22b07cc517b6cb51db44f6a66bcf8ee2581535))
+* changes to stats counter ([d42a86c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d42a86c37675356bef6a5a83e8ab42d2463fe04a))
+* correction to alignment ([ad5ba5d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ad5ba5d5f3b443fa80b4677499d3bc337cde7200))
+* raise start point for larger numbers ([ef5a87d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ef5a87d90c304d6a7f663cc78ad19a58cf1d47b6))
+* rearrange css vars ([77c3f3d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/77c3f3d94f7d8fd003d02236cf5445051931d6ba))
+* remove stats module from matrix ([b387421](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b3874212266a4005e1f4af276d364dda7d0aaa78))
+
+
+* Merge branch 'tm-4416-aria-labels' into 'master' ([1b388ac](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1b388ac3c3d9ceab08a61c224ce3e08dc0430e89))
+* Merge branch 'tm-4327-stats' into 'master' ([489d90a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/489d90a923d8eea59902b59ac088220dd43071d9))
+* Merge branch 'master' into tm-4327-stats ([572e14a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/572e14a9f71858182d20672ef10d4d24144a3936))
+* Merge branch 'tm-4358-image-resize' into 'master' ([3701730](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3701730c7f3f10c9548a8edf720c99437ed045ff))
+* Merge branch 'master' into tm-4327-stats ([34379ef](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/34379effb92213838cf8f4e3e1dd4a22769c5a9e))
+
+
+### Tests
+
+* add tests ([0d24bdc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0d24bdce287ef67213bb5af679adb508300560fd))
+* fix test ([23a16b2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/23a16b25cb94cf4572b21466a8b559dde1a7fe9d))
+
 ## [43.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v43.0.3...v43.0.4) (2024-06-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "43.0.4",
+  "version": "44.0.1",
   "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": "32.0.6",
+    "gatsby-core-theme": "33.0.1",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "prop-types": "15.7.2",

package/src/components/atoms/author/socials/index.js

@@ -17,12 +17,15 @@ export default function Socials({
     linkedin: <FaLinkedin title="Linkedin Icon" />,
     twitter: (
       <svg
+        role="img"
+        aria-labelledby="twitterIcon"
         width="1em"
         height="1em"
         viewBox="0 0 13 12"
         fill="currentcolor"
         xmlns="http://www.w3.org/2000/svg"
       >
+        <title id="twitterIcon">Twitter Icon</title>
         <path d="M9.97574 0H11.9181L7.67469 4.84989L12.6667 11.4495H8.75802L5.69659 7.44685L2.19363 11.4495H0.250147L4.78881 6.26203L0 0H4.0079L6.7752 3.65856L9.97574 0ZM9.29408 10.287H10.3703L3.42314 1.1015H2.26822L9.29408 10.287Z" />
       </svg>
     ),

package/src/components/atoms/author/template-two/index.js

@@ -11,14 +11,16 @@ const AuthorTemplateTwo = ({
   authorImage,
   showLinks = true,
   verify = '../../../../images/verifiedAuthor.svg',
+  width = '21',
+  height = '21',
 }) => (
   <span className={styles.authorImage}>
     {showLinks ? (
       <Link to={authorPath}>
         <LazyImage
-          src={imagePrettyUrl(authorImage, 21, 21)}
-          width={21}
-          height={21}
+          src={imagePrettyUrl(authorImage, width, height)}
+          width={width}
+          height={height}
           alt={authorName}
         />
         <LazyImage src={verify} alt="verify" width={10} height={10} />
@@ -26,9 +28,9 @@ const AuthorTemplateTwo = ({
     ) : (
       <>
         <LazyImage
-          src={imagePrettyUrl(authorImage, 21, 21)}
-          width={21}
-          height={21}
+          src={imagePrettyUrl(authorImage, width, height)}
+          width={width}
+          height={height}
           alt={authorName}
         />
         <LazyImage src={verify} alt="verify" width={10} height={10} />
@@ -43,6 +45,8 @@ AuthorTemplateTwo.propTypes = {
   authorImage: PropTypes.string,
   verify: PropTypes.string,
   showLinks: PropTypes.bool,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };
 
 export default AuthorTemplateTwo;

package/src/components/atoms/author-card/index.js

@@ -13,7 +13,7 @@ const AuthorCard = ({ author, width = 60, height = 60 }) => {
     <div className={styles.authorCard || ''}>
       <div className={styles.img || ''}>
         <LazyImage
-          src={imagePrettyUrl(image)}
+          src={imagePrettyUrl(image, width, height)}
           alt={getAltText(image_object, image_alt || name)}
           width={width}
           height={height}

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

@@ -30,7 +30,12 @@ const ArticleCard = ({
         aria-label={`${title} Link`}
       >
         {banner ? (
-          <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
+          <LazyImage
+            width={width}
+            height={height}
+            src={imagePrettyUrl(banner, width, height)}
+            alt={title}
+          />
         ) : (
           <GatsbyImg
             alt={title}

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

@@ -8,7 +8,7 @@ import Socials from '../../../author/socials';
 import styles from './template-one.module.scss';
 import { imagePrettyUrl, getAltText, translate, textWordsLimit } from '~helpers/getters';
 
-export default function TemplateOne({ item }) {
+export default function TemplateOne({ item, width = '72', height = '72' }) {
   const author = item.relation;
   const { translations } = useContext(Context);
 
@@ -18,10 +18,10 @@ export default function TemplateOne({ item }) {
         {author.pages_count} {translate(translations, 'posts', 'Posts')}
       </span>
       <LazyImage
-        src={imagePrettyUrl(author.image_object.filename, 72, 72)}
+        src={imagePrettyUrl(author.image_object.filename, width, height)}
         alt={getAltText(author.image_object, author.image_alt || author.name)}
-        width={72}
-        height={72}
+        width={width}
+        height={height}
       />
       <span className={styles?.title || ''}>{author.author_title}</span>
       <span className={styles?.name || ''}>{author.name}</span>
@@ -54,4 +54,6 @@ TemplateOne.propTypes = {
       }),
     }),
   }),
+  width: PropTypes.string,
+  height: PropTypes.string,
 };

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

@@ -7,17 +7,17 @@ import Socials from '../../../author/socials';
 import styles from './template-two.module.scss';
 import { imagePrettyUrl, getAltText, translate } from '~helpers/getters';
 
-export default function TemplateTwo({ item }) {
+export default function TemplateTwo({ item, width = '80', height = '80' }) {
   const author = item.relation;
   const { translations } = useContext(Context);
 
   return (
     <div className={styles.container}>
       <LazyImage
-        src={imagePrettyUrl(author.image_object.filename, 80, 80)}
+        src={imagePrettyUrl(author.image_object.filename, width, height)}
         alt={getAltText(author.image_object, author.image_alt || author.name)}
-        width={80}
-        height={80}
+        width={width}
+        height={height}
       />
       <div className={styles.nameContainer}>
         <span className={styles.title}>{author.author_title}</span>
@@ -48,4 +48,6 @@ TemplateTwo.propTypes = {
       }),
     }),
   }),
+  width: PropTypes.string,
+  height: PropTypes.string,
 };

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

@@ -67,6 +67,12 @@ export default function ComparisonTable({
   ctaKey = 'play_now',
   type,
   tempate,
+  operatorWidth = '89',
+  operatorHeight = '89',
+  paymentWidth = '72',
+  paymentHeight = '32',
+  licenseWidth = '72',
+  licenseHeight = '32',
   showRoundedRating = false,
 }) {
   const { translations } = useContext(Context) || {};
@@ -87,9 +93,9 @@ export default function ComparisonTable({
           <td key={key} className={styles.casinoName}>
             {imageObject?.filename ? (
               <LazyImg
-                src={imagePrettyUrl(imageObject?.filename, 89, 89)}
-                height={89}
-                width={89}
+                src={imagePrettyUrl(imageObject?.filename, operatorWidth, operatorHeight)}
+                height={operatorHeight}
+                width={operatorWidth}
                 alt={itemName}
               />
             ) : (
@@ -150,6 +156,7 @@ export default function ComparisonTable({
         );
       case 'bonus':
         return (
+          // eslint-disable-next-line jsx-a11y/control-has-associated-label
           <td key={key} className={styles.bonus}>
             <Bonus module="comparison_table" tracker="main" item={item?.relation} />
           </td>
@@ -182,9 +189,9 @@ export default function ComparisonTable({
                     <Link to={deposit?.path}>
                       <LazyImg
                         key={`${key}-${deposit.name}`}
-                        src={imagePrettyUrl(logo, 72, 32)}
-                        width={72}
-                        height={32}
+                        src={imagePrettyUrl(logo, paymentWidth, paymentHeight)}
+                        width={paymentWidth}
+                        height={paymentHeight}
                         alt={deposit.name}
                       />
                     </Link>
@@ -229,9 +236,9 @@ export default function ComparisonTable({
                   return (
                     <LazyImg
                       key={license.name}
-                      src={imagePrettyUrl(license?.logo_filename, 72, 72)}
-                      height={32}
-                      width={72}
+                      src={imagePrettyUrl(license?.logo_filename, licenseWidth, licenseHeight)}
+                      height={licenseHeight}
+                      width={licenseWidth}
                       alt={license.name}
                     />
                   );
@@ -275,4 +282,10 @@ export default function ComparisonTable({
 ComparisonTable.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object),
   showRoundedRating: PropTypes.bool,
+  operatorWidth: PropTypes.string,
+  operatorHeight: PropTypes.string,
+  paymentWidth: PropTypes.string,
+  paymentHeight: PropTypes.string,
+  licenseWidth: PropTypes.string,
+  licenseHeight: PropTypes.string,
 };

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

@@ -20,6 +20,8 @@ const TemplateFour = ({
   authorTemplateTwo = true,
   verifyIcon = '../../../images/verify.svg',
   showBonusForAll = false,
+  width = '88',
+  height = '88',
   BonusTemplate = BonusTemplateDefault,
 }) => {
   const { ribbons } = item?.relation;
@@ -38,8 +40,8 @@ const TemplateFour = ({
         item={item}
         showReviewLink={false}
         costumeStyle={styles.operatorDetails}
-        imageWidth={88}
-        imageHeight={88}
+        imageWidth={width}
+        imageHeight={height}
         ribbons={ribbons}
         showRibbon={showRibbon}
         icon={verifyIcon}
@@ -125,6 +127,8 @@ TemplateFour.propTypes = {
   showRatingDecimal: PropTypes.bool,
   showBonusForAll: PropTypes.bool,
   BonusTemplate: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };
 
 export default TemplateFour;

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

@@ -34,6 +34,10 @@ const TemplateOne = ({
   showBonusForAll = false,
   verifyIcon = '../../../images/verify.svg',
   showOperatorCta = true,
+  operatorLogoWidth = '88',
+  operatorLogoHeight = '88',
+  paymentLogoWidth = '54',
+  paymentLogoHeight = '36',
   BonusTemplate = Bonus,
 }) => {
   const ribbons = item?.relation?.ribbons || [];
@@ -54,8 +58,8 @@ const TemplateOne = ({
         item={item}
         showReviewLink={false}
         costumeStyle={styles.operatorDetails}
-        imageWidth={88}
-        imageHeight={88}
+        imageWidth={operatorLogoWidth}
+        imageHeight={operatorLogoHeight}
         ribbons={ribbons}
         showRibbon={showRibbon}
         icon={verifyIcon}
@@ -130,9 +134,9 @@ const TemplateOne = ({
                     <Link to={deposit?.path}>
                       <LazyImage
                         key={`${deposit.id}-${deposit.name}`}
-                        src={imagePrettyUrl(logo, 54, 36)}
-                        width={54}
-                        height={36}
+                        src={imagePrettyUrl(logo, paymentLogoWidth, paymentLogoHeight)}
+                        width={paymentLogoWidth}
+                        height={paymentLogoHeight}
                         alt={deposit.name}
                       />
                     </Link>
@@ -202,6 +206,10 @@ TemplateOne.propTypes = {
   showRatingDecimal: PropTypes.bool,
   BonusTemplate: PropTypes.string,
   showOperatorCta: PropTypes.bool,
+  operatorLogoWidth: PropTypes.string,
+  operatorLogoHeight: PropTypes.string,
+  paymentLogoWidth: PropTypes.string,
+  paymentLogoHeight: PropTypes.string,
 };
 
 export default TemplateOne;

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

@@ -24,6 +24,8 @@ const TemplateThree = ({
   hasVariableComponent = false,
   showBonusForAll = false,
   showOperatorCta = true,
+  operatorLogoWidth = '88',
+  operatorLogoHeight = '88',
   BonusTemplate = BonusTemplateDefault,
 }) => {
   const { ribbons } = item?.relation;
@@ -42,8 +44,8 @@ const TemplateThree = ({
         item={item}
         showReviewLink={false}
         costumeStyle={styles.operatorDetails}
-        imageWidth={88}
-        imageHeight={88}
+        imageWidth={operatorLogoWidth}
+        imageHeight={operatorLogoHeight}
         ribbons={ribbons}
         showRibbon={showRibbon}
         icon={verifyIcon}
@@ -148,6 +150,8 @@ TemplateThree.propTypes = {
   showBonusForAll: PropTypes.bool,
   BonusTemplate: PropTypes.string,
   showOperatorCta: PropTypes.bool,
+  operatorLogoWidth: PropTypes.string,
+  operatorLogoHeight: PropTypes.string,
 };
 
 export default TemplateThree;

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

@@ -28,6 +28,10 @@ const TemplateTwo = ({
   hasVariableComponent = false,
   verifyIcon = '../../../images/verify.svg',
   showBonusForAll = false,
+  operatorLogoWidth = '88',
+  operatorLogoHeight = '88',
+  width = '54',
+  height = '36',
   BonusTemplate = BonusTemplateDefault,
 }) => {
   const ribbons = item?.relation?.ribbons || [];
@@ -48,8 +52,8 @@ const TemplateTwo = ({
         item={item}
         showReviewLink={false}
         costumeStyle={styles.operatorDetails}
-        imageWidth={88}
-        imageHeight={88}
+        imageWidth={operatorLogoWidth}
+        imageHeight={operatorLogoHeight}
         ribbons={ribbons}
         showRibbon={showRibbon}
         contentRibbon={contentRibbon}
@@ -103,9 +107,9 @@ const TemplateTwo = ({
                   <Link to={deposit?.path}>
                     <LazyImage
                       key={`${deposit.id}-${deposit.name}`}
-                      src={imagePrettyUrl(logo, 54, 36)}
-                      width={54}
-                      height={36}
+                      src={imagePrettyUrl(logo, width, height)}
+                      width={width}
+                      height={height}
                       alt={deposit.name}
                     />
                   </Link>
@@ -181,6 +185,10 @@ TemplateTwo.propTypes = {
   contentRibbon: PropTypes.bool,
   showBonusForAll: PropTypes.bool,
   BonusTemplate: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  operatorLogoWidth: PropTypes.string,
+  operatorLogoHeight: PropTypes.string,
 };
 
 export default TemplateTwo;

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

@@ -22,6 +22,8 @@ const PopupCard = ({
   buttonType = 'primary',
   template,
   showRoundedRating = false,
+  width = '98',
+  height = '98',
 }) => {
   const operatorName = item.name;
   const oneLiner = item?.one_liners?.main?.one_liner;
@@ -32,10 +34,10 @@ const PopupCard = ({
     <div className={styles?.popupCard || ''}>
       <div className={styles?.imgContainer || ''}>
         <LazyImage
-          src={imagePrettyUrl(imageObject?.filename || item?.logo_url, 98, 98)}
+          src={imagePrettyUrl(imageObject?.filename || item?.logo_url, width, height)}
           alt={getAltText(imageObject, oneLiner)}
-          width={98}
-          height={98}
+          width={height}
+          height={width}
         />
         {showRating && (
           <StarRating numOfStars={5} rating={item?.rating} showRoundedRating={showRoundedRating} />
@@ -118,6 +120,8 @@ PopupCard.propTypes = {
   buttonSize: PropTypes.string,
   buttonType: PropTypes.string,
   showRoundedRating: PropTypes.bool,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };
 
 export default PopupCard;

package/src/components/atoms/circle-rating/circle-rating.js

@@ -8,7 +8,8 @@ const getCircleSection = (radius, section) =>
   Math.floor(getCircumference(radius) - section * (getCircumference(radius) / 5));
 
 const CircleRating = ({ rating, radius, strokeWidth, gradientId, backgroundColor }) => (
-  <svg xmlns="http://www.w3.org/2000/svg">
+  <svg role="img" aria-labelledby="circleRatingIcon" xmlns="http://www.w3.org/2000/svg">
+    <title id="circleRatingIcon">Circle Rating icon</title>
     <circle
       cx={radius + 10}
       cy={radius + 10}

package/src/components/atoms/circle-rating/svg-gradient.js

@@ -1,8 +1,17 @@
-import React from 'react'
+import React from 'react';
+import PropTypes from 'prop-types';
 
 // Call once to create gradient, then use in your SVG's
 const SvgGradient = ({ gradientId, startGradientColor, endGradientColor }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" className="invisible" width="0" height="0">
+  <svg
+    role="img"
+    aria-labelledby="svgGradient"
+    xmlns="http://www.w3.org/2000/svg"
+    className="invisible"
+    width="0"
+    height="0"
+  >
+    <title id="svgGradient">SVG Gradient</title>
     <defs>
       <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="100%">
         <stop stopColor={startGradientColor} offset="25%" />
@@ -10,12 +19,18 @@ const SvgGradient = ({ gradientId, startGradientColor, endGradientColor }) => (
       </linearGradient>
     </defs>
   </svg>
-)
+);
+
+SvgGradient.propTypes = {
+  gradientId: PropTypes.string,
+  startGradientColor: PropTypes.string,
+  endGradientColor: PropTypes.string,
+};
 
 SvgGradient.defaultProps = {
   gradientId: 'diagonal-gradient',
   startGradientColor: '#4ecdc4',
-  endGradientColor: '#1a535c'
-}
+  endGradientColor: '#1a535c',
+};
 
-export default SvgGradient
+export default SvgGradient;

package/src/components/atoms/feedback/template-two/index.js

@@ -18,6 +18,8 @@ const FeedBack = ({
   falseVotes,
   contactUs = '/contact-us',
   operatorImg,
+  width = '80',
+  height = '80',
 }) => {
   const { translations } = useContext(Context) || {};
   const [voted, setVote] = useState(null);
@@ -118,7 +120,7 @@ const FeedBack = ({
 
   return (
     <div className={styles?.feedbackBox || ''}>
-      <LazyImage src={imagePrettyUrl(operatorImg)} />
+      <LazyImage src={imagePrettyUrl(operatorImg, width, height)} width={width} height={height} />
       {voted === null && (
         <span className={styles.title}>
           {translate(
@@ -142,6 +144,8 @@ FeedBack.propTypes = {
   falseVotes: PropTypes.number,
   contactUs: PropTypes.string,
   operatorImg: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };
 
 export default FeedBack;

package/src/components/atoms/header-operator-bannner/index.js

@@ -13,6 +13,8 @@ const HeaderOperatorBaner = ({
   buttonType = 'primary',
   template,
   module = 'header_operator',
+  width = '64',
+  height = '64',
 }) => {
   const { translations } = useContext(Context) || {};
 
@@ -46,9 +48,9 @@ const HeaderOperatorBaner = ({
         {logo?.filename && (
           <LazyImage
             loading="eager"
-            src={imagePrettyUrl(logo?.filename, 64, 64)}
-            width={64}
-            height={64}
+            src={imagePrettyUrl(logo?.filename, width, height)}
+            width={width}
+            height={height}
             alt={getAltText(logo, operator?.name)}
           />
         )}
@@ -74,6 +76,8 @@ HeaderOperatorBaner.propTypes = {
   template: PropTypes.string,
   buttonType: PropTypes.string,
   module: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };
 
 export default HeaderOperatorBaner;

package/src/components/atoms/recommended-operators/index.js

@@ -18,6 +18,8 @@ const RecommendedOperators = ({
   title = 'Recommended Casinos:',
   buttonType = 'primary',
   operators,
+  operatorLogoWidth,
+  operatorLogoHeight,
 }) => (
   <div className={styles.reccommendedCasinos}>
     <h3>{title}</h3>
@@ -33,6 +35,8 @@ const RecommendedOperators = ({
             showReviewLink={false}
             costumeStyle={styles.operatorDetails}
             module="wagering_calculator"
+            imageWidth={operatorLogoWidth}
+            imageHeight={operatorLogoHeight}
           />
           <div className={styles.operatorBonus}>
             <PrettyLink
@@ -86,4 +90,6 @@ RecommendedOperators.propTypes = {
       name: PropTypes.string,
     }),
   ]),
+  operatorLogoWidth: PropTypes.string,
+  operatorLogoHeight: PropTypes.string,
 };

package/src/components/atoms/social-icons/index.js

@@ -18,12 +18,15 @@ const SocialIcons = ({
     facebook: <FaFacebookSquare title="Facebook Icon" />,
     twitter: (
       <svg
+        role="img"
+        aria-labelledby="twitterIcon"
         width="1em"
         height="1em"
         viewBox="0 0 13 12"
         fill="currentcolor"
         xmlns="http://www.w3.org/2000/svg"
       >
+        <title id="twitterIcon">Twitter Icon</title>
         <path d="M9.97574 0H11.9181L7.67469 4.84989L12.6667 11.4495H8.75802L5.69659 7.44685L2.19363 11.4495H0.250147L4.78881 6.26203L0 0H4.0079L6.7752 3.65856L9.97574 0ZM9.29408 10.287H10.3703L3.42314 1.1015H2.26822L9.29408 10.287Z" />
       </svg>
     ),