[nojira]add IconLabel

[GC Zhu (gc-skyscanner)]

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 adds the BpkIconLabel component to Backpack's design system. The component displays an icon alongside text with optional inline links, supporting three typography variants (body, label1, footnote) and two color schemes (default, on-dark).

Changes:

• New BpkIconLabel compound component with Root, Icon, and Text subcomponents
• Complete test suite with 23 tests (15 unit, 8 accessibility) achieving 100% coverage
• Storybook integration with 15 stories demonstrating all variants and use cases

Reviewed changes

Copilot reviewed 23 out of 23 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
specs/001-bpk-icon-label/*.md	Specification, plan, research, API design, styling guide, integration guide, and task files for the new component
packages/bpk-component-icon-label/src/BpkIconLabel.tsx	Main component implementation using React Context and compound component pattern
packages/bpk-component-icon-label/src/BpkIconLabel.module.scss	Styles with modern Sass, design tokens, and RTL support
packages/bpk-component-icon-label/src/BpkIconLabel-test.tsx	Unit tests covering all variants and functionality
packages/bpk-component-icon-label/src/accessibility-test.tsx	Accessibility tests using jest-axe
packages/bpk-component-icon-label/src/themeAttributes.ts	Theme configuration for BpkThemeProvider integration
packages/bpk-component-icon-label/src/common-types.ts	TypeScript type definitions
examples/bpk-component-icon-label/stories.tsx	Storybook story configuration
examples/bpk-component-icon-label/examples.tsx	Example implementations for Storybook
packages/bpk-mixins/_typography.scss	Updated link mixins to support theming via CSS custom properties

---

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

[Copilot]

The type value 'label1' in the specification uses a different format than 'label-1' which appears in the styling guide and other files. This inconsistency should be resolved to use 'label1' consistently throughout.

[Copilot]

The import of 'background' from 'storybook/theming' appears to be unused in this file. This unused import should be removed to improve code clarity and maintainability.

Suggested change

import { background } from 'storybook/theming';

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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