adding tags for top nav items

myntra · Sep 11, 2023 · 5ed8641 · 5ed8641
1 parent cde26ae
commit 5ed8641
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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<AlertTagProps> {
+  render() {
+    const { tagLabel, tagType } = this.props
+    return (
+      <div className={classnames('tag-border', tagType)}>
+        {this.props.tagLabel}
+      </div>
+    )
+  }
+}
diff --git 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<NAVIGATION_ITEM_L2_INTERFACE>
   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<NAVIGATION_ITEM_L3_INTERFACE>
   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
@@ -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<TopNavHoverProps, {}> {
                       className={classnames('hover-item-menu')}
                     >
                       <label className={classnames('hover-item-menu-title')}>
-                        {menu.title}
+                        <Layout type="stack">
+                          {menu.title}
+                          {menu.tagLabel ? (
+                            <AlertTag
+                              tagType={menu.tagType}
+                              tagLabel={menu.tagLabel}
+                            />
+                          ) : (
+                            <></>
+                          )}
+                        </Layout>
                       </label>
                       <hr className={classnames('hover-item-menu-hr')} />
                       {menu.config.map((it) => {
@@ -91,7 +102,17 @@ export default class TopNavHover extends PureComponent<TopNavHoverProps, {}> {
                             id={replaceSpacesWithUnderscore(it.title)}
                             className={classnames('hover-item-menu-link')}
                           >
-                            {it.title}
+                            <Layout type="stack">
+                              {it.title}
+                              {it.tagLabel ? (
+                                <AlertTag
+                                  tagType={it.tagType}
+                                  tagLabel={it.tagLabel}
+                                />
+                              ) : (
+                                <></>
+                              )}
+                            </Layout>
                           </button>
                         )
                       })}
@@ -116,6 +137,14 @@ export default class TopNavHover extends PureComponent<TopNavHoverProps, {}> {
                       className={classnames('hover-item-direct-link')}
                     >
                       {directLink.title}
+                      {directLink.tagLabel ? (
+                        <AlertTag
+                          tagType={directLink.tagType}
+                          tagLabel={directLink.tagLabel}
+                        />
+                      ) : (
+                        <></>
+                      )}
                     </button>
                   )
                 })}

diff --git 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 ? (
+            <AlertTag tagType={itemData.tagType} tagLabel={itemData.tagLabel} />
+          ) : (
+            <></>
+          )}
           {this.state.isHovering && checkIfNonEmptyMenu(itemData) && (
             <TopNavHover
               navTabConfig={{ menus, directs }}