UNPKG

vcc-ui

Version:

A React library for building user interfaces at Volvo Cars

100 lines 2.83 kB
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';