mirror of
https://gh.wpcy.net/https://github.com/elementor/one-click-accessibility.git
synced 2026-04-25 10:44:51 +08:00
769cf52b52
* add: icon radius component * add: icon radius component * update: add support for widget radius * fix: minor ui fixes * fix: resolve comments * fix: alignment of the icon * update: add styled components * add: corner radius mixpanel event * fix: corner radius should have default values when no value is set based on icon * fix: icon radius input style * add: accessibility attributes * fix: active states color * add: logic to control invalid inputs * update: make aria attributes translatable * update: styled component names * add: spacing between the components
98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
import FormControl from '@elementor/ui/FormControl';
|
|
import FormLabel from '@elementor/ui/FormLabel';
|
|
import Paper from '@elementor/ui/Paper';
|
|
import Radio from '@elementor/ui/Radio';
|
|
import RadioGroup from '@elementor/ui/RadioGroup';
|
|
import Typography from '@elementor/ui/Typography';
|
|
import { styled } from '@elementor/ui/styles';
|
|
import { WidgetIcon } from '@ea11y/components';
|
|
import { useIconDesign } from '@ea11y/hooks';
|
|
import { eventNames, mixpanelService } from '@ea11y/services';
|
|
import { __ } from '@wordpress/i18n';
|
|
import options from '../../helpers/accessibility-options';
|
|
|
|
const IconSelect = (props) => {
|
|
const { iconDesign, updateIconDesign } = useIconDesign();
|
|
|
|
const selectIcon = (icon) => () => {
|
|
updateIconDesign({ icon });
|
|
mixpanelService.sendEvent(eventNames.iconTypeSelected, {
|
|
iconType: icon,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<FormControl>
|
|
<FormLabel id="icon-select-radio-buttons-group-label" color="secondary">
|
|
<Typography variant="subtitle2" marginBottom={1}>
|
|
{__('Icon', 'pojo-accessibility')}
|
|
</Typography>
|
|
</FormLabel>
|
|
|
|
<StyledRadioGroup
|
|
{...props}
|
|
aria-labelledby="icon-select-radio-buttons-group-label"
|
|
name="icon-select-radio-buttons-group"
|
|
value={iconDesign.icon}
|
|
>
|
|
{options.map((option) => (
|
|
<StyledPaper
|
|
key={option.value}
|
|
variant="outlined"
|
|
onClick={selectIcon(option.value)}
|
|
sx={{
|
|
borderColor:
|
|
iconDesign.icon === option.value ? 'info.main' : 'divider',
|
|
borderWidth: iconDesign.icon === option.value ? 2 : 1,
|
|
}}
|
|
>
|
|
<WidgetIcon
|
|
icon={option.icon}
|
|
size={44}
|
|
radius={100}
|
|
color={iconDesign?.color}
|
|
control="select"
|
|
type={option.value}
|
|
/>
|
|
<Radio
|
|
value={option.value}
|
|
inputProps={{
|
|
'aria-label': option.label,
|
|
}}
|
|
sx={{ opacity: 0, position: 'absolute' }}
|
|
/>
|
|
</StyledPaper>
|
|
))}
|
|
</StyledRadioGroup>
|
|
</FormControl>
|
|
);
|
|
};
|
|
|
|
export default IconSelect;
|
|
|
|
const StyledRadioGroup = styled(RadioGroup)`
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
const StyledPaper = styled(Paper)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
gap: 12px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
min-width: 10px;
|
|
width: 100px;
|
|
min-height: 100px;
|
|
border-radius: ${({ theme }) => theme.shape.borderRadius};
|
|
box-shadow: ${({ theme }) => theme.shadows[0]};
|
|
cursor: pointer;
|
|
|
|
:hover {
|
|
box-shadow: 0 0 15px 0 rgba(37, 99, 235, 0.15);
|
|
border-color: ${({ theme }) => theme.palette.info.main};
|
|
}
|
|
`;
|
