diff --git a/components/top-nav/docs/Overview.mdx b/components/top-nav/docs/Overview.mdx index 0a20a7955..8b924c8ef 100644 --- a/components/top-nav/docs/Overview.mdx +++ b/components/top-nav/docs/Overview.mdx @@ -10,7 +10,7 @@ import { StateItemHover, StateItemSelected } from './images' - + Top Nav Bar contains atomic components ```jsx @@ -46,8 +46,10 @@ const DUMMY_CONFIG = { routingInfo: { path: '/DiyCataloguing/Home', type: 'DiyCataloguing/Home', - meta: {}, + meta: {} }, + tagLabel: 'Test value', + tagType: 'new' }, { id: 'DIY_DASHBO_MAS_FORM', @@ -58,8 +60,10 @@ const DUMMY_CONFIG = { meta: { url: 'https://docs.google.com/forms/d/e/1FAIpQLSdpU3uyUPkfaLZgrG_zgbMUVG7PBj9EilzK3Cg4vgq3eQhq-w/viewform', - }, + } }, + tagLabel: 'Test value', + tagType: 'beta' }, ], }, diff --git a/components/top-nav/src/alert-tag.module.scss b/components/top-nav/src/alert-tag.module.scss new file mode 100644 index 000000000..09b1846eb --- /dev/null +++ b/components/top-nav/src/alert-tag.module.scss @@ -0,0 +1,23 @@ +@import '@accoutrement'; + +.tag-border { + align-items: center; + padding: 2px; + margin-left: 8px; + font-size: 10px; + font-style: normal; + font-weight: 600; + line-height: normal; + color: var(--secondary-pearl-90, rgba(250, 250, 250, 0.9)); + text-transform: uppercase; + background: var(--warning-amber-100-primary, #d97008); + border-radius: 2px; + + &.beta { + background: var(--warning-amber-100-primary, #d97008); + } + + &.new { + background: var(--success-jade-100-primary, #22a06b); + } +} diff --git a/components/top-nav/src/alert-tag.tsx b/components/top-nav/src/alert-tag.tsx new file mode 100644 index 000000000..6db950a24 --- /dev/null +++ b/components/top-nav/src/alert-tag.tsx @@ -0,0 +1,18 @@ +import React, { PureComponent, MouseEventHandler } from 'react' +import classnames from './alert-tag.module.scss' + +export interface AlertTagProps extends BaseProps { + tagLabel: string + tagType: string +} + +export default class AlertTag extends PureComponent { + render() { + const { tagLabel, tagType } = this.props + return ( +
+ {this.props.tagLabel} +
+ ) + } +} diff --git a/components/top-nav/src/config.ts b/components/top-nav/src/config.ts index 7a4ea8218..b5ac3433c 100644 --- a/components/top-nav/src/config.ts +++ b/components/top-nav/src/config.ts @@ -30,6 +30,8 @@ export interface NAVIGATION_ITEM_L1_INTERFACE { config?: Array dispatchFunctionObject?: Function footerMessage?: string + tagLabel?: string + tagType?: string } export interface NAVIGATION_ITEM_L2_INTERFACE { @@ -39,12 +41,16 @@ export interface NAVIGATION_ITEM_L2_INTERFACE { config: Array path: string routingInfo?: ROUTING_INFO_INTERFACE + tagLabel?: string + tagType?: string } export interface NAVIGATION_ITEM_L3_INTERFACE { id: string title: string routingInfo?: ROUTING_INFO_INTERFACE + tagLabel?: string + tagType?: string } export interface TopNavBaseProps extends BaseProps { diff --git a/components/top-nav/src/top-nav-hover.tsx b/components/top-nav/src/top-nav-hover.tsx index 46c6e7322..d84ea98b6 100644 --- a/components/top-nav/src/top-nav-hover.tsx +++ b/components/top-nav/src/top-nav-hover.tsx @@ -4,6 +4,7 @@ import Layout from '@applique-ui/layout' import { NAVIGATION_ITEM_L2_INTERFACE } from './config' import classnames from './top-nav-hover.module.scss' import { replaceSpacesWithUnderscore } from './utils' +import AlertTag from './alert-tag' export interface TopNavHoverProps extends BaseProps { navTabConfig: { @@ -80,7 +81,17 @@ export default class TopNavHover extends PureComponent { className={classnames('hover-item-menu')} >
{menu.config.map((it) => { @@ -91,7 +102,17 @@ export default class TopNavHover extends PureComponent { id={replaceSpacesWithUnderscore(it.title)} className={classnames('hover-item-menu-link')} > - {it.title} + + {it.title} + {it.tagLabel ? ( + + ) : ( + <> + )} + ) })} @@ -116,6 +137,14 @@ export default class TopNavHover extends PureComponent { className={classnames('hover-item-direct-link')} > {directLink.title} + {directLink.tagLabel ? ( + + ) : ( + <> + )} ) })} diff --git a/components/top-nav/src/top-nav-item.tsx b/components/top-nav/src/top-nav-item.tsx index f85edf636..261144f60 100644 --- a/components/top-nav/src/top-nav-item.tsx +++ b/components/top-nav/src/top-nav-item.tsx @@ -10,6 +10,8 @@ import { getFilteredNavs, replaceSpacesWithUnderscore, } from './utils' +import Layout from '@applique-ui/layout' +import AlertTag from './alert-tag' export interface TopNavItemProps extends BaseProps { itemData: NAVIGATION_ITEM_L1_INTERFACE @@ -87,6 +89,11 @@ export default class TopNavItem extends PureComponent< /> )} {itemData.label} + {itemData.tagLabel ? ( + + ) : ( + <> + )} {this.state.isHovering && checkIfNonEmptyMenu(itemData) && (