From c2c9d9f431dba1169475c51bd6fbdc74fd8f2503 Mon Sep 17 00:00:00 2001 From: jdickman <jdickman@mparticle.com> Date: Fri, 22 Mar 2024 16:34:53 -0300 Subject: [PATCH 1/2] fix: sub menu links should open the correct herf --- .../GlobalNavigationItems.d.ts | 5 +++-- .../GlobalNavigation/NavigationItem.tsx | 18 ++++++------------ .../GlobalNavigation/NavigationList.tsx | 4 ++-- src/utils/utils.spec.ts | 2 +- src/utils/{utils.ts => utils.tsx} | 15 +++++++++++++++ 5 files changed, 27 insertions(+), 17 deletions(-) rename src/utils/{utils.ts => utils.tsx} (80%) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index b3debaf66..36238b05e 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -1,4 +1,5 @@ import type { ReactNode, type MouseEvent } from 'react' +import { type hrefOptions } from 'src/utils/utils' export interface IBaseGlobalNavigationItem { type?: 'menu' | 'link' @@ -20,9 +21,9 @@ export interface IGlobalNavigationMenu extends IBaseGlobalNavigationItem { export interface IGlobalNavigationLink extends IBaseGlobalNavigationItem { type?: 'link' - hrefOptions?: { href: string; hrefTarget?: '_self' | '_blank' } + hrefOptions?: hrefOptions hideLabel?: boolean onClick?: (e: MouseEvent) => void } -export type IGlobalNavigationItem = IGlobalNavigationMenu | IGlobalNavigationLink +export type IGlobalNavigationItem = IGlobalNavigationMenu | IGlobalNavigationLink \ No newline at end of file diff --git a/src/components/navigation/GlobalNavigation/NavigationItem.tsx b/src/components/navigation/GlobalNavigation/NavigationItem.tsx index 7aa0457e1..767fd1231 100644 --- a/src/components/navigation/GlobalNavigation/NavigationItem.tsx +++ b/src/components/navigation/GlobalNavigation/NavigationItem.tsx @@ -2,6 +2,7 @@ import { type MouseEvent, type ReactNode } from 'react' import { NavigationIcon } from 'src/components/navigation/GlobalNavigation/NavigationIcon' import { NavigationList } from 'src/components/navigation/GlobalNavigation/NavigationList' import { type IGlobalNavigationItem, Tooltip } from 'src/components' +import { buildLinkFromHrefOptions, type hrefOptions } from 'src/utils/utils' export interface INavigationItemProps { type: 'link' | 'menu' @@ -11,7 +12,7 @@ export interface INavigationItemProps { items?: IGlobalNavigationItem[] isActive?: boolean onClick?: (e: MouseEvent) => void // link only - hrefOptions?: { href: string; hrefTarget?: '_self' | '_blank' } // link only + hrefOptions?: hrefOptions // link only } export function NavigationItem(props: INavigationItemProps) { @@ -31,16 +32,9 @@ export function NavigationItem(props: INavigationItemProps) { /> ) - const resultNavigationIcon = props.hrefOptions ? ( - <a - href={props.hrefOptions.href} - target={props.hrefOptions.hrefTarget ?? '_self'} - rel={props.hrefOptions.hrefTarget === '_blank' ? 'noopener' : undefined}> - {navigationIcon} - </a> - ) : ( - navigationIcon - ) + const resultNavigationIcon = props.hrefOptions + ? buildLinkFromHrefOptions(navigationIcon, props.hrefOptions) + : navigationIcon if (props.hideLabel) { return ( @@ -51,4 +45,4 @@ export function NavigationItem(props: INavigationItemProps) { } return resultNavigationIcon -} +} \ No newline at end of file diff --git a/src/components/navigation/GlobalNavigation/NavigationList.tsx b/src/components/navigation/GlobalNavigation/NavigationList.tsx index 3d6d94b53..f3b201b5f 100644 --- a/src/components/navigation/GlobalNavigation/NavigationList.tsx +++ b/src/components/navigation/GlobalNavigation/NavigationList.tsx @@ -6,6 +6,7 @@ import { Center } from 'src/components' import { type IGlobalNavigationItem } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' import { type IGlobalNavigationLink } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' import { Fragment } from 'react' +import { buildLinkFromHrefOptions } from 'src/utils/utils' export interface INavigationListProps { items: IGlobalNavigationItem[] @@ -43,11 +44,10 @@ function generateMenuItem(item: IGlobalNavigationItem, i: number) { ...linkItem, expandIcon: linkItem.isNestedMenu ? true : null, key: `${String(linkItem.label)}${j}`, - label: <a href={linkItem.href}>{linkItem.label}</a>, + label: buildLinkFromHrefOptions(linkItem.label, linkItem.hrefOptions), })), ) } - const navigationIcon = ( <NavigationIcon icon={item.icon} diff --git a/src/utils/utils.spec.ts b/src/utils/utils.spec.ts index ffe56f1e3..ebcfaef0c 100644 --- a/src/utils/utils.spec.ts +++ b/src/utils/utils.spec.ts @@ -56,4 +56,4 @@ describe('Testing utils', () => { expect(actualOS).toBe('Macintosh') }) }) -}) +}) \ No newline at end of file diff --git a/src/utils/utils.ts b/src/utils/utils.tsx similarity index 80% rename from src/utils/utils.ts rename to src/utils/utils.tsx index 4002aa358..8a4ea2a0d 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.tsx @@ -1,3 +1,5 @@ +import { type ReactNode } from 'react' + export function getInitials(str: string = ''): string { const getInitialsRegex = new RegExp( '(?:[\\W\\d]*\\b)*' + // Ignore non-word abd number characters that may exist at the beginning of the word @@ -48,3 +50,16 @@ export function hasImageAtSrc(src: string, hasImageSetter?: (hasImage: boolean) img.src = src }) } + +export type hrefOptions = { href: string; hrefTarget?: '_self' | '_blank' } + +export function buildLinkFromHrefOptions(label: ReactNode, hrefOptions?: hrefOptions): ReactNode { + return ( + <a + href={hrefOptions?.href} + target={hrefOptions?.hrefTarget ?? '_self'} + rel={hrefOptions?.hrefTarget === '_blank' ? 'noopener' : undefined}> + {label} + </a> + ) +} \ No newline at end of file From 46c751fabfa3ca6fe6b45a2b4d644c3337baf4d8 Mon Sep 17 00:00:00 2001 From: jdickman <jdickman@mparticle.com> Date: Fri, 22 Mar 2024 16:38:45 -0300 Subject: [PATCH 2/2] update type name --- .../navigation/GlobalNavigation/GlobalNavigationItems.d.ts | 4 ++-- src/components/navigation/GlobalNavigation/NavigationItem.tsx | 4 ++-- src/utils/utils.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index 36238b05e..61dbe5cc1 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -1,5 +1,5 @@ import type { ReactNode, type MouseEvent } from 'react' -import { type hrefOptions } from 'src/utils/utils' +import { type HrefOptions } from 'src/utils/utils' export interface IBaseGlobalNavigationItem { type?: 'menu' | 'link' @@ -21,7 +21,7 @@ export interface IGlobalNavigationMenu extends IBaseGlobalNavigationItem { export interface IGlobalNavigationLink extends IBaseGlobalNavigationItem { type?: 'link' - hrefOptions?: hrefOptions + hrefOptions?: HrefOptions hideLabel?: boolean onClick?: (e: MouseEvent) => void } diff --git a/src/components/navigation/GlobalNavigation/NavigationItem.tsx b/src/components/navigation/GlobalNavigation/NavigationItem.tsx index 767fd1231..c0c078661 100644 --- a/src/components/navigation/GlobalNavigation/NavigationItem.tsx +++ b/src/components/navigation/GlobalNavigation/NavigationItem.tsx @@ -2,7 +2,7 @@ import { type MouseEvent, type ReactNode } from 'react' import { NavigationIcon } from 'src/components/navigation/GlobalNavigation/NavigationIcon' import { NavigationList } from 'src/components/navigation/GlobalNavigation/NavigationList' import { type IGlobalNavigationItem, Tooltip } from 'src/components' -import { buildLinkFromHrefOptions, type hrefOptions } from 'src/utils/utils' +import { buildLinkFromHrefOptions, type HrefOptions } from 'src/utils/utils' export interface INavigationItemProps { type: 'link' | 'menu' @@ -12,7 +12,7 @@ export interface INavigationItemProps { items?: IGlobalNavigationItem[] isActive?: boolean onClick?: (e: MouseEvent) => void // link only - hrefOptions?: hrefOptions // link only + hrefOptions?: HrefOptions // link only } export function NavigationItem(props: INavigationItemProps) { diff --git a/src/utils/utils.tsx b/src/utils/utils.tsx index 8a4ea2a0d..1e932b12e 100644 --- a/src/utils/utils.tsx +++ b/src/utils/utils.tsx @@ -51,9 +51,9 @@ export function hasImageAtSrc(src: string, hasImageSetter?: (hasImage: boolean) }) } -export type hrefOptions = { href: string; hrefTarget?: '_self' | '_blank' } +export type HrefOptions = { href: string; hrefTarget?: '_self' | '_blank' } -export function buildLinkFromHrefOptions(label: ReactNode, hrefOptions?: hrefOptions): ReactNode { +export function buildLinkFromHrefOptions(label: ReactNode, hrefOptions?: HrefOptions): ReactNode { return ( <a href={hrefOptions?.href}