[Bpk-checkbox-card][CLOV-1271]Adding bpk-checkbox-card by kerrie-wu · Pull Request #4256 · Skyscanner/backpack

kerrie-wu · 2026-03-04T08:22:56Z

Summary

Introduces bpk-component-checkbox-card — a new Backpack component providing a selectable card UI pattern currently implemented ad-hoc across Hotels, Flights, and Car Hire verticals.

What's included

Compound component API (primary)

Subcomponent	Description
`BpkCheckboxCard.Root`	`<div role="checkbox">` — state provider, handles click/keyboard
`BpkCheckboxCard.Control`	Hidden `<input>` for native form submission (`aria-hidden`)
`BpkCheckboxCard.Content`	Content wrapper with padding
`BpkCheckboxCard.Label`	Primary text, auto-wired to `aria-labelledby`
`BpkCheckboxCard.Description`	Secondary text, auto-wired to `aria-describedby`
`BpkCheckboxCard.Indicator`	Decorative check mark

Simple API

BpkCheckboxCardSimple — props-based wrapper for common icon + label + price layouts.

Variants & customisation

3 variants: onCanvasDefault, onCanvasContrast, onSurfaceContrast
2 sizes: sm, md
2 radius options: rounded, square
CSS custom property theming via createCheckboxCardTheme / CHECKBOX_CARD_THEME_ATTRIBUTES
Controlled (checked / onCheckedChange) and uncontrolled (defaultChecked) modes

Tests & documentation

Unit tests, accessibility tests, form integration tests
Storybook stories: Basic, WithMultiContent, AllVariants, WithImage, WithIndicator, WithInlineLayout, WithSizes, WithCustomTheme, SimpleAPI, NeighbourhoodCard
README and specs updated

Accessibility

role="checkbox" with aria-checked, aria-disabled, aria-required
Keyboard: Space and Enter toggle selection
aria-labelledby / aria-describedby auto-wired from Label/Description subcomponents
Disabled cards use tabIndex={-1} and aria-disabled (remain in DOM for AT announcements)

Figma

https://www.figma.com/design/ITvypOGdga42nM2ipBM4uk/Bpk-2.0?node-id=90-7627&m=dev

Remember to include the following changes:

Copilot

Pull request overview

Adds a new bpk-component-checkbox-card package to Backpack, implementing a selectable “checkbox card” pattern with a compound-component API, optional theming, and Storybook examples.

Changes:

Introduces BpkCheckboxCard compound components (Root, Control, Content, Label, Description, Indicator) plus a BpkCheckboxCardSimple wrapper.
Adds styling, tests (unit/form/a11y), Storybook stories/examples, and Figma Code Connect.
Adds extensive specification/planning docs under specs/001-checkbox-card/ and updates eslint ignores.

Reviewed changes

Copilot reviewed 36 out of 36 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
typecheck.txt	Adds a checked-in typecheck output artifact (should not be committed).
specs/001-checkbox-card/tasks.md	Implementation task breakdown for the component.
specs/001-checkbox-card/styling-guide.md	Styling guide / token mapping / SCSS patterns.
specs/001-checkbox-card/spec.md	Full requirements/specification for checkbox card.
specs/001-checkbox-card/research.md	Research notes on existing patterns/components.
specs/001-checkbox-card/plan.md	Implementation plan summary.
specs/001-checkbox-card/examples/variants.tsx	Spec examples demonstrating visual variants.
specs/001-checkbox-card/examples/interactive-states.tsx	Spec examples for interactive states and selection patterns.
specs/001-checkbox-card/examples/edge-cases.tsx	Spec examples for edge cases.
specs/001-checkbox-card/examples/basic-usage.tsx	Spec examples for basic usage and disabled states.
specs/001-checkbox-card/examples/accessibility.tsx	Spec examples for keyboard/form accessibility scenarios.
specs/001-checkbox-card/checklists/requirements.md	Spec quality checklist.
specs/001-checkbox-card/api-design.md	Proposed API design and usage examples.
packages/bpk-component-checkbox-card/src/themeAttributes.ts	Theme attributes + theme factory for `BpkThemeProvider`.
packages/bpk-component-checkbox-card/src/BpkCheckboxCardSimple/BpkCheckboxCardSimple.tsx	Simple wrapper API around the compound component.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/subcomponents/Root.tsx	Core state/ARIA handling and interaction logic.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/subcomponents/Label.tsx	Label slot component using `BpkText`.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/subcomponents/Indicator.tsx	Optional corner indicator slot.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/subcomponents/Description.tsx	Description slot component using `BpkText`.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/subcomponents/Control.tsx	Hidden checkbox input for form submission.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/subcomponents/Content.tsx	Content wrapper slot.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/subcomponents/CheckboxCardContext.tsx	React context powering the compound API.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/index.ts	Re-exports compound component API.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/form-test.tsx	Form integration tests.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/common-types.ts	Public constants/types for variants/radius/size.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/accessibility-test.tsx	jest-axe accessibility tests.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/snapshots/BpkCheckboxCard-test.tsx.snap	Snapshots for compound component.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/BpkCheckboxCard.tsx	Compound component composition/export surface.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/BpkCheckboxCard.module.scss	CSS Modules styling for the checkbox card.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/BpkCheckboxCard.figma.tsx	Figma Code Connect integration.
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/BpkCheckboxCard-test.tsx	Unit + interaction tests (click/keyboard/uncontrolled).
packages/bpk-component-checkbox-card/index.ts	Package-level exports (compound, simple wrapper, types, theming).
packages/bpk-component-checkbox-card/README.md	Component README (currently documents an outdated API).
examples/bpk-component-checkbox-card/stories.tsx	Storybook stories wiring.
examples/bpk-component-checkbox-card/examples.tsx	Storybook example implementations incl. theming and indicator.
.eslintignore	Ignores `specs/` from eslint.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-04T08:29:27Z

