[PoC][Preview] Bpk layout PoC Preview

[Faye (Faye-Xiao)]

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 PR introduces a new layout system for Backpack as a proof-of-concept, built on top of Chakra UI v3. It provides type-safe, token-driven layout primitives with responsive capabilities using Backpack breakpoints.

Key changes:

• Adds new layout components (BpkBox, BpkFlex, BpkGrid, BpkStack) with strict typing and token-based APIs
• Introduces comprehensive type definitions and utility functions for responsive layouts
• Includes extensive test coverage and accessibility tests
• Adds Chakra UI v3 dependency for the underlying layout system

Reviewed changes

Copilot reviewed 35 out of 37 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/package.json	Adds Chakra UI React v3.30.0 dependency
packages/bpk-component-layout/src/types.ts	Defines comprehensive TypeScript types for layout components
packages/bpk-component-layout/src/tokens.ts	Defines spacing, breakpoint, and value type tokens
packages/bpk-component-layout/src/tokenUtils.ts	Implements token conversion and responsive prop processing
packages/bpk-component-layout/src/theme.ts	Maps Backpack tokens to Chakra UI theme configuration
packages/bpk-component-layout/src/commonProps.ts	Defines shared props interface for layout components
packages/bpk-component-layout/src/BpkProvider.tsx	Provides Chakra UI context with Backpack configuration
packages/bpk-component-layout/src/BpkBox.tsx	Implements base layout primitive component
packages/bpk-component-layout/src/BpkFlex.tsx	Implements flexbox layout component
packages/bpk-component-layout/src/BpkGrid.tsx	Implements CSS grid layout component
packages/bpk-component-layout/src/BpkStack.tsx	Implements stack layout components
packages/bpk-component-layout/README.md	Comprehensive documentation for the layout system
examples/bpk-component-layout/*	Storybook stories and examples demonstrating usage
.storybook/main.ts	Updates story pattern to support nested story files

Files not reviewed (1)

• packages/package-lock.json: Language not supported

---

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

	Fails
🚫	These new files do not include the license heading: examples/bpk-component-layout/flex.stories.tsx

	Warnings
⚠️	Package source files (e.g. packages/package-name/src/Component.js) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

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

Generated by 🚫 dangerJS against 7369958