[NOJIRA]add BpkCheckboxCard

[tinazhang121]

Remember to include the following changes:

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only
    • Zoom functionality (Deque University explanation):
      • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
      • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
    • Ability to navigate using a screen reader only
• Storybook examples created/updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

[Copilot]

Pull request overview

This pull request adds BpkCheckboxCard, a new selectable card component for the Backpack design system. The component provides a flexible, accessible checkbox card pattern with rich content support (icons, images, labels, descriptions, prices) and is designed for use across Hotels, Flights, and Car Hire verticals.

Changes:

• Implements BpkCheckboxCard component with compound component architecture (Root, Control, Content, Stack, Inline)
• Adds comprehensive specification, research, and implementation planning documents
• Includes extensive documentation files covering API design, styling guides, bug fixes, and Figma alignment
• Provides multiple example files demonstrating various usage patterns

Reviewed changes

Copilot reviewed 56 out of 57 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
specs/001-checkbox-card/*.md	Specification, research, planning, and implementation documentation files
specs/001-checkbox-card/examples/*.tsx	Example usage files for different component patterns
specs/001-checkbox-card/checklists/*.md	Requirements validation checklist
packages/bpk-component-checkbox-card/src/BpkCheckboxCard/*.tsx	Core component implementation files
packages/bpk-component-checkbox-card/src/BpkCheckboxCardSimple/*.tsx	Backward-compatible simple wrapper
packages/bpk-component-checkbox-card/*.ts	Package exports and theme configuration
examples/bpk-component-checkbox-card/*.tsx	Storybook examples and stories
*.md and *.html files	Supporting documentation and demo files

---

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

[Copilot]

Corrected spacing in function name 'setSelected With' to 'setSelectedWith'.

Suggested change

	onChange={(checked) => setSelected With(checked)}
	onChange={(checked) => setSelectedWith(checked)}

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

Browser support

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

Generated by 🚫 dangerJS against 88e3757

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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