gatsby-core-theme 21.0.4 → 21.0.6

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [21.0.6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v21.0.5...v21.0.6) (2023-05-03)
+
+
+### Bug Fixes
+
+* cleanup clases ([35f39cd](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/35f39cde0f3abf06f1ecc4560b57fc3398fe2581))
+* cleanup class name ([8bc641b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8bc641bb7f080e4bac10ea7e5fa2b9c211a15975))
+* cleanup class name for atoms and change format of class name ([6476017](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/64760178f164ae7f896f1593aa0e97121dbe1e88))
+* cleanup classes for molecules ([2f72e58](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2f72e58c2c303215e1717c5e120d98655b80a5ea))
+* fix conflicts ([738e4bc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/738e4bc2e40bf1d066cdef5cee2aa332bb08a723))
+* geo target fallback ([e54c924](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e54c924bffd75f61d6332793a5dcb9830dc34085))
+* testing ([6aad4d2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6aad4d249a2a2a1f2a32e205277b02ca99c57604))
+
+
+* Merge branch 'tm-3399-cleanup-css' into 'master' ([5da620f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5da620f7e97273782bc330a20c45db2a45516294))
+* Merge branch 'testing-geoTargeting' into 'master' ([ff5bc62](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ff5bc623c16a2efb4d2608c4542ffcccdcff2029))
+
+## [21.0.5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v21.0.4...v21.0.5) (2023-04-28)
+
+
+### Bug Fixes
+
+* geo targeting ([fda3769](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fda37694e6fcfb30fed909095faa6132b64805c0))
+
+
+### Code Refactoring
+
+* update operator banner cta styling ([dbca77e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/dbca77e78d6ce56372a23be0e9c806fc17d3341a))
+
+
+* Merge branch 'geo-targeting-fix' into 'master' ([e345c3f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e345c3fa86a9eaca722ea9e1d6a268afa25242a6))
+* Merge branch 'tm-3401-operator-banner-cta-style-update' into 'master' ([3b00e0c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3b00e0c3ecbc91cdfc62ae9e3cb9a6d997d74b79))
+
 ## [21.0.4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v21.0.3...v21.0.4) (2023-04-26)
 
 

package/gatsby-config.js

@@ -11,6 +11,7 @@ module.exports = {
           esModule: false,
           modules: {
             namedExport: false,
+            localIdentName: '[name]__[local]', // customize the class name structure here
           },
         },
         additionalData: '@import "gatsby-core-theme/src/styles/globals.scss";',

package/gatsby-node.esm.js

@@ -338,37 +338,42 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
         });
       });
 
