[BpkLink] Migrate component to TypeScript

[Copilot]

Migrates BpkLink and BpkButtonLink components from JavaScript (Flow) to TypeScript.

Changes

• Component files: BpkLink.tsx, BpkButtonLink.tsx, themeAttributes.ts
• Test files: All test files converted to .tsx with typed refs
• Package index: index.ts with exported BpkLinkProps and BpkButtonLinkProps types
• Storybook: examples.tsx and stories.tsx
• Figma: Added required href prop to example
• Downstream fixes: Removed unused @ts-expect-error directives from components that import from bpk-component-link (bottom-sheet, breadcrumb, drawer, info-banner, modal, navigation-bar, popover, rtl-toggle, card-list examples)
• Type fixes:
  • Updated BpkNavigationBarButtonLink to use typeof BpkButtonLink for component props
  • Fixed BpkRtlToggle to use proper React MouseEvent type
  • Changed BpkLink Props to extend AnchorHTMLAttributes<HTMLAnchorElement> instead of using index signature [rest: string]: any for better Storybook documentation generator (react-docgen) compatibility
  • Changed BpkButtonLink Props to extend ButtonHTMLAttributes<HTMLButtonElement> instead of using index signature for consistency and better Storybook docgen
  • Updated className and rel types to match HTML attributes (removing null from union types)
• Accessibility: Ensured href prop remains required on BpkLink to match original Flow type and prevent accessibility regression (anchor without href is an accessibility issue)
• Bug fixes: Fixed BpkBreadcrumbItem and BpkInfoBannerInner to provide valid href values when using BpkLink

Usage

import BpkLink, { BpkButtonLink, type BpkLinkProps } from '@skyscanner/backpack-web/bpk-component-link';

<BpkLink href="/path" alternate>Link text</BpkLink>
<BpkButtonLink onClick={handleClick}>Button link</BpkButtonLink>

---

Remember to include the following changes:

• [x] 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
• [x] Tests
• [x] 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
• [x] 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

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Migrate BpkLink component to Typescript</issue_title> <issue_description>I want to migrate BpkLink component and all its tests and storybook examples to Typescript</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Skyscanner/backpack#4062

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.