feature(PROT-4812): adds backgroundColor prop to RadioCheckToggleCard

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"
+}

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'

packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.stories.args.ts

@@ -1,21 +1,17 @@
 import { ArgTypes } from '@storybook/react/*'
-import {
-  RadioCheckToggleCard,
-  RadioCheckToggleCardHPositions,
-  RadioCheckToggleCardVPositions,
-} from './RadioCheckToggleCard'
+import { RadioCheckToggleCardHPositions, RadioCheckToggleCardVPositions } from './RadioCheckToggleCard'
 
 export const argTypes: ArgTypes = {
   hPosition: {
     control: { type: 'radio' },
     options: RadioCheckToggleCardHPositions,
-    defaultValue: RadioCheckToggleCard.defaultProps.hPosition,
+    defaultValue: 'right',
     description: 'Controlling the button icon horizontal position',
   },
   vPosition: {
     control: { type: 'radio' },
     options: RadioCheckToggleCardVPositions,
-    defaultValue: RadioCheckToggleCard.defaultProps.vPosition,
+    defaultValue: 'top',
     description: 'Controlling the button icon vertical position',
   },
   isTakingFullHeightOfCard: {

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 {
@@ -141,7 +138,7 @@ const DefaultDocPage = () => {
     options: {
       hPosition: THPositions
       vPosition: TVPositions
-      title: string
+      title: string | React.ReactElement
       value: string
     }[]
   } = {
@@ -279,13 +276,53 @@ const DefaultDocPage = () => {
             </RadioCheckToggleCard>
           </FocusStateCard>
 
+          <EnabledStateCard>
+            <RadioCheckToggleCard
+              name='states-radio'
+              title={<Text>Enabled - with backgroundColor</Text>}
+              value='example-1-1'
+              isSelected={false}
+              onChange={() => {}}
+              backgroundColor='success.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='success.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='success.light'
+            >
+              <Box width='100%' height='75px' />
+            </RadioCheckToggleCard>
+          </FocusStateCard>
+
           <SelectedStateCard>
             <RadioCheckToggleCard
               name='states-radio'
               title='Selected'
               value='example-4'
               isSelected={true}
               onChange={() => {}}
+              backgroundColor='success.light' // set the backgroundColor, but ensure isSelected style overrides backgroundColor
             >
               <Box width='100%' height='75px' />
             </RadioCheckToggleCard>

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')};
@@ -170,21 +171,20 @@ const buttonIcon = (cardType: TCardTypes) => {
 /**
  * @public
  */
-export function RadioCheckToggleCard(props: RadioCheckToggleCardProps) {
-  const {
-    children,
-    cardType,
-    hPosition,
-    vPosition,
-    isTakingFullHeightOfCard,
-    title,
-    isTitleBold,
-    name,
-    value,
-    onChange,
-    isSelected,
-  } = props
-
+export function RadioCheckToggleCard({
+  backgroundColor = 'background.lightest',
+  cardType = 'radio',
+  children,
+  hPosition = 'right',
+  isSelected,
+  isTakingFullHeightOfCard = false,
+  isTitleBold = false,
+  name,
+  onChange = () => {},
+  title,
+  value,
+  vPosition = 'top',
+}: RadioCheckToggleCardProps) {
   const id = `${name}_${value}`
   const ButtonIcon = buttonIcon(cardType)
 
@@ -199,7 +199,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'}
@@ -222,12 +222,3 @@ export function RadioCheckToggleCard(props: RadioCheckToggleCardProps) {
 }
 
 RadioCheckToggleCard.displayName = 'RadioCheckToggleCard'
-
-RadioCheckToggleCard.defaultProps = {
-  cardType: 'radio' as TCardTypes,
-  isTitleBold: false,
-  hPosition: 'right' as THPositions,
-  vPosition: 'top' as TVPositions,
-  isTakingFullHeightOfCard: false,
-  onChange: () => {},
-}