gatsby-core-theme 22.0.15 → 23.0.0

package/.storybook/preview.js

@@ -1,5 +1,6 @@
 import '../gatsby-browser';
 import React from 'react';
+import styles from './storybook-styles.module.scss';
 
 global.___loader = {
   enqueue: () => {},
@@ -19,7 +20,7 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['Gatsby-Theme', ['Atoms', 'Molecules', 'Organisms', 'Pages', 'Hooks']],
+      order: ['Theme', ['Layout', 'Modules', 'Atoms', 'Molecules', 'Organisms', 'Pages', 'Hooks']],
     },
   },
 };
@@ -27,7 +28,7 @@ export const parameters = {
 // Global decorators for stories
 export const decorators = [
   (Story) => (
-    <div style={{ margin: '1.5rem auto 0', maxWidth: '96rem' }}>
+    <div className={styles.storyMainContainer}>
       <Story />
     </div>
   ),

package/.storybook/storybook-styles/global.module.scss

@@ -0,0 +1,4 @@
+.storyMainContainer {
+    margin: 1.5rem auto 0;
+    max-width: 96rem;
+}

package/.storybook/storybook-styles/navigation.module.scss

@@ -0,0 +1,36 @@
+.navStoryContainer {
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 5rem);
+
+  // added so that nav is visible on storybook without stretched beyond the viewport due to position:fixed 
+  > div {
+    max-width: 96rem;
+    width: calc(100vw - 20px);
+  }
+
+  nav {
+    padding: 0 10px;
+  }
+
+  // dummy content styles
+  main {
+    padding-top: var(--nav-height);
+    background-color: var(--color-4);
+
+    pre {
+      display: inline;
+    }
+
+    .dummyContent {
+      letter-spacing: 0.2rem;
+      margin: 5rem auto;
+      width: 80vw;
+
+      @include min(laptop) {
+      margin: 10rem auto;
+        width: 60vw;
+      }
+    }
+  }
+}

package/.storybook/storybook-styles.module.scss

@@ -0,0 +1,5 @@
+// Storybook styles extended in each theme
+
+// Storybook Styles
+@import './storybook-styles/global.module.scss';
+@import './storybook-styles/navigation.module.scss';

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+# [23.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v22.0.15...v23.0.0) (2023-06-23)
+
+
+### Bug Fixes
+
+* fix for tests ([77425fc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/77425fc2037aeb3606db730df4e304a3a3697a90))
+* fix for tests ([d2871a2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d2871a26364aff6b39273c62c144eb83760ad082))
+* storybook paths ([c7c5087](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c7c50872e52adfa4d88d995a81f2ea0e81847dc1))
+
+
+### Code Refactoring
+
+* add changes to custom component ([929f141](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/929f14142d9611cd0847dda2be7a09faf927afa3))
+* add logo width to align with sitelevel ([38cf693](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/38cf69332560717397dc51292b192eac3ac00097))
+* added page context back and new custom component ([4663159](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4663159caff6ab8c57fa75b485a48a4b68173d37))
+* changes to code review ([59e3bc9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/59e3bc9113591615ce30ff52ecd9415708bca39b))
+* changes to mobile menu open/close ([8dcba1e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8dcba1e6d8e72319b314893a65a5e10903781fd2))
+* changes to nav click even when clicking on child nav links ([d9cfc69](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d9cfc692929362cc7e5adac148812a46e36a6c3b))
+* changes to storybook ([1f9978a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1f9978af14422e351cd82f6f14f59e61ec91c2b0))
+* changes to storybook styles ([0687026](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0687026192912092a789d67178bcab9279862795))
+* changes to styles ([eed0288](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/eed028825fe4e766d5051116c1a215f1b9262f49))
+* clean up css files ([afeed74](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/afeed747071d3b970fbf03416f52e37f6bd6cd49))
+* close all menus if when opening one if its enabled ([4ac8878](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4ac88788e64b6a45461612ab0cb47999c9547fe4))
+* code review changes ([131a303](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/131a303feb0775d4511716b2aea7f9a3d1f7b321))
+* code review changes, file rename to fix typo ([4ac8e2a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4ac8e2af06504f9107b4acd8c29d260baedfd4d4))
+* correction to li style ([588167b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/588167b33767c34972cb77fbaffbdd2df2ee1a43))
+* correction to menu item labeling long words ([542bc16](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/542bc16a6c4aad77948880bf17a44442051880d8))
+* correction to storybook, fix unwanted props ([e63c438](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e63c43870446ffad2723e7b10dda49604c4bf14c))
+* initial commit ([a23307c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a23307c61f7a8e905e3c3f8ee63800636faa7ae9))
+* initial storybook changes ([c358380](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c358380002f110c26b513567bd1566600667f4b8))
+* minor css changes ([2253833](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/225383340ebcc3fc49545fc1c1f208a8475723e6))
+* remove temp variable ([f2fb5f7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f2fb5f788a42680a828a595217c9cf4d2856034a))
+* remove unused vars ([746bb19](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/746bb19dc9ffd2790609ee4d2e78a217d30fd850))
+
+
+* Merge branch 'tm-3475-main-menu' into 'master' ([1029e54](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1029e54fecebabdf76647e759c9a763cd24edea4))
+* Merge branch 'master' into tm-3475-main-menu ([7771485](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/77714850e6c86a4ba7670db47d6843239a4e2183))
+* Merge branch 'master' into tm-3475-main-menu ([3805342](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/380534213add828157336133a33eab5bd9064cfb))
+* Merge branch 'master' into tm-3475-main-menu ([531e98e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/531e98e0be3128b829fec83eb6b9719af6c5465f))
+* Merge branch 'master' into tm-3475-main-menu ([1074e24](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1074e24d608f4ef4b74ca338e3f7e9ff2f27a725))
+
+
+### Tests
+
+* add test ([1926693](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/19266937454c7926c48d652f22d0f20120a5f52e))
+* fix for tests ([054dca9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/054dca90f302772ef4c8b3bc171b80cee87eea35))
+* temp changes to test ([f760d93](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f760d9383f80f1bd0c98766380adecc59cc6ffd8))
+
 ## [22.0.15](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v22.0.14...v22.0.15) (2023-06-19)
 
 

package/package.json

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

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

@@ -11,7 +11,7 @@ import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter';
 import Author from '.';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Author Byline',
+  title: 'Theme/Atoms/Author Byline',
   component: Author,
   argTypes: {
     name: {

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

@@ -15,7 +15,7 @@ import checkCircle from '../../../../../storybook-images/checkCircle.svg';
 import AuthorBox from '.';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Author Box',
+  title: 'Theme/Atoms/Author Box',
   component: AuthorBox,
   argTypes: {
     author: {

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

@@ -11,7 +11,7 @@ import Bonus from '.';
 import { getToplistItem } from '~tests/factories/modules/toplist.factory';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Bonus',
+  title: 'Theme/Atoms/Bonus',
   component: Bonus,
   argTypes: {
     item: {

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

@@ -11,7 +11,7 @@ import Breadcrumbs from '.';
 import getPageData from '~tests/factories/pages/default.factory';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Breadcrumbs',
+  title: 'Theme/Atoms/Breadcrumbs',
   component: Breadcrumbs,
   argTypes: {
     page: {

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

@@ -10,7 +10,7 @@ import {
 import Button from '.';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Button',
+  title: 'Theme/Atoms/Button',
   component: Button,
   argTypes: {
     to: {

package/src/components/atoms/collapse/collpase.stories.js

@@ -10,7 +10,7 @@ import {
 import Collapse from '.';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Collapse',
+  title: 'Theme/Atoms/Collapse',
   component: Collapse,
   argTypes: {
     buttonText: {

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

@@ -13,7 +13,7 @@ import content_3 from '../../../../static/images/content-3.png';
 import ContentBox from '.';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Content Box',
+  title: 'Theme/Atoms/Content Box',
   component: ContentBox,
   argTypes: {
     data: {

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

@@ -10,7 +10,7 @@ import {
 import CustomSelect from '.';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Custom Select',
+  title: 'Theme/Atoms/Custom Select',
   component: CustomSelect,
   argTypes: {
     items: {

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

@@ -11,7 +11,7 @@ import {
 import Faq from '.';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Faq',
+  title: 'Theme/Atoms/Faq',
   component: Faq,
   argTypes: {
     module: {

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

@@ -11,7 +11,7 @@ import {
 import Iframe from '.';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Iframe',
+  title: 'Theme/Atoms/Iframe',
   component: Iframe,
   argTypes: {
     src: {

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

@@ -11,7 +11,7 @@ import {
 import Image from '.';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Image',
+  title: 'Theme/Atoms/Image',
   component: Image,
   argTypes: {
     module: {

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

@@ -11,7 +11,7 @@ import InfoGrid from '.';
 import getInfoGrids from '~tests/factories/modules/info-grid';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Info Grid',
+  title: 'Theme/Atoms/Info Grid',
   component: InfoGrid,
   argTypes: {
     data: {

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

@@ -10,7 +10,7 @@ import {
 import Label from '.';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Label',
+  title: 'Theme/Atoms/Label',
   component: Label,
   argTypes: {
     title: {

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

@@ -1,110 +1,107 @@
-/* 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 */
+/* eslint-disable no-restricted-syntax */
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import keygen from '~helpers/keygen';
 import Item from './item';
 import styles from './items.module.scss';
-
-const addPositionClass = ({ target }) => {
-  const children = target?.parentNode?.parentNode?.children || [];
-  for (const element of children) {
-    if (element?.tagName === 'UL' && element?.className === styles.subMenuList) {
-      const { left, width } = element.getBoundingClientRect();
-      left + width > document.body.clientWidth &&
-        element.classList.add(styles.staticLeft, styles.hoverLeft);
-      break;
-    }
-  }
-};
+import { getPositionClass, itemHasChildren } from '~helpers/menu';
 
 // Test included with menu molecule test
 const Items = ({
   item,
   menuListRef,
-  options = {
-    mobile: {
-      canOpenAllSubMenus: false,
-      subMenuDropDownButton: true,
-    },
-  },
   gtmClass = '',
+  level = 1,
+  dropdownButtonWidth = 64,
+  canOpenAllSubMenus = true,
 }) => {
   let link;
   let menu;
 
-  const subMenuList = useRef(null);
+  const parentMenuRef = useRef(null);
+  const subMenuListRef = useRef(null);
 
-  function showSubMenu(itemStyles) {
-    if (!options.mobile.canOpenAllSubMenus) {
-      const showingSubMenu = menuListRef.current.querySelector(`.${styles.show || ''}`);
+  const closeOtherMenus = (target) => {
+    const parentsWithOpenSubMenu = target.parentNode.getElementsByClassName(styles.showSubMenu)[0];
+    const openSubmenus = parentsWithOpenSubMenu?.getElementsByClassName(styles.show)[0];
 
-      if (showingSubMenu && showingSubMenu !== subMenuList.current) {
-        showingSubMenu.classList.toggle(styles.show);
+    if (parentsWithOpenSubMenu && parentsWithOpenSubMenu !== target) {
+      // close other opened levels except the target
+      parentsWithOpenSubMenu && parentsWithOpenSubMenu.classList.remove(styles.showSubMenu);
+      openSubmenus && openSubmenus.classList.remove(styles.show);
 
-        if (itemStyles !== null) {
-          if (options.mobile.subMenuDropDownButton) {
-            showingSubMenu.parentNode.querySelector('button').classList.toggle(itemStyles.active);
-          }
-        }
-      }
+      // if other levels have open submenus, close them too
+      openSubmenus
+        .getElementsByClassName(styles.showSubMenu)[0]
+        ?.classList.remove(styles.showSubMenu);
+      openSubmenus.getElementsByClassName(styles.show)[0]?.classList.remove(styles.show);
     }
+  };
 
-    if (subMenuList.current) {
-      subMenuList.current.classList.toggle(styles.show);
+  const onClick = (e) => {
+    const { target } = e;
+    const { width } = target.getBoundingClientRect();
+
+    // check if clicked within the arrow area which has a padding of 4.8rem on the li tag
+    if (e.nativeEvent.layerX > width - dropdownButtonWidth) {
+      // check if multiple submenus can be opened at same time, if not close them
+      if (!canOpenAllSubMenus) {
+        closeOtherMenus(target);
+      }
+
+      // toggle the clicked menu item
+      target.classList.toggle(styles.showSubMenu);
+      target.getElementsByTagName('UL')[0]?.classList.toggle(styles.show);
     }
-  }
+  };
 
   if (item.children) {
-    link = (
-      <Item
-        hasChildren
-        item={item}
-        showSubMenuHandler={showSubMenu}
-        gtmClass={gtmClass}
-        options={{
-          mobile: {
-            subMenuDropDownButton: options.mobile.subMenuDropDownButton,
-          },
-        }}
-      />
-    );
+    link = <Item item={item} gtmClass={gtmClass} />;
     menu = (
-      <ul ref={subMenuList} className={styles.subMenuList || ''}>
-        {item.children.map((child) => {
-          return (
-            <Items
-              key={keygen()}
-              item={child}
-              menuListRef={menuListRef}
-              gtmClass={gtmClass}
-              options={{
-                mobile: {
-                  canOpenAllSubMenus: options.mobile.canOpenAllSubMenus,
-                  subMenuDropDownButton: options.mobile.subMenuDropDownButton,
-                },
-              }}
-            />
-          );
-        })}
+      <ul
+        ref={subMenuListRef}
+        className={`${styles.subMenuList || ''} ${
+          itemHasChildren(item) ? styles.hasChildWithSubmenu || '' : ''
+        }`}
+      >
+        {item.children.map((child) => (
+          <Items
+            key={keygen()}
+            item={child}
+            menuListRef={menuListRef}
+            gtmClass={gtmClass}
+            canOpenAllSubMenus={canOpenAllSubMenus}
+            level={level + 1}
+          />
+        ))}
       </ul>
     );
   } else {
-    link = (
-      <Item
-        hasChildren={false}
-        item={item}
-        gtmClass={gtmClass}
-        options={{ mobile: { subMenuDropDownButton: options.mobile.subMenuDropDownButton } }}
-      />
-    );
+    link = <Item item={item} gtmClass={gtmClass} />;
   }
 
   return (
-    <li className={styles.menuItem || ''} onMouseOver={addPositionClass}>
+    <li
+      ref={parentMenuRef}
+      className={`${styles.menuItem || ''} ${styles[`level${level.toString()}`] || ''} 
+      ${item.children !== undefined ? styles.hasChildren || '' : ''} 
+      `}
+      onFocus={(e) => getPositionClass(e.target, styles)}
+      onMouseOver={(e) => getPositionClass(e.target, styles)}
+      role="menuitem"
+      tabIndex="0"
+      onKeyDown={(e) => {
+        if (e.defaultPrevented) return;
+        e.preventDefault();
+        onClick(e);
+      }}
+      onClick={(e) => {
+        if (e.defaultPrevented) return;
+        e.preventDefault();
+        onClick(e);
+      }}
+    >
       {link}
       {menu}
     </li>
@@ -123,13 +120,10 @@ Items.propTypes = {
     ),
   }).isRequired,
   menuListRef: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
-  options: PropTypes.shape({
-    mobile: PropTypes.shape({
-      canOpenAllSubMenus: PropTypes.bool,
-      subMenuDropDownButton: PropTypes.bool,
-    }),
-  }),
   gtmClass: PropTypes.string,
+  level: PropTypes.number,
+  dropdownButtonWidth: PropTypes.number,
+  canOpenAllSubMenus: PropTypes.bool,
 };
 
 export default Items;

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

@@ -1,64 +1,26 @@
 /* eslint-disable no-nested-ternary */
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Link from '~hooks/link';
-import ConditionalWrapper from '~atoms/conditional-wrapper';
 import { imagePrettyUrl } from '~helpers/getters';
 import { NavigationContext } from '~organisms/navigation/navigationContext';
 
 import styles from './item.module.scss';
 
-export default function Item({
-  item,
-  hasChildren,
-  showSubMenuHandler,
-  options = {
-    mobile: {
-      subMenuDropDownButton: true,
-    },
-  },
-  gtmClass = '',
-}) {
-  const [active, setActive] = useState('');
-  const [opened, setOpened] = useState(false);
-
+export default function Item({ item, gtmClass = '' }) {
   const { setShowMenu } = useContext(NavigationContext);
 
-  useEffect(() => {
-    const url = typeof window !== 'undefined' ? new URL(window.location.href) : '';
-    setActive(
-      url.pathname === item.value || url.pathname.substr(1) === item.value ? styles.active : ''
-    );
-  }, [active, item]);
-
   const handleClose = () => {
     setShowMenu(false);
   };
 
-  const toggleDropDown = (e) => {
-    e.target.classList.toggle(styles.active);
-    setOpened(e.target.classList.contains(styles.active));
-  };
-
   const ItemImage = () =>
     item.image ? (
-      <img width="20" height="20" src={imagePrettyUrl(item.image)} alt={item.title} />
+      <img width="32" height="32" src={imagePrettyUrl(item.image, 32, 32)} alt={item.title} />
     ) : null;
 
   return (
-    <ConditionalWrapper
-      condition={hasChildren}
-      wrapper={(items) => (
-        <div
-          className={`${styles.itemWrapper || ''} ${
-            item.image ? styles?.itemWrapperIcon || '' : ''
-          }`}
-          onTouchStart={!options.mobile.subMenuDropDownButton ? showSubMenuHandler : null}
-        >
-          {items}
-        </div>
-      )}
-    >
+    <>
       {item.value?.includes('http') || item.value?.includes('www') ? (
         <a
           aria-label={`${item?.title} link`}
@@ -66,61 +28,31 @@ export default function Item({
           title={item.title}
           rel={`noreferrer ${item.nofollow && 'nofollow'}`}
           target="_blank"
-          className={`${gtmClass || ''} ${styles.item || ''} ${
-            opened ? styles.openedLink || '' : ''
-          } ${active || ''} ${
-            !options?.mobile?.subMenuDropDownButton
-              ? hasChildren || ''
-                ? styles.inactiveLink
-                : ''
-              : ''
-          } ${hasChildren ? styles.hasChildren || '' : ''} ${
-            !options?.mobile?.subMenuDropDownButton ? styles.noDropDownButton || '' : ''
-          }`}
+          className={`${styles.item || ''} ${gtmClass || ''}`}
+          onClick={() => handleClose()}
         >
           <ItemImage />
           {item.title}
         </a>
       ) : item.value !== null ? (
         <Link
-          className={`${gtmClass || ''} ${styles.item || ''} ${
-            opened && (styles.openedLink || '')
-          } ${active || ''} ${
-            (!options?.mobile?.subMenuDropDownButton && hasChildren) || ''
-              ? styles.inactiveLink || ''
-              : ''
-          } ${hasChildren ? styles.hasChildren || '' : ''} ${
-            !options.mobile.subMenuDropDownButton ? styles.noDropDownButton || '' : ''
-          }`}
           disabled={item.value === null}
           to={item.value}
           title={item.title}
           rel={item.nofollow && 'nofollow'}
           aria-label={`${item?.title} link`}
-          onClick={handleClose}
+          className={`${styles.item || ''} ${gtmClass || ''}`}
+          onClick={() => handleClose()}
         >
           <ItemImage />
           {item.title}
         </Link>
       ) : (
-        <div className={`${styles.item || ''} ${opened && (styles.openedLink || '')}`}>
+        <span className={`${styles.item || ''} ${gtmClass || ''} ${styles.inactiveLink}`}>
           {item.title}
-        </div>
-      )}
-      {options.mobile.subMenuDropDownButton && hasChildren && (
-        <button
-          aria-label={`${item?.title} Dropdown`}
-          type="button"
-          className={`${gtmClass || ''} btn-cta`}
-          onClick={(e) => {
-            showSubMenuHandler(styles);
-            toggleDropDown(e);
-          }}
-        >
-          {' '}
-        </button>
+        </span>
       )}
-    </ConditionalWrapper>
+    </>
   );
 }
 
@@ -130,19 +62,6 @@ Item.propTypes = {
     value: PropTypes.string,
     nofollow: PropTypes.bool,
     image: PropTypes.string,
-    children: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        value: PropTypes.string,
-      })
-    ),
   }).isRequired,
-  hasChildren: PropTypes.bool,
-  showSubMenuHandler: PropTypes.func,
-  options: PropTypes.shape({
-    mobile: PropTypes.shape({
-      subMenuDropDownButton: PropTypes.bool,
-    }),
-  }),
   gtmClass: PropTypes.string,
 };