vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
100 lines • 2.83 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import PropTypes from 'prop-types';
import React, { forwardRef } from 'react';
import { useFela } from 'react-fela';
import { useTheme } from '../../styling/use-theme';
import { pxToRem } from '../../utils/size-to-rem';
import { Click } from '../click';
import { commonStyles, iconButtonStyle } from './IconButton.styles';
import { INTENTS, NAMES, VARIANTS } from './types';
/**
* @deprecated Use `import { IconButton } from '@volvo-cars/react-icons'` instead. See [IconButton](https://developer.volvocars.com/design-system/web/?path=/docs/components-iconbutton--docs)
*/
export const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
iconName,
disabled = false,
variant = 'transparent',
intent = 'primary',
bleed = variant === 'transparent',
iconLoading,
...rest
} = _ref;
const {
css
} = useFela();
const theme = useTheme();
const size = 40;
const iconSize = 24;
const iconType = `${iconName}-24`;
const defaultIcon = theme.getIcon(iconType, getIconColor({
variant,
isHovered: false,
intent
}));
const hoverIcon = theme.getIcon(iconType, getIconColor({
variant,
isHovered: true,
intent
}));
return /*#__PURE__*/React.createElement(Click, _extends({
ref: ref
}, disabled && {
'aria-disabled': disabled,
disabled
}, {
extend: [commonStyles({
size,
bleed
}), iconButtonStyle(variant, intent), {
':hover:not([aria-disabled=true])': {
'> img': {
paddingLeft: pxToRem(iconSize),
backgroundImage: `url(${hoverIcon})`
}
}
}]
}, rest), /*#__PURE__*/React.createElement("img", {
alt: "",
loading: iconLoading,
src: defaultIcon,
role: "presentation",
className: css({
display: 'inline-block',
backgroundPosition: 'center',
backgroundSize: `${pxToRem(iconSize)} ${pxToRem(iconSize)}`,
boxSizing: 'border-box',
height: pxToRem(iconSize),
width: pxToRem(iconSize),
// Workaround Chrome bug with SVG <view> rendering
objectFit: 'fill'
}),
height: iconSize,
width: iconSize
}));
});
const getIconColor = _ref2 => {
let {
intent,
isHovered,
variant
} = _ref2;
if (variant === 'media') {
if (intent === 'primary' && isHovered) return 'primary';
return 'inverted';
}
if (variant === 'outline') {
if (isHovered) return 'inverted';
}
if (intent === 'destructive' && !isHovered) return 'alert';
return 'primary';
};
IconButton.propTypes = {
'aria-label': PropTypes.string,
bleed: PropTypes.bool,
disabled: PropTypes.bool,
iconName: PropTypes.oneOf(NAMES).isRequired,
intent: PropTypes.oneOf(INTENTS),
variant: PropTypes.oneOf(VARIANTS)
};
IconButton.displayName = 'IconButton';