packages/bpk-component-checkbox-card/src/BpkCheckboxCard/accessibility-test.tsx

+        disabled
+      />,
+    );
+    const results = await axe(container);


In the “when disabled” test, axe is called without AXE_OPTIONS, while the other cases disable the nested-interactive rule. This inconsistency can cause flaky failures (or hide real issues in other cases). Use the same AXE_OPTIONS consistently across all the tests, or document why the disabled case is intentionally different.

Suggested change

const results = await axe(container);

const results = await axe(container, AXE_OPTIONS);

Copilot · 2026-03-04T08:29:28Z

packages/bpk-component-checkbox-card/src/BpkCheckboxCard/BpkCheckboxCardRoot.tsx

+  const computedAriaLabelledby = ariaLabelledby ?? labelId;
+  const computedAriaDescribedby = ariaDescribedby ?? descriptionId;
+
+  return (
+    <CheckboxCardContext.Provider value={contextValue}>
+      <div
+        role="checkbox"
+        aria-checked={checked}
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled ? -1 : 0}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabel ? undefined : computedAriaLabelledby}
+        aria-describedby={computedAriaDescribedby}
+        className={rootClassName}


aria-describedby and (when aria-label isn’t provided) aria-labelledby default to generated IDs even when no corresponding Description/Label element is rendered. This produces invalid ARIA IDREFs (and an unlabeled checkbox in the “empty content” case). Consider only setting aria-describedby/aria-labelledby when the consumer explicitly provides them, or introduce a mechanism to know whether the Label/Description slots are present (e.g., register via context/useEffect) before wiring up these attributes; otherwise require aria-label for cards without a visible label.

packages/bpk-component-checkbox-card/README.md

packages/bpk-component-checkbox-card/src/BpkCheckboxCardSimple/BpkCheckboxCardSimple.tsx

Copilot · 2026-03-04T08:29:29Z

typecheck.txt

