import React from 'react' import PropTypes from 'prop-types' import styles from './ButtonIconAndLabel.module.scss' const ButtonIconAndLabel = ({ label, icon }) => { const iconClasses = ['dashicons', iconToDashIconMappings[icon], styles.icon] if (label) { iconClasses.push(styles.iconWithLabel) } return ( <> {icon ? : null} {label} ) } const iconToDashIconMappings = { arrow: 'dashicons-arrow-right-alt2', tick: 'dashicons-yes', info: 'dashicons-info', eye: 'dashicons-visibility', cross: 'dashicons-dismiss', update: 'dashicons-update', updateSpinning: `dashicons-update ${styles.iconSpinning}`, link: 'dashicons-external', plus: 'dashicons-plus-alt', trash: 'dashicons-trash', download: 'dashicons-download', expand: 'dashicons-editor-expand' } ButtonIconAndLabel.propTypes = { label: PropTypes.string, icon: PropTypes.oneOf(Object.keys(iconToDashIconMappings)) } ButtonIconAndLabel.defaultProps = { label: null, icon: null } export default ButtonIconAndLabel @keyframes headShake { 0% { transform: translateX(0); } 6.5% { transform: translateX(-6px) rotateY(-9deg); } 18.5% { transform: translateX(5px) rotateY(7deg); } 31.5% { transform: translateX(-3px) rotateY(-5deg); } 43.5% { transform: translateX(2px) rotateY(3deg); } 50% { transform: translateX(0); } } .headShake { animation-timing-function: ease-in-out; animation-name: headShake; } TESTO HIGH - Tienda HochSport