-
-
Notifications
You must be signed in to change notification settings - Fork 11
Expand file tree
/
Copy pathButton.js
More file actions
83 lines (76 loc) · 1.97 KB
/
Button.js
File metadata and controls
83 lines (76 loc) · 1.97 KB
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
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import cx from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const StyledButton = styled(
({
disabled,
variant,
size,
fluid,
cssProps,
...props
}) => <button {...props} />,
)`
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
width: ${(props) => props.fluid ? '100%' : ''};
font-size: ${(props) => props.theme.FontSize[props.theme.Button.size[props.size].fontSize]};
padding: ${(props) => props.theme.PXL(props.theme.Button.size[props.size].padding)
};
${(props) => ({ ...props.theme.Button[props.variant], ...props.theme.Button.extraProps, ...props.cssProps })}
pointer-events: ${(props) => props.disabled ? 'none' : ''};
opacity: ${(props) => props.disabled ? '0.5' : ''};
`;
function Button({ label = 'Button', spin = false, className = '', ...props }) {
return (
<StyledButton
{...props}
className={cx(className)}
>
{
spin ? (
<React.Fragment>
<FontAwesomeIcon
icon="fa-solid fa-spinner"
spin
className="disabled-spiner"
/>
</React.Fragment>
) : null
}
{label}
</StyledButton>
);
}
Button.propTypes = {
label: PropTypes.string,
spin: PropTypes.bool,
className: PropTypes.string,
type: PropTypes.oneOf(['submit', 'button']),
onClick: PropTypes.func,
disabled: PropTypes.bool,
size: PropTypes.string,
fluid: PropTypes.bool,
variant: PropTypes.string,
cssProps: PropTypes.object,
};
Button.defaultProps = {
// Props used in html elements
type: 'submit',
onClick: () => {},
// Props used in css property
fluid: false,
disabled: true,
size: 'm',
variant: 'secondary',
cssProps: {},
};
export default Button;