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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
/*
* SonarQube
* Copyright (C) 2009-2023 SonarSource SA
* mailto:info AT sonarsource DOT com
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import styled from '@emotion/styled';
import classNames from 'classnames';
import React from 'react';
import tw from 'twin.macro';
import { themeBorder, themeColor } from '../helpers/theme';
type AllowedRadioButtonAttributes = Pick<
React.InputHTMLAttributes<HTMLInputElement>,
'aria-label' | 'autoFocus' | 'id' | 'name' | 'style' | 'title' | 'type'
>;
interface Props extends AllowedRadioButtonAttributes {
checked: boolean;
children?: React.ReactNode;
className?: string;
disabled?: boolean;
onCheck: (value: string) => void;
value: string;
}
export function RadioButton({
checked,
children,
className,
disabled,
onCheck,
value,
...htmlProps
}: Props) {
const handleChange = () => {
if (!disabled) {
onCheck(value);
}
};
return (
<label className={classNames('sw-flex sw-items-center sw-cursor-pointer', className)}>
<RadioButtonStyled
aria-disabled={disabled}
checked={checked}
disabled={disabled}
onChange={handleChange}
type="radio"
value={value}
{...htmlProps}
/>
{children}
</label>
);
}
export const RadioButtonStyled = styled.input`
appearance: none; //disables native style
border: ${themeBorder('default', 'radioBorder')};
${tw`sw-w-4 sw-min-w-4 sw-h-4 sw-min-h-4`}
${tw`sw-p-1 sw-mr-2`}
${tw`sw-inline-block`}
${tw`sw-box-border`}
${tw`sw-rounded-pill`}
&:hover {
background: ${themeColor('radioHover')};
}
&:focus,
&:focus-visible {
background: ${themeColor('radioHover')};
border: ${themeBorder('default', 'radioFocusBorder')};
outline: ${themeBorder('focus', 'radioFocusOutline')};
}
&.is-checked,
&:focus:checked,
&:focus-visible:checked,
&:hover:checked,
&:checked {
// Color cannot be used with multiple backgrounds, only image is allowed
background-image: linear-gradient(to right, ${themeColor('radio')}, ${themeColor('radio')}),
linear-gradient(to right, ${themeColor('radioChecked')}, ${themeColor('radioChecked')});
background-clip: content-box, padding-box;
border: ${themeBorder('default', 'radioBorder')};
}
&.is-disabled,
&:disabled {
background: ${themeColor('radioDisabledBackground')};
border: ${themeBorder('default', 'radioDisabledBorder')};
background-clip: unset;
${tw`sw-cursor-not-allowed`}
&.is-checked,
&:checked {
background-image: linear-gradient(
to right,
${themeColor('radioDisabled')},
${themeColor('radioDisabled')}
),
linear-gradient(
to right,
${themeColor('radioDisabledBackground')},
${themeColor('radioDisabledBackground')}
);
background-clip: content-box, padding-box;
border: ${themeBorder('default', 'radioDisabledBorder')};
}
}
`;
|
