@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

package/bpk-component-page-indicator/src/BpkPageIndicator.js

@@ -14,38 +14,19 @@
  * 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.
- */
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import NavButton, { DIRECTIONS } from './NavButton';
-import STYLES from './BpkPageIndicator.module.scss';
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import NavButton, { DIRECTIONS } from "./NavButton";
+import STYLES from "./BpkPageIndicator.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
 const DISPLAYED_TOTAL = 5;
 const START_SCROLL_INDEX = Math.floor(DISPLAYED_TOTAL / 2);
-
 export const VARIANT = {
   default: 'default',
-  overImage: 'overImage',
+  overImage: 'overImage'
 };
-
-export type Props = {
-  className: ?string,
-  showNav: ?boolean,
-  currentIndex: number,
-  totalIndicators: number,
-  onClick: ?() => void,
-  indicatorLabel: string,
-  prevNavLabel: string,
-  nextNavLabel: string,
-  variant: ?$Keys<typeof VARIANT>,
-};
-
 const BpkPageIndicator = ({
   className,
   currentIndex,
@@ -55,75 +36,47 @@ const BpkPageIndicator = ({
   prevNavLabel,
   showNav,
   totalIndicators,
-  variant,
-}: Props) => (
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  <div className={className}>
-    <div
-      className={getClassName(
-        'bpk-page-indicator',
-        showNav && 'bpk-page-indicator__showNav',
-      )}
-    >
-      {showNav && (
-        <NavButton
-          currentIndex={currentIndex}
-          onClick={onClick}
-          disabled={currentIndex === 0}
-          direction={DIRECTIONS.PREV}
-          ariaLabel={prevNavLabel}
-        />
-      )}
-      <div className={getClassName('bpk-page-indicator__container')}>
-        <div
-          className={getClassName('bpk-page-indicator__indicators-container')}
-          style={
-            currentIndex > START_SCROLL_INDEX
-              ? {
-                  '--scroll-index':
-                    totalIndicators > DISPLAYED_TOTAL
-                      ? Math.min(
-                          currentIndex - START_SCROLL_INDEX,
-                          totalIndicators - DISPLAYED_TOTAL,
-                        )
-                      : 0,
-                }
-              : undefined
-          }
-        >
-          {[...Array(totalIndicators)].map((val, index) => (
-            <button
-              type="button"
-              onClick={(e) => {
-                onClick(e, index, DIRECTIONS.INDICATORS);
-              }}
-              className={getClassName(
-                'bpk-page-indicator__indicator',
-                `bpk-page-indicator__indicator--${variant}`,
-                index === currentIndex &&
-                  `bpk-page-indicator__indicator--active-${variant}`,
-              )}
-              aria-label={`${indicatorLabel} ${index + 1}`}
-              aria-current={currentIndex === index ? 'true' : 'false'}
-              // eslint-disable-next-line react/no-array-index-key
-              key={`indicator-${index}`}
-            />
-          ))}
-        </div>
-      </div>
-      {showNav && (
-        <NavButton
-          currentIndex={currentIndex}
-          onClick={onClick}
-          disabled={currentIndex === totalIndicators - 1}
-          ariaLabel={nextNavLabel}
-          direction={DIRECTIONS.NEXT}
-        />
-      )}
-    </div>
-  </div>
-);
-
+  variant
+}) =>
+/*#__PURE__*/
+// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+_jsx("div", {
+  className: className,
+  children: /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-page-indicator', showNav && 'bpk-page-indicator__showNav'),
+    children: [showNav && /*#__PURE__*/_jsx(NavButton, {
+      currentIndex: currentIndex,
+      onClick: onClick,
+      disabled: currentIndex === 0,
+      direction: DIRECTIONS.PREV,
+      ariaLabel: prevNavLabel
+    }), /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-page-indicator__container'),
+      children: /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-page-indicator__indicators-container'),
+        style: currentIndex > START_SCROLL_INDEX ? {
+          '--scroll-index': totalIndicators > DISPLAYED_TOTAL ? Math.min(currentIndex - START_SCROLL_INDEX, totalIndicators - DISPLAYED_TOTAL) : 0
+        } : undefined,
+        children: [...Array(totalIndicators)].map((val, index) => /*#__PURE__*/_jsx("button", {
+          type: "button",
+          onClick: e => {
+            onClick(e, index, DIRECTIONS.INDICATORS);
+          },
+          className: getClassName('bpk-page-indicator__indicator', `bpk-page-indicator__indicator--${variant}`, index === currentIndex && `bpk-page-indicator__indicator--active-${variant}`),
+          "aria-label": `${indicatorLabel} ${index + 1}`,
+          "aria-current": currentIndex === index ? 'true' : 'false'
+          // eslint-disable-next-line react/no-array-index-key
+        }, `indicator-${index}`))
+      })
+    }), showNav && /*#__PURE__*/_jsx(NavButton, {
+      currentIndex: currentIndex,
+      onClick: onClick,
+      disabled: currentIndex === totalIndicators - 1,
+      ariaLabel: nextNavLabel,
+      direction: DIRECTIONS.NEXT
+    })]
+  })
+});
 BpkPageIndicator.propTypes = {
   indicatorLabel: PropTypes.string.isRequired,
   prevNavLabel: PropTypes.string.isRequired,
@@ -133,14 +86,12 @@ BpkPageIndicator.propTypes = {
   variant: PropTypes.oneOf(Object.keys(VARIANT)),
   onClick: PropTypes.func,
   className: PropTypes.string,
-  showNav: PropTypes.bool,
+  showNav: PropTypes.bool
 };
-
 BpkPageIndicator.defaultProps = {
   onClick: null,
   className: null,
   showNav: false,
-  variant: VARIANT.default,
+  variant: VARIANT.default
 };
-
-export default BpkPageIndicator;
+export default BpkPageIndicator;

package/bpk-component-page-indicator/src/NavButton.js

@@ -14,71 +14,51 @@
  * 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.
- */
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-
-import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
-import BpkButton from '../../bpk-component-button';
-import LeftArrowIcon from '../../bpk-component-icon/lg/chevron-left';
-import RightArrowIcon from '../../bpk-component-icon/lg/chevron-right';
-
+ */import PropTypes from 'prop-types';
+import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
+import BpkButton from "../../bpk-component-button";
+import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
+import RightArrowIcon from "../../bpk-component-icon/lg/chevron-right";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const DIRECTIONS = {
   PREV: 'PREV',
   INDICATORS: 'INDICATORS',
-  NEXT: 'NEXT',
+  NEXT: 'NEXT'
 };
-
-type Props = {
-  direction: $Keys<typeof DIRECTIONS>,
-  disabled?: boolean,
-  currentIndex: number,
-  onClick: ?() => void,
-  ariaLabel: string,
-};
-
 const AlignedLeftArrowIcon = withButtonAlignment(withRtlSupport(LeftArrowIcon));
-const AlignedRightArrowIcon = withButtonAlignment(
-  withRtlSupport(RightArrowIcon),
-);
-
-const NavButton = (props: Props) => {
-  const { ariaLabel, currentIndex, direction, disabled, onClick } = props;
-  return (
-    <BpkButton
-      iconOnly
-      link
-      onClick={(e) => {
-        if (direction === DIRECTIONS.PREV) {
-          onClick(e, currentIndex - 1, direction);
-        } else {
-          onClick(e, currentIndex + 1, direction);
-        }
-      }}
-      aria-label={ariaLabel}
-      disabled={disabled}
-    >
-      {direction === DIRECTIONS.PREV ? (
-        <AlignedLeftArrowIcon />
-      ) : (
-        <AlignedRightArrowIcon />
-      )}
-    </BpkButton>
-  );
+const AlignedRightArrowIcon = withButtonAlignment(withRtlSupport(RightArrowIcon));
+const NavButton = props => {
+  const {
+    ariaLabel,
+    currentIndex,
+    direction,
+    disabled,
+    onClick
+  } = props;
+  return /*#__PURE__*/_jsx(BpkButton, {
+    iconOnly: true,
+    link: true,
+    onClick: e => {
+      if (direction === DIRECTIONS.PREV) {
+        onClick(e, currentIndex - 1, direction);
+      } else {
+        onClick(e, currentIndex + 1, direction);
+      }
+    },
+    "aria-label": ariaLabel,
+    disabled: disabled,
+    children: direction === DIRECTIONS.PREV ? /*#__PURE__*/_jsx(AlignedLeftArrowIcon, {}) : /*#__PURE__*/_jsx(AlignedRightArrowIcon, {})
+  });
 };
-
 NavButton.propTypes = {
   direction: PropTypes.oneOf(Object.keys(DIRECTIONS)).isRequired,
   disabled: PropTypes.bool,
   ariaLabel: PropTypes.string.isRequired,
   currentIndex: PropTypes.number.isRequired,
-  onClick: PropTypes.func,
+  onClick: PropTypes.func
 };
-
 NavButton.defaultProps = {
   disabled: false,
-  onClick: null,
+  onClick: null
 };
-
-export default NavButton;
+export default NavButton;

package/bpk-component-pagination/index.js

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-import BpkPagination from './src/BpkPagination';
-import themeAttributes from './src/themeAttributes';
-
+import BpkPagination from "./src/BpkPagination";
+import themeAttributes from "./src/themeAttributes";
 export default BpkPagination;
-export { themeAttributes };
+export { themeAttributes };

package/bpk-component-pagination/src/BpkPagination.js

@@ -17,22 +17,19 @@
  */
 
 import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import BpkPaginationList from './BpkPaginationList';
-import BpkPaginationNudger from './BpkPaginationNudger';
-import STYLES from './BpkPagination.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import BpkPaginationList from "./BpkPaginationList";
+import BpkPaginationNudger from "./BpkPaginationNudger";
+import STYLES from "./BpkPagination.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-const handlePageChange = (onPageChange, pageCount) => (nextPageIndex) => {
+const handlePageChange = (onPageChange, pageCount) => nextPageIndex => {
   if (onPageChange && nextPageIndex < pageCount && nextPageIndex >= 0) {
     onPageChange(nextPageIndex);
   }
 };
-
-const BpkPagination = (props) => {
+const BpkPagination = props => {
   const classNames = [getClassName('bpk-pagination')];
   const {
     className,
@@ -46,40 +43,34 @@ const BpkPagination = (props) => {
     visibleRange,
     ...rest
   } = props;
-
   if (className) {
     classNames.push(getClassName(className));
   }
-
   const pageChanged = handlePageChange(onPageChange, pageCount);
-
   const hasPreviousPage = selectedPageIndex !== 0;
   const hasNextPage = selectedPageIndex !== pageCount - 1;
-
-  return (
-    <nav className={classNames.join('')} aria-label={paginationLabel} {...rest}>
-      <BpkPaginationNudger
-        label={previousLabel}
-        onNudge={() => pageChanged(selectedPageIndex - 1)}
-        disabled={!hasPreviousPage}
-      />
-      <BpkPaginationList
-        selectedPageIndex={selectedPageIndex}
-        pageCount={pageCount}
-        onPageChange={pageChanged}
-        visibleRange={visibleRange}
-        pageLabel={pageLabel}
-      />
-      <BpkPaginationNudger
-        label={nextLabel}
-        onNudge={() => pageChanged(selectedPageIndex + 1)}
-        forward
-        disabled={!hasNextPage}
-      />
-    </nav>
-  );
+  return /*#__PURE__*/_jsxs("nav", {
+    className: classNames.join(''),
+    "aria-label": paginationLabel,
+    ...rest,
+    children: [/*#__PURE__*/_jsx(BpkPaginationNudger, {
+      label: previousLabel,
+      onNudge: () => pageChanged(selectedPageIndex - 1),
+      disabled: !hasPreviousPage
+    }), /*#__PURE__*/_jsx(BpkPaginationList, {
+      selectedPageIndex: selectedPageIndex,
+      pageCount: pageCount,
+      onPageChange: pageChanged,
+      visibleRange: visibleRange,
+      pageLabel: pageLabel
+    }), /*#__PURE__*/_jsx(BpkPaginationNudger, {
+      label: nextLabel,
+      onNudge: () => pageChanged(selectedPageIndex + 1),
+      forward: true,
+      disabled: !hasNextPage
+    })]
+  });
 };
-
 BpkPagination.propTypes = {
   selectedPageIndex: PropTypes.number.isRequired,
   onPageChange: PropTypes.func,
@@ -89,13 +80,11 @@ BpkPagination.propTypes = {
   paginationLabel: PropTypes.string.isRequired,
   pageLabel: PropTypes.func.isRequired,
   visibleRange: PropTypes.number,
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-
 BpkPagination.defaultProps = {
   onPageChange: null,
   visibleRange: 3,
-  className: null,
+  className: null
 };
-
-export default BpkPagination;
+export default BpkPagination;

package/bpk-component-pagination/src/BpkPaginationBreak.js

@@ -17,18 +17,19 @@
  */
 
 import PropTypes from 'prop-types';
-
-const BpkPaginationBreak = (props) => {
-  const { breakLabel } = props;
-  return <div>{breakLabel}</div>;
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkPaginationBreak = props => {
+  const {
+    breakLabel
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    children: breakLabel
+  });
 };
-
 BpkPaginationBreak.propTypes = {
-  breakLabel: PropTypes.string,
+  breakLabel: PropTypes.string
 };
-
 BpkPaginationBreak.defaultProps = {
-  breakLabel: '...',
+  breakLabel: '...'
 };
-
-export default BpkPaginationBreak;
+export default BpkPaginationBreak;

package/bpk-component-pagination/src/BpkPaginationList.js

@@ -17,84 +17,60 @@
  */
 
 import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import BpkPaginationPage from './BpkPaginationPage';
-import BpkPaginationBreak from './BpkPaginationBreak';
-import STYLES from './BpkPaginationList.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import BpkPaginationPage from "./BpkPaginationPage";
+import BpkPaginationBreak from "./BpkPaginationBreak";
+import STYLES from "./BpkPaginationList.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-const BpkPaginationList = (props) => {
+const BpkPaginationList = props => {
   const {
     onPageChange,
     pageCount,
     pageLabel,
     selectedPageIndex,
-    visibleRange,
+    visibleRange
   } = props;
-
   const shoulderRange = Math.ceil(visibleRange / 2);
   const isFirstPageSelected = selectedPageIndex === 0;
   const isLastPageSelected = selectedPageIndex === pageCount - 1;
-  const displayRange =
-    isFirstPageSelected || isLastPageSelected
-      ? shoulderRange + 1
-      : shoulderRange;
-
-  const children = new Array(pageCount)
-    .fill(undefined)
-    .map((_, i) => {
-      const isFirstPage = i === 0;
-      const isLastPage = i === pageCount - 1;
-      const isFirstPageInRange =
-        i === selectedPageIndex - displayRange && !isFirstPage;
-      const isLastPageInRange =
-        i === selectedPageIndex + displayRange && !isLastPage;
-      const isPageOutOfRange =
-        i < selectedPageIndex - displayRange ||
-        i > selectedPageIndex + displayRange;
-
-      let pageView = null;
-      if (isFirstPageInRange || isLastPageInRange) {
-        pageView = <BpkPaginationBreak />;
-      } else if (!isPageOutOfRange || isFirstPage || isLastPage) {
-        pageView = (
-          <BpkPaginationPage
-            page={i + 1}
-            onSelect={() => onPageChange(i)}
-            isSelected={selectedPageIndex === i}
-            pageLabel={pageLabel}
-          />
-        );
-      }
-
-      if (pageView !== null) {
-        return (
-          <li
-            key={i} // eslint-disable-line react/no-array-index-key
-            className={getClassName('bpk-pagination-page-list__item')}
-          >
-            {pageView}
-          </li>
-        );
-      }
-      return null;
-    })
-    .filter((page) => !!page);
-
-  return (
-    <ul className={getClassName('bpk-pagination-page-list')}>{children}</ul>
-  );
+  const displayRange = isFirstPageSelected || isLastPageSelected ? shoulderRange + 1 : shoulderRange;
+  const children = new Array(pageCount).fill(undefined).map((_, i) => {
+    const isFirstPage = i === 0;
+    const isLastPage = i === pageCount - 1;
+    const isFirstPageInRange = i === selectedPageIndex - displayRange && !isFirstPage;
+    const isLastPageInRange = i === selectedPageIndex + displayRange && !isLastPage;
+    const isPageOutOfRange = i < selectedPageIndex - displayRange || i > selectedPageIndex + displayRange;
+    let pageView = null;
+    if (isFirstPageInRange || isLastPageInRange) {
+      pageView = /*#__PURE__*/_jsx(BpkPaginationBreak, {});
+    } else if (!isPageOutOfRange || isFirstPage || isLastPage) {
+      pageView = /*#__PURE__*/_jsx(BpkPaginationPage, {
+        page: i + 1,
+        onSelect: () => onPageChange(i),
+        isSelected: selectedPageIndex === i,
+        pageLabel: pageLabel
+      });
+    }
+    if (pageView !== null) {
+      return /*#__PURE__*/_jsx("li", {
+        // eslint-disable-line react/no-array-index-key
+        className: getClassName('bpk-pagination-page-list__item'),
+        children: pageView
+      }, i);
+    }
+    return null;
+  }).filter(page => !!page);
+  return /*#__PURE__*/_jsx("ul", {
+    className: getClassName('bpk-pagination-page-list'),
+    children: children
+  });
 };
-
 BpkPaginationList.propTypes = {
   selectedPageIndex: PropTypes.number.isRequired,
   pageCount: PropTypes.number.isRequired,
   visibleRange: PropTypes.number.isRequired,
   onPageChange: PropTypes.func.isRequired,
-  pageLabel: PropTypes.func.isRequired,
+  pageLabel: PropTypes.func.isRequired
 };
-
-export default BpkPaginationList;
+export default BpkPaginationList;

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -17,58 +17,48 @@
  */
 
 import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkButton from '../../bpk-component-button';
-import { withRtlSupport } from '../../bpk-component-icon';
-import ArrowLeftIcon from '../../bpk-component-icon/sm/arrow-left';
-import ArrowRightIcon from '../../bpk-component-icon/sm/arrow-right';
-
-import STYLES from './BpkPaginationNudger.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import BpkButton from "../../bpk-component-button";
+import { withRtlSupport } from "../../bpk-component-icon";
+import ArrowLeftIcon from "../../bpk-component-icon/sm/arrow-left";
+import ArrowRightIcon from "../../bpk-component-icon/sm/arrow-right";
+import STYLES from "./BpkPaginationNudger.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const AlignedArrowLeftIcon = withRtlSupport(ArrowLeftIcon);
 const AlignedArrowRightIcon = withRtlSupport(ArrowRightIcon);
-
-const nudgerIcon = (forward) =>
-  forward ? (
-    <AlignedArrowRightIcon
-      className={getClassName('bpk-pagination-nudger__icon')}
-    />
-  ) : (
-    <AlignedArrowLeftIcon
-      className={getClassName('bpk-pagination-nudger__icon')}
-    />
-  );
-
-const BpkPaginationNudger = (props) => {
-  const { disabled, forward, label, onNudge } = props;
-
-  return (
-    <BpkButton
-      link
-      onClick={onNudge}
-      disabled={disabled}
-      className={getClassName('bpk-pagination-nudger')}
-    >
-      {nudgerIcon(forward)}
-      <span className={getClassName('bpk-pagination-nudger__text--hidden')}>
-        {label}
-      </span>
-    </BpkButton>
-  );
+const nudgerIcon = forward => forward ? /*#__PURE__*/_jsx(AlignedArrowRightIcon, {
+  className: getClassName('bpk-pagination-nudger__icon')
+}) : /*#__PURE__*/_jsx(AlignedArrowLeftIcon, {
+  className: getClassName('bpk-pagination-nudger__icon')
+});
+const BpkPaginationNudger = props => {
+  const {
+    disabled,
+    forward,
+    label,
+    onNudge
+  } = props;
+  return /*#__PURE__*/_jsxs(BpkButton, {
+    link: true,
+    onClick: onNudge,
+    disabled: disabled,
+    className: getClassName('bpk-pagination-nudger'),
+    children: [nudgerIcon(forward), /*#__PURE__*/_jsx("span", {
+      className: getClassName('bpk-pagination-nudger__text--hidden'),
+      children: label
+    })]
+  });
 };
-
 BpkPaginationNudger.propTypes = {
   label: PropTypes.string.isRequired,
   onNudge: PropTypes.func.isRequired,
   forward: PropTypes.bool,
-  disabled: PropTypes.bool,
+  disabled: PropTypes.bool
 };
-
 BpkPaginationNudger.defaultProps = {
   forward: false,
-  disabled: false,
+  disabled: false
 };
-
-export default BpkPaginationNudger;
+export default BpkPaginationNudger;