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

… component
priceline · Jan 22, 2025 · 9469bae · 9469bae
1 parent c8efbaf
commit 9469bae
Show file tree

Hide file tree

Showing 5 changed files with 359 additions and 253 deletions.
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
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "adds backgroundColor to RadioCheckToggleCard",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git 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
@@ -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,13 +276,53 @@ 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'
               title='Selected'
               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
@@ -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,
 }