-      const operatorsByMarket = groupBy(operatorsAllMarket, 'market');
-
-      trackerNames.forEach((link) => {
-        const trackerLinkPath = generateTrackerLink(
-          operatorsAllMarket[0],
-          link,
-          false,
-          pageTemplate
-        )
-          .toLowerCase()
-          .replace(' ', '_');
-
-        const trackerPageObject = {
-          meta_title: 'Tracker',
-          template: pageTemplate,
-          title: 'Tracker',
-          relation_type: 'page',
-          language: languageKey,
-          path: trackerLinkPath,
-          meta_robots: ['noindex', 'nofollow'],
-        };
-        createPage({
-          path: trackerLinkPath,
-          component: require.resolve('./src/components/app.js'),
-          context: {
-            page: trackerPageObject,
-            siteInfo,
-            operatorsByMarket,
-            isTrackeGeo: true,
-            isLiveStreamProvider: false,
-          },
+      const operatorsByType = groupBy(operatorsAllMarket, 'type');
+
+      Object.keys(operatorsByType).forEach((type) => {
+        const operatorsByMarket = groupBy(operatorsByType[type], 'market');
+        console.log(trackerNames);
+
+        trackerNames.forEach((link) => {
+          const trackerLinkPath = generateTrackerLink(
+            operatorsByType[type][0],
+            link,
+            false,
+            pageTemplate
+          )
+            .toLowerCase()
+            .replace(' ', '_');
+          console.log(trackerLinkPath);
+          const trackerPageObject = {
+            meta_title: 'Tracker',
+            template: pageTemplate,
+            title: 'Tracker',
+            relation_type: 'page',
+            language: languageKey,
+            path: trackerLinkPath,
+            meta_robots: ['noindex', 'nofollow'],
+          };
+          createPage({
+            path: trackerLinkPath,
+            component: require.resolve('./src/components/app.js'),
+            context: {
+              page: trackerPageObject,
+              siteInfo,
+              operatorsByMarket,
+              isTrackeGeo: true,
+              isLiveStreamProvider: false,
+            },
+          });
         });
       });
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "21.0.4",
+  "version": "21.0.6",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

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

@@ -38,13 +38,21 @@ const Author = ({
 
   return (
     <div
-      className={`${styles.authorWraper} ${isCardsAuthor && styles.authorCard} ${
-        styles.authorSeparator
+      className={`${styles.authorWraper || ''} ${isCardsAuthor && (styles.authorCard || '')} ${
+        styles.authorSeparator || ''
       }`}
     >
       {name && (
-        <div className={`${styles.infoContainer} ${isCardsAuthor && styles.infoCardContainer}`}>
-          <p className={`${styles.prefixStyle} ${prefixstyle && styles.prefixCardText}`}>
+        <div
+          className={`${styles.infoContainer || ''} ${
+            isCardsAuthor && (styles.infoCardContainer || '')
+          }`}
+        >
+          <p
+            className={`${styles.prefixStyle || ''} ${
+              (prefixstyle && styles.prefixCardText) || ''
+            }`}
+          >
             <span>{translate(translations, prefix, prefix) || getPrefixBasedOnPage}</span>
           </p>
           <Link to={link} title={name}>
@@ -63,7 +71,7 @@ const Author = ({
         </div>
       )}
       {reviewer && !isCardsAuthor && (
-        <div className={date && styles.reviewer}>
+        <div className={date && (styles.reviewer || '')}>
           <span>{`${translate(translations, 'fact_checked_by', 'Fact checked by')}`}</span>
           {` `}
           <Link to={reviewer.profile_page_path} title={reviewer.name}>
@@ -72,25 +80,25 @@ const Author = ({
         </div>
       )}
       {readingTime && !isCardsAuthor && (
-        <div className={styles.readingWithBorder}>
-          <img width={14} height={14} className={styles.clock} src={clock} alt="clock" />
+        <div className={styles.readingWithBorder || ''}>
+          <img width={14} height={14} className={styles.clock || ''} src={clock} alt="clock" />
           <span className={styles.readingTimeText}>
             {translate(translations, 'reading_time', 'Reading time')}
           </span>
           {` ${readingTime} ${translate(translations, 'minutes', 'min')}`}
-          <span className={styles.readText}>{translate(translations, 'read', 'read')}</span>
+          <span className={styles.readText || ''}>{translate(translations, 'read', 'read')}</span>
         </div>
       )}
       {date && (
-        <div className={styles.dateTimeWrapper}>
+        <div className={styles.dateTimeWrapper || ''}>
           {!isCardsAuthor && <span>{translate(translations, 'published_on', 'Published on')}</span>}
           {` `}
           {hasAuthorBox ? (
-            <a href="#authorbox" className={!isCardsAuthor && styles.dateLink}>
+            <a href="#authorbox" className={!isCardsAuthor && (styles.dateLink || '')}>
               {formatedDate}
             </a>
           ) : (
-            <span className={styles.noLink}>{formatedDate}</span>
+            <span className={styles.noLink || ''}>{formatedDate}</span>
           )}
         </div>
       )}

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

@@ -46,9 +46,9 @@ export default function AuthorBox({
   };
 
   return (
-    <div className={styles.container} id="authorbox">
-      <div className={styles.innerContainer}>
-        <div className={styles.leftContainer}>
+    <div className={styles.container || ''} id="authorbox">
+      <div className={styles.innerContainer || ''}>
+        <div className={styles.leftContainer || ''}>
           {author?.image_object && (
             <LazyImage
               src={imagePrettyUrl(author?.image_object.filename, width, height)}
@@ -57,8 +57,8 @@ export default function AuthorBox({
               height={height}
             />
           )}
-          <div className={styles.information}>
-            <p className={styles.name}>
+          <div className={styles.information || ''}>
+            <p className={styles.name || ''}>
               <span>{author?.name}</span>
               <LazyImage
                 src="../../../images/verify.svg"
@@ -67,9 +67,9 @@ export default function AuthorBox({
                 height={20}
               />
             </p>
-            {author?.author_title && <p className={styles.title}>{author?.author_title}</p>}
+            {author?.author_title && <p className={styles.title || ''}>{author?.author_title}</p>}
             {socialLinks.length > 0 && (
-              <p className={styles.socialIcons}>
+              <p className={styles.socialIcons || ''}>
                 {socialLinks
                   .filter((socialLink) => socialLink.link)
                   .map((filteredLinks) => (
@@ -92,13 +92,13 @@ export default function AuthorBox({
                     target="_blank"
                     rel="nofollow noreferrer"
                   >
-                    <img className={styles.clock} src={email} alt="email" />
+                    <img className={styles.clock || ''} src={email} alt="email" />
                   </a>
                 )}
               </p>
             )}
             {date && (
-              <div className={styles.dateTimeWrapper}>
+              <div className={styles.dateTimeWrapper || ''}>
                 <span>{translate(translations, 'published_on', 'Published on')}</span>
                 {` `}
                 {formatDate(date, dateFormat, dateSeparator, 'en-GB')}
@@ -106,8 +106,8 @@ export default function AuthorBox({
             )}
           </div>
         </div>
-        <div className={styles.rightContainer}>
-          <div className={styles.bioContainer}>
+        <div className={styles.rightContainer || ''}>
+          <div className={styles.bioContainer || ''}>
             <div
               ref={biographyRef}
               className={`${styles.biography} ${
@@ -132,7 +132,7 @@ export default function AuthorBox({
             <Link
               to={author?.profile_page_path}
               title={author?.name}
-              className={`${styles.readMore} author-gtm`}
+              className={`${styles.readMore || ''} author-gtm`}
             >
               {translate(translations, 'read_more_about', 'More about [author]').replace(
                 '[author]',
@@ -142,12 +142,12 @@ export default function AuthorBox({
             </Link>
           )}
           {author?.expertise && (
-            <div className={styles.expertiseContainer}>
+            <div className={styles.expertiseContainer || ''}>
               <span>{translate(translations, 'expert_on', 'Expert on')}: </span>
-              <ul className={styles.expertiseList}>
+              <ul className={styles.expertiseList || ''}>
                 {author?.expertise.map((item, index) => (
                   // eslint-disable-next-line react/no-array-index-key
-                  <li key={index} className={styles.expertiseItem}>
+                  <li key={index} className={styles.expertiseItem || ''}>
                     <img className={styles.check} src={check} alt="check" width={10} height={8} />
                     {item}
                   </li>
@@ -156,17 +156,19 @@ export default function AuthorBox({
             </div>
           )}
           {(readingTime || reviewer || date) && (
-            <div className={styles.pageInfo}>
+            <div className={styles.pageInfo || ''}>
               {readingTime && (
-                <div className={styles.readingTime}>
+                <div className={styles.readingTime || ''}>
                   <FaClock />
                   {` ${readingTime} ${translate(translations, 'minutes', 'min')} `}
-                  <span className={styles.readText}>{translate(translations, 'read', 'read')}</span>
+                  <span className={styles.readText || ''}>
+                    {translate(translations, 'read', 'read')}
+                  </span>
                 </div>
               )}
               {reviewer && (
-                <div className={styles.reviewer}>
-                  <img className={styles.check} src={checkCircle} alt="checkCircle" />
+                <div className={styles.reviewer || ''}>
+                  <img className={styles.check || ''} src={checkCircle} alt="checkCircle" />
                   <span>{` ${translate(
                     translations,
                     'fact_checked_by',
@@ -178,7 +180,7 @@ export default function AuthorBox({
                 </div>
               )}
               {date && (
-                <div className={styles.dateTimeWrapper}>
+                <div className={styles.dateTimeWrapper || ''}>
                   <span>{translate(translations, 'published_on', 'Published on')}</span>
                   {` `}
                   {formatDate(date, dateFormat, dateSeparator, 'en-GB')}
@@ -187,7 +189,7 @@ export default function AuthorBox({
             </div>
           )}
         </div>
-        {author?.ribbon_label && <div className={styles.ribbon}>{author?.ribbon_label}</div>}
+        {author?.ribbon_label && <div className={styles.ribbon || ''}>{author?.ribbon_label}</div>}
       </div>
     </div>
   );

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

@@ -25,9 +25,9 @@ export default function Bonus({ item, tracker, splitBy = '+', feSeparator = '+'
 
   return (
     <>
-      {!isInoperative && mainLine && <span className={styles.firstPart}>{mainLine}</span>}
+      {!isInoperative && mainLine && <span className={styles.firstPart || ''}>{mainLine}</span>}
       {!isInoperative && secondLine && (
-        <span className={styles.secondPart}>{`${feSeparator}${secondLine}`}</span>
+        <span className={styles.secondPart || ''}>{`${feSeparator}${secondLine}`}</span>
       )}
     </>
   );
@@ -36,7 +36,6 @@ export default function Bonus({ item, tracker, splitBy = '+', feSeparator = '+'
 Bonus.propTypes = {
   item: PropTypes.shape({
     status: PropTypes.string,
-    one_liners: PropTypes.object,
   }),
   tracker: PropTypes.string,
   splitBy: PropTypes.string,

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

@@ -24,8 +24,8 @@ function Breadcrumbs({ page, separator = <span> / </span> }) {
   );
 
   return (
-    <ol className={styles.breadcrumbs}>
-      <li className={styles.item}>
+    <ol className={styles.breadcrumbs || ''}>
+      <li className={styles.item || ''}>
         {isPPC ? (
           home
         ) : (
@@ -49,7 +49,7 @@ function Breadcrumbs({ page, separator = <span> / </span> }) {
             {separator}
           </li>
         ))}
-      <li className={styles.item}>{page.vanity_label ? page.vanity_label : page.title}</li>
+      <li className={styles.item || ''}>{page.vanity_label ? page.vanity_label : page.title}</li>
     </ol>
   );
 }

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

@@ -21,11 +21,11 @@ function Button({
   icon = null,
   gtmClass = '',
 }) {
-  const classes = `${styles.ctaBtn} ${primaryColor ? styles.primary : styles.secondary} ${
-    invertColors && styles.invertColors
-  } ${tertiary && styles.tertiary} ${noStyle && styles.noStyle} ${disabled && styles.disabled} ${
-    className && styles[className]
-  }`;
+  const classes = `${styles.ctaBtn || ''} ${
+    primaryColor ? styles.primary || '' : styles.secondary || ''
+  } ${invertColors && (styles.invertColors || '')} ${(tertiary && styles.tertiary) || ''} ${
+    (noStyle && styles.noStyle) || ''
+  } ${(disabled && styles.disabled) || ''} ${(className && styles[className]) || ''}`;
 
   const btnTitle = typeof btnText === 'string' ? btnText : '';
 
@@ -59,7 +59,7 @@ function Button({
       aria-label={btnTitle}
       onClick={onClick}
       target={!isAnchorLink && targetBlank ? '_blank' : ''}
-      className={`${classes} ${gtmClass}`}
+      className={`${classes || ''} ${gtmClass || ''}`}
       rel="nofollow noreferrer"
     >
       {btnText}

package/src/components/atoms/carousel/arrow/index.js

@@ -6,7 +6,9 @@ import styles from './arrow.module.scss';
 const Arrow = ({ direction, content = '', onClick, onKeyDown, disabled, gtmClass = '' }) => (
   <button
     type="button"
-    className={`${styles.arrow} ${styles[direction]} ${gtmClass} carousel-arrow-gtm btn-cta`}
+    className={`${styles.arrow || ''} ${styles[direction] || ''} ${
+      gtmClass || ''
+    } carousel-arrow-gtm btn-cta`}
     onClick={onClick}
     onKeyDown={onKeyDown}
     disabled={disabled}

package/src/components/atoms/carousel/pagination-item/index.js

@@ -8,7 +8,7 @@ const PaginationItem = ({ type, paginationHandler, slideIndex, totalSlides, gtmC
   const pages = [];
 
   for (let i = 0; i < totalSlides; i += 1) {
-    const classes = `${styles.paginationItem} ${styles[type]} ${
+    const classes = `${styles.paginationItem || ''} ${styles[type] || ''} ${
       Math.abs(slideIndex) === i ? styles.active : ''
     }`;
     pages.push(
@@ -24,7 +24,7 @@ const PaginationItem = ({ type, paginationHandler, slideIndex, totalSlides, gtmC
     );
   }
 
-  return <div className={styles.pagination}>{pages}</div>;
+  return <div className={styles.pagination || ''}>{pages}</div>;
 };
 
 PaginationItem.propTypes = {

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

@@ -29,13 +29,13 @@ const Collapse = ({
   };
 
   return (
-    <div className={styles.collapseContainer}>
-      <div className={maxHeightStyle !== 0 ? styles.active : null}>
+    <div className={styles.collapseContainer || ''}>
+      <div className={maxHeightStyle !== 0 ? styles.active : ''}>
         <button
           type="button"
           onClick={clickHandler}
           className={`${onlyMobile ? styles.buttonM : ''} ${onlyDesktop ? styles.buttonD : ''} ${
-            styles.button
+            styles.button || ''
           } ${maxHeightStyle !== 0 ? styles.invertArrow : ''} collapse-gtm btn-cta`}
         >
           {buttonText}
@@ -43,7 +43,7 @@ const Collapse = ({
         <div
           ref={contentRef}
           className={`${onlyMobile ? styles.contentM : ''} ${onlyDesktop ? styles.contentD : ''} ${
-            styles.content
+            styles.content || ''
           }`}
           style={onlyMobile || onlyDesktop ? { maxHeight: maxHeightStyle } : {}}
         >

package/src/components/atoms/content-box/index.js

@@ -6,16 +6,16 @@ import keygen from '~helpers/keygen';
 import styles from './content-box.module.scss';
 
 const ContentBox = ({ data = [] }) => (
-  <div className={styles.contentBoxContainer}>
-    <ul className={styles.contentBoxList}>
+  <div className={styles.contentBoxContainer || ''}>
+    <ul className={styles.contentBoxList || ''}>
       {data &&
         data.map((item) => (
           <li key={keygen()}>
-            <div className={styles.item}>
-              <div className={styles.icon}>
+            <div className={styles.item || ''}>
+              <div className={styles.icon || ''}>
                 <LazyImage alt={item.title} src={item.image} />
               </div>
-              <div className={styles.body}>
+              <div className={styles.body || ''}>
                 <div className="h2">{item.title}</div>
                 <p>{item.text}</p>
               </div>

package/src/components/atoms/custom-select/index.js

@@ -27,17 +27,17 @@ const CustomSelect = ({
   }
 
   return (
-    <div className={styles.customSelectContainer}>
+    <div className={styles.customSelectContainer || ''}>
       <button
         ref={defBtn}
-        className={`${styles.select} custom-select-gtm btn-cta`}
+        className={`${styles.select || ''} custom-select-gtm btn-cta`}
         type="button"
         onClick={showDropdown}
         data-id="select-button"
       >
         {selectedOption && selectedOption[itemsLabel]}
       </button>
-      <ol ref={selectList} className={styles.list} data-id="select-list">
+      <ol ref={selectList} className={styles.list || ''} data-id="select-list">
         {options &&
           options.map((item) => {
             if (item[itemsValue] === selectedOption[itemsValue]) return null;
@@ -50,7 +50,7 @@ const CustomSelect = ({
             }
             return (
               <li
-                className={styles.selectListItem}
+                className={styles.selectListItem || ''}
                 key={keygen()}
                 data-value={currentItem[itemsValue]}
                 data-type={currentItem.type}

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

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable no-return-assign */
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
@@ -57,19 +59,19 @@ const Faq = ({ module, closeAll = false, openItem, closeOthers = false, icon = '
 
   return (
     <>
-      <div className={styles.faqContainer}>
+      <div className={styles.faqContainer || ''}>
         {items.map((item, index) => (
-          <div key={keygen()} className={styles.faqItem}>
+          <div key={keygen()} className={styles.faqItem || ''}>
             <div
               onClick={() => toggle(index)}
-              className={`${styles.title} faq-gtm`}
+              className={`${styles.title || ''} faq-gtm`}
               ref={(el) => (btnRefs.current[index] = el)}
             >
-              {icon && <span className={styles.circle}>{icon} </span>}
+              {icon && <span className={styles.circle || ''}>{icon} </span>}
               <div dangerouslySetInnerHTML={{ __html: item.question }} />
             </div>
             <div
-              className={`${styles.content} ${styles.active}`}
+              className={`${styles.content || ''} ${styles.active || ''}`}
               ref={(el) => (itemRefs.current[index] = el)}
               dangerouslySetInnerHTML={{ __html: item.answer }}
             />

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

@@ -26,7 +26,7 @@ const Iframe = ({
   }
 
   return (
-    <div className={styles?.iframeContainer}>
+    <div className={styles?.iframeContainer || ''}>
       <iframe
         title={title}
         style={{ width: '100%', minHeight, display: 'block' }}

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

@@ -17,7 +17,7 @@ const Image = ({ module = {} }) => {
       width={912}
       height={333}
       title={title && title}
-      className={`${styles.imageModule} ${styles[alignment]}`}
+      className={`${styles.imageModule || ''} ${styles[alignment] || ''}`}
     />
   );
 };

package/src/components/atoms/info-grid/index.js

@@ -5,11 +5,11 @@ import styles from './info-grid.module.scss';
 import keygen from '~helpers/keygen';
 
 const InfoGrid = ({ data }) => (
-  <div className={styles.infoGridContainer}>
+  <div className={styles.infoGridContainer || ''}>
     {data.map((row) => (
-      <div key={keygen()} className={styles.infoGridItem}>
-        <div className={styles.infoGridItemTitle}>{row.name}</div>
-        <div className={styles.infoGridItemValue}>{row.value}</div>
+      <div key={keygen()} className={styles.infoGridItem || ''}>
+        <div className={styles.infoGridItemTitle || ''}>{row.name}</div>
+        <div className={styles.infoGridItemValue || ''}>{row.value}</div>
       </div>
     ))}
   </div>

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import styles from './label.module.scss';
 
 const Label = ({ title = '', bgColor = 'yellow' }) => (
-  <span className={styles.label} style={{ backgroundColor: bgColor }}>
+  <span className={styles.label || ''} style={{ backgroundColor: bgColor }}>
     {title}
   </span>
 );

package/src/components/atoms/menu/items/index.js

@@ -1,3 +1,7 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable no-unused-expressions */
 /* eslint-disable arrow-body-style */
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -36,7 +40,7 @@ const Items = ({
 
   function showSubMenu(itemStyles) {
     if (!options.mobile.canOpenAllSubMenus) {
-      const showingSubMenu = menuListRef.current.querySelector(`.${styles.show}`);
+      const showingSubMenu = menuListRef.current.querySelector(`.${styles.show || ''}`);
 
       if (showingSubMenu && showingSubMenu !== subMenuList.current) {
         showingSubMenu.classList.toggle(styles.show);
@@ -69,7 +73,7 @@ const Items = ({
       />
     );
     menu = (
-      <ul ref={subMenuList} className={styles.subMenuList}>
+      <ul ref={subMenuList} className={styles.subMenuList || ''}>
         {item.children.map((child) => {
           return (
             <Items
@@ -100,7 +104,7 @@ const Items = ({
   }
 
   return (
-    <li className={styles.menuItem} onMouseOver={addPositionClass}>
+    <li className={styles.menuItem || ''} onMouseOver={addPositionClass}>
       {link}
       {menu}
     </li>