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

@types/jest-axe.d.ts

@@ -0,0 +1,28 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare module 'jest-axe' {
+    import { AxeResults, RunOptions } from 'axe-core';
+
+    export function axe(
+      html: string | HTMLElement,
+      options?: RunOptions,
+    ): Promise<AxeResults>;
+
+    export function toHaveNoViolations(): void;
+  }

examples/bpk-component-page-indicator/examples.js → examples/bpk-component-page-indicator/examples.tsx

@@ -32,7 +32,8 @@ const image =
   'https://content.skyscnr.com/m/50d9dff3186775ad/original/Condor-Homepage-Hero-Option-3.png';
 const imageWidth = 400;
 const imageHeight = 90;
-const PageIndicatorContainer = (props) => {
+type Variant = typeof VARIANT[keyof typeof VARIANT];
+const PageIndicatorContainer = (props: { totalIndicators: number; showNav?: boolean; variant?: Variant; className?: string}) => {
   const [currentIndex, setCurrentIndex] = useState(0);
 
   return (

examples/bpk-component-page-indicator/stories.js → examples/bpk-component-page-indicator/stories.tsx

@@ -36,7 +36,13 @@ export const ThreePages = ThreePagesExample;
 export const OverImage = OverImageExample;
 export const WithNav = WithNavExample;
 export const VisualTest = VisualTestExample;
-export const VisualTestWithZoom = VisualTest.bind({});
-VisualTestWithZoom.args = {
-  zoomEnabled: true
-};
+// export const VisualTestWithZoom = VisualTest.bind({});
+// VisualTestWithZoom.args = {
+//   zoomEnabled: true
+// };
+export const VisualTestWithZoom = {
+  render: VisualTest,
+  args: {
+    zoomEnabled: true,
+  }
+};

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

@@ -18,7 +18,6 @@
 
 import { useRef, useState } from 'react';
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkPageIndicator, { VARIANT } from '../../bpk-component-page-indicator';
 import { cssModules } from '../../bpk-react-utils';
 

packages/bpk-component-page-indicator/index.js → packages/bpk-component-page-indicator/index.ts

@@ -18,11 +18,13 @@
 /* @flow strict */
 
 import BpkPageIndicator, {
-  type Props as BpkPageIndicatorProps,
   VARIANT,
 } from './src/BpkPageIndicator';
 import { DIRECTIONS } from './src/NavButton';
 
+import type {
+  Props as BpkPageIndicatorProps} from './src/BpkPageIndicator';
+
 export type { BpkPageIndicatorProps };
 export { DIRECTIONS, VARIANT };
 export default BpkPageIndicator;

packages/bpk-component-page-indicator/src/BpkPageIndicator-test.js → packages/bpk-component-page-indicator/src/BpkPageIndicator-test.tsx

@@ -22,9 +22,18 @@ import '@testing-library/jest-dom';
 
 import BpkPageIndicator from './BpkPageIndicator';
 
-let props;
-
 describe('BpkPageIndicator', () => {
+  let props: {
+    currentIndex: number;
+    totalIndicators: number;
+    indicatorLabel?: string;
+    prevNavLabel?: string;
+    nextNavLabel?: string;
+    onClick?: jest.Mock;
+    className?: string;
+    showNav?: boolean;
+  };
+
   beforeEach(() => {
     props = {
       currentIndex: 0,

packages/bpk-component-page-indicator/src/BpkPageIndicator.js → packages/bpk-component-page-indicator/src/BpkPageIndicator.tsx

@@ -17,8 +17,6 @@
  */
 /* @flow strict */
 
-import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import NavButton, { DIRECTIONS } from './NavButton';
@@ -33,30 +31,37 @@ const START_SCROLL_INDEX = Math.floor(DISPLAYED_TOTAL / 2);
 export const VARIANT = {
   default: 'default',
   overImage: 'overImage',
-};
+} as const;
 
-export type Props = {
-  className: ?string,
-  showNav: ?boolean,
+type Variant = typeof VARIANT[keyof typeof VARIANT];
+type Direction = typeof DIRECTIONS[keyof typeof DIRECTIONS];
+
+export interface Props {
+  indicatorLabel?: string,
+  prevNavLabel?: string,
+  nextNavLabel?: string,
   currentIndex: number,
   totalIndicators: number,
-  onClick: ?() => void,
-  indicatorLabel: string,
-  prevNavLabel: string,
-  nextNavLabel: string,
-  variant: ?$Keys<typeof VARIANT>,
-};
+  variant?: Variant,
+  onClick?: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    newIndex: number,
+    direction: Direction,
+  ) => void,
+  className?: string,
+  showNav?: boolean,
+}
 
-const BpkPageIndicator = ({
-  className,
+const BpkPageIndicator: React.FC<Props> = ({
+  className = undefined,
   currentIndex,
   indicatorLabel,
   nextNavLabel,
-  onClick,
+  onClick = () => {},
   prevNavLabel,
-  showNav,
+  showNav = false,
   totalIndicators,
-  variant,
+  variant = VARIANT.default,
 }: Props) => {
   /**
    * This validation is used to avoid an a11y issue when onClick isn't available.
@@ -93,14 +98,14 @@ const BpkPageIndicator = ({
             style={
               currentIndex > START_SCROLL_INDEX
                 ? {
-                  '--scroll-index':
-                    totalIndicators > DISPLAYED_TOTAL
-                      ? Math.min(
-                        currentIndex - START_SCROLL_INDEX,
-                        totalIndicators - DISPLAYED_TOTAL,
-                      )
-                      : 0,
-                }
+                    '--scroll-index': 
+                      totalIndicators > DISPLAYED_TOTAL
+                        ? Math.min(
+                          currentIndex - START_SCROLL_INDEX,
+                          totalIndicators - DISPLAYED_TOTAL,
+                        )
+                        : 0,
+                  } as React.CSSProperties
                 : undefined
             }
           >
@@ -149,23 +154,4 @@ const BpkPageIndicator = ({
   )
 };
 
-BpkPageIndicator.propTypes = {
-  indicatorLabel: PropTypes.string,
-  prevNavLabel: PropTypes.string,
-  nextNavLabel: PropTypes.string,
-  currentIndex: PropTypes.number.isRequired,
-  totalIndicators: PropTypes.number.isRequired,
-  variant: PropTypes.oneOf(Object.keys(VARIANT)),
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  showNav: PropTypes.bool,
-};
-
-BpkPageIndicator.defaultProps = {
-  onClick: null,
-  className: null,
-  showNav: false,
-  variant: VARIANT.default,
-};
-
 export default BpkPageIndicator;

packages/bpk-component-page-indicator/src/NavButton.js → packages/bpk-component-page-indicator/src/NavButton.tsx

@@ -17,8 +17,6 @@
  */
 /* @flow strict */
 
-import PropTypes from 'prop-types';
-
 import {BUTTON_TYPES, BpkButtonV2} from '../../bpk-component-button';
 import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
 import LeftArrowIcon from '../../bpk-component-icon/lg/chevron-left';
@@ -28,24 +26,34 @@ export const DIRECTIONS = {
   PREV: 'PREV',
   INDICATORS: 'INDICATORS',
   NEXT: 'NEXT',
-};
+} as const;
 
-type Props = {
-  direction: $Keys<typeof DIRECTIONS>,
-  disabled?: boolean,
+type Direction = typeof DIRECTIONS[keyof typeof DIRECTIONS];
+
+interface Props {
+  ariaLabel: string | undefined,
   currentIndex: number,
-  onClick: ?() => void,
-  ariaLabel: string,
+  direction: Direction,
+  disabled?: boolean,
+  onClick?: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    newIndex: number,
+    direction: Direction,
+  ) => void,
 };
 
 const AlignedLeftArrowIcon = withButtonAlignment(withRtlSupport(LeftArrowIcon));
 const AlignedRightArrowIcon = withButtonAlignment(
   withRtlSupport(RightArrowIcon),
 );
 
-const NavButton = (props: Props) => {
-  const { ariaLabel, currentIndex, direction, disabled, onClick } = props;
-  return (
+const NavButton: React.FC<Props> = ({
+  ariaLabel,
+  currentIndex,
+  direction,
+  disabled = false,
+  onClick = () => {},
+}: Props) => (
     <BpkButtonV2
       iconOnly
       type={BUTTON_TYPES.link}
@@ -66,19 +74,5 @@ const NavButton = (props: Props) => {
       )}
     </BpkButtonV2>
   );
-};
-
-NavButton.propTypes = {
-  direction: PropTypes.oneOf(Object.keys(DIRECTIONS)).isRequired,
-  disabled: PropTypes.bool,
-  ariaLabel: PropTypes.string.isRequired,
-  currentIndex: PropTypes.number.isRequired,
-  onClick: PropTypes.func,
-};
-
-NavButton.defaultProps = {
-  disabled: false,
-  onClick: null,
-};
 
 export default NavButton;

tsconfig.json

@@ -6,6 +6,7 @@
       "dom.iterable",
       "esnext"
     ],
+    "typeRoots": ["./node_modules/@types", "./types"],
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,