diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 204b43b9e..3c46e8900 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -49,9 +49,9 @@ const defaultTools: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { label: 'option 1', href: '/' }, - { label: 'option 2', href: '/' }, - { label: 'option 3', href: '/' }, + { label: 'option 1', hrefOptions: { href: '/' } }, + { label: 'option 2', hrefOptions: { href: '/' } }, + { label: 'option 3', hrefOptions: { href: '/' } }, ], }, { @@ -59,15 +59,15 @@ const defaultTools: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { label: 'option 1', href: '/' }, - { label: 'option 2', href: '/' }, - { label: 'option 3', href: '/' }, + { label: 'option 1', hrefOptions: { href: '/' } }, + { label: 'option 2', hrefOptions: { href: '/' } }, + { label: 'option 3', hrefOptions: { href: '/' } }, ], }, { label: 'Tool 3', icon: , - href: '/', + hrefOptions: { href: '/' }, }, ] @@ -76,7 +76,7 @@ const defaultManagement: IGlobalNavigationItem[] = [ label: 'Notifications', hideLabel: true, icon: , - href: '/', + hrefOptions: { href: '/' }, }, { label: 'Support', @@ -84,9 +84,9 @@ const defaultManagement: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { label: 'option 1', href: '/' }, - { label: 'option 2', href: '/' }, - { label: 'option 3', href: '/' }, + { label: 'option 1', hrefOptions: { href: '/' } }, + { label: 'option 2', hrefOptions: { href: '/' } }, + { label: 'option 3', hrefOptions: { href: '/' } }, ], }, { @@ -95,9 +95,9 @@ const defaultManagement: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { label: 'option 1', href: '/' }, - { label: 'option 2', href: '/' }, - { label: 'option 3', href: '/' }, + { label: 'option 1', hrefOptions: { href: '/' } }, + { label: 'option 2', hrefOptions: { href: '/' } }, + { label: 'option 3', hrefOptions: { href: '/' } }, ], }, ] @@ -195,9 +195,9 @@ const mpTools: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { href: '/', label: 'Platform Trends' }, + { hrefOptions: { href: '/' }, label: 'Platform Trends' }, { - href: '/', + hrefOptions: { href: '/' }, label: ( System Alerts @@ -205,8 +205,8 @@ const mpTools: IGlobalNavigationItem[] = [ ), }, - { href: '/', label: 'Event Forwarding' }, - { href: '/', label: Beta('Observability') }, + { hrefOptions: { href: '/' }, label: 'Event Forwarding' }, + { hrefOptions: { href: '/' }, label: Beta('Observability') }, ], }, { @@ -214,12 +214,12 @@ const mpTools: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { href: '/', label: 'Catalog' }, - { href: '/', label: 'Plans' }, - { href: '/', label: 'Live Stream' }, - { href: '/', label: Beta('User Groups') }, - { href: '/', label: 'Calculated Attributes' }, - { href: '/', label: 'Rules' }, + { hrefOptions: { href: '/' }, label: 'Catalog' }, + { hrefOptions: { href: '/' }, label: 'Plans' }, + { hrefOptions: { href: '/' }, label: 'Live Stream' }, + { hrefOptions: { href: '/' }, label: Beta('User Groups') }, + { hrefOptions: { href: '/' }, label: 'Calculated Attributes' }, + { hrefOptions: { href: '/' }, label: 'Rules' }, ], }, { @@ -227,9 +227,9 @@ const mpTools: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { href: '/', label: 'Real-time' }, - { href: '/', label: 'Standard' }, - { href: '/', label: 'Journeys' }, + { hrefOptions: { href: '/' }, label: 'Real-time' }, + { hrefOptions: { href: '/' }, label: 'Standard' }, + { hrefOptions: { href: '/' }, label: 'Journeys' }, ], }, { @@ -237,9 +237,9 @@ const mpTools: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { href: '/', label: 'Connect' }, - { href: '/', label: 'Platform Filters' }, - { href: '/', label: 'Feed Filters' }, + { hrefOptions: { href: '/' }, label: 'Connect' }, + { hrefOptions: { href: '/' }, label: 'Platform Filters' }, + { hrefOptions: { href: '/' }, label: 'Feed Filters' }, ], }, { @@ -247,16 +247,16 @@ const mpTools: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { href: '/', label: 'Inputs' }, - { href: '/', label: 'Outputs' }, - { href: '/', label: 'Data Warehouse' }, - { href: '/', label: 'CRM' }, + { hrefOptions: { href: '/' }, label: 'Inputs' }, + { hrefOptions: { href: '/' }, label: 'Outputs' }, + { hrefOptions: { href: '/' }, label: 'Data Warehouse' }, + { hrefOptions: { href: '/' }, label: 'CRM' }, ], }, { label: 'Directory', icon: , - href: '/', + hrefOptions: { href: '/' }, }, ] @@ -268,9 +268,9 @@ const mpManagement: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { label: 'option 1', href: '/' }, - { label: 'option 2', href: '/' }, - { label: 'option 3', href: '/' }, + { label: 'option 1', hrefOptions: { href: '/' } }, + { label: 'option 2', hrefOptions: { href: '/' } }, + { label: 'option 3', hrefOptions: { href: '/' } }, ], }, { @@ -279,9 +279,9 @@ const mpManagement: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { href: '/', label: 'Platform Settings' }, - { href: '/', label: 'User Settings' }, - { href: '/', label: }, + { hrefOptions: { href: '/' }, label: 'Platform Settings' }, + { hrefOptions: { href: '/' }, label: 'User Settings' }, + { hrefOptions: { href: '/' }, label: }, ], }, ] @@ -523,16 +523,17 @@ const indTools: IGlobalNavigationItem[] = [ label: 'My Hub', icon: , isActive: true, + hrefOptions: { href: '/' }, }, { label: 'Saved', icon: , - href: '/', + hrefOptions: { href: '/' }, }, { label: 'Manage Data', icon: , - href: '/', + hrefOptions: { href: '/' }, }, ] @@ -543,9 +544,9 @@ const indManagement: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { label: 'option 1', href: '/' }, - { label: 'option 2', href: '/' }, - { label: 'option 3', href: '/' }, + { label: 'option 1', hrefOptions: { href: '/' } }, + { label: 'option 2', hrefOptions: { href: '/' } }, + { label: 'option 3', hrefOptions: { href: '/' } }, ], }, { @@ -554,9 +555,9 @@ const indManagement: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { label: 'option 1', href: '/' }, - { label: 'option 2', href: '/' }, - { label: 'option 3', href: '/' }, + { label: 'option 1', hrefOptions: { href: '/' } }, + { label: 'option 2', hrefOptions: { href: '/' } }, + { label: 'option 3', hrefOptions: { href: '/' } }, ], }, ] @@ -850,28 +851,28 @@ const cortexTools: IGlobalNavigationItem[] = [ { label: 'Pipelines', icon: , - href: '/', + hrefOptions: { href: '/' }, }, { label: 'Projects', icon: , - href: '/', + hrefOptions: { href: '/' }, isActive: true, }, { label: 'Data', icon: , - href: '/', + hrefOptions: { href: '/' }, }, { label: 'API', icon: , - href: '/', + hrefOptions: { href: '/' }, }, { label: 'Insights', icon: , - href: '/', + hrefOptions: { href: '/' }, }, ] @@ -882,9 +883,9 @@ const cortexManagement: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { label: 'option 1', href: '/' }, - { label: 'option 2', href: '/' }, - { label: 'option 3', href: '/' }, + { label: 'option 1', hrefOptions: { href: '/' } }, + { label: 'option 2', hrefOptions: { href: '/' } }, + { label: 'option 3', hrefOptions: { href: '/' } }, ], }, { @@ -893,9 +894,9 @@ const cortexManagement: IGlobalNavigationItem[] = [ icon: , type: 'menu', children: [ - { label: 'option 1', href: '/' }, - { label: 'option 2', href: '/' }, - { label: 'option 3', href: '/' }, + { label: 'option 1', hrefOptions: { href: '/' } }, + { label: 'option 2', hrefOptions: { href: '/' } }, + { label: 'option 3', hrefOptions: { href: '/' } }, ], }, ] diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index 30bb6fc09..b3debaf66 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -20,7 +20,7 @@ export interface IGlobalNavigationMenu extends IBaseGlobalNavigationItem { export interface IGlobalNavigationLink extends IBaseGlobalNavigationItem { type?: 'link' - href?: string + hrefOptions?: { href: string; hrefTarget?: '_self' | '_blank' } hideLabel?: boolean onClick?: (e: MouseEvent) => void } diff --git a/src/components/navigation/GlobalNavigation/NavigationItem.tsx b/src/components/navigation/GlobalNavigation/NavigationItem.tsx index 87274a6a1..7aa0457e1 100644 --- a/src/components/navigation/GlobalNavigation/NavigationItem.tsx +++ b/src/components/navigation/GlobalNavigation/NavigationItem.tsx @@ -11,7 +11,7 @@ export interface INavigationItemProps { items?: IGlobalNavigationItem[] isActive?: boolean onClick?: (e: MouseEvent) => void // link only - href?: string // link only + hrefOptions?: { href: string; hrefTarget?: '_self' | '_blank' } // link only } export function NavigationItem(props: INavigationItemProps) { @@ -31,7 +31,16 @@ export function NavigationItem(props: INavigationItemProps) { /> ) - const resultNavigationIcon = props.href ? {navigationIcon} : navigationIcon + const resultNavigationIcon = props.hrefOptions ? ( + + {navigationIcon} + + ) : ( + navigationIcon + ) if (props.hideLabel) { return ( diff --git a/src/components/navigation/Steps/Steps.stories.tsx b/src/components/navigation/Steps/Steps.stories.tsx index 831ca4e02..30c0e1b9a 100644 --- a/src/components/navigation/Steps/Steps.stories.tsx +++ b/src/components/navigation/Steps/Steps.stories.tsx @@ -748,4 +748,4 @@ export const ExampleInline: Story = { ) }, -} \ No newline at end of file +}