intellihr · wyvl · Jul 1, 2020 · Jul 1, 2020 · Jul 1, 2020
diff --git a/src/domain/Popovers/DropdownMenu/DropdownMenu.examples.md b/src/domain/Popovers/DropdownMenu/DropdownMenu.examples.md
@@ -44,6 +44,26 @@
 </div>
 ```
 
+#### DropdownMenu with tooltip
+
+```jsx
+<DropdownMenu
+  sections={[
+    {
+      text: 'Hover and View Tooltip',
+      href: 'https://www.intellihr.com.au',
+      tooltipMessage: 'I am a tooltip for item 1'
+    },
+    {
+      text: 'Archive',
+      onClick: () => alert('Archive'),
+      tooltipMessage: 'This template has been used to create a goal so it cannot be deleted. Archived templates are hidden when creating goals.',
+      tooltipProps: { width: 300 }
+    }
+  ]}
+/>
+```
+
 #### Dropdown Menu using strip colors
 
 ```jsx

diff --git a/src/domain/Popovers/DropdownMenu/DropdownMenu.test.tsx b/src/domain/Popovers/DropdownMenu/DropdownMenu.test.tsx
@@ -36,6 +36,41 @@ describe('<DropdownMenu />', () => {
     })
   })
 
+  describe('Render a dropdown with tooltip', () => {
+    const wrapper = shallow(
+      <DropdownMenu
+        sections={[
+          {
+            text: 'Item 1',
+            tooltipMessage: 'I am a tooltip for item 1'
+          },
+          {
+            text: 'Item 2',
+            href: 'https://www.intellihr.com.au',
+            tooltipMessage: 'I am a tooltip for item 2',
+            tooltipProps: { width: 300 }
+          }
+        ]}
+      />
+    )
+
+    it('should match the snapshot', () => {
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('should open the menu', () => {
+      // @ts-ignore TS2339
+      wrapper.instance().openMenu()
+
+      expect(
+        wrapper
+          .update()
+          .find('Popover')
+          .prop('isOpen')
+      ).toBeTruthy()
+    })
+  })
+
   describe('Render a dropdown using custom content', () => {
     const wrapper = shallow(
       <DropdownMenu>

diff --git a/src/domain/Popovers/DropdownMenu/__snapshots__/DropdownMenu.test.tsx.snap b/src/domain/Popovers/DropdownMenu/__snapshots__/DropdownMenu.test.tsx.snap
@@ -53,6 +53,80 @@ exports[`<DropdownMenu /> Render a dropdown using custom content should match th
 </Fragment>
 `;
 
+exports[`<DropdownMenu /> Render a dropdown with tooltip should match the snapshot 1`] = `
+<Fragment>
+  <styled.button
+    aria-expanded={false}
+    aria-haspopup={true}
+    onClick={[Function]}
+    role="button"
+    type="button"
+  >
+    <Memo(FontAwesomeIcon)
+      icon="ellipsis-v"
+      type="solid"
+    />
+  </styled.button>
+  <Popover
+    animationType="dropdown"
+    id=""
+    isOpen={false}
+    parentAnchorPosition="auto"
+    parentRef={
+      Object {
+        "current": null,
+      }
+    }
+    popoverAnchorPosition="auto"
+  >
+    <FocusTrap
+      _createFocusTrap={[Function]}
+      active={false}
+      focusTrapOptions={
+        Object {
+          "clickOutsideDeactivates": true,
+          "fallbackFocus": <body />,
+          "initialFocus": <body />,
+          "onDeactivate": [Function],
+          "returnFocusOnDeactivate": false,
+        }
+      }
+      paused={false}
+      tag="span"
+    >
+      <styled.div
+        role="menu"
+      >
+        <styled.ul>
+          <Section
+            __closeMenuCallback={[Function]}
+            closeDropdownBehaviour="whenActionProvided"
+            key="0"
+            sectionType="default"
+            text="Item 1"
+            tooltipMessage="I am a tooltip for item 1"
+          />
+          <Section
+            __closeMenuCallback={[Function]}
+            closeDropdownBehaviour="whenActionProvided"
+            href="https://www.intellihr.com.au"
+            key="1"
+            sectionType="default"
+            text="Item 2"
+            tooltipMessage="I am a tooltip for item 2"
+            tooltipProps={
+              Object {
+                "width": 300,
+              }
+            }
+          />
+        </styled.ul>
+      </styled.div>
+    </FocusTrap>
+  </Popover>
+</Fragment>
+`;
+
 exports[`<DropdownMenu /> Simple dropdown behaviour should match the snapshot 1`] = `
 <Fragment>
   <styled.button

diff --git a/src/domain/Popovers/DropdownMenu/subcomponents/Section.tsx b/src/domain/Popovers/DropdownMenu/subcomponents/Section.tsx
@@ -1,7 +1,15 @@
 import React from 'react'
 
+import {Props, Variables} from '../../../../common'
+import {StyledIconButton} from '../../../Buttons/FontAwesomeIconButton/style'
+import {StyledInputLabel} from '../../../Forms/VerticalForm/subcomponents/style'
+import {FontAwesomeIcon} from '../../../Icons/FontAwesomeIcon'
 import { Anchor } from '../../../Internals'
-import { StyledSection } from './style'
+import {GridLayout} from '../../../Layouts/GridLayout'
+import {Margin} from '../../../Spacers/Margin'
+import {ITooltipPopoverProps, ITooltipPopoverToggleComponentProps, TooltipPopover} from '../../TooltipPopover'
+import {TooltipPopoverVariant} from '../../TooltipPopover/TooltipPopover'
+import {StyledSection, StyledSectionContent} from './style'
 
 type SectionType =
   'default'
@@ -41,6 +49,10 @@ interface ISectionProps {
   styleOnHover?: boolean
   /** Stop propagation of click event */
   stopPropagation?: boolean
+  /** Message of tooltip to show */
+  tooltipMessage?: JSX.Element | string
+  /** any extra tooltip props */
+  tooltipProps?: ITooltipPopoverProps
 }
 
 class Section extends React.PureComponent<ISectionProps, never> {
@@ -76,20 +88,17 @@ class Section extends React.PureComponent<ISectionProps, never> {
       role: 'menuitem'
     }
   }
-  public static defaultProps: Partial<ISectionProps> = {
-    sectionType: 'default',
-    closeDropdownBehaviour: 'whenActionProvided'
-  }
 
-  public render (): JSX.Element {
+  private get content () {
     const {
       component,
       componentProps,
       leftComponent,
       rightComponent,
       text,
       onClick,
-      href
+      href,
+      tooltipMessage
     } = this.props
 
     if (component) {
@@ -108,14 +117,74 @@ class Section extends React.PureComponent<ISectionProps, never> {
           onClick={onClick}
           href={href}
         >
-          {leftComponent && <span className='left-component'>{leftComponent}</span>}
-          {text}
-          {rightComponent && <span className='right-component'>{rightComponent}</span>}
+        {
+          tooltipMessage ? (
+            <>
+              <Margin margins={{ right: Variables.Spacing.sXSmall }}>
+                {leftComponent && <span className='left-component'>{leftComponent}</span>}
+                {text}
+                {rightComponent && <span className='right-component'>{rightComponent}</span>}
+              </Margin>
+              <FontAwesomeIcon icon='info-circle' type='solid' color={Variables.Color.n400}/>
+            </>
+          ) : (
+            <>
+              {leftComponent && <span className='left-component'>{leftComponent}</span>}
+              {text}
+              {rightComponent && <span className='right-component'>{rightComponent}</span>}
+            </>
+          )
+        }
         </Component>
       </StyledSection>
     )
   }
 
+  public static defaultProps: Partial<ISectionProps> = {
+    sectionType: 'default',
+    closeDropdownBehaviour: 'whenActionProvided'
+  }
+
+  public render (): JSX.Element {
+    const {
+      tooltipMessage,
+      tooltipProps
+    } = this.props
+
+    if (tooltipMessage) {
+      return (
+        <TooltipPopover
+          toggleComponent={this.toggleComponent(this.content)}
+          width={300}
+          parentAnchorPosition={{
+            xPos: Props.Position.Left,
+            yPos: Props.Position.Top
+          }}
+          popoverAnchorPosition={{
+            xPos: Props.Position.Right,
+            yPos: Props.Position.Top
+          }}
+          {...tooltipProps}
+        >
+          {tooltipMessage}
+        </TooltipPopover>
+      )
+    }
+
+    return this.content
+  }
+
+  private toggleComponent = (content: JSX.Element) => ({ openMenu, closeMenu, toggleComponentRef, ariaProps }: ITooltipPopoverToggleComponentProps) => (
+    <span
+      onMouseEnter={openMenu}
+      onMouseLeave={closeMenu}
+      ref={toggleComponentRef}
+      {...ariaProps}
+    >
+      {content}
+    </span>
+  )
+
   private handleCloseMenuClick = (event: React.SyntheticEvent<HTMLLIElement>) => {
     const {
       href,

diff --git a/src/domain/Popovers/DropdownMenu/subcomponents/style.ts b/src/domain/Popovers/DropdownMenu/subcomponents/style.ts
@@ -230,10 +230,16 @@ const StyledSection = styled.li`
   }
 `
 
+const StyledSectionContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+
 export {
   DefaultDropdownButton,
   StyledContentWrapper,
   StyledSection,
   StyledDropdownSectionList,
-  StyledDropdownCustomContent
+  StyledDropdownCustomContent,
+  StyledSectionContent
 }