vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
109 lines (108 loc) • 4.13 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.IconButton = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _reactFela = require("react-fela");
var _useTheme = require("../../styling/use-theme");
var _sizeToRem = require("../../utils/size-to-rem");
var _click = require("../click");
var _IconButton = require("./IconButton.styles");
var _types = require("./types");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* @deprecated Use `import { IconButton } from '@volvo-cars/react-icons'` instead. See [IconButton](https://developer.volvocars.com/design-system/web/?path=/docs/components-iconbutton--docs)
*/
const IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
let {
iconName,
disabled = false,
variant = 'transparent',
intent = 'primary',
bleed = variant === 'transparent',
iconLoading,
...rest
} = _ref;
const {
css
} = (0, _reactFela.useFela)();
const theme = (0, _useTheme.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.default.createElement(_click.Click, (0, _extends2.default)({
ref: ref
}, disabled && {
'aria-disabled': disabled,
disabled
}, {
extend: [(0, _IconButton.commonStyles)({
size,
bleed
}), (0, _IconButton.iconButtonStyle)(variant, intent), {
':hover:not([aria-disabled=true])': {
'> img': {
paddingLeft: (0, _sizeToRem.pxToRem)(iconSize),
backgroundImage: `url(${hoverIcon})`
}
}
}]
}, rest), /*#__PURE__*/_react.default.createElement("img", {
alt: "",
loading: iconLoading,
src: defaultIcon,
role: "presentation",
className: css({
display: 'inline-block',
backgroundPosition: 'center',
backgroundSize: `${(0, _sizeToRem.pxToRem)(iconSize)} ${(0, _sizeToRem.pxToRem)(iconSize)}`,
boxSizing: 'border-box',
height: (0, _sizeToRem.pxToRem)(iconSize),
width: (0, _sizeToRem.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.default.string,
bleed: _propTypes.default.bool,
disabled: _propTypes.default.bool,
iconName: _propTypes.default.oneOf(_types.NAMES).isRequired,
intent: _propTypes.default.oneOf(_types.INTENTS),
variant: _propTypes.default.oneOf(_types.VARIANTS)
};
IconButton.displayName = 'IconButton';