Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react'; import PropTypes from 'prop-types'; const VARIANTS = ['secondary', 'outline', 'danger', 'white']; const SIZES = ['big']; const Button = ({ children, className, href, loading, onClick, size, variant, type, ...rest }) => { let btnClass = 'qpp-c-button'; if (VARIANTS.includes(variant)) { btnClass = btnClass.concat(' ', `qpp-c-button--${variant}`); } if (SIZES.includes(size)) { btnClass = btnClass.concat(' ', `qpp-c-button--${size}`); } if (className) { btnClass = btnClass.concat(' ', className); } if (href) { return ( <a href={href} data-testid="ds-btn" className={btnClass || ''} onClick={onClick} > {children} </a> ); } return ( <button data-testid="ds-btn" className={btnClass || ''} onClick={onClick} disabled={loading} type={type} {...rest} > {children} </button> ); }; Button.propTypes = { children: PropTypes.node, className: PropTypes.string, href: PropTypes.string, loading: PropTypes.bool, onClick: PropTypes.func, size: PropTypes.oneOf(SIZES), type: PropTypes.string, variant: PropTypes.oneOf(VARIANTS), }; Button.defaultProps = { children: false, className: '', href: '', loading: false, onClick: () => null, size: null, type: 'button', variant: null, }; export const TextButton = ({ className = '', ...props }) => ( <Button className={`qpp-c-button--text ${className}`} {...props} /> ); TextButton.propTypes = { className: PropTypes.string, }; TextButton.defaultProps = { className: '', }; export default Button; |