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

Saagie UI from Saagie Design System

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

const propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  iconName: PropTypes.string,
  /**
   * 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: '',
  tag: 'div',
};

export const SecondLevelNavContextualAction = ({
  children,
  className,
  iconName,
  tag: Tag,
  ...props
}) => (
  <>
    <Tag className="sui-l-second-level-nav__contextual-action">
      <Button isBlock className={className} {...props}>
        {!!iconName && (
          <Icon name={iconName} position={children ? 'start' : null} />
        )}
        {children}
      </Button>
    </Tag>
    <Tag className="sui-l-second-level-nav__contextual-action-shrinked">
      <Button isBlock size="sm" className={className} {...props}>
        {!!iconName && (
          <Icon name={iconName} />
        )}
      </Button>
    </Tag>
  </>
);

SecondLevelNavContextualAction.propTypes = propTypes;
SecondLevelNavContextualAction.defaultProps = defaultProps;