+
+> backpack@0.0.1 typecheck
+> tsc
+
+examples/bpk-component-checkbox-card/examples.tsx(22,30): error TS7016: Could not find a declaration file for module '../../packages/bpk-theming'. '/Users/gert-janvercauteren/conductor/workspaces/backpack/copenhagen/packages/bpk-theming/index.js' implicitly has an 'any' type.
+examples/bpk-component-checkbox-card/stories.tsx(28,8): error TS2307: Cannot find module './new-api-examples' or its corresponding type declarations.
+packages/bpk-component-checkbox-card/src/BpkCheckboxCard/BpkCheckboxCard-test.tsx(82,41): error TS2339: Property 'withBackground' does not exist on type '{ readonly onCanvasDefault: "on-canvas-default"; readonly onCanvasContrast: "on-canvas-contrast"; readonly onSurfaceContrast: "on-surface-contrast"; }'.
+packages/bpk-component-checkbox-card/src/BpkCheckboxCard/BpkCheckboxCard-test.tsx(94,41): error TS2339: Property 'noBackground' does not exist on type '{ readonly onCanvasDefault: "on-canvas-default"; readonly onCanvasContrast: "on-canvas-contrast"; readonly onSurfaceContrast: "on-surface-contrast"; }'.
+packages/bpk-component-checkbox-card/src/BpkCheckboxCard/BpkCheckboxCardPrice.tsx(19,22): error TS7016: Could not find a declaration file for module '../../../bpk-component-price'. '/Users/gert-janvercauteren/conductor/workspaces/backpack/copenhagen/packages/bpk-component-price/index.js' implicitly has an 'any' type.
+packages/bpk-component-checkbox-card/src/BpkCheckboxCardSimple/BpkCheckboxCardSimple.tsx(156,32): error TS2322: Type '{ children: (false | "" | 0 | Element | null | undefined)[]; orientation: string; align: string; gap: string; }' is not assignable to type 'IntrinsicAttributes & BpkCheckboxCardContentProps'.
+  Property 'orientation' does not exist on type 'IntrinsicAttributes & BpkCheckboxCardContentProps'.
+packages/bpk-component-checkbox-card/src/BpkCheckboxCardSimple/BpkCheckboxCardSimple.tsx(157,19): error TS2741: Property 'icon' is missing in type '{ children: ReactElement<any, string | JSXElementConstructor<any>>; }' but required in type 'BpkCheckboxCardIconProps'.
+packages/bpk-component-checkbox-card/src/BpkCheckboxCardSimple/BpkCheckboxCardSimple.tsx(167,20): error TS2741: Property 'price' is missing in type '{ children: string | number | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal; }' but required in type 'BpkCheckboxCardPriceProps'.
+packages/bpk-component-checkbox-card/src/BpkCheckboxCardSimple/BpkCheckboxCardSimple.tsx(169,24): error TS2339: Property 'Indicator' does not exist on type '(({ children, checked: controlledChecked, defaultChecked, onCheckedChange, disabled, required, name, value, variant, radius, width, height, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, }: BpkCheckboxCardRootProps) => Element) & { Root: ({ children, checked: control...'.


This PR adds typecheck.txt containing local tsc output/errors. This looks like a build artifact rather than a source file, and committing it risks masking the real expectation that the repo should typecheck cleanly. Please remove this file from the PR (and ensure typecheck output is handled by CI rather than checked in).

skyscanner-backpack-bot · 2026-03-04T08:30:42Z

Visit https://backpack.github.io/storybook-prs/4256 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-04T08:32:25Z

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against f97f5f7

skyscanner-backpack-bot · 2026-03-04T09:54:32Z

Visit https://backpack.github.io/storybook-prs/4256 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-12T10:34:16Z

Visit https://backpack.github.io/storybook-prs/4256 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-12T11:05:55Z

Visit https://backpack.github.io/storybook-prs/4256 to see this build running in a browser.

Gert-Jan Vercauteren (gert-janvercauteren)

The indicator is no longer in the center of the circle.

The Checkbox card lost the blue focus indicator when using keyboard navigation

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-03-13T02:14:53Z

kerrie-wu can we also find a way to make sure our demo's retain colour contrast when the checkbox card is active?

White icon and adjusting of the text. It's fine if a consumer has to update text colors when selection changes, just want to make sure they are able to understand the state of the checkbox and make changes accordingly

IrinaWei · 2026-03-13T06:52:27Z

packages/bpk-component-checkbox-card/src/CheckboxCardContext.tsx

