saagie-ui/src/react/core/layout/secondLevelNav/SecondLevelNavLink.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '../../atoms/icon/Icon';
import { Tooltip } from '../../atoms/tooltip/Tooltip';

const propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  iconName: PropTypes.string,
  isActive: PropTypes.bool,
  isNew: PropTypes.bool,
  isComingSoon: PropTypes.bool,
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
};

const defaultProps = {
  children: '',
  className: '',
  iconName: 'fa-link',
  isActive: false,
  isNew: false,
  isComingSoon: false,
  tag: 'a',
};

export const SecondLevelNavLink = ({
  children,
  className,
  iconName,
  isActive,
  isNew,
  isComingSoon,
  tag: Tag,
  ...props
}) => (
  <Tag
    className={`
      sui-l-second-level-nav__link
      ${isActive ? 'as--active' : ''}
      ${isNew ? 'as--new' : ''}
      ${isComingSoon ? 'as--coming-soon' : ''}
      ${className}
    `}
    {...props}
  >
    {!!iconName && (
      <>
        <Tooltip label={children} defaultPlacement="right">
          <span className="sui-l-second-level-nav__link-tooltip-hitzone" />
        </Tooltip>
        <Icon name={iconName} />
      </>
    )}
    <span className="sui-l-second-level-nav__link-label">
      {children}
    </span>
  </Tag>
);

SecondLevelNavLink.propTypes = propTypes;
SecondLevelNavLink.defaultProps = defaultProps;