diff --git a/common/changes/pcln-design-system/feature-PROT-4812-radio-toggle_2025-01-22-04-09.json b/common/changes/pcln-design-system/feature-PROT-4812-radio-toggle_2025-01-22-04-09.json new file mode 100644 index 000000000..63984329c --- /dev/null +++ b/common/changes/pcln-design-system/feature-PROT-4812-radio-toggle_2025-01-22-04-09.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "pcln-design-system", + "comment": "adds backgroundColor to RadioCheckToggleCard", + "type": "minor" + } + ], + "packageName": "pcln-design-system" +} \ No newline at end of file diff --git a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.spec.tsx b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.spec.tsx index 413b7a040..1d956b16e 100644 --- a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.spec.tsx +++ b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.spec.tsx @@ -198,6 +198,7 @@ describe('RadioCheckToggleCard', () => { it('should render unchecked state UI correctly', () => { const { asFragment } = render( <RadioCheckToggleCard + backgroundColor='secondary.lightest' cardType='toggle' name='radio-1' title='Title' diff --git a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.stories.tsx b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.stories.tsx index f167cb8aa..4fe97fe12 100644 --- a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.stories.tsx +++ b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.stories.tsx @@ -38,7 +38,6 @@ const EnabledStateCard = styled(Box)` flex: 1 1 30%; & > label > div { - background-color: ${getPaletteColor('background.lightest')} !important; border-color: transparent !important; & div.cardIcon > svg { @@ -53,7 +52,6 @@ const HoverStateCard = styled(Box)` flex: 1 1 30%; & > label > div { - background-color: ${getPaletteColor('background.lightest')} !important; border-color: ${getPaletteColor('primary.base')} !important; & div.cardIcon > svg { @@ -68,7 +66,6 @@ const FocusStateCard = styled(Box)` flex: 1 1 30%; & > label > div { - background-color: ${getPaletteColor('background.lightest')} !important; border-color: transparent !important; & div.cardIcon > svg { @@ -279,6 +276,45 @@ const DefaultDocPage = () => { </RadioCheckToggleCard> </FocusStateCard> + <EnabledStateCard> + <RadioCheckToggleCard + name='states-radio' + title='Enabled - with backgroundColor' + value='example-1-1' + isSelected={false} + onChange={() => {}} + backgroundColor='secondary.light' + > + <Box width='100%' height='75px' /> + </RadioCheckToggleCard> + </EnabledStateCard> + + <HoverStateCard> + <RadioCheckToggleCard + name='states-radio' + title='Hover - with backgroundColor' + value='example-2-2' + isSelected={false} + onChange={() => {}} + backgroundColor='secondary.light' + > + <Box width='100%' height='75px' /> + </RadioCheckToggleCard> + </HoverStateCard> + + <FocusStateCard> + <RadioCheckToggleCard + name='states-radio' + title='Focus - with backgroundColor' + value='example-3-3' + isSelected={false} + onChange={() => {}} + backgroundColor='secondary.light' + > + <Box width='100%' height='75px' /> + </RadioCheckToggleCard> + </FocusStateCard> + <SelectedStateCard> <RadioCheckToggleCard name='states-radio' @@ -286,6 +322,7 @@ const DefaultDocPage = () => { value='example-4' isSelected={true} onChange={() => {}} + backgroundColor='secondary.light' // set the backgroundColor, but ensure isSelected style overrides backgroundColor > <Box width='100%' height='75px' /> </RadioCheckToggleCard> diff --git a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx index 2edb37385..d5ae42532 100644 --- a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx +++ b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx @@ -6,6 +6,7 @@ import { Box } from '../Box/Box' import { Flex } from '../Flex/Flex' import { Toggle } from '../Toggle/Toggle' import { getPaletteColor } from '../utils/utils' +import { type PaletteColor } from '../theme/theme' /** * @public @@ -41,17 +42,18 @@ export type TVPositions = (typeof RadioCheckToggleCardVPositions)[number] * @public */ export type RadioCheckToggleCardProps = { - children?: React.ReactNode + backgroundColor?: PaletteColor cardType?: TCardTypes + children?: React.ReactNode hPosition?: THPositions - vPosition?: TVPositions + isSelected: boolean isTakingFullHeightOfCard?: boolean - title: string isTitleBold?: boolean name: string - value: string onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void - isSelected: boolean + title: string | React.ReactElement + value: string + vPosition?: TVPositions } const CombinedInput = styled.input` @@ -97,7 +99,6 @@ const CombinedInput = styled.input` ` const RCTCardContainer = styled(Flex)` - background-color: ${getPaletteColor('background.lightest')}; border: 1px solid transparent; border-radius: ${themeGet('borderRadii.action-lg')}; box-shadow: ${themeGet('shadows.sm')}; @@ -172,17 +173,18 @@ const buttonIcon = (cardType: TCardTypes) => { */ export function RadioCheckToggleCard(props: RadioCheckToggleCardProps) { const { - children, + backgroundColor, cardType, + children, hPosition, - vPosition, + isSelected, isTakingFullHeightOfCard, - title, isTitleBold, name, - value, onChange, - isSelected, + title, + value, + vPosition, } = props const id = `${name}_${value}` @@ -199,7 +201,7 @@ export function RadioCheckToggleCard(props: RadioCheckToggleCardProps) { onChange={onChange} checked={isSelected} /> - <RCTCardContainer flexDirection='column' data-testId='rdt-card-main'> + <RCTCardContainer flexDirection='column' data-testId='rdt-card-main' color={backgroundColor}> <CardHeader alignItems={vPosition} flexDirection={hPosition === 'left' ? 'row-reverse' : 'row'} @@ -224,10 +226,11 @@ export function RadioCheckToggleCard(props: RadioCheckToggleCardProps) { RadioCheckToggleCard.displayName = 'RadioCheckToggleCard' RadioCheckToggleCard.defaultProps = { + backgroundColor: 'background.lightest' as PaletteColor, cardType: 'radio' as TCardTypes, - isTitleBold: false, hPosition: 'right' as THPositions, - vPosition: 'top' as TVPositions, isTakingFullHeightOfCard: false, + isTitleBold: false, onChange: () => {}, + vPosition: 'top' as TVPositions, }