@navinc/base-react-components/src/_deprecated/card/parts/kebab-menu.js

Nav's Pattern Library

import { Component } from 'react'
import onClickOutside from 'react-onclickoutside'
import styled from 'styled-components'
import Copy from '../../../copy.js'

const StyledKebabMenu = styled.div`
  position: absolute;
  right: 16px;
  top: 48px;
  padding: 8px 16px;
  background-color: ${({ theme }) => theme.neutral100};
  border-radius: 4px;
  box-shadow: 0 6px 8px 2px rgba(0, 0, 0, 0.14), 0 2px 12px 4px rgba(0, 0, 0, 0.12), 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
`
StyledKebabMenu.displayName = 'KebabMenu'

export const KebabItem = styled.div`
  display: flex;
  flex-flow: row nowrap;
  cursor: pointer;
`
KebabItem.displayName = 'KebabItem'

export const KebabItemIcon = styled.img`
  width: 16px;
  height: 16px;
  margin-right: 8px;
  align-self: center;
  vertical-align: middle;
`
KebabItemIcon.displayName = 'KebabItemIcon'

export class KebabMenu extends Component {
  handleClickOutside(event) {
    this.props.toggleKebabMenu(event)
  }

  render() {
    const { onHide, kebabMenuItems = [], togglehideCard } = this.props

    return (
      <StyledKebabMenu data-testid="deprecated-card:kebab-menu">
        {kebabMenuItems.map(({ label, icon, onClick }, index) => (
          <KebabItem
            key={index}
            onClick={(event) => {
              if (label === 'Hide') {
                togglehideCard(event)
                onHide()
              }
              onClick()
            }}
          >
            <KebabItemIcon src={icon} />
            <Copy>{label}</Copy>
          </KebabItem>
        ))}
      </StyledKebabMenu>
    )
  }
}

export default onClickOutside(KebabMenu)