You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import { Flex } from '../basic/Flex';
|
|
import { SessionRadio } from '../basic/SessionRadio';
|
|
import { PanelButton, PanelButtonProps, StyledContent, StyledText } from './PanelButton';
|
|
|
|
const StyledPanelButton = styled(PanelButton)`
|
|
padding-top: var(--margins-lg);
|
|
padding-bottom: var(--margins-lg);
|
|
text-align: left;
|
|
|
|
div {
|
|
span {
|
|
margin-inline-start: 0;
|
|
margin-inline-end: 0;
|
|
}
|
|
}
|
|
|
|
:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
`;
|
|
|
|
const StyledSubtitle = styled.p`
|
|
font-size: var(--font-size-xs);
|
|
margin: 0;
|
|
`;
|
|
|
|
const StyledCheckContainer = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
`;
|
|
|
|
interface PanelRadioButtonProps extends Omit<PanelButtonProps, 'children' | 'onClick'> {
|
|
value: any;
|
|
text: string;
|
|
subtitle?: string;
|
|
isSelected: boolean;
|
|
onSelect?: (...args: Array<any>) => void;
|
|
onUnselect?: (...args: Array<any>) => void;
|
|
}
|
|
|
|
export const PanelRadioButton = (props: PanelRadioButtonProps) => {
|
|
const {
|
|
value,
|
|
text,
|
|
subtitle,
|
|
isSelected,
|
|
onSelect,
|
|
onUnselect,
|
|
disabled = false,
|
|
noBackgroundColor,
|
|
dataTestId,
|
|
} = props;
|
|
|
|
return (
|
|
<StyledPanelButton
|
|
disabled={disabled}
|
|
noBackgroundColor={noBackgroundColor}
|
|
onClick={() => {
|
|
isSelected ? onUnselect?.('bye') : onSelect?.('hi');
|
|
}}
|
|
dataTestId={dataTestId}
|
|
>
|
|
<StyledContent disabled={disabled}>
|
|
<Flex container={true} width={'100%'} flexDirection={'column'} alignItems={'flex-start'}>
|
|
<StyledText>{text}</StyledText>
|
|
{subtitle && <StyledSubtitle>{subtitle}</StyledSubtitle>}
|
|
</Flex>
|
|
<StyledCheckContainer>
|
|
<SessionRadio
|
|
active={isSelected}
|
|
value={value}
|
|
inputName={value}
|
|
label=""
|
|
disabled={disabled}
|
|
/>
|
|
</StyledCheckContainer>
|
|
</StyledContent>
|
|
</StyledPanelButton>
|
|
);
|
|
};
|