+  if (!context) {
+    throw new Error(
+      'CheckboxCard compound components must be used within BpkCheckboxCard.Root. ' +
+        'Make sure you have wrapped your components in <BpkCheckboxCard.Root>.'


Hey I wonder how this hook is used. It's quite practical but I tried to remove BpkCheckboxCard.Root in examples, there's no error.

Hey IrinaWei good catch! You're right that removing BpkCheckboxCard.Root from the existing examples doesn't throw — because none of the built-in subcomponents actually call useCheckboxCardContext internally. The hook is exported as a public API for consumers who want to build custom subcomponents that need to read variant or radius from context. The guard only fires when someone calls the hook directly outside of a Root.
I've added a Storybook story (WithContextOutsideRoot) that demonstrates this — a custom VariantBadge component calls useCheckboxCardContext(), and when rendered outside BpkCheckboxCard.Root, an ErrorBoundary catches and displays the error message.2b57552

IrinaWei · 2026-03-13T07:42:25Z

The indicator is no longer in the center of the circle.
The Checkbox card lost the blue focus indicator when using keyboard navigation

The indicator looks a little bit difference from carhire's could we use a svg here?

skyscanner-backpack-bot · 2026-03-16T09:04:33Z

Visit https://backpack.github.io/storybook-prs/4256 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-16T11:05:56Z

Visit https://backpack.github.io/storybook-prs/4256 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-17T07:49:04Z

Visit https://backpack.github.io/storybook-prs/4256 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-17T08:22:56Z

Visit https://backpack.github.io/storybook-prs/4256 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-17T09:09:29Z

Visit https://backpack.github.io/storybook-prs/4256 to see this build running in a browser.

packages/bpk-component-checkbox-card/src/BpkCheckboxCard.tsx

IrinaWei

LGTM

skyscanner-backpack-bot · 2026-03-18T10:07:07Z

Visit https://backpack.github.io/storybook-prs/4256 to see this build running in a browser.

tinazhang121 and others added 21 commits January 29, 2026 18:03

add BpkCheckboxCard

aba547c

change storybook

c391d10

chore: clean up auto-generated files

0582363

chore: remove more debug files

e18d3dc

chore: remove Claude status reports from spec folder

864fa96

Remove CLAUDE.md

9660b16

chore: ignore sample files in specs folder

b6fe266

chore: clean up left over examples

cdddbcc

Fix checkbox-card typecheck issues

101afdf

chore: fix linting issues

b2b14a4

chore: fix checkbox-card scss lint errors

92b1f1d

chore: remove debug file

fcc4341

chore: update tests

c8f1be7

chore: update sample files to pass danger checks

249d366

refactor: reorganize checkbox card compound subcomponents

88e3757

bpk-checkbox-card

f7d0c05

add sized and checkbox

2fae3a8

Merge branch 'main' into bpk-checkbox-card

de283c6

change indicator behavior

d4abbcb

modify subconponent

47adf9d

test case

a880d82

Copilot AI review requested due to automatic review settings March 4, 2026 08:23

Copilot started reviewing on behalf of kerrie-wu March 4, 2026 08:23 View session

kerrie-wu added the minor Non breaking change label Mar 4, 2026

Copilot AI reviewed Mar 4, 2026

View reviewed changes

update reademe and simple

3809b4e

udpate spec

d9f08ba

Merge branch 'main' into bpk-checkbox-card

0913793

Gert-Jan Vercauteren (gert-janvercauteren) reviewed Mar 13, 2026

View reviewed changes

IrinaWei reviewed Mar 13, 2026

View reviewed changes

kerrie-wu added 4 commits March 16, 2026 10:50

update example color

77aa13d

add car variant

7429e4c

fix conflict

3e1b17e

update car type to readme

6d21f8a

add context outside root

2b57552

kerrie-wu added 2 commits March 17, 2026 15:33

align car type with carhire

bed2b89

update car disable hover state

14c2f1f

update image

391d820

update car example button

a59a9b1

IrinaWei reviewed Mar 17, 2026

View reviewed changes

packages/bpk-component-checkbox-card/src/BpkCheckboxCard.tsx Show resolved Hide resolved

IrinaWei previously approved these changes Mar 18, 2026

View reviewed changes

modify import

1cebe0e

kerrie-wu dismissed IrinaWei’s stale review via 1cebe0e March 18, 2026 09:56

Merge branch 'main' into bpk-checkbox-card

f97f5f7

IrinaWei approved these changes Mar 18, 2026

View reviewed changes

kerrie-wu merged commit c0a717f into main Mar 19, 2026
15 checks passed

kerrie-wu deleted the bpk-checkbox-card branch March 19, 2026 02:06

	const results = await axe(container);
	const results = await axe(container, AXE_OPTIONS);

Conversation

kerrie-wu commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What's included

Compound component API (primary)

Simple API

Variants & customisation

Tests & documentation

Accessibility

Figma

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Mar 4, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

skyscanner-backpack-bot bot commented Mar 4, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 12, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 12, 2026

Uh oh!

Gert-Jan Vercauteren (gert-janvercauteren) left a comment

Choose a reason for hiding this comment

Uh oh!

Gert-Jan Vercauteren (gert-janvercauteren) commented Mar 13, 2026

Uh oh!

IrinaWei Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

kerrie-wu Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

IrinaWei commented Mar 13, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 16, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 16, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 17, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 17, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 17, 2026

Uh oh!

Uh oh!

IrinaWei left a comment

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Mar 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

kerrie-wu commented Mar 4, 2026 •

edited

Loading

skyscanner-backpack-bot bot commented Mar 4, 2026 •

edited

Loading

kerrie-wu Mar 16, 2026 •

edited

Loading