Merge pull request #171 from ConductionNL/feature/GW-1542/topnav

feature/GW-1542/topnav
ConductionNL · Dec 5, 2023 · d8cbc00 · d8cbc00
2 parents e61ee50 + 6dac33b
commit d8cbc00
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.40: Removed tooltip from PrimaryTopNav component and updated dropdown.
   - 2.2.39:
     - Updated PrimaryTopNav component to include tooltip and better dropdown.
     - Updated Logo component to have navbar option.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.39",
+  "version": "2.2.40",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css
@@ -157,6 +157,8 @@
   display: none;
   list-style-type: none;
   background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
+  width: fit-content;
+  max-width: 200px;
 }
 
 .dropdownOverflow {

diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx b/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx
@@ -9,7 +9,6 @@ import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
 interface ITopNavItemBase {
   label: string;
   icon?: JSX.Element;
-  showToolTip?: boolean;
   current?: boolean | ICurrentItemJSONFormat;
 }
 
@@ -58,12 +57,11 @@ export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
 
 export interface TopNavProps {
   items: ITopNavItem[];
-  tooltipId: string;
   mobileLogo?: JSX.Element;
   layoutClassName?: string;
 }
 
-export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId }: TopNavProps): JSX.Element => {
+export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [isMobile, setIsMobile] = React.useState<boolean>(window.innerWidth < 992);
 
@@ -112,17 +110,13 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId }:
 
               {subItems && (
                 <ul className={clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow])}>
-                  {subItems.map(({ label, icon, current, handleClick, showToolTip }, idx) => (
+                  {subItems.map(({ label, icon, current, handleClick }, idx) => (
                     <li
                       key={idx}
                       className={clsx(styles.li, current && styles.current)}
                       onClick={() => handleSubItemClick(handleClick)}
                     >
-                      <Link
-                        data-tooltip-id={showToolTip === true ? tooltipId : ""}
-                        data-tooltip-content={showToolTip === true ? label : ""}
-                        className={clsx(styles.link, styles.label, current && styles.currentLink)}
-                      >
+                      <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
                         {icon}
                         {label}
                       </Link>