import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import EnhancedPropTypes from './utils/enhancedPropTypes';
import icBEM from './utils/icBEM';

import Button, { COMPONENT_NAME } from './Button';
import IconLayout from './IconLayout';

/**
 * <IconButton>
 * ===
 *
 * IconButton is a variant of `<Button>`.
 *
 * However, color & solid props are invalid in `<IconButton>`
 */
function IconButton({
    icon,
    tinted,
    color,
    solid,
    // React props
    className,
    ...buttonProps
}) {
    const bemClass = icBEM(COMPONENT_NAME)
        .modifier('icon-only')
        .modifier('tinted', tinted)
        .toString({ stripBlock: true });

    const rootClass = classNames(bemClass, className);

    return (
        <Button className={rootClass} {...buttonProps}>
            <IconLayout icon={icon} />
        </Button>
    );
}

IconButton.propTypes = {
    icon: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.element
    ]).isRequired,
    tinted: PropTypes.bool,
    color: EnhancedPropTypes.isEmpty,
    solid: EnhancedPropTypes.isEmpty,
};

IconButton.defaultProps = {
    tinted: false,
    color: undefined,
    solid: undefined,
};

export default IconButton;

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import EnhancedPropTypes from './utils/enhancedPropTypes';
import icBEM from './utils/icBEM';

import Button, { COMPONENT_NAME } from './Button';
import IconLayout from './IconLayout';

/**
 * <IconButton>
 * ===
 *
 * `<IconButton>` is a variant of `<Button>`.
 *
 * However, `color` & `solid` props are invalid in `<IconButton>`
 */
function IconButton({
    icon,
    tinted,
    color,
    solid,
    // React props
    className,
    ...buttonProps
}) {
    const bemClass = icBEM(COMPONENT_NAME)
        .modifier('icon-only')
        .modifier('tinted', tinted)
        .toString({ stripBlock: true });

    const rootClass = classNames(bemClass, className);

    return (
        <Button className={rootClass} {...buttonProps}>
            <IconLayout icon={icon} />
        </Button>
    );
}

IconButton.propTypes = {
    icon: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.element
    ]).isRequired,
    tinted: PropTypes.bool,
    color: EnhancedPropTypes.isEmpty,
    solid: EnhancedPropTypes.isEmpty,
};

IconButton.defaultProps = {
    tinted: false,
    color: undefined,
    solid: undefined,
};

export default IconButton;

Fix IconButton jsdoc format