diff --git a/src/domain/Popovers/DropdownMenu/DropdownMenu.examples.md b/src/domain/Popovers/DropdownMenu/DropdownMenu.examples.md index e9400379a..172371b36 100644 --- a/src/domain/Popovers/DropdownMenu/DropdownMenu.examples.md +++ b/src/domain/Popovers/DropdownMenu/DropdownMenu.examples.md @@ -44,6 +44,26 @@ ``` +#### DropdownMenu with tooltip + +```jsx + 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 index 283dc6ad6..e9d8bc288 100644 --- a/src/domain/Popovers/DropdownMenu/DropdownMenu.test.tsx +++ b/src/domain/Popovers/DropdownMenu/DropdownMenu.test.tsx @@ -36,6 +36,41 @@ describe('', () => { }) }) + describe('Render a dropdown with tooltip', () => { + const wrapper = shallow( + + ) + + 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( diff --git a/src/domain/Popovers/DropdownMenu/__snapshots__/DropdownMenu.test.tsx.snap b/src/domain/Popovers/DropdownMenu/__snapshots__/DropdownMenu.test.tsx.snap index 68c8f6ff4..2d45efdd2 100644 --- 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[` Render a dropdown using custom content should match th `; +exports[` Render a dropdown with tooltip should match the snapshot 1`] = ` + + + + + + , + "initialFocus": , + "onDeactivate": [Function], + "returnFocusOnDeactivate": false, + } + } + paused={false} + tag="span" + > + + +
+
+ + + + + +`; + exports[` Simple dropdown behaviour should match the snapshot 1`] = ` { @@ -76,12 +88,8 @@ class Section extends React.PureComponent { role: 'menuitem' } } - public static defaultProps: Partial = { - sectionType: 'default', - closeDropdownBehaviour: 'whenActionProvided' - } - public render (): JSX.Element { + private get content () { const { component, componentProps, @@ -89,7 +97,8 @@ class Section extends React.PureComponent { rightComponent, text, onClick, - href + href, + tooltipMessage } = this.props if (component) { @@ -108,14 +117,74 @@ class Section extends React.PureComponent { onClick={onClick} href={href} > - {leftComponent && {leftComponent}} - {text} - {rightComponent && {rightComponent}} + { + tooltipMessage ? ( + <> + + {leftComponent && {leftComponent}} + {text} + {rightComponent && {rightComponent}} + + + + ) : ( + <> + {leftComponent && {leftComponent}} + {text} + {rightComponent && {rightComponent}} + + ) + } ) } + public static defaultProps: Partial = { + sectionType: 'default', + closeDropdownBehaviour: 'whenActionProvided' + } + + public render (): JSX.Element { + const { + tooltipMessage, + tooltipProps + } = this.props + + if (tooltipMessage) { + return ( + + {tooltipMessage} + + ) + } + + return this.content + } + + private toggleComponent = (content: JSX.Element) => ({ openMenu, closeMenu, toggleComponentRef, ariaProps }: ITooltipPopoverToggleComponentProps) => ( + + {content} + + ) + private handleCloseMenuClick = (event: React.SyntheticEvent) => { const { href, diff --git a/src/domain/Popovers/DropdownMenu/subcomponents/style.ts b/src/domain/Popovers/DropdownMenu/subcomponents/style.ts index 1177aab37..f394d2614 100644 --- 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 }