[PANGOO-2945][BpkPageIndicator]Bpk component page indicator ts support

[senzg]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

	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?
⚠️	Package source files (e.g. packages/package-name/src/Component.tsx) were updated, but type files weren't. Have you checked that no types have changed?

Browser support

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

Generated by 🚫 dangerJS against 6ed2b75

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[Copilot]

Pull Request Overview

This PR adds TypeScript support for the BpkPageIndicator component and updates related files to remove Flow types and PropTypes while improving type safety.

• Migrated components from Flow to TypeScript by replacing PropTypes and defaultProps with proper interfaces and default values.
• Updated related tests, examples, and the carousel integration to align with the new type definitions.

Reviewed Changes

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

Show a summary per file

File	Description
packages/bpk-component-page-indicator/src/NavButton.tsx	Updated type definitions and removed PropTypes to use TypeScript's type system.
packages/bpk-component-page-indicator/src/BpkPageIndicator.tsx	Replaced PropTypes and Flow types with TypeScript interfaces and default values.
packages/bpk-component-page-indicator/src/BpkPageIndicator-test.tsx	Improved test props typing for better type safety.
packages/bpk-component-page-indicator/index.ts	Adjusted type imports and exports for consistency.
packages/bpk-component-carousel/src/BpkCarousel.tsx	Removed the ts-expect-error suppression; ensure compatibility with updated types.
examples/bpk-component-page-indicator/stories.tsx	Updated Storybook stories using the CSF object notation.
examples/bpk-component-page-indicator/examples.tsx	Added explicit type annotations to example container component props.

Comments suppressed due to low confidence (1)

packages/bpk-component-carousel/src/BpkCarousel.tsx:20

• The removal of the ts-expect-error suppression comment implies that the type definitions for BpkPageIndicator should now be correct. Please verify that no TypeScript errors are introduced due to this change.

// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

[skyscanner-backpack-bot]

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

[GCpigsic]

we also need to remove the /* @flow strict */ in packages/bpk-component-page-indicator/src/accessibility-test.tsx

[GCpigsic]

I think it would be better if we reuse the type defined in packages/bpk-component-carousel/src/BpkCarousel.tsx

[GCpigsic]

As I remember in banana, we are not recommending to use type assertion, therefore, i would prefer

import type { CSSProperties } from 'react';
...
type CustomCSSProperties = CSSProperties & {
  '--scroll-index'?: number;
}
  const customStyle: CustomCSSProperties = {
    '--scroll-index':
      totalIndicators > DISPLAYED_TOTAL
        ? Math.min(
          currentIndex - START_SCROLL_INDEX,
          totalIndicators - DISPLAYED_TOTAL,
        )
        : 0,
  }

      <div
        className={getClassName('bpk-page-indicator__indicators-container')}
        style={
          currentIndex > START_SCROLL_INDEX
            ? customStyle
            : undefined
        }
      >
...

[GCpigsic]

I noticed the Percy failed here, I don't think the ts migration would cause the visual changes, could you help to check with it?

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[GCpigsic]

LGTM